skills.rest
mattismyname3011
mattismyname3011COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Translates vague UI requirements into token-driven frontend design systems for modern web frameworks.

Updated Dec 23, 2025
Search Tags:#accessibility#React#frontend#UI#Tailwind#design-tokens
One-click install
npx skills add https://github.com/mattismyname3011/school-council-election --skill frontend-design-mattismyname3011
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/mattismyname3011/school-council-election/tree/main/skills/frontend-design
Command: npx skills add https://github.com/mattismyname3011/school-council-election --skill frontend-design-mattismyname3011

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill translates vague UI and design requirements into a production-ready frontend design system, ensuring consistency, accessibility, and maintainability through token-driven methods.

Core Features & Use Cases

  • Tokens-first design: Semantic color, typography, spacing, and motion tokens drive all components and layouts.
  • Production-ready examples: CSS tokens, TypeScript components, and templates ready to deploy.
  • Cross-framework applicability: Works with React, Vue, Svelte, Next.js, Nuxt, and other modern stacks; supports UI libraries like shadcn/ui.
  • Accessibility & WCAG: Built-in focus management, keyboard navigation, and color-contrast considerations.

Quick Start

Provide a design brief and receive a complete frontend design system including tokens.css, components.css, TypeScript components, and Tailwind templates (no code fences).

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I turn a design brief into a frontend design system?▼

To turn a design brief into a frontend design system, provide your UI requirements to generate a token-driven architecture with semantic colors, typography, spacing, and motion tokens ready for production.

What is a token-driven frontend design system and how does it work?▼

A token-driven frontend design system uses semantic tokens for color, typography, and motion to drive all components and layouts, ensuring UI consistency and maintainability across modern web frameworks.

Does this frontend design system work with React and Tailwind?▼

Yes, the frontend design system works with React, Vue, Svelte, Next.js, and Nuxt. It outputs TypeScript components and Tailwind templates, and supports UI libraries like shadcn/ui.

How do I ensure accessibility and WCAG compliance when building UI components?▼

To ensure accessibility and WCAG compliance when building UI components, the generated design system includes built-in focus management, keyboard navigation, and automated color-contrast considerations.

What is the best way to convert vague UI requirements into production-ready code?▼

The best way to convert vague UI requirements into production-ready code is using a tokens-first approach that outputs CSS tokens, TypeScript components, and Tailwind templates without code fences for direct deployment.

Can I use shadcn/ui with a custom design token system?▼

Yes, you can use shadcn/ui with a custom design token system because the generated semantic tokens are built to support modern React stacks and integrate directly with compatible UI libraries.

Related Skills

Explore More Design & Creative Skills→
eserlaneserlan
2

web-component-design

Standardize cross-framework UI component design across React, Vue, and Svelte.

Community
Advanced
nidhalboumaiza-0nidhalboumaiza-0

frontend-design

Convert UI style requirements into frontend code with a tokens-first design system.

Community
Advanced
HieubkavHieubkav

ui-styling

Create accessible UI styling with shadcn/ui and Tailwind CSS for React applications.

Community
Advanced
hidonguyenhidonguyen

ck:ui-styling

Generate shadcn/ui component libraries with Tailwind CSS themes.

Community
Intermediate