frontend-design

Name: frontend-design
Availability: InStock
Author: chancoute

Generate CSS design tokens and TypeScript components from UI requirements.

Updated Jan 8, 2026

Search Tags:#typescript #accessibility #frontend #react #design-system #design-tokens

Ready to run

npx skills add https://github.com/chancoute/sgin --skill frontend-design-chancoute

💬 Prompt for ChatGPT / Claude Chat▼

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.