design-optionslisted

Run a design round the way it works - the owner says what they want or what looks wrong, the agent brainstorms three to five ideas in one message, the owner picks which to build, the agent builds them as real components on a throwaway demo route (`pnpm kit demo new`) in the section's real frame with the page's real copy on the site's own theme, the current version last, the owner looks on the dev server and picks by letter or edits the pick in words, and on the owner's word the winner becomes the section, generic pieces leave for `src/components/ui/`, the route and the losers go (`pnpm kit demo clean`). Use when the owner asks for a design, says a section "looks empty", "looks like a template", asks for options, variants, alternatives, "show me a few", or before building any element whose look is not yet decided; static candidates (a mark, a palette, a type sample) go on a sheet (`pnpm kit sheet`) inside the same round.
HKamkar/agentic-cms · ★ 2 · Web & Frontend · score 71

Install: claude install-skill HKamkar/agentic-cms

# Design options — the round A design decision is the owner's; the round makes it a pick, not a conversation. Six steps, three stops, and the candidates are always real: components on the branch, in the section's real frame, with the page's real copy, on the site's own theme (the demo route renders inside the site's layout: its tokens, its chrome, its theme toggle), the current version after them. The command is `pnpm kit demo`; the guide is `docs/design.md` § The round (`node_modules/agentic-cms/docs/design.md` on a site that installs the kit). ## Read first `STANDARD.md` §1 (the tokens a candidate draws in), §6 (the section's anatomy) and §8; `src/components/README.md` (what the library already has — a candidate reuses before it invents); the section's component (from the registry, `src/components/sections/render.tsx`) and its page file (`content/pages/<slug>.yaml`, the copy every candidate must carry); the site's motion rules (`AGENTS.md` § Styling) when an idea moves. ## Steps 1. **The ask.** The owner asks for a design or says what looks wrong ("this section looks empty", "redesign the closing band"). Read the section and its copy before answering; the copy is what the candidates are for. 2. **Ideas, three to five, one message.** Each one line: what it shows, what moves and why the motion is the meaning (or that nothing moves), what it reuses from the library. No building yet. **Stop for the owner** — they pick which to build ("A and B", "all of th