skills.rest
AnswerZhao
AnswerZhaoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design

Translate UI briefs into token-based frontend code with semantic CSS variables.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend design work often starts from vague UI briefs that are difficult to translate into consistent, accessible, production-ready code. This Skill provides a tokens-first design system that converts messy requirements into repeatable, maintainable artifacts, reducing guesswork and rework for teams.

Core Features & Use Cases

  • Tokens-first design system with semantic CSS variables and TypeScript types to ensure consistency across projects.
  • Production-ready resources and templates included in this Skill (CSS tokens.css, components.css, design-tokens.ts, theme-provider.tsx, sample-components.tsx, templates/globals.css, etc.) enabling ready-to-copy integration.
  • Accessibility and responsive design baked in, with WCAG-aligned component states, keyboard navigation, and mobile-first patterns.
  • Use cases include building dashboards, landing pages, admin panels, and component libraries, across frameworks such as React, Vue, Svelte, Next.js, Nuxt, etc.

Quick Start

  • Read SKILL.md to understand the tokens-first workflow.
  • Open examples/css/tokens.css and examples/typescript/design-tokens.ts to start building tokens.
  • Copy the component templates from examples/typescript/sample-components.tsx to bootstrap production-ready components, then compose pages using the provided templates.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I convert vague UI briefs into production-ready frontend code?▼

A tokens-first design system translates vague UI briefs into production-ready frontend code by applying semantic CSS variables and TypeScript types. This approach enforces consistency, accessibility, and responsive design across your components while reducing guesswork and rework.

What is a design tokens workflow and how does it work for frontend UI components?▼

A design tokens workflow defines semantic CSS variables and type-safe TypeScript definitions first, then uses those tokens to build accessible, responsive UI components. This ensures consistent theming and maintainability across dashboards, admin panels, and component libraries.

Can I use this tokens-first design system with Vue, Svelte, or Next.js frameworks?▼

Yes, the tokens-first design system works across React, Vue, Svelte, Next.js, and Nuxt frameworks. It provides ready-to-copy integration templates like CSS tokens files and TypeScript theme providers to bootstrap components in your chosen framework.

How do I ensure my UI components meet accessibility and WCAG standards?▼

To ensure UI components meet accessibility and WCAG standards, the design system bakes in WCAG-aligned component states, keyboard navigation, and mobile-first responsive patterns. This guarantees accessible interactions directly within your production-ready frontend code.

What is the best way to build a consistent component library across multiple projects?▼

The best way to build a consistent component library is using a tokens-first design system with semantic CSS variables and TypeScript type definitions. This method generates repeatable, maintainable artifacts with baked-in accessibility and responsive design patterns across multiple frameworks.

Do I need TypeScript to use a semantic design tokens workflow?▼

TypeScript is used to provide type-safe token definitions, ensuring consistency and maintainability across your frontend projects. While the workflow heavily relies on TypeScript for type safety, the semantic CSS variables can also be integrated independently for styling.

Related Skills

Explore More Design & Creative Skills→
a-ng-da-ng-d
1

ui-color-palette-sketch

...

Community
Intermediate
tonehqtonehq
11

table_page

Generate a full-stack listing page with backend API and Next.js UI.

Official
Advanced
paopp2paopp2

tailwindcss

Apply Tailwind CSS utility classes for responsive, themed UI styling.

Community
Intermediate
yonetim258852yonetim258852

uupm-design-system

Organize design tokens into primitive, semantic, and component layers with CSS variables.

Community
Advanced