design-system-ui
Installation
SKILL.md
Design System UI
Create production-grade frontend UI that feels native to the product and sharper than a default implementation.
For multi-step work, start with a short user-visible update that names the product context you are inspecting first.
Goal
Use the existing product as the creative material. The result should feel native to the app, visually intentional, consistent with usable components and tokens, and improved through hierarchy, composition, interaction quality, and polish.
Context Budget
Before coding, inspect only the context needed to make the UI fit:
- nearby pages with a similar purpose
- shared components and page shells
- tokens, theme files, Tailwind/CSS config, and typography
- spacing, radius, borders, shadows, surfaces, icons, and motion
- existing loading, empty, error, disabled, focus, and responsive patterns