Creates complete single-file HTML/CSS/JS web apps with localStorage persistence, ADHD-optimized UI (60px+ buttons), dark mode, and offline functionality. Use when the user says "create app", "build tool", "make dashboard", or requests any browser-based interface.
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:
~/.claude-artifacts/%USERPROFILE%\.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: [...] } |
Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer