skills.rest
musher-dev
musher-devOFFICIAL
Explore all skills by this author →
WebsiteGitHub

auditing-design-compliance

Scan marketing site code for design system compliance violations.

Updated Mar 6, 2026
Search Tags:#quality assurance#frontend#design system#audit#compliance#svelte
One-click install
npx skills add https://github.com/musher-dev/bundles --skill auditing-design-compliance
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: auditing-design-compliance
Source: https://github.com/musher-dev/bundles/tree/main/marketing-site-authoring/skills/auditing-design-compliance
Command: npx skills add https://github.com/musher-dev/bundles --skill auditing-design-compliance

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill automates the quality control of marketing site components, ensuring they adhere to the established design system rules after implementation.

Core Features & Use Cases

  • Automated Auditing: Systematically scans marketing site files for violations of design tokens (colors, spacing, typography).
  • Framework Compliance: Checks for adherence to Svelte 5 syntax and flags React-isms or outdated Svelte 4 patterns.
  • Use Case: After a new marketing page is built, run this audit to catch any stray hex codes, incorrect spacing, or non-compliant component usage before it goes live.

Quick Start

Run a full design compliance audit on the marketing site codebase.

Frequently Asked Questions about auditing-design-compliance

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

FAQPage Schema
How do I audit my Svelte 5 marketing site for design system compliance?▼

Design compliance auditing scans marketing site code using grep-based pattern matching to identify stray hex codes, incorrect spacing, and non-compliant component usage before pages go live.

How do I check my codebase for hardcoded color tokens and spacing violations?▼

Checking for hardcoded color tokens and spacing violations involves scanning your marketing site files against defined design rules to catch stray hex codes and incorrect spacing values automatically.

Can I use this to verify Svelte 5 syntax and flag outdated Svelte 4 patterns?▼

Yes, framework compliance checks validate Svelte 5 syntax adherence and specifically flag React-isms or outdated Svelte 4 patterns found within your marketing site components during the audit.

What is the best way to automate quality assurance checks for frontend design tokens?▼

Automating frontend design token quality assurance involves systematically scanning marketing site files to validate colors, spacing, typography, and transition durations against established design system rules.

Does the audit check for accessibility and banned vocabulary in frontend components?▼

Yes, the compliance audit validates accessibility standards and checks for banned vocabulary in your marketing site code alongside component reuse and transition duration validation.

When should I run a design system compliance audit on my marketing pages?▼

You should run a design system compliance audit after building a new marketing page to catch stray hex codes, incorrect spacing, or non-compliant component usage before it goes live.

Related Skills

Explore More Software Engineering Skills→
Mischio95Mischio95
1

tailwind-design-system

Define Tailwind CSS design tokens as CSS variables with shadcn/ui wrappers.

Community
Advanced
brolagbrolag
11

slop-fix

Automate safe slop issue remediation from slop-scan reports with tests and atomic commits.

Community
Advanced
yalehyaleh
21

API Design

Automate REST/JSON API design with a 5-tier parameter model and pre-commit validation.

Community
Advanced
sputnikussputnikus

ast-grep

Translate natural language queries into ast-grep rules for structural code search.

Community
Intermediate