What it does

This skill equips an agent to produce production-ready frontend interfaces and reusable components. It focuses on establishing design-system foundations (spacing, type scales, color tokens), building component variants, and delivering framework-ready code (React, Vue, Svelte) and utility-first CSS (Tailwind). The agent enforces WCAG-accessible patterns, responsive breakpoints, keyboard focus states, and built-in dark mode theming so outputs are ready to ship or iterate on quickly.

When to use it

Use this skill when you need a consistent, accessible UI built from design tokens: landing pages, dashboards, card libraries, or component systems. It is ideal for requests that specify a framework or when you want semantic HTML plus framework components adapted to Tailwind or CSS modules. Ask for a specific component, a page layout, or a token set to get pragmatic output.

What's included

Scripts: none declared in repo (code examples and component snippets in SKILL.md)
References: none listed, but extensive examples and recipes are embedded in the skill body
Instructions: step-by-step workflow (requirements analysis, token definition, component variants, responsive layout, accessibility checks, dark mode strategy) and copy-paste examples for cards and dashboards