SCALE — Build Lab
01

UI部品69 functions

69 items
@メンション入力
</>
120〜240分 React Component
11ステータス バッジカラー管理
</>
60〜120分 JavaScript Pattern
5段階レーティング(星)
</>
30〜60分 React Component
AIチャットインターフェイス
</>
240〜600分 React Component
Leaflet 地図
90〜180分 React Component
Pinterest風ギャラリー
</>
lib/pinterest-gallery.ts
240〜600分 TypeScript Library
Typing インジケータ
60〜120分 React Component
アクティブボード
</>
components/tasks/work-log/ActiveBoard.tsx
90〜240分 React Component
アコーディオン部品
</>
30〜90分 React Component
アップデート配信フィード
</>
180〜360分 React Component
アバター(イニシャル/画像)
</>
30〜60分 React Component
アプリヘッダー
</>
components/layout/Header.tsx
60〜180分 React Component
インライン並び替え(↑↓ボタン)
</>
30〜60分 JavaScript Pattern
インライン編集セル(EditableCell)
</>
components/finance/EditableCell.tsx
30〜90分 React Component
カスタム動画プレイヤー
240〜480分 React Component
カレンダー週次ビュー
</>
240〜600分 React Component
ガントチャート
360〜900分 React Component
カンバンボード
</>
240〜600分 React Component
ゲージメーター
60〜120分 React Component
コマンドパレット(⌘K)
</>
180〜360分 React Component
コメントスレッド
240〜480分 React Component
サブナビゲーション
</>
components/layout/SubNav.tsx
30〜90分 React Component
サンキーダイアグラム
240〜480分 React Component
スクロールで隠れる/現れるヘッダ
</>
30〜60分 React Hook
スケジュールモーダル
</>
components/tasks/ScheduleModal.tsx
90〜240分 React Component
ステータスバッジ
</>
components/tasks/StatusBadge.tsx
15〜30分 React Component
ステップウィザード
120〜240分 React Component
スワイプアクション
120〜240分 React Component
セクションサイドバー
</>
components/layout/SectionSidebar.tsx
60〜180分 React Component
ソート可能テーブルヘッダ
</>
30〜60分 React Hook
タスク詳細モーダル
</>
components/tasks/TaskDetailModal.tsx
120〜300分 React Component
タブ切替部品
</>
60〜120分 React Component
ツールチップ
</>
60〜120分 React Component
ツリーグリッド(階層テーブル)
240〜480分 React Component
ツリーマップ
180〜360分 React Component
データテーブル
</>
240〜600分 React Component
バッジカウンター
30〜60分 React Component
パンくずナビ
</>
15〜30分 React Component
ヒートマップ(曜日×時間)
</>
120〜240分 React Component
ピボットテーブル
360〜720分 React Component
ファイルアップロード + プレビュー
180〜360分 React Component
プルトゥリフレッシュ
60〜120分 React Component
プレースホルダーページ
</>
components/ui/PlaceholderPage.tsx
15〜30分 React Component
プログレスバー
</>
30〜60分 React Component
ページネーション部品
</>
60〜120分 React Component
マーカークラスタリング
60〜120分 React Component
メガメニュー
180〜360分 React Component
モバイル ボトムナビ
60〜120分 React Component
リアクション絵文字
90〜180分 React Component
リッチテキストエディタ
480〜1200分 React Component
リッチテキストエディタ
360〜720分 React Component
ルート表示
120〜240分 React Component
レーダーチャート
60〜120分 React Component
右クリック コンテキストメニュー
</>
60〜120分 React Component
左サイドバーナビ(SystemSidebar)
</>
components/layout/SystemSidebar.tsx
30〜90分 React Component
担当者ピッカー
</>
components/tasks/AssigneePicker.tsx
30〜90分 React Component
推定時間ピッカー
</>
components/tasks/EstimateMinutesPicker.tsx
30〜60分 React Component
散布図
60〜120分 React Component
新規タスクモーダル
</>
components/tasks/NewTaskModal.tsx
60〜180分 React Component
日付ピッカー(軽量)
</>
components/tasks/DatePicker.tsx
60〜120分 React Component
日付範囲ピッカー
</>
90〜180分 React Component
期日クイックピッカー
</>
components/tasks/DueDateQuickPicker.tsx
30〜60分 React Component
期限超過バッジ
</>
components/tasks/OverdueBadge.tsx
15〜30分 React Component
画像ライトボックス
</>
90〜180分 React Component
行追加/削除/リセットボタン
</>
components/finance/RowActions.tsx
15〜45分 React Components
通知ベル
120〜240分 React Component
進捗付きトースト
60〜120分 React Component
電子署名パッド
90〜180分 React Component
音声録音(ブラウザ完結)
</>
120〜240分 React Component
02

開発パターン87 functions

87 items
AI レスポンスのストリーミング
120〜240分 TypeScript Pattern
AIスクリーニング
</>
lib/recruit-ai-screening.ts
240〜600分 TypeScript Library
changelog ストア(巨大配列ベース)
</>
lib/changelog.ts
60〜180分 TypeScript Library
Claude API プロキシ + キャッシュ
</>
scale-crm:ai.js
120〜300分 JavaScript Pattern
Cloudflare KV キャッシュ
</>
60〜180分 TypeScript Pattern
Cloudflare Pages Functions CORS ヘルパ
</>
scale-crm:functions/_lib/cors.ts
30〜60分 Cloudflare Function
Cron トリガーパターン
</>
60〜180分 Cloudflare Worker
CSV インポートパーサー
</>
60〜120分 JavaScript Pattern
CSV エクスポートヘルパ
</>
30〜60分 JavaScript Pattern
D1 スキーマ設計(実例)
</>
scale-crm:schema.sql
30〜60分 SQL Schema
D1 ストレージ API パターン
</>
scale-crm:functions/api/data/[key].ts
90〜240分 Cloudflare Function
D1 データ一括取得 API
</>
scale-crm:functions/api/data/index.ts
60〜120分 Cloudflare Function
Debounce サーバ同期
</>
30〜60分 JavaScript Pattern
Function Calling(Tool Use)
240〜480分 TypeScript Pattern
localStorage ストアパターン
</>
60〜180分 TypeScript Pattern
Lucide アイコン使用パターン
</>
30〜60分 React Pattern
Markdown レンダリング
</>
60〜180分 React Pattern
Next.js App Router ダッシュボード雛形
</>
120〜360分 Next.js Pattern
PD/SD パターン(永続/セッション保存)
</>
60〜120分 JavaScript Pattern
PDFエクスポートパターン
</>
180〜480分 TypeScript Pattern
PJT推定ロジック
</>
lib/pjt-infer.ts
120〜300分 TypeScript Library
RAG(Retrieval-Augmented Generation)
360〜720分 TypeScript Pattern
Rechartsグラフパターン
</>
90〜240分 React Pattern
SalesNow CSV 自動取込
</>
240〜600分 JavaScript Pattern
Slack Bot 連携
</>
90〜240分 TypeScript Pattern
Slack チャンネル自動作成 + 招待
</>
90〜180分 TypeScript Pattern
Supabase RLS(Row Level Security)設計
</>
scale-crm:SUPABASE_RLS_MIGRATION.sql
90〜240分 SQL Migration
Supabase スナップショット移行
</>
scale-crm:SUPABASE_SNAPSHOTS_MIGRATION.sql
90〜180分 SQL Migration
Supabaseデータフェッチパターン
</>
120〜360分 TypeScript Pattern
Tailwind v4 CSS変数テーマ
</>
60〜180分 CSS Pattern
Undo(取り消し)パターン
</>
60〜180分 React Pattern
エラーバウンダリー
</>
30〜90分 React Pattern
エンプティステート
</>
30〜60分 React Pattern
カラム表示切替
60〜120分 React Pattern
カレンダーデータ管理
</>
lib/calendar-data.ts
120〜360分 TypeScript Library
キーボードショートカット管理
</>
60〜120分 React Hook
クライアントエラー記録 API
</>
scale-crm:functions/api/error.ts
30〜60分 Cloudflare Function
クリップボードコピーヘルパ
</>
15〜30分 JavaScript Pattern
サブナビゲーション設定
</>
lib/subnav-groups.ts
30〜90分 TypeScript Library
サブナビ設定(巨大)
</>
lib/subnav-groups.ts
60〜180分 TypeScript Library
システムレジストリパターン
</>
lib/systems.ts
60〜180分 TypeScript Library
システム管理ストア
</>
lib/system-mgmt-store.ts
60〜180分 TypeScript Library
スケジュールデータ管理
</>
lib/scheduling-data.ts
90〜240分 TypeScript Library
スナップショット API
</>
scale-crm:functions/api/snapshot.ts
120〜300分 Cloudflare Function
セキュリティデータ管理
</>
lib/security-data.ts
90〜240分 TypeScript Library
タスク API レイヤー
</>
lib/tasks-api.tsx
240〜600分 TypeScript Library
タスク推定アルゴリズム
</>
lib/task-estimate.ts
120〜360分 TypeScript Library
タスク自動登録
</>
lib/auto-register-task.ts
240〜600分 TypeScript Library
ツールライブラリパターン
</>
lib/tools-library.ts
60〜180分 TypeScript Library
トースト通知
</>
60〜180分 React Pattern
ドラッグ&ドロップ
</>
180〜480分 React Pattern
ドラッグ中オートスクロール
</>
lib/use-drag-autoscroll.ts
60〜180分 React Hook
パスワード管理パターン
</>
lib/passwords-data.ts
90〜240分 TypeScript Library
バリデーションヘルパ集
</>
30〜60分 TypeScript Pattern
フィーチャーフラグ
</>
90〜240分 TypeScript Pattern
フォーカストラップ(モーダル用)
</>
60〜120分 React Hook
フォーマットヘルパ集(金額・日付・電話)
</>
30〜60分 JavaScript Pattern
ペースト一括追加(改行区切り)
</>
30〜90分 JavaScript Pattern
ベクトル検索(Embedding)
240〜480分 TypeScript Pattern
ヘルスチェック API
</>
scale-crm:functions/api/health.ts
15〜30分 Cloudflare Function
マルチステップフォーム
</>
120〜360分 React Pattern
モーダル積層管理
</>
60〜180分 React Pattern
レスポンシブテーブル
</>
90〜240分 React Pattern
レポート通知システム
</>
lib/report-notify.ts
120〜360分 TypeScript Library
ローディングスケルトン
</>
30〜90分 React Pattern
一括操作パターン
</>
90〜240分 React Pattern
事業目標管理パターン
</>
lib/business-goals-data.ts
90〜240分 TypeScript Library
仮想スクロール(大量データ)
240〜480分 React Pattern
作業ログ計測
</>
lib/work-log.ts
120〜300分 TypeScript Library
動的フィールド配列(行追加)
60〜120分 React Pattern
変更履歴 API(監査ログ)
</>
scale-crm:functions/api/changes.ts
60〜180分 Cloudflare Function
外部サービス認証
</>
lib/external-auth.ts
240〜600分 TypeScript Library
契約データ管理パターン
</>
lib/contracts-data.ts
60〜180分 TypeScript Library
採用Slack通知パターン
</>
lib/recruit-slack.ts
90〜240分 TypeScript Library
採用データベース
</>
lib/recruit-database.ts
120〜360分 TypeScript Library
既読管理
60〜120分 TypeScript Pattern
条件分岐フォーム
90〜180分 React Pattern
検索 Debounce(300ms)
</>
15〜30分 JavaScript Pattern
検索・フィルタパターン
</>
120〜360分 React Pattern
楽観的更新パターン
</>
90〜240分 React Pattern
権限管理パターン
</>
lib/always-allowed-systems.ts
60〜180分 TypeScript Library
無限スクロール(IntersectionObserver)
</>
60〜120分 React Hook
確認ダイアログ
</>
30〜90分 React Pattern
自動保存パターン
</>
60〜180分 React Pattern
認証コンテキスト
</>
lib/auth-context.tsx
90〜240分 React Context
論理削除 + 期限切れ自動パージ
</>
30〜90分 JavaScript Pattern
音声→テキスト変換
120〜240分 TypeScript Pattern
03

ロジック2 functions

2 items
04

インフラ2 functions

2 items
05

認証1 functions

1 items