Rapid Prototyper

{
  "sections": {
    "Purpose": "Fast validation through working prototypes. Creates complete, runnable code to test ideas before committing to full implementation:\r\n1. Recalls your preferred tech stack from memory\r\n2. Generates minimal but complete code\r\n3. Makes it runnable immediately\r\n4. Gets you visual feedback fast\r\n5. Saves validated patterns for production\r\n\r\n**For ADHD users**: Immediate gratification - working prototype in minutes, not hours.\r\n**For aphantasia**: Concrete, visual results instead of abstract descriptions.\r\n**For all users**: Validate before investing - fail fast, learn fast.",
    "Activation Triggers": "- User says: \"prototype this\", \"quick demo\", \"proof of concept\", \"MVP\"\r\n- User asks: \"can we build\", \"is it possible to\", \"how would we\"\r\n- User mentions: \"try out\", \"experiment with\", \"test the idea\"\r\n- Before major feature: proactive offer to prototype first",
    "Next Steps if Validated": "/home/toowired/.claude-artifacts/prototypes/auth-{timestamp}/\r\n```\r\n\r\n### 6. Present to User\r\n\r\n```\r\n✅ Auth prototype ready!\r\n\r\n📁 Location: /home/toowired/.claude-artifacts/prototypes/auth-20251017/\r\n\r\n🚀 To run:\r\ncd /home/toowired/.claude-artifacts/prototypes/auth-20251017\r\nnpm install\r\nnpm run dev\r\n\r\n🎯 Test flow:\r\n1. Visit http://localhost:5173/login\r\n2. Enter any email/password\r\n3. Click Login → Redirects to Dashboard\r\n4. Refresh → Stays logged in\r\n5. Click Logout → Returns to Login\r\n\r\n✅ Validates:\r\n- JWT token flow works\r\n- Protected routes work\r\n- State persistence works\r\n- React Router integration works\r\n\r\n❌ Not included (yet):\r\n- Real JWT validation\r\n- Password hashing\r\n- Error handling\r\n- Production security\r\n\r\n**Does this validate what you needed?**\r\n- If yes: I'll build production version\r\n- If no: What needs adjusting?\r\n```",
    "Integration with Other Skills": "### Context Manager\r\n\r\nRecalls tech stack:\r\n```\r\nQuery for DECISION with tags: [tech-stack, framework]\r\nQuery for PREFERENCE with tags: [libraries, tools]\r\nApply to prototype generation\r\n```\r\n\r\nSaves validated patterns:\r\n```\r\nAfter user validates prototype\r\nSave pattern as PROCEDURE\r\nTag with feature name and tech stack\r\n```\r\n\r\n### Rapid Production Build\r\n\r\nAfter validation:\r\n```\r\nUser: \"Build it properly\"\r\n→ Use validated prototype as reference\r\n→ Add error handling\r\n→ Add tests (via testing-builder)\r\n→ Add proper styling\r\n→ Add security measures\r\n→ Create production version\r\n```\r\n\r\n### Browser App Creator\r\n\r\nFor standalone tools:\r\n```\r\nIf prototype should be standalone tool:\r\n→ Invoke browser-app-creator\r\n→ Convert prototype to polished single-file app\r\n→ Save to artifacts/browser-apps/\r\n```",
    "Run": "```bash\r\nnpm install\r\nnpm run dev\r\n```\r\n\r\nOpen http://localhost:5173",
    "Context Integration": "remember: Authentication flow pattern\r\nType: PROCEDURE\r\nTags: auth, jwt, react-router, zustand\r\nContent: Validated pattern for JWT auth:\r\n- Zustand store with persist middleware\r\n- React Router protected routes\r\n- Token in localStorage\r\n- Login/logout flow\r\nWorks well, use for production\r\n```\r\n\r\n### Learn from Iterations\r\n\r\nTrack what gets changed:\r\n\r\n```javascript\r\n// If user asks for modifications\r\n\"Can you add password validation?\"\r\n\"Make the form prettier\"\r\n\"Add loading state\"\r\n\r\n// Track patterns\r\nif (commonRequest) {\r\n  saveMemory({\r\n    type: 'PREFERENCE',\r\n    content: 'User commonly requests password validation in prototypes',\r\n    tags: ['prototyping', 'validation']\r\n  });\r\n\r\n  // Auto-include in future prototypes\r\n}\r\n```",
    "Test": "1. Go to /login\r\n2. Enter any email and password\r\n3. Click Login\r\n4. Should redirect to /dashboard\r\n5. Refresh page - should stay logged in\r\n6. Click Logout - should return to /login",
    "Core Workflow": "Quick prototype to validate JWT authentication flow.",
    "Prototype Checklist": "Before generating:\r\n✅ Requirements clear\r\n✅ Tech stack recalled\r\n✅ Scope defined (minimal but complete)\r\n✅ Success criteria established\r\n\r\nWhile generating:\r\n✅ Focus on happy path\r\n✅ Make it runnable immediately\r\n✅ Include clear instructions\r\n✅ Use simple, obvious code\r\n\r\nAfter generating:\r\n✅ Test that it runs\r\n✅ Verify success criteria met\r\n✅ Provide clear next steps\r\n✅ Ask for validation",
    "Quick Reference": "### When to Prototype\r\n\r\n| Situation | Prototype? |\r\n|-----------|-----------|\r\n| New feature idea | ✅ Yes - validate before building |\r\n| Bug fix | ❌ No - fix directly |\r\n| Refactoring | ✅ Yes - test new pattern |\r\n| UI tweak | ✅ Yes - visual confirmation |\r\n| Performance optimization | ❌ No - measure first |\r\n| New technology | ✅ Yes - learn by doing |\r\n\r\n### Trigger Phrases\r\n\r\n- \"prototype this\"\r\n- \"quick demo\"\r\n- \"proof of concept\"\r\n- \"can we build\"\r\n- \"how would we\"\r\n- \"test the idea\"\r\n\r\n### File Locations\r\n\r\n- **Prototypes**: `/home/toowired/.claude-artifacts/prototypes/`\r\n- **Validated patterns**: `/home/toowired/.claude-memories/procedures/` (tagged \"prototype-validated\")\r\n\r\n### Success Criteria\r\n\r\n✅ Prototype runs immediately (no setup friction)\r\n✅ Visually demonstrates the concept\r\n✅ Tests core functionality\r\n✅ Takes <30 minutes to create\r\n✅ Clear README with instructions\r\n✅ User can validate yes/no quickly",
    "Success Patterns": "### Quick Validation (5 minutes)\r\n\r\n**Scope**: Single feature, visual feedback\r\n**Deliverable**: Working demo\r\n**Example**: \"Does this button style work?\"\r\n\r\n```html\r\n<!DOCTYPE html>\r\n<html>\r\n<body>\r\n  <button style=\"background: #3b82f6; color: white; padding: 12px 24px; border: none; border-radius: 8px; font-size: 16px; cursor: pointer;\">\r\n    Click Me\r\n  </button>\r\n</body>\r\n</html>\r\n```\r\n\r\n### Feature Prototype (15-30 minutes)\r\n\r\n**Scope**: Complete feature with interactions\r\n**Deliverable**: Multi-file app\r\n**Example**: \"User authentication flow\"\r\n\r\nSee full auth prototype above.\r\n\r\n### Architecture Validation (30-60 minutes)\r\n\r\n**Scope**: System design, integration points\r\n**Deliverable**: Working system with multiple components\r\n**Example**: \"Microservices communication pattern\"\r\n\r\n```javascript\r\n// api-gateway.js\r\n// orchestrator.js\r\n// user-service.js\r\n// Complete working system\r\n```",
    "Notes": "- Uses fake tokens (no real JWT validation)\r\n- No password hashing\r\n- Minimal styling\r\n- No error handling",
    "Prototype Templates": "def process_data(data):\r\n    # Prototype logic\r\n    return [item * 2 for item in data]\r\n\r\nif __name__ == '__main__':\r\n    sample = [1, 2, 3, 4, 5]\r\n    result = process_data(sample)\r\n    print(f\"Input: {sample}\")\r\n    print(f\"Output: {result}\")\r\n```\r\n\r\n**When to use**: Data processing, algorithms, automation"
  },
  "content": "### 1. Understand Requirements\r\n\r\nExtract key information:\r\n\r\n```javascript\r\n{\r\n  feature: \"User authentication\",\r\n  purpose: \"Validate JWT flow works\",\r\n  constraints: [\"Must work offline\", \"No external dependencies\"],\r\n  success_criteria: [\"Login form\", \"Token storage\", \"Protected route\"]\r\n}\r\n```\r\n\r\n### 2. Recall Tech Stack\r\n\r\nQuery context-manager:\r\n\r\n```bash\r\nsearch memories:\r\n- Type: DECISION, PREFERENCE\r\n- Tags: tech-stack, framework, library\r\n- Project: current project\r\n```\r\n\r\n**Example recall**:\r\n```\r\nFound preferences:\r\n- Frontend: React + Vite\r\n- Styling: Tailwind CSS\r\n- State: Zustand\r\n- Backend: Node.js + Express\r\n- Database: PostgreSQL (but skip for prototype)\r\n```\r\n\r\n### 3. Design Minimal Implementation\r\n\r\n**Prototype scope**:\r\n- ✅ Core feature working\r\n- ✅ Visual interface (if UI feature)\r\n- ✅ Basic validation\r\n- ✅ Happy path functional\r\n- ❌ Error handling (minimal)\r\n- ❌ Edge cases (skip for speed)\r\n- ❌ Styling polish (functional only)\r\n- ❌ Optimization (prototype first)\r\n\r\n**Example**: Auth prototype scope\r\n```\r\n✅ Include:\r\n- Login form\r\n- Token storage in localStorage\r\n- Protected route example\r\n- Basic validation\r\n\r\n❌ Skip:\r\n- Password hashing (use fake tokens)\r\n- Refresh tokens\r\n- Remember me\r\n- Password reset\r\n- Email verification\r\n```\r\n\r\n### 4. Generate Prototype\r\n\r\n**Structure**:\r\n```\r\nprototype-{feature}-{timestamp}/\r\n├── README.md              # How to run\r\n├── package.json           # Dependencies\r\n├── index.html             # Entry point\r\n├── src/\r\n│   ├── App.jsx           # Main component\r\n│   ├── components/       # Feature components\r\n│   └── utils/            # Helper functions\r\n└── server.js             # If backend needed\r\n```\r\n\r\n**Example: Auth Prototype**\r\n\r\n`package.json`:\r\n```json\r\n{\r\n  \"name\": \"auth-prototype\",\r\n  \"type\": \"module\",\r\n  \"scripts\": {\r\n    \"dev\": \"vite\",\r\n    \"build\": \"vite build\"\r\n  },\r\n  \"dependencies\": {\r\n    \"react\": \"^18.2.0\",\r\n    \"react-dom\": \"^18.2.0\",\r\n    \"react-router-dom\": \"^6.20.0\",\r\n    \"zustand\": \"^4.4.7\"\r\n  },\r\n  \"devDependencies\": {\r\n    \"@vitejs/plugin-react\": \"^4.2.1\",\r\n    \"vite\": \"^5.0.8\"\r\n  }\r\n}\r\n```\r\n\r\n`src/App.jsx`:\r\n```javascript\r\nimport { useState } from 'react';\r\nimport { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';\r\nimport { useAuthStore } from './store';\r\n\r\nfunction LoginForm() {\r\n  const [email, setEmail] = useState('');\r\n  const [password, setPassword] = useState('');\r\n  const login = useAuthStore(state => state.login);\r\n\r\n  const handleSubmit = (e) => {\r\n    e.preventDefault();\r\n    // Prototype: Accept any credentials\r\n    if (email && password) {\r\n      login({ email, token: 'fake-jwt-token' });\r\n    }\r\n  };\r\n\r\n  return (\r\n    <div style={{ maxWidth: 400, margin: '100px auto' }}>\r\n      <h1>Login</h1>\r\n      <form onSubmit={handleSubmit}>\r\n        <input\r\n          type=\"email\"\r\n          value={email}\r\n          onChange={(e) => setEmail(e.target.value)}\r\n          placeholder=\"Email\"\r\n          style={{ display: 'block', width: '100%', margin: '10px 0', padding: 8 }}\r\n        />\r\n        <input\r\n          type=\"password\"\r\n          value={password}\r\n          onChange={(e) => setPassword(e.target.value)}\r\n          placeholder=\"Password\"\r\n          style={{ display: 'block', width: '100%', margin: '10px 0', padding: 8 }}\r\n        />\r\n        <button type=\"submit\" style={{ padding: '10px 20px' }}>\r\n          Login\r\n        </button>\r\n      </form>\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction Dashboard() {\r\n  const { user, logout } = useAuthStore();\r\n\r\n  return (\r\n    <div style={{ maxWidth: 800, margin: '50px auto' }}>\r\n      <h1>Dashboard</h1>\r\n      <p>Welcome, {user.email}!</p>\r\n      <p>Token: {user.token}</p>\r\n      <button onClick={logout} style={{ padding: '10px 20px' }}>\r\n        Logout\r\n      </button>\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction ProtectedRoute({ children }) {\r\n  const isAuthenticated = useAuthStore(state => state.isAuthenticated);\r\n  return isAuthenticated ? children : <Navigate to=\"/login\" />;\r\n}\r\n\r\nexport default function App() {\r\n  return (\r\n    <BrowserRouter>\r\n      <Routes>\r\n        <Route path=\"/login\" element={<LoginForm />} />\r\n        <Route\r\n          path=\"/dashboard\"\r\n          element={\r\n            <ProtectedRoute>\r\n              <Dashboard />\r\n            </ProtectedRoute>\r\n          }\r\n        />\r\n        <Route path=\"/\" element={<Navigate to=\"/dashboard\" />} />\r\n      </Routes>\r\n    </BrowserRouter>\r\n  );\r\n}\r\n```\r\n\r\n`src/store.js`:\r\n```javascript\r\nimport { create } from 'zustand';\r\nimport { persist } from 'zustand/middleware';\r\n\r\nexport const useAuthStore = create(\r\n  persist(\r\n    (set) => ({\r\n      user: null,\r\n      isAuthenticated: false,\r\n      login: (user) => set({ user, isAuthenticated: true }),\r\n      logout: () => set({ user: null, isAuthenticated: false }),\r\n    }),\r\n    {\r\n      name: 'auth-storage',\r\n    }\r\n  )\r\n);\r\n```\r\n\r\n`README.md`:\r\n```markdown\r\n\r\n1. Implement real JWT signing/verification\r\n2. Add password hashing with bcrypt\r\n3. Add proper error handling\r\n4. Add refresh token flow\r\n5. Add validation and security measures\r\n```\r\n\r\n### 5. Save to Artifacts\r\n\r\n```bash\r\n\r\n### Single-File HTML App\r\n\r\nFor quick UI demos:\r\n\r\n```html\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <title>Prototype</title>\r\n  <script src=\"https://unpkg.com/vue@3\"></script>\r\n  <style>\r\n    body { font-family: sans-serif; max-width: 800px; margin: 50px auto; }\r\n  </style>\r\n</head>\r\n<body>\r\n  <div id=\"app\">\r\n    <h1>{{ title }}</h1>\r\n    <button @click=\"count++\">Count: {{ count }}</button>\r\n  </div>\r\n\r\n  <script>\r\n    const { createApp } = Vue;\r\n    createApp({\r\n      data() {\r\n        return {\r\n          title: 'Quick Prototype',\r\n          count: 0\r\n        }\r\n      }\r\n    }).mount('#app');\r\n  </script>\r\n</body>\r\n</html>\r\n```\r\n\r\n**When to use**: UI-only features, visual concepts, no build step needed\r\n\r\n### React + Vite\r\n\r\nFor complex UI with state management:\r\n\r\n```bash\r\nnpm create vite@latest prototype-name -- --template react\r\ncd prototype-name\r\nnpm install\r\nnpm run dev\r\n```\r\n\r\n**When to use**: Multi-component features, routing, state management\r\n\r\n### Node.js Script\r\n\r\nFor backend/API prototypes:\r\n\r\n```javascript\r\n// prototype.js\r\nimport express from 'express';\r\n\r\nconst app = express();\r\napp.use(express.json());\r\n\r\napp.post('/api/users', (req, res) => {\r\n  // Prototype logic\r\n  res.json({ success: true, user: req.body });\r\n});\r\n\r\napp.listen(3000, () => {\r\n  console.log('Prototype running on http://localhost:3000');\r\n});\r\n```\r\n\r\n**When to use**: API endpoints, data processing, backend logic\r\n\r\n### Python Script\r\n\r\nFor data analysis/processing:\r\n\r\n```python\r\n\r\n### Recall Preferences\r\n\r\nBefore creating prototype:\r\n\r\n```javascript\r\n// Query context-manager\r\nconst techStack = searchMemories({\r\n  type: 'DECISION',\r\n  tags: ['tech-stack', 'framework'],\r\n  project: currentProject\r\n});\r\n\r\nconst preferences = searchMemories({\r\n  type: 'PREFERENCE',\r\n  tags: ['coding-style', 'libraries'],\r\n  project: currentProject\r\n});\r\n\r\n// Apply to prototype\r\nconst config = {\r\n  framework: techStack.frontend || 'React',\r\n  styling: techStack.styling || 'inline-styles',\r\n  state: techStack.state || 'useState',\r\n  build: techStack.build || 'Vite'\r\n};\r\n```\r\n\r\n### Save Validated Patterns\r\n\r\nAfter user validates prototype:\r\n\r\n```bash\r\nUser: \"This works perfectly! Build the production version\"",
  "id": "rapid-prototyper",
  "name": "rapid-prototyper",
  "description": "Creates minimal working prototypes for quick idea validation. Single-file when possible, includes test data, ready to demo immediately. Use when user says \"prototype\", \"MVP\", \"proof of concept\", \"quick demo\"."
}

---
name: rapid-prototyper
description: Creates minimal working prototypes for quick idea validation. Single-file when possible, includes test data, ready to demo immediately. Use when user says "prototype", "MVP", "proof of concept", "quick demo".
priority: MEDIUM
conflicts_with: [browser-app-creator]
use_when:
  - User wants to VALIDATE AN IDEA quickly
  - User needs a PROOF OF CONCEPT
  - User wants MINIMAL implementation
  - User doesn't care about polish or production-readiness
  - User says "prototype", "MVP", "quick", "test"
avoid_when:
  - User wants a COMPLETE application
  - User wants ADHD optimization
  - User wants production-ready code
---

# Rapid Prototyper

## Purpose

Fast validation through working prototypes. Creates complete, runnable code to test ideas before committing to full implementation:
1. Recalls your preferred tech stack from memory
2. Generates minimal but complete code
3. Makes it runnable immediately
4. Gets you visual feedback fast
5. Saves validated patterns for production

**For ADHD users**: Immediate gratification - working prototype in minutes, not hours.
**For aphantasia**: Concrete, visual results instead of abstract descriptions.
**For all users**: Validate before investing - fail fast, learn fast.

## Activation Triggers

- User says: "prototype this", "quick demo", "proof of concept", "MVP"
- User asks: "can we build", "is it possible to", "how would we"
- User mentions: "try out", "experiment with", "test the idea"
- Before major feature: proactive offer to prototype first

## Core Workflow

### 1. Understand Requirements

Extract key information:

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

### 2. Recall Tech Stack

Query context-manager:

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

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

### 3. Design Minimal Implementation

**Prototype scope**:
- ✅ Core feature working
- ✅ Visual interface (if UI feature)
- ✅ Basic validation
- ✅ Happy path functional
- ❌ Error handling (minimal)
- ❌ Edge cases (skip for speed)
- ❌ Styling polish (functional only)
- ❌ Optimization (prototype first)

**Example**: Auth prototype scope
```
✅ 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. Generate Prototype

**Structure**:
```
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
```

**Example: Auth Prototype**

`package.json`:
```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`:
```javascript
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`:
```javascript
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`:
```markdown
# Auth Prototype

Quick prototype to validate JWT authentication flow.

## Run

```bash
npm install
npm run dev
```

Open http://localhost:5173

## Test

1. Go to /login
2. Enter any email and password
3. Click Login
4. Should redirect to /dashboard
5. Refresh page - should stay logged in
6. Click Logout - should return to /login

## Notes

- Uses fake tokens (no real JWT validation)
- No password hashing
- Minimal styling
- No error handling

## Next Steps if Validated

1. Implement real JWT signing/verification
2. Add password hashing with bcrypt
3. Add proper error handling
4. Add refresh token flow
5. Add validation and security measures
```

### 5. Save to Artifacts

```bash
# Save complete prototype
/home/toowired/.claude-artifacts/prototypes/auth-{timestamp}/
```

### 6. Present to User

```
✅ Auth prototype ready!

📁 Location: /home/toowired/.claude-artifacts/prototypes/auth-20251017/

🚀 To run:
cd /home/toowired/.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?
```

## Prototype Templates

### Single-File HTML App

For quick UI demos:

```html
<!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>
```

**When to use**: UI-only features, visual concepts, no build step needed

### React + Vite

For complex UI with state management:

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

**When to use**: Multi-component features, routing, state management

### Node.js Script

For backend/API prototypes:

```javascript
// 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');
});
```

**When to use**: API endpoints, data processing, backend logic

### Python Script

For data analysis/processing:

```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}")
```

**When to use**: Data processing, algorithms, automation

## Context Integration

### Recall Preferences

Before creating prototype:

```javascript
// 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'
};
```

### Save Validated Patterns

After user validates prototype:

```bash
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
```

### Learn from Iterations

Track what gets changed:

```javascript
// 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
}
```

## Integration with Other Skills

### Context Manager

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

Saves validated patterns:
```
After user validates prototype
Save pattern as PROCEDURE
Tag with feature name and tech stack
```

### Rapid Production Build

After validation:
```
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

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

## Success Patterns

### Quick Validation (5 minutes)

**Scope**: Single feature, visual feedback
**Deliverable**: Working demo
**Example**: "Does this button style work?"

```html
<!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>
```

### Feature Prototype (15-30 minutes)

**Scope**: Complete feature with interactions
**Deliverable**: Multi-file app
**Example**: "User authentication flow"

See full auth prototype above.

### Architecture Validation (30-60 minutes)

**Scope**: System design, integration points
**Deliverable**: Working system with multiple components
**Example**: "Microservices communication pattern"

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

## Prototype Checklist

Before generating:
✅ Requirements clear
✅ Tech stack recalled
✅ Scope defined (minimal but complete)
✅ Success criteria established

While generating:
✅ Focus on happy path
✅ Make it runnable immediately
✅ Include clear instructions
✅ Use simple, obvious code

After generating:
✅ Test that it runs
✅ Verify success criteria met
✅ Provide clear next steps
✅ Ask for validation

## Quick Reference

### When to Prototype

| Situation | Prototype? |
|-----------|-----------|
| New feature idea | ✅ Yes - validate before building |
| Bug fix | ❌ No - fix directly |
| Refactoring | ✅ Yes - test new pattern |
| UI tweak | ✅ Yes - visual confirmation |
| Performance optimization | ❌ No - measure first |
| New technology | ✅ Yes - learn by doing |

### Trigger Phrases

- "prototype this"
- "quick demo"
- "proof of concept"
- "can we build"
- "how would we"
- "test the idea"

### File Locations

- **Prototypes**: `/home/toowired/.claude-artifacts/prototypes/`
- **Validated patterns**: `/home/toowired/.claude-memories/procedures/` (tagged "prototype-validated")

### Success Criteria

✅ Prototype runs immediately (no setup friction)
✅ Visually demonstrates the concept
✅ Tests core functionality
✅ Takes <30 minutes to create
✅ Clear README with instructions
✅ User can validate yes/no quickly