skills.rest
kamal81684
kamal81684COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Convert UI design requirements into React or Vue frontend code with design tokens.

Updated Dec 26, 2025
Search Tags:#typescript#accessibility#frontend#react#design-tokens#design-systems
One-click install
npx skills add https://github.com/kamal81684/file_system --skill frontend-design-kamal81684
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/kamal81684/file_system/tree/main/skills/frontend-design
Command: npx skills add https://github.com/kamal81684/file_system --skill frontend-design-kamal81684

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts vague UI design requirements into executable, production-grade frontend code by enforcing a tokens-first design system, ensuring visual consistency, accessibility, and long-term maintainability across projects.

Core Features & Use Cases

  • Token-first design tokens drive all visuals (colors, typography, spacing, radii, shadows) to guarantee consistency.
  • Production-ready assets: CSS tokens, TypeScript components, and quick-start templates suitable for React, Vue, or vanilla TS/JS stacks.
  • Accessibility-focused: built-in WCAG-aligned patterns, keyboard navigation, and semantic HTML guidance for scalable UI systems.

Quick Start

Analyze a new UI brief with SKILL.md first and then apply the tokens-based workflow to generate starter components and 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 UI design specs into production-ready React components?▼

You can turn UI design specs into production-ready React components by applying a tokens-first design system that enforces consistent visual styling. This approach generates TypeScript components and CSS design tokens directly from your design requirements.

What are design tokens and how do they improve frontend accessibility?▼

Design tokens are centralized variables for colors, typography, spacing, and shadows that drive all visual styling. They improve frontend accessibility by enforcing consistent WCAG-aligned patterns, keyboard navigation, and semantic HTML across your component library.

Can I use this token-driven design workflow for Vue dashboards?▼

Yes, you can use this token-driven design workflow for Vue dashboards and component libraries. The system targets React and Vue frontends, generating production-ready assets, quick-start templates, and reusable components suitable for either stack.

How do I generate a design system from vague UI requirements?▼

To generate a design system from vague UI requirements, analyze the brief and apply a tokens-based workflow. This produces executable frontend code, starter components, and pages using token-driven design constraints for visual consistency and maintainability.

Does this frontend code generation support vanilla TypeScript projects?▼

Yes, this frontend code generation supports vanilla TypeScript projects. The production-ready assets include CSS tokens, TypeScript components, and quick-start templates suitable for React, Vue, or vanilla TS/JS stacks.

Related Skills

Explore More Design & Creative Skills→
4tikhonov4tikhonov
3

intent-capture

Guide exploratory conversations to capture goals, constraints, and success criteria.

Community
Basic
pavan53732pavan53732

frontend-design

Transform UI style requirements into React and TypeScript code with Tailwind CSS.

Community
Advanced
Joseph-N1Joseph-N1

figma-to-code

Generate React/Next.js code from Figma designs using Figma MCP tools.

Community
Advanced
Higashi-KotaHigashi-Kota

styling

Standardize CSS styling with design tokens and grid-first layouts.

Community
Basic