skills.rest
xcrrr
xcrrrCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate frontend design specifications with CSS custom properties and component states.

4|1|Updated Mar 18, 2026
Search Tags:#responsive#tokens#design-system#css-variables#frontend-design#ui-spec
One-click install
npx skills add https://github.com/xcrrr/claude-skills --skill frontend-design-xcrrr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/xcrrr/claude-skills/tree/main/skills/design/frontend-design
Command: npx skills add https://github.com/xcrrr/claude-skills --skill frontend-design-xcrrr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate precise, implementation-ready frontend specifications from design briefs to close the gap between design and code.

Core Features & Use Cases

  • Precise component specs with states (default, hover, focus, active, disabled) and responsive behavior
  • Design tokens and CSS custom properties for colors, spacing, typography, and radii
  • Full layout and grid guidance for responsive pages and design systems
  • Anatomy and token-referenced structure to support scalable design handoffs

Quick Start

Specify a Button component with tokens, states, and layout rules to illustrate a complete frontend design specification.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I generate frontend design specs with design tokens and CSS variables?▼

To generate frontend design specs, provide a UI design brief and the system outputs precise component anatomy, states, and CSS custom properties. It enforces a tokens-first approach to define colors, spacing, typography, and radii for developer-ready implementation.

What is the best way to document responsive behavior and component states for UI handoff?▼

Documenting responsive behavior and component states requires defining breakpoints, default, hover, focus, active, and disabled states within the specification. This approach ensures scalable design handoffs by mapping UI anatomy directly to token-referenced structures.

Can I define layout systems and grid guidance for a complete design system?▼

Yes, you can define layout systems and grid guidance for responsive pages. The system generates full layout rules and token-referenced structures to support scalable design systems and ensure consistent implementation across different viewport sizes.

Does this approach require a tokens-first methodology for UI components?▼

Yes, a tokens-first methodology is required for UI components. It mandates defining CSS custom properties for colors, spacing, typography, and radii before documenting component anatomy, ensuring precise and maintainable frontend specifications.

What accessibility considerations are included in frontend design specifications?▼

Accessibility considerations are documented directly within the frontend design specifications. The system outlines specific requirements for component states, focus management, and semantic structure to ensure UI components remain accessible during implementation.

Related Skills

Explore More Design & Creative Skills→
AlejandroFiginiAlejandroFigini

gpt-taste

Generate deterministic landing page layouts with GSAP motion and grid systems.

Community
Advanced
daffy0208daffy0208
34

Figma Developer

Convert Figma designs into React components and design tokens.

Community
Intermediate
nholder88nholder88
2

ui-ux-review

Evaluate frontend UI against design-system rules for consistency and accessibility.

Community
Advanced
nesihaver-ILnesihaver-IL

figma

Transform Figma designs into React components and design tokens.

Community
Intermediate