Can I use it on an existing project with established patterns?

Absolutely. The skill includes an editing workflow that detects existing style guide sections and updates them while adhering to your established project structure.

How does it improve performance and context usage?

It uses an 'Explore' subagent to scan the project once and documents everything to CLAUDE.md. This prevents Claude from having to re-read files or run grep commands in future sessions.

What components are included by default?

It typically includes standard UI elements like Buttons, Inputs, Cards, Navigation, and Modals, but it can be customized to include domain-specific components like charts or calendars.

Why does it mention the frontend-design skill?

It leverages the frontend-design skill to ensure that the generated components have professional, production-grade aesthetics and accessibility rather than generic AI-generated looks.

Does this skill support frameworks like Tailwind or shadcn/ui?

Yes, it explicitly asks for your preferred framework during the creation workflow and tailors all components and documentation to that specific system.

Frontend Styleguide

Name: Frontend Styleguide
Author: wzkariampuzha

bywzkariampuzha

デザインツール

Generates and maintains comprehensive frontend style guides, design systems, and reusable component libraries for web projects.

概要

This skill streamlines the creation and maintenance of frontend design systems by establishing a permanent documentation record within your project. It guides Claude to explore codebase structures efficiently, document design tokens, and generate production-grade UI components using frameworks like Tailwind CSS, shadcn/ui, or Material UI. By enforcing a 'document once' workflow in CLAUDE.md, it prevents redundant AI exploration, saves context, and ensures visual consistency across the entire application development lifecycle.

主な機能

Standardized design system setup for popular frameworks and custom CSS.
Permanent styling pattern and component inventory documentation in CLAUDE.md.
0 GitHub stars
Context-efficient codebase exploration using specialized subagents.
Generation of reusable, accessible component functions following project conventions.
Automated workflow for both creating new libraries and editing existing ones.

ユースケース

Standardizing existing UI components into a cohesive, documented library.
Onboarding new developers by centralizing frontend patterns and component usage.
Building a brand-new design system from scratch for a web application.

概要

主な機能

Standardized design system setup for popular frameworks and custom CSS.
Permanent styling pattern and component inventory documentation in CLAUDE.md.
0 GitHub stars
Context-efficient codebase exploration using specialized subagents.
Generation of reusable, accessible component functions following project conventions.
Automated workflow for both creating new libraries and editing existing ones.

ユースケース

Standardizing existing UI components into a cohesive, documented library.
Onboarding new developers by centralizing frontend patterns and component usage.
Building a brand-new design system from scratch for a web application.