browser-app-creator
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.
What this skill does
# Browser App Creator
## Purpose
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.
## Activation Triggers
- User says: "create app", "build tool", "make dashboard", "create tracker"
- Requests for: habit tracker, todo list, timer, calculator, form, visualization
- Any request for a browser-based interface or tool
## Core Workflow
### 1. Understand Requirements
Ask clarifying questions only if absolutely necessary:
```javascript
{
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?"
}
```
### 2. Generate Single-File App
**Template structure**:
```html
<!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>
```
### 3. ADHD Optimization Requirements
**Required UI elements**:
- ✅ **Buttons**: Minimum 60px height, high contrast
- ✅ **Dark mode**: Default theme (can toggle)
- ✅ **Auto-save**: Every action saves to localStorage
- ✅ **Visual feedback**: Success/error messages
- ✅ **Mobile responsive**: Works on all screen sizes
- ✅ **Large touch targets**: 44px minimum for mobile
**CSS Requirements**:
```css
/* 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);
}
```
### 4. localStorage Pattern
**Always include**:
```javascript
// 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();
```
### 5. App Templates
See [templates.md](templates.md) for complete examples of:
- **Dashboard**: Metrics, charts, status indicators
- **Tracker**: Habits, tasks, progress
- **Form**: Data entry, validation, submission
- **Tool**: Calculators, converters, utilities
- **Visualization**: Charts, graphs, timelines
### 6. Deliver the App
**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.
## Common App Types
### Dashboard
**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
### Tracker
**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
### Form/Input
**Purpose**: Collect and validate user input
**Elements**: Input fields, validation, submit button
**Data**: Form submissions with timestamps
**Example**: Survey, calculator, data entry tool
### Visualization
**Purpose**: Display data visually
**Elements**: Charts, graphs, timelines
**Data**: Visual representation of datasets
**Example**: Chart builder, timeline viewer, graph tool
### Interactive Tool
**Purpose**: Perform specific tasks or calculations
**Elements**: Controls, real-time updates, results
**Data**: Temporary or persistent tool state
**Example**: Timer, converter, game, simulator
## Advanced Features
### Dark/Light Mode Toggle
```javascript
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';
```
### Export Data
```javascript
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);
}
```
### Import Data
```javascript
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();
}
```
### Browser Notifications
```javascript
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 });
}
}
}
```
## Styling Guidelines
See [styling.md](styling.Related in Design
contribute
IncludedLocal-only OSS contribution command center. Auto-refreshes the user's in-flight PR and issue state on invoke so conversations start with full context — no need to brief Claude on what's in flight. Helps the user find issues to contribute to on GitHub, builds per-repo dossiers of what each upstream expects (CLA, DCO, branch convention, AI policy, draft-first, review bots, issue templates), runs deterministic gates before any external action so AI-assisted contributions don't reach maintainers as slop. State is markdown-only: candidate files at ~/.contribute-system/candidates/, repo dossiers at ~/.contribute-system/research/, append-only event log at ~/.contribute-system/log.jsonl. No database, no cloud calls. Use when the user asks about their PRs / issues / contributions, wants to find new work to take on, claim an issue, build/refresh a repo's dossier, or draft a Design Issue or PR. Trigger with "/contribute", "what's my PR status", "find a contribution", "claim issue X", "draft a Design Issue for Y", "refresh dossier for Z".
architectural-analysis
IncludedUser-triggered deep architectural analysis of a codebase or scoped subtree across eight modes — information architecture, data flow, integration points, UI surfaces, interaction patterns, data model, control flow, and failure modes. This skill should be used when the user asks to "diagram this codebase," "map the architecture," "show the data flow," "give me an ERD," "trace control flow," "find the integration points," "verify the layout pattern," "audit the UX architecture," or any similar request whose primary deliverable is mermaid diagrams plus cited reports under docs/architecture/. Dispatches haiku/sonnet sub-agents in parallel for per-mode exploration, then verifies every citation mechanically before any node lands in a diagram. Not for one-off prose explanations of code (use code-explanation) or for high-level system design from scratch (use system-design).
mcp
IncludedModel Context Protocol (MCP) server development and tool management. Languages: Python, TypeScript. Capabilities: build MCP servers, integrate external APIs, discover/execute MCP tools, manage multi-server configs, design agent-centric tools. Actions: create, build, integrate, discover, execute, configure MCP servers/tools. Keywords: MCP, Model Context Protocol, MCP server, MCP tool, stdio transport, SSE transport, tool discovery, resource provider, prompt template, external API integration, Gemini CLI MCP, Claude MCP, agent tools, tool execution, server config. Use when: building MCP servers, integrating external APIs as MCP tools, discovering available MCP tools, executing MCP capabilities, configuring multi-server setups, designing tools for AI agents.
react-native-skia
IncludedDesign, build, debug, and optimise high-polish animated graphics in React Native or Expo using @shopify/react-native-skia, Reanimated, and Gesture Handler. Use when the user wants canvas-driven UI, shaders, paths, rich text, image filters, sprite fields, Skottie, video frames, snapshots, web CanvasKit setup, or performance tuning for custom motion-heavy elements such as loaders, hero art, cards, charts, progress indicators, particle systems, or gesture-driven surfaces. Also use when the user asks for fluid, glow, glass, blob, parallax, 60fps/120fps, or GPU-friendly animated effects in React Native, even if they do not explicitly say "Skia". Do not use for ordinary form/layout work with standard views.
plaid
IncludedProduct Led AI Development — guides founders from idea to launched product. Six capabilities: Idea (discover a product idea), Validate (pressure-test the idea against fatal flaws, problem reality, competition, and 2-week MVP feasibility), Plan (vision intake + document generation), Design (translate image references into a design.md spec), Launch (go-to-market strategy), and Build (roadmap execution). Use when someone says "PLAID", "plaid idea", "help me find an idea", "product idea", "idea from my business", "idea from my expertise", "plaid validate", "validate my idea", "pressure-test", "is this idea good", "find fatal flaws", "validate the problem", "plan a product", "define my vision", "generate a PRD", "product strategy", "plaid design", "design from image", "translate image to design", "create design.md", "extract design tokens", "plaid launch", "go-to-market", "launch plan", "GTM strategy", "launch playbook", "plaid build", "build the app", "start building", or "execute the roadmap".
nextjs-framer-motion-animations
IncludedAdds production-safe Motion for React or Framer Motion animations to Next.js apps, including reveal, hover and tap micro-interactions, whileInView, stagger, AnimatePresence, layout and layoutId transitions, reorder, scroll-linked UI, and lightweight route-content transitions. Use when the user asks to add, refactor, or debug Motion or Framer Motion in App Router or Pages Router codebases, especially around server/client boundaries, reduced motion, LazyMotion, bundle size, hydration, or route transitions. Avoid for GSAP-style timelines, WebGL or 3D scenes, heavy scroll storytelling, or CSS-only effects unless Motion is explicitly requested.