aiatelie/ai-atelie

# Animated video

Timeline-based motion design — animated explainer-style HTML artifacts where time advances and elements enter or exit on a schedule. Distinct from interactive prototypes (which are state-driven, not time-driven) and from CSS micro-interactions (which decorate a static layout instead of carrying it).

## When to use this skill

- The user asks for "an animated explainer", "a video", "an animation", "a sequence", "a kinetic title".
- The design's value is mostly in the *timing* (an idea unfolding over seconds, choreographed entries, scene transitions).
- The output will end up exported as a video clip (often via the `export` skill's video capability — MP4 / WebM / Lottie).
- 1920×1080 hero animations, lower-third graphics for video editing, intro/outro sequences, animated logos.

## When this skill does NOT apply

- **Static layout with hover/scroll micro-interactions** → use CSS transitions inside an interactive prototype (see [`interactive-prototype`](../interactive-prototype/SKILL.md)) or directly in the page's CSS.

# Create design system

> ⚠<U+FE0F> **STUB** — this is a working theory of the skill body. Replace as the implementation is refined.

## What we know about it

- It's the skill to invoke when the user asks for a design system or UI kit.
- The skill pairs with an asset-registration mechanism that groups outputs into: **Type, Colors, Spacing, Components, Brand** — that's the section taxonomy this skill produces against.

## Working theory of the body (to be replaced)

1. Ask questions (typography direction, palette mood, scale, density, what components are in scope).
2. Produce a tokens file (`tokens.css` or similar) with CSS custom properties for: type scale, color ramps, spacing scale, radii, shadows.
3. Produce one HTML preview file per group (Type, Colors, Spacing, Components, Brand), each registered with `register_assets({ asset, group, viewport })`.

# Aesthetic presets

A menu of eleven named aesthetic directions, each with concrete CSS hooks, font roles, and motion vocabulary. Use this skill when the user asks for "something distinctive" without naming the direction, or when `frontend-design` fired and you need to pin down which direction to execute.

## How to use

1. **Pick one preset** that fits the brief. State the choice in one sentence to the user before writing code. ("Going with brutalist — heavy black borders, cold neutrals, monospace display.")
2. **Don't blend.** Two presets at once dilutes both. If the brief seems to mix, ask which dominant.
3. **Execute the recipe.** Each preset below names the type vocabulary, palette spine, motion register, and detail moves. Apply them — don't shop around.
4. **Add one signature.** The list gives you the floor; pick one detail (a custom cursor, a specific micro-interaction, an unexpected proportion) that's yours.

## The presets

### 1. Swiss / Bauhaus minimalism

# Design critique

A structured audit pass run AFTER the design is generated, BEFORE declaring the work done. The goal: catch the recognizable AI-default patterns (purple gradients, Tailwind indigo, emoji-as-icons, container soup) before the user has to call them out.

## When to use

Run this skill at the end of any non-trivial design generation:
- After `frontend-design` produces a new page or component
- After applying an aesthetic preset and before showing the result
- When the user says "audit this", "is this slop?", "make it less generic"
- Before any final export from the canvas

Skip when:
- The design is a tiny tweak (single property, copy edit) — not worth the audit overhead

# DESIGN.md author

Read, write, or update a `DESIGN.md` at the project root. `DESIGN.md` is the Google-Labs-published cross-tool spec for documenting a design system: tokens, typography, components, motion, do's-and-don'ts. When present, it grounds every subsequent prompt in this project — the agent reads it as project-context before generating UI.

## When to use

- The user asks to "set up the design system", "create a DESIGN.md", "import this design system", "capture our look".
- A project doesn't have a `DESIGN.md` yet and the user wants to commit to a direction once instead of re-deciding per prompt.
- The user wants to import a DESIGN.md from elsewhere (a Stitch export, a community gallery, another project).
- The user wants to update tokens, typography rules, or component specs declared in the project's existing `DESIGN.md`.

Skip when:
- The user is generating a one-off design — `DESIGN.md` is for projects with continuity, not single artifacts.
- The change is implementation, not specification. (Component code changes go through `frontend-design`; the DESIGN.md only changes when the *spec* shifts.)

# Export

The user wants to take an element from the active design canvas and save it for use in another tool — usually a video editor (DaVinci Resolve, FCP, Premiere, CapCut), sometimes a presentation tool. Pick the right format, call the matching capability, **then write a single short sentence**.

## Critical: do not narrate file creation

The host renders an **ArtifactCard** inline in the chat for every successful export — thumbnail + filename + size + Download / Preview / Discuss buttons. You don't need to tell the user what you saved or where it landed; the card already shows that. Your reply is a *one-sentence header* explaining the choice, not a status report.

**Bad** — narrates what the user can already see:
> I've saved the cat banner as a PNG file at exports/cat-banner.png. The file is 2.3MB and 3840×2160 pixels with a transparent background. You can download it using the link.

**Good** — confirms intent + invites iteration:
> Cat banner as a 2× transparent PNG — should work straight on a Resolve overlay track.

# Frontend design

Build production-grade frontend interfaces with a bold, distinctive point of view. The user provides requirements — a component, a page, an interactive experience — and the job is to design and build something that's not just competent, but striking and memorable.

## When to use this skill

Use this when there's no existing brand or design system to defer to. Without explicit aesthetic direction the model converges on the same look every time: white background, purple gradient, Inter, rounded cards, system-blue accent. Break that default by committing to a clear direction up front and executing it with precision.

If the user has provided a `DESIGN.md` at the project root, follow that direction first. This skill is the fallback when no spec is present.

## Commit before coding

Before writing any code, decide:

# Handoff to Claude Code

> ⚠<U+FE0F> **STUB** — this is a working theory of the skill body. Replace as the implementation is refined.

## What it does

Packages the current design + all its supporting files into a bundle a developer can drop into Claude Code (or any IDE/agent) to implement against.

## Working theory of the body (to be replaced)

1. Inventory: which HTML files, components, tokens, and assets are part of the deliverable.
2. Generate a `HANDOFF.md` at the project root summarizing:
   - Scope of the design
   - Tokens / variables in use

# Interactive prototype

A clickable, hi-fi prototype of a product or flow — not a wireframe, not a static mock. The user can navigate, toggle states, and feel the interaction. Use this whenever the design has flows, multi-screen states, or many-option situations.

## When to use this skill

- The user asks for "an app", "a flow", "a multi-step thing", "let me see it working", "let me click around".
- The design has stateful behavior (toggles, modals, multi-screen navigation, form validation flows).
- There are 3+ screens that connect.
- The user needs to demo interactions to a stakeholder.

## When this skill does NOT apply

- **Single static surface** (a banner, a poster, a thumbnail, a single-screen marketing page) → that's purely visual; use the existing DesignCanvas with one or more `<DCArtboard>` instead.

# Tweaks

The user can toggle **Tweaks** on/off from the toolbar. When on, show additional in-page controls that let the user tweak aspects of the design — colors, fonts, spacing, copy, layout variants, feature flags, whatever makes sense. **You design the tweaks UI**; it lives inside the prototype. Title your panel/window **"Tweaks"** so the naming matches the toolbar toggle.

## Protocol

- **Order matters: register the listener before you announce availability.** If you post `__edit_mode_available` first, the host's activate message can land before your handler exists and the toggle silently does nothing.

- **First**, register a `message` listener on `window` that handles:
  `{type: '__activate_edit_mode'}` → show your Tweaks panel
  `{type: '__deactivate_edit_mode'}` → hide it
- **Then** — only once that listener is live — call:
  `window.parent.postMessage({type: '__edit_mode_available'}, '*')`
  This makes the toolbar toggle appear.

# Save as standalone HTML

> ⚠<U+FE0F> **STUB** — this is a working theory of the skill body. The wrapped tool (`super_inline_html`) gives the contract.

## What it does

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.

## Required input

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:

- as a splash while the bundle unpacks, and
- as the no-JS fallback.

# Send to Canva

> ⚠<U+FE0F> **STUB** — this is a working theory of the skill body. The supporting tool `get_public_file_url` returns a short-lived (~1h) public URL for project files, useful when an external service (e.g. Canva import) needs to fetch a project file by URL.

## What it does

Hands the current design off to Canva as an editable design.

## Working theory of the body (to be replaced)

1. Identify the target HTML file (deck or design).
2. Get a public URL: `get_public_file_url({ project_relative_file_path })`.
3. Construct/open a Canva import URL pointing at it (the actual import endpoint is Canva-side; needs verification).
4. Show the user a download/open card.