What happens if my project doesn't have a frontend?

The skill is conditionally invoked; if no frontend framework is detected, it will return early without making any changes to your directory.

How does it handle accessibility standards?

The skill includes a dedicated section for WCAG 2.1 Level AA compliance, providing a framework for documenting contrast, navigation, and ARIA standards.

Which frontend frameworks does it support?

It is designed to detect and support major frameworks including React, Vue, Angular, and Svelte.

Does it overwrite existing documentation?

No, the skill is idempotent and will skip the generation process if a design_guidelines.md file already exists to protect your manual edits.

Frontend Design Guidelines Creator

Name: Frontend Design Guidelines Creator
Author: levnikolaevich

bylevnikolaevich

•

Design Tools

Generates comprehensive design guidelines and accessibility documentation for frontend projects automatically.

This skill automates the creation of professional design_guidelines.md files for frontend projects, ensuring consistency across design systems. It intelligently detects frontend frameworks like React, Vue, or Svelte and extracts key design tokens—including color palettes, typography, and component libraries—while enforcing WCAG 2.1 Level AA accessibility standards. By serving as a specialized worker within an Agile automation pipeline, it ensures every frontend project maintains clear, actionable documentation for developers and stakeholders without manual overhead.

Key Features

01Conditional execution based on framework detection

0221 GitHub stars

03WCAG 2.1 Level AA accessibility compliance auditing

04Idempotent file generation to prevent accidental overwrites

05Automated design system documentation

06Design token extraction for colors and typography

Use Cases

01Ensuring accessibility compliance is documented for every frontend project

02Onboarding new developers with a clear overview of the design system

03Standardizing UI/UX documentation across multiple React or Vue repositories

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