skills.rest
RedWoodOG
RedWoodOGCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Design accessible, responsive frontend components for React, Vue, Svelte, or vanilla HTML/CSS/JS.

174|23|Updated Apr 3, 2026
Search Tags:#design#accessibility#frontend#react#responsive#ux#componentization
One-click install
npx skills add https://github.com/RedWoodOG/Hermes-Desktop --skill frontend-design-redwoodog
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/RedWoodOG/Hermes-Desktop/tree/main/skills/claude-code/frontend-design
Command: npx skills add https://github.com/RedWoodOG/Hermes-Desktop --skill frontend-design-redwoodog

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend design and development requires balancing accessibility, responsiveness, and maintainable patterns across frameworks; this skill provides structured guidance to accelerate building high-quality UI components and pages.

Core Features & Use Cases

  • Semantic HTML, accessible markup, and responsive layout patterns that align with design systems.
  • Workflow guidance for choosing frameworks/libraries, implementing components, and maintaining consistency across projects.
  • Use Case: a developer migrating a legacy UI to React or Vue while applying WCAG-compliant accessibility and responsive design.

Quick Start

Create a responsive, accessible card component following this skill's guidelines.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build accessible and responsive UI components for modern web applications?▼

To build accessible and responsive UI components, implement semantic HTML, ensure keyboard accessibility, and apply component-driven architecture to maintain consistency across real-world projects.

Can I use this approach to migrate legacy UI code to React or Vue?▼

Yes, you can migrate legacy UI code to React or Vue by applying structured guidance for choosing frameworks, implementing components, and aligning with WCAG-compliant accessibility and responsive design patterns.

What is the best way to ensure WCAG compliance when creating frontend components?▼

The best way to ensure WCAG compliance when creating frontend components is to use semantic HTML and accessible markup patterns that align directly with your design system and workflow.

Does this frontend design workflow support Svelte and vanilla HTML/CSS/JS?▼

Yes, this frontend design workflow supports Svelte and vanilla HTML/CSS/JS, providing style-system alignment and component-driven architecture across React, Vue, Svelte, or vanilla frameworks.

How do I create a responsive card component following maintainable design patterns?▼

To create a responsive card component, follow structured guidelines for semantic HTML, accessible markup, and responsive layout patterns that align with modern design systems.

Why should I use component-driven architecture for frontend design?▼

You should use component-driven architecture for frontend design because it provides structured guidance to balance accessibility, responsiveness, and maintainable patterns, accelerating high-quality UI development.

Related Skills

Explore More Design & Creative Skills→
wildbitcawildbitca
1

common-ui-design

Define UI aesthetic and design system tokens before frontend implementation.

Official
Advanced
somachaksomachak

building-accessible-ui

Audit React/TypeScript UI components for accessibility, semantics, and keyboard navigation.

Community
Advanced
otrebuotrebu
4

web-to-markdown

Batch-convert JavaScript-rendered web pages to a timestamped Markdown file.

Community
Advanced
algusaemalgusaem

tailwind-design-system

Build Tailwind CSS design systems with semantic tokens and CVA-based components.

Community
Intermediate