skills.rest
chancoute
chancouteCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate CSS design tokens and TypeScript components from UI requirements.

Updated Jan 8, 2026
Search Tags:#typescript#accessibility#frontend#react#design-system#design-tokens
One-click install
npx skills add https://github.com/chancoute/sgin --skill frontend-design-chancoute
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/chancoute/sgin/tree/main/skills/frontend-design
Command: npx skills add https://github.com/chancoute/sgin --skill frontend-design-chancoute

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill codifies a token-first front-end design workflow to transform vague UI requirements into production-ready, accessible, and scalable UI code.

Core Features & Use Cases

  • Token-first design system: semantic colors, typography, spacing, radius, shadows, and motion that ensure consistency across components and pages.
  • Component library: ready-to-use, accessible React components with TypeScript types and state coverage.
  • UI system for dashboards, landing pages, admin panels, and design systems, enabling rapid prototyping and maintenance.

Quick Start

To begin, read SKILL.md to understand the design-token methodology, then generate tokens, build components, and assemble pages using the provided templates.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build a React design system using design tokens?▼

A tokens-first approach to frontend design enforces styling consistency by centralizing semantic colors, typography, spacing, and motion into reusable variables applied directly to React components.

How do I generate accessible React components for a dashboard?▼

Generate accessible React components for a dashboard by using TypeScript types and state coverage alongside token-based styling, ensuring UI elements meet accessibility standards while maintaining scalable structure.

What is a tokens-first approach in frontend design?▼

A tokens-first approach in frontend design establishes semantic design tokens for colors, typography, spacing, and shadows before building components, ensuring visual consistency and maintainability across React and Next.js projects.

Can I use this frontend design workflow for Next.js admin panels?▼

Yes, the frontend design workflow supports Next.js admin panels by providing templated scaffolds, TypeScript component types, and CSS design tokens tailored for scalable dashboard and admin interface development.

How do I convert vague UI requirements into production-ready frontend code?▼

Convert vague UI requirements into production-ready frontend code by applying a token-first design methodology, generating accessible React components, and assembling pages using provided templated scaffolds.

Do I need TypeScript to implement a design token system?▼

TypeScript is recommended to implement a design token system because it provides strict type coverage for component states and props, ensuring maintainable and error-resistant frontend design artifacts.

Related Skills

Explore More Design & Creative Skills→
H2OSLabsH2OSLabs

web-artifacts-builder

Generate ready-to-share Claude.ai HTML artifacts as bundled React projects.

Official
Advanced
UBERCOW123UBERCOW123

frontend-design

Define and apply a cohesive frontend design direction using semantic HTML and modern CSS.

Community
Advanced
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
marcioaltoemarcioaltoe
14

ui-designer

Design and implement accessible React UI components with shadcn/ui and Tailwind CSS.

Community
Intermediate