From booskills
Builds new frontend UI (pages, screens, components, flows) to high-end design standards: deliberate color strategy, typography, layout, motion, full interaction-state coverage, accessibility, and an AI-slop self-check before handoff. Use for "build a landing page," "add a settings screen," "create this component," "make the frontend for X." Do NOT use to critique or grade existing UI; use boo-critiquing-frontend. Do NOT use for OpenSpec change-folder work; use boo-implementing-changes.
How this skill is triggered — by the user, by Claude, or both
Slash command
/booskills:boo-building-uiThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Classify small/medium/large from surface count: small = one component or section, medium = a full screen or 2-4 related components, large = a multi-screen flow or a new design-system surface. Default: small. Announce with one-line justification. Accept `$size` override.
Classify small/medium/large from surface count: small = one component or section, medium = a full screen or 2-4 related components, large = a multi-screen flow or a new design-system surface. Default: small. Announce with one-line justification. Accept $size override.
references/design-guidance.md for the canonical design rules (color, typography, layout, motion, interaction, absolute bans, AI slop test). Every build decision defers to it.ls frontend/src/components/ui/ (or the project's equivalent primitives path) and read the token/theme source (tailwind config, CSS custom properties, theme file). Only import primitives that exist; if the primitives directory is missing, stop and report.prefers-reduced-motion alternative for every animation.user-experience-designer for a post-build audit and fix what it finds before handoff.ls frontend/src/components/ui/ and only import primitives that exist. If missing, stop and report.mcp__paseo__*) are available, spawn each agent persona as an attached Paseo subagent with create_agent (detached: false, notifyOnFinish: true; for an opencode provider also pass settings.modeId: "build" and settings.features.auto_accept: true) so every persona appears in the operator's Paseo agent track. Resolve each persona's provider/model from the active preset's agents map in ~/.paseo/orchestration-preferences.json; supervise on the finish notification (never poll) and read each result with get_agent_activity.agents/<name>.md persona and apply its lens in sequential passes.concurrency value in ~/.paseo/orchestration-preferences.json. When it is 1 (local heavy-weight presets, around 27b/35b or larger on a single llama-swap server), dispatch subagents STRICTLY ONE AT A TIME: launch one, wait for its finish notification and read its result, then launch the next. This overrides any parallel fan-out. Absent or higher concurrency means parallel fan-out is fine.git add -A. Prove any edits with git diff --stat.# UI Build: <target>
## What was built
<components/screens with file paths>
## Design decisions
- Scene sentence: <one sentence> (new surfaces only)
- Color strategy: <restrained | committed | full palette | drenched>
- <other load-bearing choices, one line each>
## State coverage
| Component | hover | focus | disabled | loading | empty | error |
|-----------|-------|-------|----------|---------|-------|-------|
## Verification
<how rendering was verified, or why it could not be>
## Slop self-check
<bans checked and result; both slop-test altitudes>
## Claims I did not verify
- <anything assumed or not checked>
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub indifferentketchup/booskills --plugin booskills