frontend-design

Name: frontend-design
Availability: InStock
Author: redwoodog

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

Ready to run

npx skills add https://github.com/RedWoodOG/Hermes-Desktop --skill frontend-design-redwoodog

💬 Prompt for ChatGPT / Claude Chat▼

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.