메뉴
Single self-contained file that works offline
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Export a selected element from the canvas as PNG, JPEG, OGraf bundle, Lottie, or video. Saves to the project's exports/ folder; the chat renders the result inline as an artifact card.
Keep the canvas surface coherent across its three places — the canonical starter at `mcp/starters/DesignCanvas.jsx`, the byte-identical demo copy at `web/projects/demo/design-canvas.jsx`, and the host-side wiring in `web/src/lib/tweakBridge.ts` plus `mcp/CANVAS_PROTOCOL.md`. Use whenever the diff touches any of those files, or when the user says "fix the canvas", "update DesignCanvas", "tweak the design canvas", "the canvas isn't working in new projects", or anything similar. Without this rule, fixes land in one place and silently miss the other — the demo project tests stale code, or new projects get content that doesn't match what's been verified.
Run and triage AI Atelie's Critical User Journey (CUJ) for every PR — the single end-to-end test that proves a user can open the app, create a project, drive the Claude Code agent, and see the canvas render. Before running, gate by inspecting the PR diff for changes that plausibly affect the journey (routes, onboarding, canvas, chat, selectors). On failure, walk a five-step triage to decide "broken feature" vs "stale test" before touching either. Use whenever the user says "run the CUJ", "validate the canonical flow", "ship-readiness check", or before approving any PR.
Aesthetic and convention guide for editing AI Atelie's own chrome — the editor, canvas frame, toolbars, sidebars, dialogs, settings, projects screen. Use whenever the diff touches `web/src/` (especially `*.module.css`, `index.css`, `styles/themes.css`, `lib/theme.ts`) or any user-facing component on the host app. Opts into the canonical craft rulebook at `atelier/` and layers the host-app-specific posture (two-axis theme×design system, warm-cream + Claude rust, restraint over flourish) on top. NOT for user-generated designs inside the canvas — those use the product skill at `skills/frontend-design/`.
Run AI Atelie's journey suite and inject inline-rendering evidence (per-journey video + screenshot, in a 4-column markdown table) into the current PR's body. Use whenever the user says "post evidence", "run journeys", "update PR with videos", or after `ship-task` opens a PR. Wraps `bun run journeys`; idempotent — re-runs replace the evidence block instead of appending.
Take an AI Atelie task — issue, ticket, or ad-hoc ask — all the way from description to merged-ready PR. Use whenever the user says "implement X and ship it", "work on issue
| name | save-as-standalone-html |
| display | Save as standalone HTML |
| description | Single self-contained file that works offline |
| body_status | stub |
| sources | [] |
⚠️ STUB — this is a working theory of the skill body. The wrapped tool (
super_inline_html) gives the contract.
Bundles an HTML file and all its referenced assets (images, CSS, JS, fonts, ext-resource-dependency meta tags) into a single self-contained HTML file that works offline. Runs a deterministic browser-side bundler.
The source HTML must contain a <template id="__bundler_thumbnail"> with a simple, colorful, iconographic SVG preview (30% padding on each side). This is shown:
A simple icon, glyph, or 1–2 letters is enough.
<template id="__bundler_thumbnail"> if it's not there. Keep it minimal.super_inline_html({ input_path, output_path }).present_fs_item_for_download.