skills.rest
Lucmac667
Lucmac667COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Translate vague UI style requirements into token-based frontend code.

Updated Aug 23, 2026
Search Tags:#typescript#accessibility#frontend#design-system#design-tokens#component-library
One-click install
npx skills add https://github.com/Lucmac667/Be-Ballenced-Dashboard --skill frontend-design-lucmac667
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Lucmac667/Be-Ballenced-Dashboard/tree/main/Be-Ballenced-Dashboard/skills/frontend-design
Command: npx skills add https://github.com/Lucmac667/Be-Ballenced-Dashboard --skill frontend-design-lucmac667

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill translates vague UI style requirements into executable, production-grade frontend code, ensuring consistency, accessibility, and maintainability through a token-first design system.

Core Features & Use Cases

  • Token-first design system: semantic color, typography, spacing, radius, and motion tokens drive all components.
  • Production-ready assets: ready-to-copy CSS, TypeScript components, utilities, and templates.
  • Accessibility and responsive design baked in: WCAG-aligned contrast, keyboard navigation, and mobile-first responsiveness.
  • Use cases include dashboards, landing pages, admin panels, and design-system libraries.

Quick Start

  1. Read SKILL.md to understand the methodology.
  2. Use the included examples (tokens.css, design-tokens.ts, sample-components.tsx) to bootstrap your project.
  3. Build components and pages using the tokens and templates, following the guidance in SKILL.md.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I turn UI specs into production-ready frontend code without hardcoded values?▼

To turn UI specs into production-ready frontend code without hardcoded values, apply a tokens-first methodology using semantic color, typography, spacing, radius, and motion tokens to drive all components and templates.

How does a design tokens system work for React and Vue component libraries?▼

A design tokens system works for React and Vue component libraries by defining semantic CSS and TypeScript tokens that standardize styling variables, ensuring maintainability and consistency across all generated components.

Can I use this frontend design approach with Next.js and Svelte?▼

Yes, you can use this frontend design approach with Next.js and Svelte, as the methodology supports React, Vue, Svelte, Next.js, and Nuxt frameworks for building accessible, responsive components.

What is the best way to build accessible dashboards using TypeScript and design tokens?▼

The best way to build accessible dashboards using TypeScript and design tokens is to enforce WCAG-aligned contrast, keyboard navigation, and mobile-first responsiveness directly within token-driven component templates.

Why should I use a token-first design system for admin panels instead of standard CSS?▼

You should use a token-first design system for admin panels instead of standard CSS to eliminate hardcoded values, ensure visual consistency, and maintain WCAG-aligned accessibility across all responsive components.

Related Skills

Explore More Design & Creative Skills→
lucabattistinilucabattistini

design-expression

Apply brand expression and design tokens to structural foundations for branded specifications.

Community
Advanced
KARENLHAOKARENLHAO
1

frontend-design

Generate frontend interfaces and components with HTML/CSS, React, or Vue.

Community
Advanced
0xRayAI0xRayAI

ui-ux-design

Audit WCAG 2.1 AA compliance and generate accessible design tokens.

Official
Advanced
cloudofgeorgecloudofgeorge

design-html

Convert design mockups into semantic HTML and responsive CSS.

Community
Intermediate