Will this skill overwrite my existing design files?

No, the skill is idempotent. It checks for the existence of design_guidelines.md and will skip creation if the file already exists to protect your manual changes.

Does it support accessibility compliance?

Yes, it specifically generates documentation that references and enforces WCAG 2.1 Level AA accessibility standards for your frontend project.

How does it identify my project's design tokens?

The skill analyzes your project context, including CSS variables, Tailwind configs, and component library themes (like Material-UI or Ant Design) to extract colors and typography.

When is the Frontend Documentation Creator invoked?

It is triggered conditionally by the project coordinator whenever a frontend framework (React, Vue, Angular, or Svelte) is detected in the project root.

Frontend Design Guidelines Creator

Name: Frontend Design Guidelines Creator
Author: levnikolaevich

bylevnikolaevich

•

Design Tools

Automates the creation of comprehensive design guidelines and accessibility documentation for frontend projects.

The Frontend Design Guidelines Creator is a specialized L3 worker designed to standardize UI/UX documentation within the Claude Code ecosystem. It automatically generates a detailed design_guidelines.md file whenever a frontend framework such as React, Vue, Angular, or Svelte is detected. This skill ensures that design systems, typography, and color palettes are accurately documented while enforcing WCAG 2.1 Level AA accessibility compliance. By extracting design tokens from CSS variables, Tailwind configurations, or theme files, it provides developers with a consistent and accessible reference for maintaining visual integrity.

Key Features

01Extracts design tokens from CSS variables and theme configurations

0212 GitHub stars

03Automatic detection of major frontend frameworks (React, Vue, Angular, Svelte)

04Generates comprehensive typography and color palette references

05Ensures WCAG 2.1 Level AA accessibility compliance documentation

06Idempotent execution to prevent overwriting existing documentation

Use Cases

01Ensuring accessibility standards are documented and met for web applications

02Standardizing UI/UX documentation for new or inherited frontend repositories

03Creating a single source of truth for design tokens across development teams

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add levnikolaevich/claude-code-skills ln-114-frontend-docs-creator

For use in Claude.ai and ChatGPT

Download Skill