# Frontend Design Systems

> Architect and build production-grade web interfaces with modern design systems: Tailwind CSS v4, Shadcn UI primitives, Radix UI, dark mode tokens, and accessible WCAG AA components.

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

---


# Frontend Design Systems & UI Architecture

> **Attribution**: Originating from Anthropic & the skills.sh open ecosystem. Maintained in canonical SKILL.md format.

This skill guides the construction of modern, accessible, responsive frontend applications utilizing design tokens, component primitives, and Tailwind CSS.

---

## Key Guidelines

1. **Token Hierarchy**: Separate global design tokens (colors, spacing, typography) from component-specific styles.
2. **Accessible Primitives**: Use headless accessible primitives (Radix UI, React Aria) for complex interactions like dialogs, dropdowns, and comboboxes.
3. **Responsive by Default**: Mobile-first breakpoints (`sm`, `md`, `lg`, `xl`) with dark mode class strategy (`class="dark"`).