frontend-design

Name: frontend-design
Availability: InStock
Author: mhafis99

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

Ready to run

npx skills add https://github.com/Mhafis99/manajemen-keuangan --skill frontend-design-mhafis99

💬 Prompt for ChatGPT / Claude Chat▼

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.