style-checker
Validates code against design system standards and styling rules.
Install
mkdir -p .claude/skills/style-checker && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/15967" && unzip -o skill.zip -d .claude/skills/style-checker && rm skill.zipInstalls to .claude/skills/style-checker
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Check code against the project's style guidelines and design system standards.Key capabilities
- →Validate color values against design tokens
- →Check spacing values against a defined scale
- →Ensure typography follows a type scale
- →Flag inconsistent naming conventions in CSS classes
- →Review pull requests for style compliance
How it works
The skill checks code against predefined style guidelines and design system standards, validating elements like color, spacing, typography, and CSS naming conventions.
Inputs & outputs
When to use style-checker
- →Review PR for style compliance
- →Validate component design
- →Check CSS for consistency
- →Enforce typography standards
About this skill
Style Checker
Check code against the project's style guidelines and design system standards.
When to Use
Use this skill when:
- Reviewing pull requests for style compliance
- Validating new components against the design system
- Checking CSS/styling code for consistency
What It Does
- Validates color values against the design token palette
- Checks spacing values against the spacing scale
- Ensures typography follows the defined type scale
- Flags inconsistent naming conventions in CSS classes
When not to use it
- →When style guidelines and design system standards are not relevant
- →When the code does not involve styling or CSS
Limitations
- →The skill checks against project's style guidelines
- →The skill checks against design system standards
- →It flags inconsistent naming conventions in CSS classes
How it compares
This skill automates the enforcement of specific project style guidelines, providing consistent validation that differs from manual code reviews for style.
Compared to similar skills
style-checker side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| style-checker (this skill) | 0 | 4mo | No flags | Beginner |
| frontend-style-guide | 1 | 2mo | No flags | Intermediate |
| state-machine | 1 | 7mo | No flags | Beginner |
| designer | 0 | 5mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by VeVarunSharma
View all by VeVarunSharma →You might also like
frontend-style-guide
lightdash
Apply the Lightdash frontend style guide when working on React components, migrating Mantine v6 to v8, or styling frontend code. Use when editing TSX files, fixing styling issues, or when user mentions Mantine, styling, or CSS modules.
state-machine
WellApp-ai
Document UI component states (current vs expected) with transitions
designer
jmartenstein
Expert in User-Centered Design (UCD), user journey mapping, and design reviews. Use when executing design reviews, writing user journey documents, and providing design guidance for developers.
design-review
jerrywu001
|
jobs-review
jinyuanlu
|
critique
get-convex
Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a