Stats
Actions
Tags
From wax-skills
Use when running Wax scans and producing design system adoption analytics reports. Validates config, runs a fresh scan, outputs a section-by-section terminal report by default. Supports --html for branded HTML at .wax/out/report/index.html, --baseline for trend deltas, --no-auto-install for CI, and --html-only to skip terminal output.
How this skill is triggered — by the user, by Claude, or both
Slash command
/wax-skills:wax-scanThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Use this skill to validate Wax configuration, run a fresh `wax scan`, extract deterministic adoption metrics from `.wax/out/scan-merged.json`, and produce an actionable design-system analytics report. Default output is terminal. Request `--html` for the visual report at `.wax/out/report/index.html`.
Use this skill to validate Wax configuration, run a fresh wax scan, extract deterministic adoption metrics from .wax/out/scan-merged.json, and produce an actionable design-system analytics report. Default output is terminal. Request --html for the visual report at .wax/out/report/index.html.
AI interpretation is an authoring aid only. Do not make wax scan or wax validate depend on agent decisions.
| Artifact | Path | Status |
|---|---|---|
| Extractor | skills/wax-scan/scripts/extract-insights.sh | Available |
| HTML template | skills/wax-scan/templates/report.html | Available |
| HTML escape helper | skills/wax-scan/scripts/html-escape.sh | Available |
| Parameter | Effect |
|---|---|
| (none) | Section-by-section terminal report |
--html | Also write .wax/out/report/index.html |
--html-only | Write HTML only; skip terminal report |
--baseline <path> | Compare against a prior scan-merged.json for limited trend deltas |
--no-auto-install | Pass through to wax scan for CI runs with committed lockfiles |
Verify Wax config exists (.wax/wax.config.json or .waxrc).
wax init.Run wax validate.
Run a fresh wax scan.
--no-auto-install when the user requests CI mode.Read .wax/out/scan-merged.json.
--baseline <path> is provided, read the baseline file for trend deltas.Run the deterministic extractor:
skills/wax-scan/scripts/extract-insights.sh .wax/out/scan-merged.json
With baseline:
skills/wax-scan/scripts/extract-insights.sh .wax/out/scan-merged.json --baseline <path>
Use the extractor JSON for deterministic report sections. Fall back to reading .wax/out/scan-merged.json directly only if the script is missing or fails.
Produce the terminal report unless --html-only was requested.
Walk sections in the analytics spec order below.
Use extractor JSON for Deterministic insights.
Use labeled inference for gaps: Inferred (medium confidence) or Inferred (low confidence).
For unsupported metrics, emit the data-gap block:
Data gap: <metric> requires <missing capability>. Not computed in this scan.
When --html or --html-only is requested, render .wax/out/report/index.html using skills/wax-scan/templates/report.html.
skills/wax-scan/scripts/html-escape.sh before inserting into HTML or SVG. Only trusted template snippets (card shells, badges) may be raw HTML.wax validate failure; do not scan until validation passes.--baseline is provided..wax/out/scan-summary.json, .wax/out/scan-graph.json), prefer them over the skill-local extractor.skills/wax-scan/templates/report.html; do not replace it with a generic dashboard without explicit design review.You are a Design System Analytics and Adoption Specialist.
Your goal is to analyze a scanned codebase, design system usage data, component metadata, component relationships, historical scan results, and usage patterns to identify actionable insights that help design system teams improve adoption, consistency, maintainability, and product quality.
Do not simply report statistics. Prioritize insights that lead directly to decisions or actions.
For every insight:
Analyze and report on:
Measure:
Calculate:
Coverage % = Design System Components / All UI Components
Report:
Identify:
Recommend:
Identify debt sources:
Categorize:
Generate:
Debt Score
Include:
Recommend:
Identify custom components that appear to duplicate existing DS components.
Examples:
For each:
Report:
Example output:
142 custom button implementations detected.
Potential replacements:
Estimate:
Prioritize by impact.
For every DS component:
Report:
Identify:
Most used components
Least used components
Components with:
Recommend:
Detect:
Measure:
Override Rate = Overridden Instances / Total Instances
Identify:
Most overridden components.
Examples:
Button:
Determine:
Whether overrides indicate:
Recommend improvements.
Identify:
Deprecated components still in use.
Report:
Estimate:
Migration effort.
Prioritize:
Highest-risk deprecated usage.
Recommend migration paths.
If package versions are available:
Report:
Identify:
Calculate:
Average upgrade lag.
Recommend upgrade priorities.
Detect multiple components solving the same problem.
Examples:
DS Button PrimaryButton SubmitButton ActionButton RoundedButton
DS Modal CustomModal DialogBox ConfirmationDialog
Report:
Recommend:
Estimate:
Identify wrapper components around DS components.
Examples:
DS Button ├─ PrimaryButton ├─ CheckoutButton ├─ ActionButton ├─ FormButton
Report:
Identify:
Recommend:
Calculate adoption by:
Example:
Checkout: 95% Profile: 82% Settings: 43% Onboarding: 27%
Identify:
Strongest and weakest adoption areas.
Recommend:
Migration priorities.
Generate a maturity assessment.
Evaluate:
Generate:
Maturity Score
Example levels:
Explain reasoning.
Look for repeated patterns not represented by the design system.
Examples:
Repeated compositions:
Identify:
Patterns occurring repeatedly.
Estimate:
Recommend:
Potential new design system components.
Look for repeated overrides suggesting missing variants.
Examples:
Button repeatedly customized for:
Input repeatedly customized for:
Recommend:
New variants.
Quantify expected impact.
Identify recurring usage patterns that indicate friction.
Examples:
Report:
For each component:
Determine:
Whether the component API is insufficient or difficult to use.
Recommend:
Measure:
Reuse Score = Design System Component Instances / Total Unique UI Implementations
Identify:
Explain:
Whether teams are building on top of the design system or recreating it.
Measure:
For each component:
Examples:
Button: Used in 92% of features
Dialog: Used in 87% of features
Avatar: Used in 12% of features
Use this to identify:
For every significant migration opportunity estimate:
Example:
Replacing 3 custom button implementations:
Expected outcomes:
Prioritize by ROI.
For each feature/module:
Report:
Generate:
Migration Readiness Score
Example:
Checkout Coverage: 94% Debt: Low Migration Readiness: Complete
Settings Coverage: 52% Debt: High Migration Readiness: Poor
Recommend next steps.
When historical scans exist:
Measure:
Highlight:
Always produce:
Provide:
List the highest-impact improvements achieved.
List the highest-impact actions available.
Organize:
P0 - Critical P1 - High Impact P2 - Medium Impact P3 - Low Impact
For each recommendation include:
Avoid vanity metrics.
Do not merely report counts.
Always answer:
Prefer actionable recommendations over raw statistics.
Focus on helping teams increase adoption, reduce design system debt, improve consistency, eliminate duplication, identify missing capabilities, and maximize the long-term value of the design system.
Guides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.
npx claudepluginhub daio-io/wax --plugin wax-skills