メニュー
Builds premium React artifacts and publishes them to aired.sh as shareable single-file HTML. Anti-slop design system with shadcn/ui + Framer Motion.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | aired-artifact |
| description | Builds premium React artifacts and publishes them to aired.sh as shareable single-file HTML. Anti-slop design system with shadcn/ui + Framer Motion. |
| when_to_use | Use when asked to create dashboards, reports, presentations, interactive tools, landing pages, or shareable HTML artifacts. Triggers: 'build an artifact', 'create a dashboard', 'publish to aired', 'make a report', 'interactive tool'. |
| argument-hint | <project-name or description> |
| allowed-tools | ["Bash(bash:*)","Bash(npm:*)","Bash(npx:*)","Bash(node:*)","Bash(aired:*)","Bash(cd:*)","Bash(ls:*)","Read","Write","Edit","Glob","Grep"] |
Build premium React artifacts and publish them to shareable URLs on aired.sh.
Stack: React 18 + TypeScript + Tailwind + shadcn/ui + Framer Motion, bundled to single HTML.
bash scripts/init-artifact.sh <project-name>
cd <project-name>
Success criteria: package.json exists, npm run dev starts without errors, src/App.tsx renders the starter template.
Before writing code, decide: what's the ONE thing someone will remember about this artifact? A dramatic typography treatment? An unusual layout? A rich data visualization? Say it out loud, then build toward it.
Success criteria: One sentence describing the artifact's signature moment. Written down, not just thought.
Write React components in src/ — use shadcn/ui components from @/components/ui/, Framer Motion for animations, Tailwind for styling. Follow the design system in references/design-system.md.
Read references/anti-slop.md before writing any UI code — it has the ban list.
Success criteria: Components render without errors. No banned patterns from anti-slop list. Typography uses display + body + mono hierarchy.
npm run dev
Run through the pre-output checklist before proceeding:
main, section, article, header)prefers-reduced-motion media query present@media print) includedSuccess criteria: All checklist items pass. Dev server runs clean with zero console errors.
bash scripts/bundle-artifact.sh
Verify before publishing:
ls -lh bundle.html # Should be 200-800KB. Over 1MB = something wrong.
If bundle is too large, check for unnecessary dependencies or unoptimized images.
Success criteria: bundle.html exists and is under 1MB. Opening it directly in a browser renders correctly.
bash scripts/publish-artifact.sh
Parse the JSON output for the URL. Share it with the user.
Success criteria: JSON output contains a URL. The URL loads correctly in a browser.
Edit source, re-bundle, then:
aired update <id> bundle.html --json
The aired CLI stores update tokens automatically.
Read references/design-system.md for full tokens. Key rules:
font-weight: 700, letter-spacing: -0.03em, line-height: 1.08font-weight: 400, letter-spacing: -0.011em, line-height: 1.6#0A0A0A bg, warm gray surfaces#FAFAF9 bg, crisp surfacespy-24 minimum — let it breathecubic-bezier(0.32, 0.72, 0, 1) — the skill's signature curvetranslateY(-2px) + shadow increase + scale(0.98) on activeprefers-reduced-motion media queryRead references/anti-slop.md for the full ban list. Critical bans:
#000000 or #FFFFFF — always tintlinear or ease-in-out transitionsbackdrop-filter: blur() on scrolling content (GPU killer)Read references/component-patterns.md for implementation details.
Key patterns:
rounded-full, hover lift, nested icon circlestext-[10px] uppercase tracking-[0.2em])Read references/artifact-types.md for type-specific guidance:
Users can create .aired/theme.css in their project to override design tokens:
:root {
--accent: oklch(0.65 0.2 145);
--font-display: 'Clash Display', sans-serif;
}
The init script creates this file with all tokens documented. Import it in src/index.css.
motion.div with initial, animate, transition propsChart component (@/components/ui/chart) — wraps Recharts with theme-aware colors and provides ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent. For raw Recharts, import from recharts.index.html — they inline during bundling<link> tags (Google Fonts CDN) before html-inline runs, then re-injects them via Node post-processing. If you add other external resources, they'll get stripped too — add them back in the post-process step of bundle-artifact.sh.@ path alias breaks in Parcel: Parcel doesn't read tsconfig.json paths natively. The bundle script installs parcel-resolver-tspaths and creates .parcelrc to handle this. If you see "Cannot resolve @/components/..." during bundling, check that .parcelrc exists.hsl() wrapper (e.g., --background: 0 0% 4%). In Tailwind, reference as hsl(var(--background)). Don't add hsl() inside the CSS variable itself — shadcn/ui expects unwrapped values.Auto-generate agent-ready CLIs from any codebase in any language. Reads your project's source code — MCP servers, OpenAPI specs, Next.js, Express, Flask, Go, Rails, gRPC, GraphQL, or any API — and generates a complete TypeScript CLI with --json output, dual TTY/JSON mode, auth profiles, doctor command, and esbuild bundling. Use when asked to 'generate a CLI', 'create a CLI for this project', 'make this agent-ready', or 'add a CLI'.
Simulates how 12 diverse personas react to an announcement over 3 interactive rounds — each persona reads others' reactions and shifts opinions, surfacing emergent camps and objections no single prompt catches. Spawns 12 parallel agents with web search access. Use before publishing pricing changes, product launches, layoffs, policy shifts, or any high-stakes message. Triggers on '/simulate', 'how will people react', 'test this announcement', 'honest feedback on this', 'simulate reaction'.
Estimates how long a task will take with AI. Breaks the task into sub-tasks and gives realistic AI-assisted time estimates based on calibrated research data. Triggers on 'how long will this take', 'estimate this', 'scope this feature', 'what's the ETA', or before starting a project to set expectations.