design-bootstrap

Design Bootstrap

Use this skill to establish reliable design context before audits, live iterations, or larger UI implementation.

Goal

Produce or refresh three context documents:

1. PRODUCT.md: user/jobs context, voice, anti-references, and success criteria.
2. DESIGN.md: token and component-system contract grounded in repo artifacts.
3. PREVIEW.md: preview routes, stories, and verification checkpoints used during implementation.

Inputs (Pre-Generated Artifacts)

Primary generated artifact map:

• packages/agent-marketplace/content/skills/design-bootstrap/reference/bootstrap-sources.json
• packages/agent-marketplace/content/skills/design-bootstrap/reference/bootstrap-sources.md

Key token/recipe artifacts (generated by preview package):

• packages/uikit-preview/static/tokens/spec/semantic-tokens.json
• packages/uikit-preview/static/tokens/spec/recipes.json
• packages/uikit-preview/static/tokens/spec/tokens.json
• packages/uikit-preview/static/tokens/spec/text-styles.json
• packages/uikit-preview/static/tokens/spec/patterns.json

Core source contracts:

• packages/design-system/src/panda-preset.ts
• packages/design-system/panda.shared.ts
• packages/design-system/src/recipes/
• packages/design-system/src/components/
• packages/uikit-preview/src/stories/

Workflow

1. Read bootstrap-sources.json first and treat it as source-of-truth input list.
2. Draft DESIGN.md from semantic tokens, recipe contracts, and component usage.
3. Draft PREVIEW.md from story inventory and snapshot verification flows.
4. Draft PRODUCT.md from available app language plus a short gap list for unknowns.
5. If fields are missing, ask only for unresolved product/voice decisions.
6. Save drafts and include a "last refreshed from" section with concrete file paths.

DESIGN.md Content Requirements

Include at least:

1. Token roles and non-negotiable usage rules.
2. Component contract defaults for segmented controls, toggle/switch controls, table headers, and state handling.
3. Typography, spacing, border, and focus-ring guidance tied to semantic tokens.
4. "Do not" section for ad hoc values and local one-off overrides.

PREVIEW.md Content Requirements

Include at least:

1. Story locations and high-signal stories for verification.
2. Snapshot command flow and expected acceptance checks.
3. Known visual-risk areas and related stories.
4. "When to add a new story" checklist.

PRODUCT.md Content Requirements

Include at least:

1. User/task framing and top workflows.
2. Voice and confidence constraints for UI copy.
3. Anti-references (what the UI should avoid).
4. Measurable quality bar for completion.

Output Contract

• Keep generated drafts concrete and repository-specific.
• Avoid generic design prose that is not grounded in repo artifacts.
• Explicitly cite source files used to derive each major section.