rapid-prototyper

Name: rapid-prototyper
Author: Toowiredd

32stars1forks

How to install rapid-prototyper?

toowiredd/claude-skills-automation/rapid-prototyper

$npx -y skills add Toowiredd/claude-skills-automation --skill rapid-prototyper

Installs into the current project.

Summary

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".

Files · 1

View on GitHub

SKILL.md

1	# Rapid Prototyper
2
3	## Purpose
4
5	Fast validation through working prototypes. Creates complete, runnable code to test ideas before committing to full implementation:
6	1. Recalls your preferred tech stack from memory
7	2. Generates minimal but complete code
8	3. Makes it runnable immediately
9	4. Gets you visual feedback fast
10	5. Saves validated patterns for production
11
12	For ADHD users: Immediate gratification - working prototype in minutes, not hours.
13	For aphantasia: Concrete, visual results instead of abstract descriptions.
14	For all users: Validate before investing - fail fast, learn fast.
15
16	## Activation Triggers
17
18	- User says: "prototype this", "quick demo", "proof of concept", "MVP"
19	- User asks: "can we build", "is it possible to", "how would we"
20	- User mentions: "try out", "experiment with", "test the idea"
21	- Before major feature: proactive offer to prototype first
22
23	## Core Workflow
24
25	### 1. Understand Requirements
26
27	Extract key information:
28
29	```javascript
30	{
31	feature: "User authentication",
32	purpose: "Validate JWT flow works",
33	constraints: ["Must work offline", "No external dependencies"],
34	success_criteria: ["Login form", "Token storage", "Protected route"]
35	}
36	```
37
38	### 2. Recall Tech Stack
39
40	Query context-manager:
41
42	```bash
43	search memories:
44	- Type: DECISION, PREFERENCE
45	- Tags: tech-stack, framework, library
46	- Project: current project
47	```
48
49	Example recall:
50	```
51	Found preferences:
52	- Frontend: React + Vite
53	- Styling: Tailwind CSS
54	- State: Zustand
55	- Backend: Node.js + Express
56	- Database: PostgreSQL (but skip for prototype)
57	```
58
59	### 3. Design Minimal Implementation
60
61	Prototype scope:
62	- ✅ Core feature working
63	- ✅ Visual interface (if UI feature)
64	- ✅ Basic validation
65	- ✅ Happy path functional
66	- ❌ Error handling (minimal)
67	- ❌ Edge cases (skip for speed)
68	- ❌ Styling polish (functional only)
69	- ❌ Optimization (prototype first)
70
71	Example: Auth prototype scope
72	```
73	✅ Include:
74	- Login form
75	- Token storage in localStorage
76	- Protected route example
77	- Basic validation
78
79	❌ Skip:
80	- Password hashing (use fake tokens)
81	- Refresh tokens
82	- Remember me
83	- Password reset
84	- Email verification
85	```
86
87	### 4. Generate Prototype
88
89	Structure:
90	```
91	prototype-{feature}-{timestamp}/
92	├── README.md # How to run
93	├── package.json # Dependencies
94	├── index.html # Entry point
95	├── src/
96	│ ├── App.jsx # Main component
97	│ ├── components/ # Feature components
98	│ └── utils/ # Helper functions
99	└── server.js # If backend needed
100	```
101
102	Example: Auth Prototype
103
104	`package.json`:
105	```json
106	{
107	"name": "auth-prototype",
108	"type": "module",
109	"scripts": {
110	"dev": "vite",
111	"build": "vite build"
112	},
113	"dependencies": {
114	"react": "^18.2.0",
115	"react-dom": "^18.2.0",
116	"react-router-dom": "^6.20.0",
117	"zustand": "^4.4.7"
118	},
119	"devDependencies": {
120	"@vitejs/plugin-react": "^4.2.1",
121	"vite": "^5.0.8"
122	}
123	}
124	```
125
126	`src/App.jsx`:
127	```javascript
128	import { useState } from 'react';
129	import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
130	import { useAuthStore } from './store';
131
132	function LoginForm() {
133	const [email, setEmail] = useState('');
134	const [password, setPassword] = useState('');
135	const login = useAuthStore(state => state.login);
136
137	const handleSubmit = (e) => {
138	e.preventDefault();
139	// Prototype: Accept any credentials
140	if (email && password) {
141	login({ email, token: 'fake-jwt-token' });
142	}
143	};
144
145	return (
146	<div style={{ maxWidth: 400, margin: '100px auto' }}>
147	<h1>Login</h1>
148	<form onSubmit={handleSubmit}>
149	<input
150	type="email"
151	value={email}
152	onChange={(e) => setEmail(e.target.value)}
153	placeholder="Email"
154	style={{ display: 'block', width: '100%', margin: '10px 0', padding: 8 }}
155	/>
156	<input
157	type="password"
158	value={password}
159	onChange={(e) => setPassword(e.target.value)}
160	placeholder="Password"
161	style={{ display: 'block', width: '100%', margin: '10px 0', padding: 8 }}
162	/>
163	<button type="submit" style={{ padding: '10px 20px' }}>
164	Login
165	</button>
166	</form>
167	</div>
168	);
169	}
170
171	function Dashboard() {
172	const { user, logout } = useAuthStore();
173
174	return (
175	<div style={{ maxWidth: 800, margin: '50px auto' }}>
176	<h1

People who liked this also viewed

6 picks

Type

rapid-prototyper

32stars1forks

View on GitHub

How to install rapid-prototyper?

toowiredd/claude-skills-automation/rapid-prototyper

$npx -y skills add Toowiredd/claude-skills-automation --skill rapid-prototyper

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Rapid Prototyper
2
3	## Purpose
4
5	Fast validation through working prototypes. Creates complete, runnable code to test ideas before committing to full implementation:
6	1. Recalls your preferred tech stack from memory
7	2. Generates minimal but complete code
8	3. Makes it runnable immediately
9	4. Gets you visual feedback fast
10	5. Saves validated patterns for production
11
12	For ADHD users: Immediate gratification - working prototype in minutes, not hours.
13	For aphantasia: Concrete, visual results instead of abstract descriptions.
14	For all users: Validate before investing - fail fast, learn fast.
15
16	## Activation Triggers
17
18	- User says: "prototype this", "quick demo", "proof of concept", "MVP"
19	- User asks: "can we build", "is it possible to", "how would we"
20	- User mentions: "try out", "experiment with", "test the idea"
21	- Before major feature: proactive offer to prototype first
22
23	## Core Workflow
24
25	### 1. Understand Requirements
26
27	Extract key information:
28
29	```javascript
30	{
31	feature: "User authentication",
32	purpose: "Validate JWT flow works",
33	constraints: ["Must work offline", "No external dependencies"],
34	success_criteria: ["Login form", "Token storage", "Protected route"]
35	}
36	```
37
38	### 2. Recall Tech Stack
39
40	Query context-manager:
41
42	```bash
43	search memories:
44	- Type: DECISION, PREFERENCE
45	- Tags: tech-stack, framework, library
46	- Project: current project
47	```
48
49	Example recall:
50	```
51	Found preferences:
52	- Frontend: React + Vite
53	- Styling: Tailwind CSS
54	- State: Zustand
55	- Backend: Node.js + Express
56	- Database: PostgreSQL (but skip for prototype)
57	```
58
59	### 3. Design Minimal Implementation
60
61	Prototype scope:
62	- ✅ Core feature working
63	- ✅ Visual interface (if UI feature)
64	- ✅ Basic validation
65	- ✅ Happy path functional
66	- ❌ Error handling (minimal)
67	- ❌ Edge cases (skip for speed)
68	- ❌ Styling polish (functional only)
69	- ❌ Optimization (prototype first)
70
71	Example: Auth prototype scope
72	```
73	✅ Include:
74	- Login form
75	- Token storage in localStorage
76	- Protected route example
77	- Basic validation
78
79	❌ Skip:
80	- Password hashing (use fake tokens)
81	- Refresh tokens
82	- Remember me
83	- Password reset
84	- Email verification
85	```
86
87	### 4. Generate Prototype
88
89	Structure:
90	```
91	prototype-{feature}-{timestamp}/
92	├── README.md # How to run
93	├── package.json # Dependencies
94	├── index.html # Entry point
95	├── src/
96	│ ├── App.jsx # Main component
97	│ ├── components/ # Feature components
98	│ └── utils/ # Helper functions
99	└── server.js # If backend needed
100	```
101
102	Example: Auth Prototype
103
104	`package.json`:
105	```json
106	{
107	"name": "auth-prototype",
108	"type": "module",
109	"scripts": {
110	"dev": "vite",
111	"build": "vite build"
112	},
113	"dependencies": {
114	"react": "^18.2.0",
115	"react-dom": "^18.2.0",
116	"react-router-dom": "^6.20.0",
117	"zustand": "^4.4.7"
118	},
119	"devDependencies": {
120	"@vitejs/plugin-react": "^4.2.1",
121	"vite": "^5.0.8"
122	}
123	}
124	```
125
126	`src/App.jsx`:
127	```javascript
128	import { useState } from 'react';
129	import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
130	import { useAuthStore } from './store';
131
132	function LoginForm() {
133	const [email, setEmail] = useState('');
134	const [password, setPassword] = useState('');
135	const login = useAuthStore(state => state.login);
136
137	const handleSubmit = (e) => {
138	e.preventDefault();
139	// Prototype: Accept any credentials
140	if (email && password) {
141	login({ email, token: 'fake-jwt-token' });
142	}
143	};
144
145	return (
146	<div style={{ maxWidth: 400, margin: '100px auto' }}>
147	<h1>Login</h1>
148	<form onSubmit={handleSubmit}>
149	<input
150	type="email"
151	value={email}
152	onChange={(e) => setEmail(e.target.value)}
153	placeholder="Email"
154	style={{ display: 'block', width: '100%', margin: '10px 0', padding: 8 }}
155	/>
156	<input
157	type="password"
158	value={password}
159	onChange={(e) => setPassword(e.target.value)}
160	placeholder="Password"
161	style={{ display: 'block', width: '100%', margin: '10px 0', padding: 8 }}
162	/>
163	<button type="submit" style={{ padding: '10px 20px' }}>
164	Login
165	</button>
166	</form>
167	</div>
168	);
169	}
170
171	function Dashboard() {
172	const { user, logout } = useAuthStore();
173
174	return (
175	<div style={{ maxWidth: 800, margin: '50px auto' }}>
176	<h1

People who liked this also viewed

6 picks

Type