Does it support the W3C Design Tokens spec?

Yes, it validates tokens against the W3C Design Tokens Community Group (DTCG) 2025.10 specification, ensuring cross-platform compatibility.

How does it handle accessibility?

It integrates axe-core logic to check for WCAG 2.2 Level AA compliance, covering color contrast, keyboard navigation, and ARIA attributes.

What files can this skill audit?

It scans CSS, HTML, .templ, and Markdown files for design system violations, hardcoded values, and accessibility issues.

Can it fix issues automatically?

The skill provides specific auto-fix code snippets for simple violations like hardcoded hex codes, missing focus states, or incorrect target sizes.

Is it compatible with CI/CD pipelines?

Yes, it includes a --ci flag that outputs results in a CI-friendly format and triggers non-zero exit codes on critical errors.

Design System Compliance Checker

Name: Design System Compliance Checker
Author: fyrsmithlabs

byfyrsmithlabs

Design Tools

Audits frontend code for design system violations, WCAG 2.2 accessibility compliance, and W3C design token standards.

About

The Design System Compliance Checker (fs-design check) empowers developers to maintain visual and technical consistency by scanning CSS, HTML, and documentation for deviations from the FyrsmithLabs Terminal Elegance system. It automatically identifies hardcoded values, validates W3C Design Tokens (DTCG format), and performs rigorous WCAG 2.2 Level AA accessibility audits, providing actionable auto-fix suggestions to streamline frontend development and ensure high-quality UI implementation.

Key Features

Full WCAG 2.2 Level AA accessibility and color contrast validation
Integrated support for Stylelint and axe-core rule enforcement
0 GitHub stars
Automated CSS audit for hardcoded colors, spacing, and typography
Interactive auto-fix suggestions for common styling violations
W3C Design Tokens (DTCG) format verification for tokens.json files

Use Cases

Validating project-wide design token files against the latest W3C specifications
Auditing legacy CSS files to replace hardcoded hex values with design tokens
Running comprehensive accessibility checks to meet WCAG 2.2 Level AA standards

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add fyrsmithlabs/marketplace check

For use in Claude.ai and ChatGPT

Download Skill

GitHub