Skills
.Work. You
Rest

Styleguide Generator

Community

Create a living styleguide for your UI.

Design & Creative#react#design system#css#frontend development#tokens#ui components#styleguide
Authorallierays
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill automates the creation of a comprehensive, interactive styleguide for your project, ensuring UI consistency and making it easy for AI and developers to understand and use your design system.

Core Features & Use Cases

  • Automated Component Showcase: Generates a dedicated route (/styleguide) displaying all UI components.
  • Design Token Definition: Establishes clear design tokens for colors, typography, spacing, and borders.
  • Vibe-Based Customization: Adapts the styleguide and component generation based on user-defined design aesthetics (e.g., "Clean & Minimal", "Neon Glass").
  • Use Case: A new developer joins a project and needs to understand the existing UI components and design language. They can visit the /styleguide route to see all available components, their variants, and how they should be used, significantly speeding up their onboarding and development.

Quick Start

Generate a styleguide for the current project by running the styleguide skill.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: Styleguide Generator
Download link: https://github.com/allierays/agentic-loop/archive/main.zip#styleguide-generator

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.