skills.rest
wzkariampuzha
wzkariampuzhaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-styleguide

Coordinate frontend style guide creation and documentation to CLAUDE.md.

Updated Jan 8, 2026
Search Tags:#ui#documentation#frontend#design-system#styleguide#web-design#component-library
One-click install
npx skills add https://github.com/wzkariampuzha/claude-skills --skill frontend-styleguide
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-styleguide
Source: https://github.com/wzkariampuzha/claude-skills/tree/main/skills/frontend-styleguide
Command: npx skills add https://github.com/wzkariampuzha/claude-skills --skill frontend-styleguide

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about frontend-styleguide

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

FAQPage Schema
How do I create a consistent frontend design system without losing context?▼

To create a consistent frontend design system, this skill uses a subagent to explore your project once, collecting design tokens and component guidelines, then permanently documents them to CLAUDE.md to prevent context loss.

What is the best way to document a web component library for future edits?▼

Documenting a web component library is handled by automatically writing your typography decisions, component inventory, and design patterns directly into CLAUDE.md, establishing a single source of truth for future edits.

Can I use this to coordinate decisions between shadcn/ui, Material UI, and Tailwind?▼

Yes, you can coordinate decisions between shadcn/ui, Material UI, Bootstrap, Tailwind, or custom systems by guiding stakeholders through a structured workflow to select and record your chosen design system.

How do I generate production-ready components that align with my styleguide?▼

To generate production-ready components aligned with your styleguide, this skill integrates with the frontend-design skill to craft reusable UI elements based on your documented design system decisions.

Do I need to manually re-explore design patterns every time I update my styleguide?▼

No, you do not need to manually re-explore design patterns when updating a styleguide because the initial exploration is saved to CLAUDE.md, eliminating redundant context gathering for future web design work.

Related Skills

Explore More Design & Creative Skills→
OpenElementsLabsOpenElementsLabs

create-design-system-rules

Generate project-specific design system rules from Figma MCP outputs.

Official
Advanced
H2OSLabsH2OSLabs
1

pen-to-react

Convert Pencil .pen design files into React components for Next.js frontends.

Official
Advanced
ky-zoky-zo

teach-impeccable

Gather design context and write it to CLAUDE.md for future sessions.

Community
Intermediate
aliepratamaaliepratama

shadcn

Manage shadcn/ui component installation, updates, and documentation in frontend projects.

Community
Basic