rapid-prototyper by jackspace/claudeskillz
npx skills add https://github.com/jackspace/claudeskillz --skill rapid-prototyper通过可运行的原型快速验证想法。在投入全面实现之前,创建完整、可运行的代码来测试想法:
对于 ADHD 用户:即时满足感 - 几分钟内获得可运行的原型,而非数小时。对于幻像失认症用户:具体、可视化的结果,而非抽象描述。对于所有用户:在投入前验证 - 快速失败,快速学习。
提取关键信息:
{
feature: "User authentication",
purpose: "Validate JWT flow works",
constraints: ["Must work offline", "No external dependencies"],
success_criteria: ["Login form", "Token storage", "Protected route"]
}
查询上下文管理器:
search memories:
- Type: DECISION, PREFERENCE
- Tags: tech-stack, framework, library
- Project: current project
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
回忆示例:
Found preferences:
- Frontend: React + Vite
- Styling: Tailwind CSS
- State: Zustand
- Backend: Node.js + Express
- Database: PostgreSQL (but skip for prototype)
原型范围:
示例:认证原型范围
✅ 包含:
- 登录表单
- 在 localStorage 中存储令牌
- 受保护路由示例
- 基本验证
❌ 跳过:
- 密码哈希(使用假令牌)
- 刷新令牌
- 记住我
- 密码重置
- 邮箱验证
结构:
prototype-{feature}-{timestamp}/
├── README.md # 如何运行
├── package.json # 依赖项
├── index.html # 入口点
├── src/
│ ├── App.jsx # 主组件
│ ├── components/ # 功能组件
│ └── utils/ # 辅助函数
└── server.js # 如果需要后端
示例:认证原型
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
### 5. 保存到制品
```bash
# 保存完整原型
# Linux/macOS: ~/.claude-artifacts/prototypes/auth-{timestamp}/
# Windows: %USERPROFILE%\.claude-artifacts\prototypes\auth-{timestamp}\
~/.claude-artifacts/prototypes/auth-{timestamp}/
✅ 认证原型已就绪!
📁 位置 (Linux/macOS): ~/.claude-artifacts/prototypes/auth-20251017/
📁 位置 (Windows): %USERPROFILE%\.claude-artifacts\prototypes\auth-20251017\
🚀 运行方法:
cd ~/.claude-artifacts/prototypes/auth-20251017
# Windows: cd %USERPROFILE%\.claude-artifacts\prototypes\auth-20251017
npm install
npm run dev
🎯 测试流程:
1. 访问 http://localhost:5173/login
2. 输入任意邮箱/密码
3. 点击登录 → 重定向到仪表板
4. 刷新 → 保持登录状态
5. 点击登出 → 返回登录页面
✅ 已验证:
- JWT 令牌流程有效
- 受保护路由有效
- 状态持久化有效
- React Router 集成有效
❌ 未包含(目前):
- 真实的 JWT 验证
- 密码哈希
- 错误处理
- 生产环境安全
**这验证了您所需的功能吗?**
- 如果是:我将构建生产版本
- 如果不是:需要调整什么?
用于快速 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 功能、视觉概念、无需构建步骤
用于具有状态管理的复杂 UI:
npm create vite@latest prototype-name -- --template react
cd prototype-name
npm install
# 添加功能代码
npm run dev
何时使用:多组件功能、路由、状态管理
用于后端/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 端点、数据处理、后端逻辑
用于数据分析/处理:
# 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
}
回忆技术栈:
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
验证后:
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
用于独立工具:
If prototype should be standalone tool:
→ Invoke browser-app-creator
→ Convert prototype to polished single-file app
→ Save to artifacts/browser-apps/
范围:单一功能,视觉反馈 交付物:可运行的演示 示例:"这个按钮样式有效吗?"
<!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>
范围:具有交互的完整功能 交付物:多文件应用 示例:"用户认证流程"
参见上方的完整认证原型。
范围:系统设计、集成点 交付物:具有多个组件的可运行系统 示例:"微服务通信模式"
// 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 和说明 ✅ 用户可以快速验证是/否
每周安装数
116
仓库
GitHub 星标数
10
首次出现
Jan 24, 2026
安全审计
安装于
cursor106
opencode106
gemini-cli99
codex98
github-copilot91
cline84
Fast validation through working prototypes. Creates complete, runnable code to test ideas before committing to full implementation:
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.
Extract key information:
{
feature: "User authentication",
purpose: "Validate JWT flow works",
constraints: ["Must work offline", "No external dependencies"],
success_criteria: ["Login form", "Token storage", "Protected route"]
}
Query context-manager:
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)
Prototype scope :
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
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:
{
"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
### 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}/
✅ 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?
For quick UI demos:
<!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
For complex UI with state management:
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
For backend/API prototypes:
// 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
For data analysis/processing:
# 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
Before creating prototype:
// 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'
};
After user validates prototype:
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
Track what gets changed:
// 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
}
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
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
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/
Scope : Single feature, visual feedback Deliverable : Working demo Example : "Does this button style work?"
<!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>
Scope : Complete feature with interactions Deliverable : Multi-file app Example : "User authentication flow"
See full auth prototype above.
Scope : System design, integration points Deliverable : Working system with multiple components Example : "Microservices communication pattern"
// api-gateway.js
// orchestrator.js
// user-service.js
// Complete working system
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
| 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 |
~/.claude-artifacts/prototypes/ (Linux/macOS) or %USERPROFILE%\.claude-artifacts\prototypes\ (Windows)~/.claude-memories/procedures/ (Linux/macOS) or %USERPROFILE%\.claude-memories\procedures\ (Windows) - tagged "prototype-validated"✅ 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
Weekly Installs
116
Repository
GitHub Stars
10
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
cursor106
opencode106
gemini-cli99
codex98
github-copilot91
cline84
agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试
159,700 周安装