Skills
.Work. You
Rest

frontend-styleguide

Community

Create and maintain frontend design standards.

Design & Creative#ui#documentation#frontend#design-system#styleguide#web-design#component-library
Authorwzkariampuzha
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Frontend style guides are essential for consistency across web projects, but teams often waste time re-exploring context when starting new guides or updating existing ones. This skill standardizes discovery, decision-making, and documentation, ensuring CLAUDE.md becomes the single source of truth that guides future work.

Core Features & Use Cases

  • Explore once with a subagent to collect patterns, design tokens, and component guidelines, then document findings permanently to CLAUDE.md.
  • Use the frontend-design skill to craft production-ready components that align with the chosen design system.
  • Coordinate with stakeholders to decide on a design system (shadcn/ui, Material UI, Bootstrap, Tailwind, or custom) and typography, ensuring decisions are recorded for future edits.
  • Apply when creating new style guides, documenting component libraries, building design systems, or updating existing components.

Quick Start

Ask about design system preferences, run the Explore subagent for frontend structure, then document findings to CLAUDE.md before producing reusable components.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 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: frontend-styleguide
Download link: https://github.com/wzkariampuzha/claude-skills/archive/main.zip#frontend-styleguide

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.