skills.rest
mukaddam-ali
mukaddam-aliCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generates token-based frontend code with design systems, components, and accessibility compliance.

Updated Jul 11, 2026
Search Tags:#typescript#accessibility#react#design tokens#tailwind css#ui components#dark mode
One-click install
npx skills add https://github.com/mukaddam-ali/Anadolu-Kitchen --skill frontend-design-mukaddam-ali
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/mukaddam-ali/Anadolu-Kitchen/tree/main/skills/frontend-design
Command: npx skills add https://github.com/mukaddam-ali/Anadolu-Kitchen --skill frontend-design-mukaddam-ali

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires tailwindcss, postcss, autoprefixer, clsx, tailwind-merge, @tailwindcss/forms, @tailwindcss/typography.

What problem does it solve? Building consistent, accessible web UIs from vague style requirements often leads to hardcoded values, missing interaction states, and generic-looking results. This Skill converts design intent into production-ready frontend code using a systematic design token methodology. ## Core Features & Use Cases - Design Token System: Generates semantic color, typography, spacing, radius, shadow, and motion tokens in CSS custom properties and TypeScript types, with light and dark mode support. - Production Component Examples: Provides copy-paste ready CSS and React/TypeScript components (buttons, inputs, cards, modals, skeletons) covering default, hover, focus, disabled, loading, empty, and error states. - Design Direction Templates: Offers five aesthetic directions (Minimal Premium SaaS, Bold Editorial, Soft & Organic, Dark Neon, Playful & Colorful) with token mappings and review checklists. - Use Case: When asked to build a team dashboard in React with Tailwind CSS, the Skill guides token definition first, then component implementation, then page assembly with WCAG AA accessibility validation. ## Quick Start Ask the AI to build a responsive dashboard page using the frontend-design skill with a minimal premium SaaS style and full dark mode support.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I create a design token system with Tailwind CSS?▼

Define semantic tokens as CSS custom properties in globals.css, then map them in tailwind.config.js using hsl(var(--token)) references. This enables theme switching by changing variable values while keeping utility classes like bg-primary consistent.

What component states should every UI component include?▼

Every interactive component needs default, hover, active, focus, and disabled states, plus loading, empty, and error states for data-driven UI. Missing states produce incomplete implementations that break under real usage conditions.

Can I use Tailwind CSS via CDN in production?▼

No, the CDN build loads 400KB+ of CSS and prevents tree-shaking and token customization. Use build-time integration with npm install tailwindcss and PostCSS, which reduces production CSS to roughly 2-15KB.

Does this approach support dark mode with React?▼

Yes, the included theme-provider.tsx implements light, dark, and system modes with localStorage persistence and system preference detection. Colors switch through CSS custom property overrides under a .dark class.

How do I meet WCAG AA contrast requirements in web design?▼

Maintain at least 4.5:1 contrast for normal text and 3:1 for large text, verified with tools like the WebAIM Contrast Checker. Also ensure visible focus indicators, keyboard navigation, and semantic HTML with ARIA only when needed.

When should I not use this frontend design methodology?▼

Skip it for backend API development, pure logic or algorithm implementation, and non-visual code tasks. The token-first workflow only applies to user interface work where visual consistency and interaction states matter.

Related Skills

Explore More Design & Creative Skills→
hi-yuki-922hi-yuki-922
1

i-teach-impeccable

Gather design context from codebase and user input into CLAUDE.md.

Community
Intermediate
nccasianccasia

frontend-testing

Generate Vitest and React Testing Library tests for React components in Next.js applications.

Official
Advanced
asmortongptasmortongpt

visual-testing

Automate Playwright visual regression, accessibility, and performance checks across browsers.

Community
Advanced
partme-aipartme-ai
610

ant-design-react

Guide Ant Design React component usage with TypeScript and design system support.

Official
Intermediate