skills.rest
VYRE-Studios
VYRE-StudiosOFFICIAL
Explore all skills by this author →
GitHub

frontend-design

Design responsive, accessible UI components with semantic HTML and WCAG AA compliance.

Updated Apr 10, 2026
Search Tags:#design#ui#accessibility#frontend#responsive#web
One-click install
npx skills add https://github.com/VYRE-Studios/Windows-Agentic-Framework --skill frontend-design-vyre-studios
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/VYRE-Studios/Windows-Agentic-Framework/tree/main/skills/claude-code/frontend-design
Command: npx skills add https://github.com/VYRE-Studios/Windows-Agentic-Framework --skill frontend-design-vyre-studios

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Many developers struggle to create UI components that are both responsive across devices and meet accessibility standards, leading to inconsistent user experiences and increased maintenance effort.

Core Features & Use Cases

  • Semantic HTML Guidance: Ensures proper element usage for accessibility and SEO.
  • Responsive Design Practices: Provides mobile‑first breakpoints, CSS Grid, and Flexbox patterns.
  • Framework‑Specific Tips: Tailors advice for React, Vue, Svelte, Next.js, and styling solutions like Tailwind CSS or CSS Modules.
  • Performance Optimizations: Recommends lazy loading, minimal bundle size, and layout stability.
  • Use Case Example: Build a navigation bar component that adapts to mobile and desktop screens while being fully keyboard navigable and screen‑reader friendly.

Quick Start

Ask the frontend design skill to create a responsive navigation bar using React and Tailwind CSS.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build responsive UI components that meet WCAG AA compliance?▼

To build accessible UI components, apply semantic HTML, mobile-first breakpoints, and ARIA attributes to ensure screen-reader compatibility and keyboard navigation. This approach guarantees WCAG AA compliance while adapting layouts seamlessly across mobile and desktop screens using CSS Grid or Flexbox.

Can I use this approach to create a responsive navigation bar with React and Tailwind CSS?▼

Yes, you can create a responsive navigation bar with React and Tailwind CSS by applying mobile-first breakpoint strategies and semantic HTML. This combination allows the component to adapt to different screen sizes while maintaining full keyboard navigability and screen-reader accessibility.

What's the best way to ensure semantic HTML and accessibility in Vue or Svelte components?▼

The best way to ensure semantic HTML and accessibility in Vue or Svelte components is to apply proper element usage for structure and SEO, combined with ARIA roles where necessary. This ensures the components remain fully accessible and screen-reader friendly across all modern web frameworks.

Does this method work with CSS Modules or only Tailwind CSS for styling?▼

This method works with both CSS Modules and Tailwind CSS, as well as other styling systems. It integrates with your chosen styling solution to handle component structure and responsive design patterns without locking you into a single specific CSS framework.

How do I optimize frontend UI performance and prevent layout shift in web projects?▼

To optimize frontend UI performance and prevent layout shift, implement lazy loading for components and ensure minimal bundle sizes. Applying these performance optimizations alongside stable CSS Grid or Flexbox patterns maintains visual stability during page rendering.

Related Skills

Explore More Design & Creative Skills→
atovkatovk

component-builder

Generate UI component code for React, Vue, and Svelte frameworks.

Community
Basic
Pixel-Process-UGPixel-Process-UG
1

frontend-ui-design

Guide frontend UI design with component architecture, responsive layouts, and WCAG 2.1 AA accessibility.

Official
Advanced
leboncoinleboncoin
92

check-accessibility

Automate WCAG 2.1 AA accessibility testing of Spark UI components with Playwright.

Official
Intermediate
MacPhobosMacPhobos

DaisyUI Component Library

Provides 50+ pre-styled semantic UI components with theming and dark mode for Tailwind CSS.

Community
Intermediate