skills.rest
C-Jay69
C-Jay69COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate accessible React/TypeScript components with design tokens and dark mode.

Updated Jan 22, 2026
Search Tags:#accessibility#design system#design tokens#tailwind css#ui components#react components#frontend design
One-click install
npx skills add https://github.com/C-Jay69/HYDRASCRAPE_GPT5.2_CODEX_STITCH --skill frontend-design-c-jay69
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/C-Jay69/HYDRASCRAPE_GPT5.2_CODEX_STITCH/tree/main/skills/frontend-design
Command: npx skills add https://github.com/C-Jay69/HYDRASCRAPE_GPT5.2_CODEX_STITCH --skill frontend-design-c-jay69

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill eliminates the frustration of generating generic, inconsistent, or inaccessible frontend code from AI, which often lacks design system structure, fails WCAG accessibility standards, and requires hours of manual refactoring to be production-ready. It provides a complete, systematic framework to transform vague UI requirements into polished, maintainable, and accessible code in a single workflow.

Core Features & Use Cases

  • Systematic Design Token System: Pre-built semantic tokens for colors, typography, spacing, radius, shadows, and motion that ensure visual consistency across all components, with built-in light/dark mode support.
  • Production-Ready Component Library: Copy-paste ready React/TypeScript components (buttons, cards, modals, forms, etc.) with full state coverage (default, hover, active, focus, disabled, loading, empty, error) and WCAG AA accessibility compliance.
  • Use Case: A startup founder building a customer-facing SaaS app can use this skill to generate a fully styled, accessible component library with a custom aesthetic (e.g., bold editorial, soft organic) without hiring a dedicated design systems engineer.

Quick Start

Use the frontend-design skill to create a responsive, accessible landing page for your new SaaS product with a minimal premium aesthetic, including a navigation bar, hero section, feature cards, and dark mode toggle, all built with consistent design tokens and full interactive states.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I ensure my AI-generated React components meet WCAG AA accessibility standards?▼

To ensure AI-generated React components meet WCAG AA accessibility standards, apply a systematic design token framework with production-ready patterns providing full state coverage, including default, hover, focus, disabled, and error states. This approach eliminates manual accessibility refactoring.

How do I build a consistent design system using Tailwind CSS without hardcoding values?▼

Build a consistent design system using Tailwind CSS by applying pre-built semantic design tokens for colors, typography, spacing, radius, shadows, and motion. This token-based styling approach ensures visual consistency across UI components without hardcoded values.

Can I use design tokens to support dark mode in a vanilla HTML/CSS project?▼

Yes, you can use design tokens to support dark mode in a vanilla HTML/CSS project. The semantic token framework provides built-in light and dark mode support, applying systematic styling across web applications, landing pages, and reusable component libraries.

What is the best way to structure a UI component library for a SaaS dashboard?▼

The best way to structure a UI component library for a SaaS dashboard is using a semantic design token system for colors and typography paired with copy-paste ready React/TypeScript components. This ensures maintainable, accessible, mobile-first responsive design.

Does this frontend design approach work with Vue and Svelte frameworks?▼

Yes, this frontend design approach works with Vue and Svelte frameworks. The systematic design token framework and production-ready component patterns apply to web development tasks across React, Vue, Svelte, and vanilla HTML/CSS projects for building accessible web applications.

Related Skills

Explore More Design & Creative Skills→
pounctpounct

frontend-design

Generate React, Vue, Svelte, or HTML/CSS frontend code with design tokens and Tailwind CSS.

Community
Advanced
AnastasiyaWAnastasiyaW
140

frontend-design

Develop frontend design workflows for accessible web interfaces with responsive layouts and design tokens.

Community
Advanced
ZoyaAfzalZoyaAfzal

tailwind-css

Provide Tailwind CSS utility patterns for React and Next.js projects.

Community
Intermediate
lsst-sqrelsst-sqre
2

design-system

Reference Rubin Observatory design system CSS variables and design tokens.

Official
Basic