browser-app-creator

Name: browser-app-creator
Author: jackspace

15stars7forks

How to install browser-app-creator?

jackspace/claudeskillz/browser-app-creator

$npx -y skills add jackspace/ClaudeSkillz --skill browser-app-creator

Installs into the current project.

Summary

Creates complete single-file HTML/CSS/JS web apps with localStorage persistence, ADHD-optimized UI (60px+ buttons), dark mode, and offline functionality. Use when user says "create app", "build tool", "make dashboard", or requests any browser-based interface.

Files · 1

View on GitHub

SKILL.md

1	# Browser App Creator
2
3	## Purpose
4
5	Creates production-ready single-file web applications that work offline with zero setup. Perfect for quick tools, dashboards, trackers, and prototypes.
6
7	For ADHD users: Large buttons (60px+), auto-save everything, visual feedback, zero configuration.
8	For SDAM users: All data persists in localStorage with timestamps.
9	For all users: Download and use immediately - no server, no build step, no dependencies.
10
11	## Activation Triggers
12
13	- User says: "create app", "build tool", "make dashboard", "create tracker"
14	- Requests for: habit tracker, todo list, timer, calculator, form, visualization
15	- Any request for a browser-based interface or tool
16
17	## Core Workflow
18
19	### 1. Understand Requirements
20
21	Ask clarifying questions only if absolutely necessary:
22
23	```javascript
24	{
25	app_type: "dashboard\|tracker\|form\|tool\|visualization",
26	primary_function: "What does the app do?",
27	data_to_track: ["What data needs to be stored?"],
28	key_actions: ["What can users do?"],
29	visual_requirements: "Any specific layout needs?"
30	}
31	```
32
33	### 2. Generate Single-File App
34
35	Template structure:
36	```html
37	<!DOCTYPE html>
38	<html lang="en">
39	<head>
40	<meta charset="UTF-8">
41	<meta name="viewport" content="width=device-width, initial-scale=1.0">
42	<title>{App Name}</title>
43	<style>
44	/* ADHD-Optimized Styles */
45	</style>
46	</head>
47	<body>
48	<!-- App UI -->
49	<script>
50	// App Logic + localStorage
51	</script>
52	</body>
53	</html>
54	```
55
56	### 3. ADHD Optimization Requirements
57
58	Required UI elements:
59	- ✅ Buttons: Minimum 60px height, high contrast
60	- ✅ Dark mode: Default theme (can toggle)
61	- ✅ Auto-save: Every action saves to localStorage
62	- ✅ Visual feedback: Success/error messages
63	- ✅ Mobile responsive: Works on all screen sizes
64	- ✅ Large touch targets: 44px minimum for mobile
65
66	CSS Requirements:
67	```css
68	/* ADHD-Optimized Base Styles */
69	* {
70	margin: 0;
71	padding: 0;
72	box-sizing: border-box;
73	}
74
75	body {
76	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
77	background: #1a1a1a;
78	color: #e0e0e0;
79	padding: 20px;
80	max-width: 1200px;
81	margin: 0 auto;
82	}
83
84	button {
85	min-height: 60px;
86	padding: 15px 30px;
87	font-size: 18px;
88	font-weight: 600;
89	border: none;
90	border-radius: 8px;
91	cursor: pointer;
92	transition: all 0.2s ease;
93	background: #4a9eff;
94	color: white;
95	}
96
97	button:hover {
98	background: #357abd;
99	transform: translateY(-2px);
100	box-shadow: 0 4px 12px rgba(74, 158, 255, 0.4);
101	}
102
103	button:active {
104	transform: translateY(0);
105	}
106
107	input, textarea, select {
108	min-height: 50px;
109	padding: 12px 15px;
110	font-size: 16px;
111	border: 2px solid #333;
112	border-radius: 6px;
113	background: #2a2a2a;
114	color: #e0e0e0;
115	width: 100%;
116	}
117
118	input:focus, textarea:focus, select:focus {
119	outline: none;
120	border-color: #4a9eff;
121	box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.2);
122	}
123	```
124
125	### 4. localStorage Pattern
126
127	Always include:
128	```javascript
129	// localStorage Manager
130	const Storage = {
131	key: 'app-name-data',
132
133	save(data) {
134	try {
135	localStorage.setItem(this.key, JSON.stringify({
136	...data,
137	lastUpdated: new Date().toISOString()
138	}));
139	this.showFeedback('✅ Saved!');
140	} catch (error) {
141	this.showFeedback('❌ Save failed', true);
142	console.error('Save error:', error);
143	}
144	},
145
146	load() {
147	try {
148	const data = localStorage.getItem(this.key);
149	return data ? JSON.parse(data) : this.getDefaults();
150	} catch (error) {
151	console.error('Load error:', error);
152	return this.getDefaults();
153	}
154	},
155
156	getDefaults() {
157	return {
158	items: [],
159	settings: {},
160	created: new Date().toISOString()
161	};
162	},
163
164	showFeedback(message, isError = false) {
165	const feedback = document.createElement('div');
166	feedback.textContent = message;
167	feedback.style.cssText = `
168	position: fixed;
169	top: 20px;
170	right: 20px;
171	padding: 15px 25px;
172	background: ${isError ? '#ff4444' : '#44ff88'};
173	color: #000;
174	border-radius: 8px;
175	font-weight: 600;
176	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
177	z-index: 1000;
178	animation: slideIn 0.3s ease;
179	`;
180	document.body.appendChild(feedback);
181	setTimeout(() => feedback.remove(), 2000);
182	}
183	};
184
185	// Auto-save on any change
186	f

People who liked this also viewed

6 picks

Type

browser-app-creator

15stars7forks

View on GitHub

How to install browser-app-creator?

jackspace/claudeskillz/browser-app-creator

$npx -y skills add jackspace/ClaudeSkillz --skill browser-app-creator

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Browser App Creator
2
3	## Purpose
4
5	Creates production-ready single-file web applications that work offline with zero setup. Perfect for quick tools, dashboards, trackers, and prototypes.
6
7	For ADHD users: Large buttons (60px+), auto-save everything, visual feedback, zero configuration.
8	For SDAM users: All data persists in localStorage with timestamps.
9	For all users: Download and use immediately - no server, no build step, no dependencies.
10
11	## Activation Triggers
12
13	- User says: "create app", "build tool", "make dashboard", "create tracker"
14	- Requests for: habit tracker, todo list, timer, calculator, form, visualization
15	- Any request for a browser-based interface or tool
16
17	## Core Workflow
18
19	### 1. Understand Requirements
20
21	Ask clarifying questions only if absolutely necessary:
22
23	```javascript
24	{
25	app_type: "dashboard\|tracker\|form\|tool\|visualization",
26	primary_function: "What does the app do?",
27	data_to_track: ["What data needs to be stored?"],
28	key_actions: ["What can users do?"],
29	visual_requirements: "Any specific layout needs?"
30	}
31	```
32
33	### 2. Generate Single-File App
34
35	Template structure:
36	```html
37	<!DOCTYPE html>
38	<html lang="en">
39	<head>
40	<meta charset="UTF-8">
41	<meta name="viewport" content="width=device-width, initial-scale=1.0">
42	<title>{App Name}</title>
43	<style>
44	/* ADHD-Optimized Styles */
45	</style>
46	</head>
47	<body>
48	<!-- App UI -->
49	<script>
50	// App Logic + localStorage
51	</script>
52	</body>
53	</html>
54	```
55
56	### 3. ADHD Optimization Requirements
57
58	Required UI elements:
59	- ✅ Buttons: Minimum 60px height, high contrast
60	- ✅ Dark mode: Default theme (can toggle)
61	- ✅ Auto-save: Every action saves to localStorage
62	- ✅ Visual feedback: Success/error messages
63	- ✅ Mobile responsive: Works on all screen sizes
64	- ✅ Large touch targets: 44px minimum for mobile
65
66	CSS Requirements:
67	```css
68	/* ADHD-Optimized Base Styles */
69	* {
70	margin: 0;
71	padding: 0;
72	box-sizing: border-box;
73	}
74
75	body {
76	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
77	background: #1a1a1a;
78	color: #e0e0e0;
79	padding: 20px;
80	max-width: 1200px;
81	margin: 0 auto;
82	}
83
84	button {
85	min-height: 60px;
86	padding: 15px 30px;
87	font-size: 18px;
88	font-weight: 600;
89	border: none;
90	border-radius: 8px;
91	cursor: pointer;
92	transition: all 0.2s ease;
93	background: #4a9eff;
94	color: white;
95	}
96
97	button:hover {
98	background: #357abd;
99	transform: translateY(-2px);
100	box-shadow: 0 4px 12px rgba(74, 158, 255, 0.4);
101	}
102
103	button:active {
104	transform: translateY(0);
105	}
106
107	input, textarea, select {
108	min-height: 50px;
109	padding: 12px 15px;
110	font-size: 16px;
111	border: 2px solid #333;
112	border-radius: 6px;
113	background: #2a2a2a;
114	color: #e0e0e0;
115	width: 100%;
116	}
117
118	input:focus, textarea:focus, select:focus {
119	outline: none;
120	border-color: #4a9eff;
121	box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.2);
122	}
123	```
124
125	### 4. localStorage Pattern
126
127	Always include:
128	```javascript
129	// localStorage Manager
130	const Storage = {
131	key: 'app-name-data',
132
133	save(data) {
134	try {
135	localStorage.setItem(this.key, JSON.stringify({
136	...data,
137	lastUpdated: new Date().toISOString()
138	}));
139	this.showFeedback('✅ Saved!');
140	} catch (error) {
141	this.showFeedback('❌ Save failed', true);
142	console.error('Save error:', error);
143	}
144	},
145
146	load() {
147	try {
148	const data = localStorage.getItem(this.key);
149	return data ? JSON.parse(data) : this.getDefaults();
150	} catch (error) {
151	console.error('Load error:', error);
152	return this.getDefaults();
153	}
154	},
155
156	getDefaults() {
157	return {
158	items: [],
159	settings: {},
160	created: new Date().toISOString()
161	};
162	},
163
164	showFeedback(message, isError = false) {
165	const feedback = document.createElement('div');
166	feedback.textContent = message;
167	feedback.style.cssText = `
168	position: fixed;
169	top: 20px;
170	right: 20px;
171	padding: 15px 25px;
172	background: ${isError ? '#ff4444' : '#44ff88'};
173	color: #000;
174	border-radius: 8px;
175	font-weight: 600;
176	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
177	z-index: 1000;
178	animation: slideIn 0.3s ease;
179	`;
180	document.body.appendChild(feedback);
181	setTimeout(() => feedback.remove(), 2000);
182	}
183	};
184
185	// Auto-save on any change
186	f

People who liked this also viewed

6 picks

Type