chainlesschain Frontend Design Skill
Design UI components, page layouts, and responsive interfaces with accessibility in mind.
Usage
/frontend-design [mode] [requirements or component name]
Modes
- component (default) - Design a UI component with props, states, and variants
- layout - Plan page layout with sections and grid structure
- responsive - Design responsive breakpoints and adaptive behavior
- a11y - Accessibility audit and recommendations
- theme - Design a theme system with tokens and variables
Examples
/frontend-design component Data table with sorting, filtering, and pagination
/frontend-design layout Dashboard page with sidebar, header, and widgets
/frontend-design responsive Navigation menu for mobile, tablet, and desktop
/frontend-design a11y Review login form for accessibility issues
/frontend-design theme Design dark/light theme with CSS custom properties
Output
Design specifications with component structure, styles, states, and implementation guidance.