skills.rest
lvhuanid
lvhuanidCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Transforms UI style requirements into production-ready frontend code with design tokens and accessibility.

Updated May 11, 2026
Search Tags:#typescript#accessibility#web development#react#tailwind css#ui design
One-click install
npx skills add https://github.com/lvhuanid/learnHelloAgents --skill frontend-design-lvhuanid
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/lvhuanid/learnHelloAgents/tree/main/skills/frontend-design
Command: npx skills add https://github.com/lvhuanid/learnHelloAgents --skill frontend-design-lvhuanid

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, typescript, tailwindcss, clsx, autoprefixer, postcss, tailwind-merge, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill transforms UI style requirements into production-ready code, providing systematic design tokens, accessibility, and creative execution.

Core Features & Use Cases

  • Systematic Design Tokens: Consistent visual properties derived from a token system.
  • Accessibility Compliance: Built-in WCAG AA compliance and keyboard navigation.
  • Responsive Design: Mobile-first approach with touch-friendly targets.
  • Dark Mode: Built-in theme system with light/dark modes.
  • Use Case: Ideal for building websites, web applications, React/Vue components, dashboards, landing pages, or any web UI requiring both design consistency and aesthetic quality.

Quick Start

Use the frontend-design skill to generate design tokens and build a React component with a button and input field.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I transform UI design requirements into production-ready React code?▼

To transform UI design requirements into production-ready React code, use a systematic design token workflow that converts typography, spacing, and color scales into accessible components with built-in WCAG compliance.

What's the best way to build accessible web components with Tailwind CSS and TypeScript?▼

Building accessible web components with Tailwind CSS and TypeScript requires systematic design tokens, mobile-first responsive targets, and built-in keyboard navigation to ensure WCAG AA compliance and touch-friendly interactions.

Does this UI design approach support dark mode and responsive layouts out of the box?▼

Yes, this UI design approach supports dark mode and responsive layouts out of the box by utilizing a built-in theme system with light and dark modes alongside a mobile-first execution strategy.

Can I use this frontend design token system for Vue components or only React?▼

You can use this frontend design token system for both Vue and React components, as it applies systematic visual properties, accessibility compliance, and creative execution to any web UI development workflow.

Do I need a predefined design system to generate frontend code with this workflow?▼

Yes, you need a predefined design system including typography scale, spacing scale, color token system, and component development workflow to systematically generate production-ready frontend code.

Why use systematic design tokens for web development instead of inline styling?▼

Using systematic design tokens for web development ensures consistent visual properties across your application, enabling scalable design decisions, built-in accessibility compliance, and maintainable component architecture.

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
MinhAnh-CorpMinhAnh-Corp

frontend-design

Generates frontend interfaces with production-ready code from user requirements.

Official
Advanced
acquiaacquia
16

canvas-styling-conventions

Enforce Tailwind CSS v4 theme tokens, CVA variants, and cn utility in Canvas components.

Official
Intermediate
bradtaylorsfbradtaylorsf
8

tailwind-components

Generate Tailwind CSS HTML snippets for common UI components.

Community
Basic