skills.rest
jangtrinh
jangtrinhCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-init

Automates design system setup with token extraction, component inventory, and Storybook scaffolding.

Updated Mar 27, 2026
Search Tags:#storybook#tokens#design-system#ui-components#design-guidelines#component-registry#token-extraction
One-click install
npx skills add https://github.com/jangtrinh/EaseUI-Agent --skill design-init-jangtrinh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-init
Source: https://github.com/jangtrinh/EaseUI-Agent/tree/main/.claude/skills/design-init
Command: npx skills add https://github.com/jangtrinh/EaseUI-Agent --skill design-init-jangtrinh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automatically establishes and maintains a cohesive design system across a project by extracting tokens, inventorying UI components, and scaffolding Storybook.

Core Features & Use Cases

  • Token extraction from CSS into a centralized design-system/tokens.json
  • Component inventory across codebase, with a generated component-registry.md
  • Guidelines generation for design tokens, typography, shadows, and UX patterns
  • Storybook scaffolding and configuration for interactive UI catalogs

Quick Start

Run the design-init skill on your project to initialize tokens, registry, guidelines, and Storybook scaffolding.

Frequently Asked Questions about design-init

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

FAQPage Schema
How do I initialize a design system with CSS tokens and Storybook?▼

Initializing a design system involves extracting CSS tokens into tokens.json, generating component-registry.md, and scaffolding Storybook configuration under .storybook for a repeatable setup.

What is the best way to generate a component registry for a frontend project?▼

The best way to generate a component registry is to automate codebase scanning to inventory UI components and output a structured component-registry.md file documenting your design system.

How do I extract design tokens from CSS into a JSON file?▼

You can automate the extraction of design tokens from CSS into a centralized tokens.json file to ensure consistent token usage across your UI components and project guidelines.

Can I scaffold Storybook configuration for a UI component catalog?▼

Yes, you can scaffold Storybook configuration under the .storybook directory to create an interactive UI component catalog and maintain a repeatable design system setup.

Does design system initialization work without existing CSS tokens?▼

Design system initialization applies to frontend projects with existing CSS tokens and a components directory, extracting them into tokens.json to ensure a repeatable setup.

How do I generate design guidelines for typography, shadows, and UX patterns?▼

Generating design guidelines for typography, shadows, and UX patterns can be automated during design system initialization to produce a comprehensive design-guidelines.md file.

Related Skills

Explore More Design & Creative Skills→
CatsofsufferingCatsofsuffering
5

neubrutalism

Apply Neubrutalism design tokens and nb- CSS classes to frontend components.

Community
Intermediate
bovinphangbovinphang
21

fec-storybook-component-doc

Validate Storybook component documentation with MDX and frontmatter checks.

Community
Intermediate
jamesodwyerjamesodwyer

token-describer

Generate descriptions for design tokens in tokens.json using Figma component analysis.

Community
Advanced
wzyxdwllwzyxdwll
14

extract

Identify reusable UI patterns and design tokens for consolidation into a centralized design system.

Community
Intermediate