메뉴
Create self-contained HTML apps from user data (CSV, JSON, bank statements, APIs) with interactive tables and charts.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
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)