# Frontend Design

> Design UI components, layouts, and responsive interfaces with accessibility

- Skill: `chainlesschain/frontend-design` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add chainlesschain/frontend-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/chainlesschain/frontend-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: chainlesschain (https://skillmd.com/u/chainlesschain)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/chainlesschain/frontend-design

---


# 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.