rapid-prototyper

ラピッドプロトタイパー

目的

動作するプロトタイプですばやく検証します。本格的な実装に着手する前にアイデアを試せる、完成した実行可能なコードを作成します。

1. メモリーから好みの技術スタックを呼び出します
2. 最小限でありながら完成したコードを生成します
3. すぐに実行できる状態にします
4. すばやく視覚的なフィードバックを得られるようにします
5. 検証済みのパターンを本番環境向けに保存します

ADHD のユーザー向け：すぐに達成感を得られます。何時間もかけず、数分で動作するプロトタイプを作れます。 アファンタジアのユーザー向け：抽象的な説明ではなく、具体的で視覚的な成果を得られます。 すべてのユーザー向け：投資する前に検証できます。すばやく失敗し、すばやく学べます。

起動のきっかけ

• ユーザーが「これをプロトタイプにして」「簡単なデモ」「概念実証」「MVP」と言う
• ユーザーが「構築できるか」「実現可能か」「どうすればよいか」と尋ねる
• ユーザーが「試す」「実験する」「アイデアをテストする」と言う
• 大規模な機能に着手する前に、まずプロトタイプを作ることを積極的に提案する

基本ワークフロー

1. 要件を把握する

重要な情報を抽出します。

{
  feature: "User authentication",
  purpose: "Validate JWT flow works",
  constraints: ["Must work offline", "No external dependencies"],
  success_criteria: ["Login form", "Token storage", "Protected route"]
}

2. 技術スタックを呼び出す

context-manager に問い合わせます。

search memories:
- Type: DECISION, PREFERENCE
- Tags: tech-stack, framework, library
- Project: current project

呼び出しの例：

Found preferences:
- Frontend: React + Vite
- Styling: Tailwind CSS
- State: Zustand
- Backend: Node.js + Express
- Database: PostgreSQL (but skip for prototype)

3. 最小限の実装を設計する

プロトタイプの範囲：

• ✅ 中核機能が動作する
• ✅ 視覚的なインターフェース（UI 機能の場合）
• ✅ 基本的な検証
• ✅ 正常系の動作
• ❌ エラー処理（最小限）
• ❌ エッジケース（速度優先で省略）
• ❌ スタイルの仕上げ（機能性のみ）
• ❌ 最適化（まずはプロトタイプ）

例：認証プロトタイプの範囲

✅ Include:
- Login form
- Token storage in localStorage
- Protected route example
- Basic validation

❌ Skip:
- Password hashing (use fake tokens)
- Refresh tokens
- Remember me
- Password reset
- Email verification

4. プロトタイプを生成する

構成：

prototype-{feature}-{timestamp}/
├── README.md              # How to run
├── package.json           # Dependencies
├── index.html             # Entry point
├── src/
│   ├── App.jsx           # Main component
│   ├── components/       # Feature components
│   └── utils/            # Helper functions
└── server.js             # If backend needed

例：認証プロトタイプ

package.json：

{
  "name": "auth-prototype",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.20.0",
    "zustand": "^4.4.7"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^4.2.1",
    "vite": "^5.0.8"
  }
}

src/App.jsx：

import { useState } from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { useAuthStore } from './store';

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const login = useAuthStore(state => state.login);

  const handleSubmit = (e) => {
    e.preventDefault();
    // Prototype: Accept any credentials
    if (email && password) {
      login({ email, token: 'fake-jwt-token' });
    }
  };

  return (
    <div style={{ maxWidth: 400, margin: '100px auto' }}>
      <h1>Login</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="Email"
          style={{ display: 'block', width: '100%', margin: '10px 0', padding: 8 }}
        />
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="Password"
          style={{ display: 'block', width: '100%', margin: '10px 0', padding: 8 }}
        />
        <button type="submit" style={{ padding: '10px 20px' }}>
          Login
        </button>
      </form>
    </div>
  );
}

function Dashboard() {
  const { user, logout } = useAuthStore();

  return (
    <div style={{ maxWidth: 800, margin: '50px auto' }}>
      <h1>Dashboard</h1>
      <p>Welcome, {user.email}!</p>
      <p>Token: {user.token}</p>
      <button onClick={logout} style={{ padding: '10px 20px' }}>
        Logout
      </button>
    </div>
  );
}

function ProtectedRoute({ children }) {
  const isAuthenticated = useAuthStore(state => state.isAuthenticated);
  return isAuthenticated ? children : <Navigate to="/login" />;
}

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<LoginForm />} />
        <Route
          path="/dashboard"
          element={
            <ProtectedRoute>
              <Dashboard />
            </ProtectedRoute>
          }
        />
        <Route path="/" element={<Navigate to="/dashboard" />} />
      </Routes>
    </BrowserRouter>
  );
}

src/store.js：

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

export const useAuthStore = create(
  persist(
    (set) => ({
      user: null,
      isAuthenticated: false,
      login: (user) => set({ user, isAuthenticated: true }),
      logout: () => set({ user: null, isAuthenticated: false }),
    }),
    {
      name: 'auth-storage',
    }
  )
);

README.md：

# Auth Prototype

Quick prototype to validate JWT authentication flow.

## Run

```bash
npm install
npm run dev

http://localhost:5173 を開きます

テスト

1. /login に移動します
2. 任意のメールアドレスとパスワードを入力します
3. Login をクリックします
4. /dashboard にリダイレクトされるはずです
5. ページを再読み込みします。ログイン状態が維持されるはずです
6. Logout をクリックします。/login に戻るはずです

注意事項

• 偽のトークンを使用します（実際の JWT 検証はありません）
• パスワードのハッシュ化はありません
• 最小限のスタイル設定です
• エラー処理はありません

検証後の次のステップ

1. 実際の JWT 署名と検証を実装します
2. bcrypt でパスワードのハッシュ化を追加します
3. 適切なエラー処理を追加します
4. リフレッシュトークンのフローを追加します
5. 検証とセキュリティ対策を追加します

### 5. Save to Artifacts

```bash
# Save complete prototype
# Linux/macOS: ~/.claude-artifacts/prototypes/auth-{timestamp}/
# Windows: %USERPROFILE%\.claude-artifacts\prototypes\auth-{timestamp}\
~/.claude-artifacts/prototypes/auth-{timestamp}/

6. ユーザーに提示する

✅ Auth prototype ready!

📁 Location (Linux/macOS): ~/.claude-artifacts/prototypes/auth-20251017/
📁 Location (Windows): %USERPROFILE%\.claude-artifacts\prototypes\auth-20251017\

🚀 To run:
cd ~/.claude-artifacts/prototypes/auth-20251017
# Windows: cd %USERPROFILE%\.claude-artifacts\prototypes\auth-20251017
npm install
npm run dev

🎯 Test flow:
1. Visit http://localhost:5173/login
2. Enter any email/password
3. Click Login → Redirects to Dashboard
4. Refresh → Stays logged in
5. Click Logout → Returns to Login

✅ Validates:
- JWT token flow works
- Protected routes work
- State persistence works
- React Router integration works

❌ Not included (yet):
- Real JWT validation
- Password hashing
- Error handling
- Production security

**Does this validate what you needed?**
- If yes: I'll build production version
- If no: What needs adjusting?

プロトタイプのテンプレート

単一ファイルの HTML アプリ

簡単な UI デモ向け：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Prototype</title>
  <script src="https://unpkg.com/vue@3"></script>
  <style>
    body { font-family: sans-serif; max-width: 800px; margin: 50px auto; }
  </style>
</head>
<body>
  <div id="app">
    <h1>{{ title }}</h1>
    <button @click="count++">Count: {{ count }}</button>
  </div>

  <script>
    const { createApp } = Vue;
    createApp({
      data() {
        return {
          title: 'Quick Prototype',
          count: 0
        }
      }
    }).mount('#app');
  </script>
</body>
</html>

使用する場面：UI のみの機能、視覚的なコンセプト、ビルド手順が不要な場合

React + Vite

状態管理を伴う複雑な UI 向け：

npm create vite@latest prototype-name -- --template react
cd prototype-name
npm install
# Add feature code
npm run dev

使用する場面：複数のコンポーネントを使う機能、ルーティング、状態管理

Node.js スクリプト

バックエンド／API のプロトタイプ向け：

// prototype.js
import express from 'express';

const app = express();
app.use(express.json());

app.post('/api/users', (req, res) => {
  // Prototype logic
  res.json({ success: true, user: req.body });
});

app.listen(3000, () => {
  console.log('Prototype running on http://localhost:3000');
});

使用する場面：API エンドポイント、データ処理、バックエンドのロジック

Python スクリプト

データ分析／処理向け：

# prototype.py
def process_data(data):
    # Prototype logic
    return [item * 2 for item in data]

if __name__ == '__main__':
    sample = [1, 2, 3, 4, 5]
    result = process_data(sample)
    print(f"Input: {sample}")
    print(f"Output: {result}")

使用する場面：データ処理、アルゴリズム、自動化

コンテキストとの連携

設定を呼び出す

プロトタイプの作成前：

// Query context-manager
const techStack = searchMemories({
  type: 'DECISION',
  tags: ['tech-stack', 'framework'],
  project: currentProject
});

const preferences = searchMemories({
  type: 'PREFERENCE',
  tags: ['coding-style', 'libraries'],
  project: currentProject
});

// Apply to prototype
const config = {
  framework: techStack.frontend || 'React',
  styling: techStack.styling || 'inline-styles',
  state: techStack.state || 'useState',
  build: techStack.build || 'Vite'
};

検証済みのパターンを保存する

ユーザーがプロトタイプを検証した後：

User: "This works perfectly! Build the production version"

# Save pattern as PROCEDURE
remember: Authentication flow pattern
Type: PROCEDURE
Tags: auth, jwt, react-router, zustand
Content: Validated pattern for JWT auth:
- Zustand store with persist middleware
- React Router protected routes
- Token in localStorage
- Login/logout flow
Works well, use for production

イテレーションから学習する

変更された内容を記録します。

// If user asks for modifications
"Can you add password validation?"
"Make the form prettier"
"Add loading state"

// Track patterns
if (commonRequest) {
  saveMemory({
    type: 'PREFERENCE',
    content: 'User commonly requests password validation in prototypes',
    tags: ['prototyping', 'validation']
  });

  // Auto-include in future prototypes
}

他のスキルとの連携

Context Manager

技術スタックを呼び出します：

Query for DECISION with tags: [tech-stack, framework]
Query for PREFERENCE with tags: [libraries, tools]
Apply to prototype generation

検証済みのパターンを保存します：

After user validates prototype
Save pattern as PROCEDURE
Tag with feature name and tech stack

Rapid Production Build

検証後：

User: "Build it properly"
→ Use validated prototype as reference
→ Add error handling
→ Add tests (via testing-builder)
→ Add proper styling
→ Add security measures
→ Create production version

Browser App Creator

スタンドアロンツール向け：

If prototype should be standalone tool:
→ Invoke browser-app-creator
→ Convert prototype to polished single-file app
→ Save to artifacts/browser-apps/

成功パターン

すばやい検証（5 分）

範囲：単一の機能、視覚的なフィードバック 成果物：動作するデモ 例：「このボタンのスタイルで問題ないか？」

<!DOCTYPE html>
<html>
<body>
  <button style="background: #3b82f6; color: white; padding: 12px 24px; border: none; border-radius: 8px; font-size: 16px; cursor: pointer;">
    Click Me
  </button>
</body>
</html>

機能プロトタイプ（15〜30 分）

範囲：操作を含む完全な機能 成果物：複数ファイルで構成されたアプリ 例：「ユーザー認証フロー」

上記の認証プロトタイプ全体を参照してください。

アーキテクチャの検証（30〜60 分）

範囲：システム設計、統合ポイント 成果物：複数のコンポーネントを含む動作するシステム 例：「マイクロサービスの通信パターン」

// api-gateway.js
// orchestrator.js
// user-service.js
// Complete working system

プロトタイプのチェックリスト

生成前： ✅ 要件が明確である ✅ 技術スタックを把握している ✅ スコープを定義している（最小限だが完全） ✅ 成功基準を設定している

生成中： ✅ ハッピーパスに集中する ✅ すぐに実行できるようにする ✅ 明確な手順を含める ✅ シンプルで分かりやすいコードを使う

生成後： ✅ 実行できることをテストする ✅ 成功基準を満たしていることを確認する ✅ 明確な次のステップを提示する ✅ 検証を依頼する

クイックリファレンス

プロトタイプを作成するタイミング

状況	プロトタイプを作成する？
新機能のアイデア	✅ はい - 実装前に検証する
バグ修正	❌ いいえ - 直接修正する
リファクタリング	✅ はい - 新しいパターンをテストする
UI の微調整	✅ はい - 見た目を確認する
パフォーマンスの最適化	❌ いいえ - まず測定する
新しい技術	✅ はい - 実際に試して学ぶ

トリガーフレーズ

• 「これをプロトタイプにして」
• 「簡単なデモ」
• 「概念実証」
• 「作れますか」
• 「どうすればいいですか」
• 「アイデアを試す」

ファイルの保存場所

• プロトタイプ: ~/.claude-artifacts/prototypes/（Linux/macOS）または %USERPROFILE%\.claude-artifacts\prototypes\（Windows）
• 検証済みのパターン: ~/.claude-memories/procedures/（Linux/macOS）または %USERPROFILE%\.claude-memories\procedures\（Windows） - "prototype-validated" タグ付き

成功基準

✅ プロトタイプをすぐに実行できる（セットアップの手間がない） ✅ コンセプトを視覚的に示す ✅ 中核となる機能をテストする ✅ 作成にかかる時間が 30 分未満 ✅ 手順を記載した明確な README がある ✅ ユーザーがすばやく「はい／いいえ」で検証できる