Menu
Create self-contained HTML apps from user data (CSV, JSON, bank statements, APIs) with interactive tables and charts.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Find and act on emails over IMAP with Mail.app closed. Discover which accounts are logged in, search, read contents, download attachments, draft new mail, mark read/unread, archive, and move to trash.
Automate web interactions for bookings, form submissions, and purchases using ARIA-based Safari control.
View and manage calendar events with smart scheduling defaults.
Look up, search, and create contacts in Contacts.app.
Organize the ~/Downloads folder by categorizing files and subdirectories into subfolders using AI-driven analysis.
Generate images from text descriptions using models with native image generation (e.g. Gemini).
| id | data_app_creator |
| name | Data App Creator |
| description | Create self-contained HTML apps from user data (CSV, JSON, bank statements, APIs) with interactive tables and charts. |
| apps | [] |
| tasks | ["write_file","read_file","run_shell_command","get_preferences","spotlight_search","web_fetch","fetch_url","web_search"] |
| essential_tasks | [] |
| examples | ["Create a dashboard from my bank statement CSV","Build an app to explore this spending data","Make a visualization of my tax export","Create a weather dashboard using a public API","Build a data viewer for this CSV file","Create an interactive chart from this data"] |
| safe_defaults | {"embed_data":true,"auto_open":true} |
| confirm_before_write | ["embed sensitive financial data","embed API keys in client-side code"] |
| requires_permissions | [] |
Use this skill when the user wants a persistent, visual app they can open and interact with in a browser. Examples: dashboards, data explorers, chart viewers, interactive tables.
Do NOT use this skill when the user just wants quick analysis or a one-off answer ("what's my average spending?"). For that, use Python or shell commands directly and report the result.
Rule of thumb: If the user says "create", "build", "make", "dashboard", or "app" — use this skill. If they say "analyze", "tell me", "what is" — just answer the question.
spotlight_search to find files, read_file to load them, or web_fetch/fetch_url for API dataapps well-known directory under a descriptive subfolder: <apps-dir>/<descriptive-name>/index.htmlopen -a Safari <path>Always use get_preferences to resolve the apps directory path — never hardcode ~/Documents/Apps.
Each app lives in its own subfolder under the apps well-known directory:
~/Documents/Apps/
bank-statement-2024/
index.html
weather-dashboard/
index.html
data.json (only for large datasets)
index.html as the entry pointCSV files — embed as a JS string constant, parse client-side with PapaParse:
<script src="https://cdn.jsdelivr.net/npm/papaparse@5/papaparse.min.js"></script>
<script>
const csvData = `...embedded CSV...`;
const parsed = Papa.parse(csvData, { header: true, dynamicTyping: true });
</script>
JSON files — embed directly as a JS object literal:
<script>
const data = [ ...embedded JSON... ];
</script>
API data — use client-side fetch() with loading states and error handling:
<script>
async function loadData() {
showLoading();
try {
const res = await fetch('https://api.example.com/data');
const data = await res.json();
renderDashboard(data);
} catch (err) {
showError('Failed to load data. Check your connection and try again.');
}
}
</script>
Large data (>500KB) — save as a separate data.json in the same folder, fetch it via a relative path:
<script>
fetch('data.json').then(r => r.json()).then(renderDashboard);
</script>
Every generated app should follow this base skeleton:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>App Title</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
background: #f5f5f7;
color: #1d1d1f;
padding: 24px;
line-height: 1.5;
}
@media (prefers-color-scheme: dark) {
body { background: #1d1d1f; color: #f5f5f7; }
.card { background: #2c2c2e; }
}
h1 { font-size: 28px; font-weight: 700; margin-bottom: 24px; }
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.card {
background: #fff;
border-radius: 12px;
padding: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.card h2 { font-size: 14px; color: #86868b; font-weight: 500; margin-bottom: 4px; }
.card .value { font-size: 32px; font-weight: 700; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #e5e5ea; }
th { font-weight: 600; font-size: 13px; color: #86868b; text-transform: uppercase; letter-spacing: 0.5px; }
@media (prefers-color-scheme: dark) {
th, td { border-color: #3a3a3c; }
}
</style>
</head>
<body>
<h1>App Title</h1>
<div class="grid">
<!-- Summary cards -->
</div>
<!-- Charts -->
<!-- Detail table -->
<script>
// Data and rendering logic
</script>
</body>
</html>
Layout pattern: Summary cards at top → charts in the middle → detail table at the bottom.
Load from CDN — keeps apps self-contained with no build step:
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
header: true and dynamicTyping: true.
<script src="https://cdn.jsdelivr.net/npm/papaparse@5/papaparse.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/plotly.js@2/dist/plotly.min.js"></script>
Financial dashboard (bank statements, expense exports):
Generic CSV explorer (any tabular data):
API dashboard (weather, stocks, public APIs):
fetch() with timeout handlingHealth data viewer (Apple Health exports, fitness data):
-apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif#f5f5f7, white cards #fff, dark text #1d1d1f, muted labels #86868b@media (prefers-color-scheme: dark) with inverted backgrounds and lighter textgrid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) for card layoutsbox-shadow: 0 1px 3px rgba(0,0,0,0.08) on cardsUse these heuristics to pick the right visualization automatically:
****1234)<, >, &, ", ' in user data strings)