
from awesome-ai-agent-skills13
Design and implement production-ready frontend interfaces: design systems, responsive layouts, accessible components, and dark mode-ready code across frameworks
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.
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.
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.
This skill has not been reviewed by our automated audit pipeline yet.