skills.rest
Mhafis99
Mhafis99COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Transform vague UI requirements into token-based frontend code for React, Vue, and Svelte.

Updated Jan 5, 2026
Search Tags:#typescript#accessibility#frontend#design-system#design-tokens#component-library
One-click install
npx skills add https://github.com/Mhafis99/manajemen-keuangan --skill frontend-design-mhafis99
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Mhafis99/manajemen-keuangan/tree/main/menejemenkeuanganarsm/skills/frontend-design
Command: npx skills add https://github.com/Mhafis99/manajemen-keuangan --skill frontend-design-mhafis99

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? This Skill transforms vague UI design requirements into executable, production-grade frontend code using a tokens-first design system that ensures consistency and maintainability.

Core Features & Use Cases

  • Token-first design system to derive all visuals from design tokens (colors, typography, spacing, radii, shadows, motion)
  • Accessibility-first outputs with WCAG AA considerations and keyboard navigability
  • Framework-agnostic approach supporting React, Vue, Svelte, Next.js, Nuxt, and more
  • Production-ready templates, components, and assets ready for immediate integration

Quick Start Read SKILL.md to begin applying the tokens-first workflow, generate tokens, implement components, and assemble pages.

Frequently Asked Questions about frontend-design

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

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

To turn vague UI specs into production-ready frontend code, apply a tokens-first design system to derive all visuals, ensuring type-safe component implementations and consistent maintainability across modern frameworks.

What is a tokens-first design system for frontend development?▼

A tokens-first design system derives all visual properties—colors, typography, spacing, radii, shadows, and motion—from centralized design tokens to automate transforming UI requirements into consistent, executable frontend code.

Does this frontend design approach work with React, Vue, Svelte, and Next.js?▼

Yes, the framework-agnostic approach supports building websites, dashboards, and component libraries across React, Vue, Svelte, Next.js, Nuxt, and other modern frameworks using a tokens-first design system.

How do I ensure accessibility and WCAG AA compliance when building a component library?▼

To ensure accessibility and WCAG AA compliance when building a component library, generate outputs with built-in keyboard navigability and accessibility-first considerations derived from your design tokens.

What is the best way to generate type-safe components from design tokens?▼

The best way to generate type-safe components from design tokens is using a tokens-first workflow that automates transforming UI specs into TypeScript implementations with responsive layouts and consistent styling.

Related Skills

Explore More Design & Creative Skills→
nextlevelbuildernextlevelbuilder
114.9k

ckm:design-system

Manage design token architecture and generate brand-compliant slides with Chart.js.

Official
Advanced
goncalossilvagoncalossilva
24

web-design

Design and implement web interfaces with HTML/CSS/JS, React, or Vue.

Community
Advanced
dragoscirjandragoscirjan

lang-html

Enforce semantic HTML, WCAG 2.1 AA accessibility, and keyboard navigability.

Community
Basic
Abhishekgit01Abhishekgit01
1

frontend-design

Generates frontend code for web apps and components using token-based design and accessibility constraints.

Community
Advanced