ui-buildlisted

This skill guides creation of distinctive, production-grade frontend interfaces. Implement real working code with exceptional attention to aesthetic detail. ## Example prompts - "Build the hero section from the brief" - "Create a card component in a Scandinavian style" - "I want this to feel like a Japanese magazine. Build the layout." - "Build the settings page. Use whatever style fits." ## Before You Write Any Code 0. **Materialize a token spec if one exists but no token file does.** Find the feature's design file by the procedure in `${CLAUDE_SKILL_DIR}/../design/SKILL.md` → **Finding the design file**. If its `### Tokens` block (under `## Experience`; a top-level `## Tokens` in older files) names new tokens AND the project has no existing token file (no `tokens.css`, no populated `theme.extend`, no `theme.ts` populated from a prior pass), translate the spec into the project's stack-appropriate format first: - Tailwind project → extend `tailwind.config.js|ts` under `theme.extend` AND write CSS variables to `globals.css` for anything that needs runtime theming. - Plain CSS/HTML → write to `tokens.css`, imported by the root stylesheet. - CSS-in-JS (Material UI / Chakra / Emotion) → write to `theme.ts` in the expected shape for the library. - Default when unclear → CSS custom properties in `tokens.css`. Read names, values, and roles directly from the spec — do not re-derive from the philosophy. Announce the file created before proceeding. (When invoked fro