frontend-design

Translate UI requirements into token-driven frontend code for modern frameworks.

Updated Feb 7, 2026

Search Tags:#design #accessibility #frontend #react #ui-components #design-tokens

Ready to run

npx skills add https://github.com/jitenkr2030/AutoReel-AI --skill frontend-design-jitenkr2030

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/jitenkr2030/AutoReel-AI/tree/main/skills/frontend-design
Command: npx skills add https://github.com/jitenkr2030/AutoReel-AI --skill frontend-design-jitenkr2030

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses the challenge of turning vague UI requirements into consistent, accessible, production-grade frontend code by leveraging a tokens-first design system.

Core Features & Use Cases

Tokens-first design: Semantic tokens drive colors, typography, spacing, radius, shadows, and motion.
Production-ready components: Reusable, type-safe UI primitives (buttons, inputs, cards) with full states and accessibility.
Framework-agnostic approaches: Works with React, Vue, Svelte, Next.js, Nuxt, and more; supports Tailwind, CSS variables, and component libraries.
Design-to-code workflow: Token definitions → CSS/TS components → pages, layouts, and QA checklists.

Quick Start

Read SKILL.md to understand the token-based workflow and recommended design directions.
Choose a design direction (Minimal Premium SaaS, Bold Editorial, Soft & Organic, Dark Neon, Playful).
Generate tokens and build sample components using the provided TS/CSS examples.
Assemble pages from components and validate accessibility and states.

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 frontend code with design tokens?▼

To turn UI specs into production frontend code, use a tokens-first workflow that defines semantic tokens for colors, typography, and spacing, then generates type-safe React, Vue, or Svelte components with accessibility built in.

Does this frontend design skill work with Next.js and Nuxt frameworks?▼

Yes, this frontend design skill works with Next.js, Nuxt, React, Vue, and Svelte. It supports framework-agnostic approaches using Tailwind, CSS variables, and component libraries to ensure token-driven consistency across modern web frameworks.

What is a tokens-first design workflow for building UI components?▼

A tokens-first design workflow for UI components starts by defining semantic design tokens for colors, typography, spacing, radius, shadows, and motion, then uses those tokens to generate CSS or TypeScript components, pages, and QA validation checklists.

How do I build accessible React components from vague design requirements?▼

To build accessible React components from vague design requirements, select a design direction like Minimal Premium SaaS or Dark Neon, generate semantic tokens, then assemble reusable, type-safe UI primitives with full states and accessibility validation.

Can I use Tailwind and CSS variables with a design token system for frontend development?▼

Yes, you can use Tailwind and CSS variables with a design token system for frontend development. The skill supports both approaches to maintain token-driven consistency across colors, typography, spacing, radius, shadows, and motion in production components.

What design directions are available for generating UI components?▼

Available design directions for generating UI components include Minimal Premium SaaS, Bold Editorial, Soft & Organic, Dark Neon, and Playful. Each direction provides predefined semantic tokens that drive consistent styling across pages and reusable component primitives.