skills.rest
Barryrn
BarryrnCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate React components with responsive layouts and accessible styling.

Updated Jan 26, 2026
Search Tags:#accessibility#React#frontend#design system#CSS#UI design#web components
One-click install
npx skills add https://github.com/Barryrn/saas-setup --skill frontend-design-barryrn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Barryrn/saas-setup/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/Barryrn/saas-setup --skill frontend-design-barryrn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill guides teams to create distinctive, production-grade frontend interfaces with a bold design direction, accelerating the journey from concept to polished implementation.

Core Features & Use Cases

  • Frontend Design Guidance: Establish a clear aesthetic direction (typography, color, motion) and generate reusable UI patterns aligned with that vision.
  • Component & Page Creation: Produce production-ready React components, pages, dashboards, or UI modules with clean architecture and accessible markup.
  • Design System Alignment: Propose or extend a design system with CSS variables, tokens, and primitives to scale across apps.
  • Use Case: For a marketing landing page, generate a hero section, feature blocks, and a responsive layout that matches a bold visual identity.

Quick Start

Use the frontend-design skill to generate a polished React hero header component with responsive layout and accessible styling.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create production-grade React UI components with a consistent design system?▼

To create production-grade React UI components, establish a clear aesthetic direction using typography, color, and motion, then generate reusable web components with clean architecture and accessible markup aligned to that visual identity.

What's the best way to build a responsive landing page with accessible CSS and React?▼

Building a responsive landing page involves generating a hero section, feature blocks, and responsive layout using clean HTML/CSS/JS and React components that satisfy accessibility requirements and match a bold visual identity.

Can I extend an existing design system with CSS variables and UI tokens for web components?▼

You can extend a design system by proposing or adding CSS variables, tokens, and primitives, allowing scalable UI patterns and reusable web components to maintain a consistent aesthetic across multiple applications.

How do I ensure frontend accessibility when building dashboards and UI modules?▼

Ensuring frontend accessibility requires producing web components and dashboards with accessible markup and clean architecture, aligning the UI modules with established design system tokens and a bold aesthetic direction from concept to implementation.

Does this frontend design approach work for both full UI systems and individual web pages?▼

This frontend design approach works for both full UI systems and individual web pages by guiding developers and designers from concept to polished implementation, producing working HTML/CSS/JS output aligned to a chosen aesthetic.

Why do I need a YAML frontmatter with name and description for frontend UI generation?▼

A YAML frontmatter with name and description is required for frontend UI generation to properly define the component metadata, ensuring the produced HTML/CSS/JS output and React components satisfy structural and documentation requirements.

Related Skills

Explore More Design & Creative Skills→
wildbitcawildbitca
1

common-ui-design

Define UI aesthetic and design system tokens before frontend implementation.

Official
Advanced
skatedduskateddu
27

frontend-design

Generate frontend interfaces with HTML/CSS/JS for React, Vue, or plain websites.

Community
Advanced
rakibulismrakibulism
2

design-to-code

Translate Figma mockups, screenshots, and layout descriptions into React, Vue, or HTML/CSS component code.

Community
Advanced
pinion05pinion05
3

frontend-design

Generate production-ready HTML/CSS/JS or framework-specific frontend components with cohesive typography, color, and motion.

Community
Advanced