skills.rest
seb1n
seb1nCOMMUNITY
Explore all skills by this author →
GitHub

Frontend Design

Generate responsive HTML, CSS, and React, Vue, or Svelte components with WCAG accessibility and dark mode.

147|32|Updated Feb 11, 2026
Search Tags:#ui#accessibility#frontend#responsive design#design system#dark mode#ux
One-click install
npx skills add https://github.com/seb1n/awesome-ai-agent-skills --skill frontend-design-seb1n
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend Design
Source: https://github.com/seb1n/awesome-ai-agent-skills/tree/main/design-and-ui-ux/frontend-design
Command: npx skills add https://github.com/seb1n/awesome-ai-agent-skills --skill frontend-design-seb1n

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the creation of user interfaces, ensuring they are visually appealing, functional across devices, accessible to all users, and easily maintainable through consistent design systems.

Core Features & Use Cases

  • Design System Implementation: Creates UIs adhering to defined spacing, typography, and color tokens.
  • Responsive Layouts: Builds interfaces that adapt seamlessly to desktop, tablet, and mobile screens.
  • Accessibility (WCAG): Ensures components are usable by people with disabilities via semantic HTML and ARIA attributes.
  • Dark Mode Support: Integrates a dark theme for improved viewing in low-light conditions.
  • Framework Agnostic: Outputs production-ready HTML, CSS (Tailwind), and components for React, Vue, or Svelte.
  • Use Case: Generate a responsive pricing table component with light and dark mode variants, using Tailwind CSS and adhering to WCAG accessibility standards.

Quick Start

Create a reusable Card component in React with Tailwind CSS, including default, elevated, and outlined variants, plus support for dark mode.

Frequently Asked Questions about Frontend Design

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

FAQPage Schema
How do I build a responsive UI that automatically supports dark mode and WCAG accessibility?▼

Generate production-ready frontend interfaces using semantic HTML, ARIA attributes, and Tailwind CSS to ensure WCAG-compliant accessibility, responsive layouts, and dark mode support across devices.

Can I generate React, Vue, or Svelte components with Tailwind CSS and design system tokens?▼

Yes, generate framework-agnostic components for React, Vue, or Svelte using Tailwind CSS, adhering to defined design system spacing, typography, and color tokens for consistent UIs.

What is the best way to implement a design system with consistent spacing and typography in frontend components?▼

Implement design systems by generating UI components that strictly adhere to predefined spacing, typography, and color tokens, ensuring visual consistency and maintainability across your frontend interfaces.

Does this approach handle WCAG-compliant accessibility for people with disabilities?▼

Yes, WCAG-compliant accessibility is handled by generating components with semantic HTML and ARIA attributes, ensuring interfaces are usable by people with disabilities across all devices.

How do I create a responsive pricing table with light and dark mode variants?▼

Create responsive pricing tables with light and dark mode variants by generating HTML, CSS, or framework components using Tailwind CSS, ensuring seamless adaptation and WCAG accessibility standards.

Related Skills

Explore More Design & Creative Skills→
priyansh19priyansh19
1

design-guide

Establish and enforce CrewSpace UI design system standards across frontend components.

Community
Advanced
gerald-icagerald-ica

web-design-guidelines

Audit web interfaces against WCAG, responsive, and performance guidelines.

Community
Advanced
rattamnoonrattamnoon

tailwind-css-patterns

Applies Tailwind CSS utility patterns to React, Vue, and Svelte components.

Community
Intermediate
landmaster135landmaster135

web-component-design

Designs cross-framework UI components for React, Vue, and Svelte.

Community
Advanced