Frontend Design

What it does

This skill enables an agent to produce production-ready frontend UI code and design guidance. It covers establishing design tokens and spacing/type scales, building accessible component variants, implementing responsive layouts with CSS Grid and Flexbox, and adding dark mode support. The skill outputs concrete examples (React/Tailwind snippets, HTML/CSS patterns) and practical best-practices for accessibility and performance.

When to use it

Use when you need a component library, responsive page layout, accessible components, or a dark-mode-ready UI. Trigger on requests like "build a responsive dashboard", "create a Tailwind React Card component", "add dark mode", or "audit accessibility and keyboard navigation". It's suitable for front-end developers, designers, and agents generating UI code.

What's included

• Scripts: none (has_scripts=false)
• References: none included (has_references=false)
• Instructions: stepwise workflow—analyze constraints, define tokens, build component variants, implement responsive breakpoints, integrate accessibility, and tune dark mode. Includes example code for React/Tailwind, responsive grid layouts, and CSS patterns.

Compatible agents

Works best with code-capable agents (Claude Code, Copilot, OpenAI Codex, Gemini CLI) that can emit framework-specific snippets and adapt tokens to project needs.