skills.rest
yutaoshao
yutaoshaoCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Transform UI briefs into token-driven design systems with CSS variables and TypeScript types.

Updated Dec 26, 2025
Search Tags:#typescript#accessibility#tailwind#design-system#ui-components#design-tokens#frontend-design
One-click install
npx skills add https://github.com/yutaoshao/agent-skills --skill frontend-design-yutaoshao
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/yutaoshao/agent-skills/tree/main/glm-skills/frontend-design
Command: npx skills add https://github.com/yutaoshao/agent-skills --skill frontend-design-yutaoshao

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing consistent, accessible UIs from vague briefs is time-consuming and error-prone. This skill provides a token-first methodology to turn concepts into production-ready design systems, ensuring scalable tokens, components, and templates.

Core Features & Use Cases

  • Token-driven design: Define semantic tokens (colors, typography, spacing) and derive all visuals from a single source of truth.
  • Production-ready components: Generate accessible, responsive UI primitives (buttons, inputs, cards, modals) with consistent states.
  • Framework-agnostic templates: Output TypeScript types, CSS variables, and Tailwind-ready configs for React, Vue, Svelte, or vanilla HTML.

Quick Start

Create a UI brief and let the system output a token-based design system ready for integration.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I convert a UI brief into a production-ready design system?▼

To convert a UI brief into a production-ready design system, you define semantic tokens for colors, typography, and spacing, then derive scalable visual assets and responsive components from this single source of truth.

Can I generate Tailwind-compatible design tokens for React and Vue?▼

Yes, you can generate Tailwind-compatible design tokens for React and Vue. The skill outputs CSS variables, Tailwind-ready configs, and TypeScript types to ensure framework-agnostic integration across your web stack.

What is token-driven frontend design and when do I need it?▼

Token-driven frontend design is a methodology that establishes a single source of truth for visual properties like colors and spacing. You need it to ensure scalable, consistent UIs across web apps, dashboards, and component libraries.

Does this approach output accessible and responsive UI components?▼

Yes, this approach outputs accessible and responsive UI components. It generates production-ready UI primitives like buttons, inputs, and modals with consistent states and built-in accessibility behavior.

What is the best way to build a scalable component library from scratch?▼

The best way to build a scalable component library is using a token-first methodology. This ensures all visual primitives and templates derive consistently from semantic design tokens, reducing errors from vague briefs.

Do I need TypeScript to use this frontend design methodology?▼

You do not need TypeScript exclusively, as the methodology outputs framework-agnostic templates for vanilla HTML too. However, it generates TypeScript types to provide type safety for React, Vue, and Svelte stacks.

Related Skills

Explore More Design & Creative Skills→
windyskywindysky

moai-domain-frontend

Guide React 19, Next.js 16, and Vue 3.5 frontend architecture with reusable components.

Community
Advanced
algusaemalgusaem

tailwind-design-system

Build Tailwind CSS design systems with semantic tokens and CVA-based components.

Community
Intermediate
VoDaiLoczVoDaiLocz
24

ui-styling

Automate building React UIs with shadcn/ui components and Tailwind CSS.

Community
Advanced
dylantarredylantarre
38

angular

Build token-driven Angular components with signals and standalone components.

Community
Advanced