Skills / Product & design
UI Implementation
Turn a reviewed interface into a responsive React implementation. Use when converting designs into React components using DUI primitives.
Ownership
InstructionsSKILL.md Source
UI Implementation
## Goal
Transform a design review or approved mockup into production-ready React components using only existing DUI primitives.
## The Thing
Screen-level implementation including layout, interactive states, responsiveness, and styling decisions.
## Structure
1.**Component mapping** — Assign each UI element to a DUI primitive (Button, Card, Input, etc.).
2.**Layout construction** — Build responsive grid/flex structure with appropriate spacing tokens.
3.**State wiring** — Connect interactive states using React patterns, ensure accessibility attributes.
4.**RTL compatibility** — Use logical properties (ms-*, pe-*) instead of directional margins/padding.
5.**Quality check** — Verify dark mode, loading states, and keyboard navigation work correctly.
Installation
Toggle your package manager and copy the command to add this skill directly to your workspace configuration.
CLI Add Command
Installs skill bundlenpx @qentrah/skills add ui-implementation