rapid-prototyper

What this skill does

# 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
# Linux/macOS: ~/.claude-artifacts/prototypes/auth-{timestamp}/
# Windows: %USERPROFILE%\.claude-artifacts\prototypes\auth-{timestamp}\
~/.claude-artifacts/prototypes/auth-{timestamp}/
```

### 6. Present to User

```
✅ 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?
```

## 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>
<