菜单
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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
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".
Analyzes codebases to generate comprehensive documentation including structure, languages, frameworks, dependencies, design patterns, and technical debt. Use when user says "analyze repository", "understand codebase", "document project", or when exploring unfamiliar code.
Generates production-ready API clients with TypeScript types, retry logic, rate limiting, authentication (OAuth, API keys), error handling, and mock responses. Use when user says "integrate API", "API client", "connect to service", or requests third-party service integration.
Analyzes errors, searches past solutions in memory, provides immediate fixes with code examples, and saves solutions for future reference. Use when user says "debug this", "fix this error", "why is this failing", or when error messages appear like TypeError, ECONNREFUSED, CORS, 404, 500, etc.
Manages permanent memory storage for decisions, blockers, context, preferences, and procedures. Use when user says "remember", "save this decision", "what did we decide", "recall", "search memories", "any blockers", or when making important architectural decisions. Provides SDAM compensation through external memory.
Restores full context when user says "hi-ai" or starts a new conversation. Searches project files, loads memory indexes, reads session state, and creates visual dashboard showing current project, recent decisions, active blockers, and quick actions. Use when user says "hi-ai", "continue", "restore context", or starts a fresh conversation.
| name | browser-app-creator |
| description | 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. |
| priority | HIGH |
| conflicts_with | ["rapid-prototyper"] |
| use_when | ["User wants a COMPLETE, POLISHED web application","User wants ADHD optimization (60px+ buttons, auto-save, dark mode)","User wants something that WORKS OFFLINE","User wants a DOWNLOADABLE single HTML file","User says \"app\", \"tool\", \"dashboard\", \"tracker\""] |
| avoid_when | ["User wants QUICK PROTOTYPE only","User says \"simple\", \"basic\", \"test idea\""] |
Creates production-ready single-file web applications that work offline with zero setup. Perfect for quick tools, dashboards, trackers, and prototypes.
For ADHD users: Large buttons (60px+), auto-save everything, visual feedback, zero configuration. For SDAM users: All data persists in localStorage with timestamps. For all users: Download and use immediately - no server, no build step, no dependencies.
Ask clarifying questions only if absolutely necessary:
{
app_type: "dashboard|tracker|form|tool|visualization",
primary_function: "What does the app do?",
data_to_track: ["What data needs to be stored?"],
key_actions: ["What can users do?"],
visual_requirements: "Any specific layout needs?"
}
Template structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{App Name}</title>
<style>
/* ADHD-Optimized Styles */
</style>
</head>
<body>
<!-- App UI -->
<script>
// App Logic + localStorage
</script>
</body>
</html>
Required UI elements:
CSS Requirements:
/* ADHD-Optimized Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #1a1a1a;
color: #e0e0e0;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
button {
min-height: 60px;
padding: 15px 30px;
font-size: 18px;
font-weight: 600;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
background: #4a9eff;
color: white;
}
button:hover {
background: #357abd;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(74, 158, 255, 0.4);
}
button:active {
transform: translateY(0);
}
input, textarea, select {
min-height: 50px;
padding: 12px 15px;
font-size: 16px;
border: 2px solid #333;
border-radius: 6px;
background: #2a2a2a;
color: #e0e0e0;
width: 100%;
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: #4a9eff;
box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.2);
}
Always include:
// localStorage Manager
const Storage = {
key: 'app-name-data',
save(data) {
try {
localStorage.setItem(this.key, JSON.stringify({
...data,
lastUpdated: new Date().toISOString()
}));
this.showFeedback('✅ Saved!');
} catch (error) {
this.showFeedback('❌ Save failed', true);
console.error('Save error:', error);
}
},
load() {
try {
const data = localStorage.getItem(this.key);
return data ? JSON.parse(data) : this.getDefaults();
} catch (error) {
console.error('Load error:', error);
return this.getDefaults();
}
},
getDefaults() {
return {
items: [],
settings: {},
created: new Date().toISOString()
};
},
showFeedback(message, isError = false) {
const feedback = document.createElement('div');
feedback.textContent = message;
feedback.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
padding: 15px 25px;
background: ${isError ? '#ff4444' : '#44ff88'};
color: #000;
border-radius: 8px;
font-weight: 600;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
z-index: 1000;
animation: slideIn 0.3s ease;
`;
document.body.appendChild(feedback);
setTimeout(() => feedback.remove(), 2000);
}
};
// Auto-save on any change
function autoSave(data) {
Storage.save(data);
}
// Load on page load
let appData = Storage.load();
See templates.md for complete examples of:
Format:
✅ **{App Name}** complete!
**Features**:
- {Feature 1}
- {Feature 2}
- {Feature 3}
**Usage**:
1. Save the file as `{app-name}.html`
2. Open in any browser
3. Works offline
4. Data auto-saves to your browser
**Customization**:
- Colors: Edit the CSS variables at the top
- Features: Modify the JavaScript section
- Layout: Adjust the HTML structure
Then provide the complete HTML file.
Purpose: Display metrics, status, and key information Elements: Cards, charts, progress bars, status indicators Data: Real-time or static metrics Example: Project status dashboard, analytics viewer
Purpose: Record and monitor recurring items Elements: Add/remove items, checkboxes, timestamps Data: List of items with status and dates Example: Habit tracker, task list, mood journal
Purpose: Collect and validate user input Elements: Input fields, validation, submit button Data: Form submissions with timestamps Example: Survey, calculator, data entry tool
Purpose: Display data visually Elements: Charts, graphs, timelines Data: Visual representation of datasets Example: Chart builder, timeline viewer, graph tool
Purpose: Perform specific tasks or calculations Elements: Controls, real-time updates, results Data: Temporary or persistent tool state Example: Timer, converter, game, simulator
function toggleTheme() {
const currentTheme = document.body.dataset.theme || 'dark';
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
document.body.dataset.theme = newTheme;
localStorage.setItem('theme-preference', newTheme);
}
// Load saved theme
document.body.dataset.theme = localStorage.getItem('theme-preference') || 'dark';
function exportData() {
const data = Storage.load();
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `app-data-${Date.now()}.json`;
a.click();
URL.revokeObjectURL(url);
}
function importData() {
const input = document.createElement('input');
input.type = 'file';
input.accept = 'application/json';
input.onchange = (e) => {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = (event) => {
try {
const data = JSON.parse(event.target.result);
Storage.save(data);
location.reload();
} catch (error) {
alert('Invalid file format');
}
};
reader.readAsText(file);
};
input.click();
}
async function notifyUser(title, body) {
if ('Notification' in window && Notification.permission === 'granted') {
new Notification(title, { body });
} else if (Notification.permission !== 'denied') {
const permission = await Notification.requestPermission();
if (permission === 'granted') {
new Notification(title, { body });
}
}
}
See styling.md for:
If app needs backend:
browser-app-creator → Creates frontend
rapid-prototyper → Creates backend API
Result: Full-stack app
Save app decisions:
remember: Created habit tracker with localStorage
Type: PROCEDURE
Tags: browser-app, localStorage, tracking
If app has bugs:
Automatically invokes error-debugger for:
- JavaScript errors
- localStorage issues
- Browser compatibility
Before delivering, verify:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Habit Tracker</title>
<style>
/* Complete styles here */
</style>
</head>
<body>
<h1>Habit Tracker</h1>
<div id="app">
<!-- App UI here -->
</div>
<script>
// Complete logic here
</script>
</body>
</html>
✅ App works immediately after opening ✅ Data persists across browser sessions ✅ ADHD-optimized (large buttons, auto-save) ✅ No setup or installation required ✅ Mobile-friendly ✅ Professional appearance ✅ Intuitive to use ✅ Handles errors gracefully
All created apps should be saved to: /home/toowired/.claude-artifacts/
| App Type | Key Feature | localStorage Structure |
|---|---|---|
| Tracker | List + checkboxes | { items: [...], dates: {...} } |
| Dashboard | Cards + metrics | { metrics: {...}, updated: "" } |
| Form | Input + validation | { submissions: [...] } |
| Tool | Controls + results | { settings: {...}, history: [...] } |