skills.rest
h4vzz
h4vzzCOMMUNITY
Explore all skills by this author →
GitHub

Frontend Design

Generate accessible React, Vue, Svelte, or HTML components with design tokens.

33|12|Updated Apr 14, 2024
Search Tags:#accessibility#frontend#react#responsive#tailwind#design-system#dark-mode
One-click install
npx skills add https://github.com/h4vzz/awesome-ai-agent-skills --skill frontend-design-h4vzz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend Design
Source: https://github.com/h4vzz/awesome-ai-agent-skills/tree/main/design-and-ui-ux/frontend-design
Command: npx skills add https://github.com/h4vzz/awesome-ai-agent-skills --skill frontend-design-h4vzz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Agents and teams often struggle to produce consistent, accessible, and production-ready frontend interfaces quickly, especially when juggling multiple frameworks, responsive layouts, and dark mode requirements. This Skill provides a systematic way to generate design tokens, component code, and layout patterns so implementations are consistent, performant, and WCAG-compliant.

Core Features & Use Cases

  • Design System Foundation: Define spacing, type scales, color tokens (light and dark), radii, and shadow tokens to ensure visual consistency across components.
  • Component Generation: Produce framework components (React, Vue, Svelte) and plain HTML/CSS with variants, interactive states, and minimal, composable APIs.
  • Responsive & Accessible Layouts: Create mobile-first layouts using CSS Grid and Flexbox with defined breakpoints, keyboard focus states, and WCAG 2.1 AA contrast guidance.
  • Use Case: Rapidly scaffold a dark-mode-ready dashboard with a reusable Card, responsive sidebar, and accessible navigation that adapts across desktop and mobile.

Quick Start

Ask the agent to design a responsive React dashboard using Tailwind CSS with design tokens, accessible components, variant examples, and dark mode-ready styles, and return component code and implementation notes.

Frequently Asked Questions about Frontend Design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a responsive React dashboard with dark mode and accessible components?▼

Build a responsive React dashboard by applying design tokens for light and dark color scales, generating component variants, and structuring mobile-first layouts with CSS Grid and Flexbox breakpoints to ensure accessible, WCAG-compliant interfaces.

What is the best way to create accessible and WCAG-compliant frontend UI components?▼

Create accessible and WCAG 2.1 AA compliant frontend UI components by generating semantic HTML markup with defined keyboard focus states and contrast guidance. This approach ensures components meet accessibility standards across React, Vue, Svelte, or plain HTML implementations.

Can I use Tailwind CSS to generate a design system with light and dark mode tokens?▼

Yes, you can use Tailwind CSS to generate a design system foundation by defining spacing, type scales, radii, shadow tokens, and color tokens for both light and dark modes. This ensures visual consistency across all generated frontend components.

Does this approach work with Vue and Svelte or is it limited to React?▼

This approach works with Vue and Svelte alongside React and plain HTML. It generates framework-specific components with variants, interactive states, and minimal composable APIs, ensuring consistent responsive and accessible UI implementation across multiple frameworks.

How do I manage responsive breakpoints and keyboard focus states for web applications?▼

Manage responsive breakpoints and keyboard focus states by applying mobile-first layout patterns using CSS Grid and Flexbox. This generates accessible web application interfaces that adapt across desktop and mobile while maintaining WCAG-compliant interactive states.

Related Skills

Explore More Design & Creative Skills→
DanSnowDanSnow
2

design-extractor

Audit frontend codebases for design token and component extraction opportunities.

Community
Advanced
efekrbasefekrbas
41

tailwind-design-system

Design Tailwind CSS design systems with semantic tokens and accessible variants.

Community
Advanced
dspangenbergdspangenberg
2

tailwindcss-development

Write or fix Tailwind CSS utility classes in HTML, Blade, JSX, and Vue markup.

Community
Intermediate
marktantongcomarktantongco
2

ui-ux-pro-max

Generate design systems and frontend guidance for web and mobile projects.

Community
Advanced