deviation-tracker

Classify design system findings and generate structured YAML deviation reports.

7|Updated Mar 11, 2026

Search Tags:#code quality #developer tools #design system #reporting #classification #deviation tracking

Ready to run

npx skills add https://github.com/kaelig/react-craft --skill deviation-tracker

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: deviation-tracker
Source: https://github.com/kaelig/react-craft/tree/main/react-craft/skills/deviation-tracker
Command: npx skills add https://github.com/kaelig/react-craft --skill deviation-tracker

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the classification of design system deviations found in code, streamlining the process for design system teams and developers.

Core Features & Use Cases

Automated Classification: Classifies findings as accidental, intentional, or needs-review based on configurable rules and inline comments.
Structured Reporting: Generates detailed YAML reports of deviations for review.
Developer Guidance: Provides clear summaries and nudges for findings requiring developer input.
Use Case: After running code analysis tools, this Skill processes the output, identifies deviations from the design system, and categorizes them, flagging any that need manual review by a developer.

Quick Start

Classify design system findings and generate a YAML report for the design system team.

Frequently Asked Questions about deviation-tracker

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

FAQPage Schema

How do I classify design system deviations found in my codebase?▼

To classify design system deviations, this Skill parses code analysis findings and categorizes them as accidental, intentional, or needs-review. It uses inline @ds-deviation comments to capture developer justifications and outputs a structured YAML deviation report.

What is an intentional design system deviation and how is it tracked?▼

An intentional design system deviation is a deliberate code departure tracked via @ds-deviation inline comments. The Skill parses these comments to understand developer justifications and classifies the finding accordingly, preventing false positives in the YAML report.

How do I configure the report path for design system deviation tracking?▼

You configure the deviation report path and classification settings in the react-craft.config.yaml file. The Skill reads this configuration file to determine where to output the structured YAML deviation report.

Can I automate design system code review findings without manual checks?▼

Yes, you can automate design system code review by running code analysis tools and passing the output to this Skill. It automatically categorizes deviations and only flags findings as needs-review when a developer justification is missing or rules are ambiguous.

What are the limitations of using inline comments for deviation tracking?▼

The limitation of using inline comments for deviation tracking is that missing @ds-deviation tags will cause findings to be flagged as accidental or needs-review. Accurate classification requires developers to actively document intentional departures in the code.

Does deviation tracking work with YAML report formats?▼

Yes, deviation tracking works with YAML report formats by generating detailed structured YAML files. The Skill outputs the classified accidental, intentional, and needs-review findings directly into a YAML report for the design system team to review.