CO STAR UI Skill

Structured CO-STAR prompting for UI work: Context, Objective, Style, Tone, Audience, Response. The skill supports two modes and requires choosing one before proceeding.

Decision: Which Mode to Use

Signals for UI build: build, implement, add, refactor, component, page, design system, shadcn, Tailwind, React, Next.js, hero, dashboard, landing, integrate.

Signals for prompt creator: create my prompt, custom prompt, my own CO STAR, design system doc, template for our product.

Non-Negotiable Pre-Actions

1. Locate the correct resource (co-star-prompt vs co-star-creator) from the decision table above.
2. Do not suggest code or libraries until you have run scoped discovery questions (tech stack, existing UI lib, design direction, target page/feature). Keep to 5–10 questions.
3. After answers, respond with: integration strategy, token/primitive definitions, component patterns, negative constraints (anti-patterns), and a critique loop (2–4 risks, one small first slice, and "which component or page first?").

Flow (UI Build Mode)

1. Scoped questions first — Framework, styling, existing tokens/components, constraints, goal (re-skin vs new theme vs one page).
2. Integration strategy — Which base (e.g. shadcn + Radix), which registries (Tailark, Magic UI, Aceternity), which animation (React Bits, Anime.js) if any. Keep the set minimal.
3. Concrete plan — Tokens, core components, then marketing/dashboard layers. Code sketches in the user’s stack (Tailwind, CSS modules, etc.).
4. Negative constraints — No multiple full UI suites, no mixing incompatible design languages, no heavy animation everywhere. Normalize tokens when copy-pasting.
5. Critique loop — List trade-offs, suggest one small first slice, ask what to tackle first.

Flow (Prompt Creator Mode)

1. Guide the user through Context (existing codebase, stack, target design system).
2. Then Objective (mental model, minimal abstractions, migration plan, implementation guidance, critique).
3. Then Style, Tone, Audience, Response format (two phases: scoped questions first, then implementation plan + code sketches).
4. Include negative constraints and edge cases in the resulting prompt.

Resources

• references/co-star-prompt.md — Full CO-STAR prompt for building/integrating UI (modern React ecosystem, registries, copy-paste vs npm). Read when the user is in UI build mode.
• references/co-star-creator.md — Full CO-STAR prompt for Newsprint UI Creator (design system integration, tokens, primitives). Use for prompt-creator mode or for Newsprint-specific builds.