{"slug":"murphytrueman-component-audit","name":"component-audit","description":"Audit a design system's component library for health, producing a findings-based assessment of usage, complexity, duplication, and coverage gaps with actionable recommendations. This produces a deep, single-dimension audit of the component library, NOT a cross-cutting system health assessment. Trigger when someone says: audit my components, component health, what components do I have, unused components, component coverage, component review, assess my library, or anything about evaluating the quality and health of a component library. Do NOT trigger for building machine-readable index files or dependency graphs for AI agents — use codebase-index for those. Do NOT trigger for a holistic health summary — use system-health for that.","long_description":"---\nname: component-audit\ndescription: \"Audit a design system's component library for health, producing a findings-based assessment of usage, complexity, duplication, and coverage gaps with actionable recommendations. This produces a deep, single-dimension audit of the component library, NOT a cross-cutting system health assessment. Trigger when someone says: audit my components, component health, what components do I have, unused components, component coverage, component review, assess my library, or anything about evaluating the quality and health of a component library. Do NOT trigger for building machine-readable index files or dependency graphs for AI agents — use codebase-index for those. Do NOT trigger for a holistic health summary — use system-health for that.\"\nreferences:\n - ../../knowledge-notes/component-governance.md\n - ../../knowledge-notes/component-bestiary-reference.md\n - ../../knowledge-notes/output-discipline.md\n---\n\n# Component audit\n\nA skill for auditing a design system's component library across four dimensions: usage signals, complexity distribution, duplication, and coverage gaps. Produces an inventory with tiered findings and a prioritised action list.\n\n## Context\n\nComponent libraries accumulate silently. New components arrive through contributions. Old components persist because nobody wants to be the one who removes them. Variants proliferate because each edge case adds one more. The result is a library that grows in mass without growing proportionally in value.\n\nA component audit brings the library back into focus: what is there, what is used, what duplicates what, and what is missing that teams have been building around. It is the maintenance work that makes the next year of development faster.\n\n---\n\n## Configuration\n\nBefore producing output, check for a `.ds-ops-config.yml` file in the project root. If present, load:\n- `system.framework` — pre-selects framework-specific inventory guidance\n- `system.component_count` — pre-populates the small-system gate\n- `severity.*` — overrides for finding severity ratings\n- `integrations.*` — enables auto-pull for component data (see below)\n- `recurring.*` — enables comparison with previous audit\n\n## Auto-pull integrations\n\nIf integrations are configured in `.ds-ops-config.yml`, pull data automatically:\n\n**Figma MCP** (`integrations.figma.enabled: true`):\n- Read the published library from `integrations.figma.file_key` via Figma MCP\n- Extract the component inventory: names, variant counts, description status\n- Use Figma library analytics (if available via REST API) to pull detach rates per component — high detach rates are a direct usage signal\n- Cross-reference the Figma inventory against the code inventory to detect components that exist in design but not in code (or vice versa)\n\n**npm registry** (`integrations.npm.enabled: true`):\n- Pull download statistics for `integrations.npm.package_name` (or each package in `integrations.npm.scoped_packages` for monorepos) using `npm view [package] --json` or the npm registry API\n- Use download trends (last 30 days, last 90 days) as a usage signal in Dimension 1\n- For monorepos: note that per-package downloads are unreliable (see monorepo handling) — use as a directional signal only\n\n**Storybook** (`integrations.storybook.enabled: true`):\n- Fetch the story index from `integrations.storybook.url/index.json`\n- Extract component list, story counts per component, and documentation status\n- Components with zero stories are likely undocumented — flag in Dimension 1\n\n**GitHub** (`integrations.github.enabled: true`):\n- Use `gh api search/code` to count import references for each component across consuming repositories\n- Pull PR activity for the component library — components with no PRs in 12+ months are likely stale\n- Pull open issues tagged with component names to surface known problems\n\n**Documentation platform** (`integrations.documentation.enabled: true`):\n- If platform is `zeroheight`: use the Zeroheight API to pull page list and last-updated dates per component\n- If platform is `supernova`: use the Supernova API to pull component documentation coverage\n- If platform is `storybook`: same as Storybook integration above (docs tab status)\n- Map documentation coverage to the component inventory — components without docs pages are flagged in Dimension 3\n\nIf an integration fails, log it and proceed with manual input.\n\n## Step 0: Identify what you're looking at\n\nBefore auditing components, determine what kind of shared UI this is. The library type changes which dimensions matter and how findings should be framed.\n\n**Classify from codebase signals:**\n\n- **Design system** — Full template applies. All four audit dimensions (usage, complexity, duplication, coverage) plus composition graph and AI readiness.\n- **Component library** — Focus on complexity distribution, duplication, and coverage gaps. Usage signals may not exist yet — note this rather than flagging it as a problem. Skip AI readiness unless the team has signalled interest.\n- **Pattern library** — Focus on duplication and documentation completeness per pattern. Complexity distribution is less meaningful because patterns are reference implementations, not consumed packages. Coverage gaps should be framed as \"patterns your team builds frequently but hasn't documented\" rather than \"components missing from the system.\"\n- **Utility collection** — Focus on duplication and naming consistency. A utility collection with overlapping helpers is actively harmful; one with clear, non-overlapping utilities is doing its job. Skip coverage gaps — a utility collection is not trying to be comprehensive.\n\n**Include the classification in the report header** as \"Library type: [Design system / Component library / Pattern library / Utility collection]\" and skip dimensions that don't apply.\n\n---\n\n## Step 1: Gather the component inventory\n\nAsk for or confirm (skip questions already answered by auto-pull):\n- Access to the component library: Figma library, Storybook, npm package, or component documentation\n- The framework and component format: React (JSX/TSX), Vue SFC (`.vue`), Twig/Fractal (`.twig`), Svelte (`.svelte`), or Web Components\n- Whether this is a monorepo or single-package library (see monorepo handling below)\n- Any usage data available: adoption signals, access logs, consumer surveys, or engineering usage stats\n- Any known problem areas: components teams avoid, components with open bug reports, components that frequently generate support questions\n\nIf usage data is not available, the audit focuses on structural assessment rather than usage analysis. Note in the output which findings are based on direct analysis and which are inferred from structure.\n\n**Small-system note (fewer than 5 components):** With 1–4 components, the audit shifts from pattern detection to per-component deep dive. Skip complexity distribution analysis (Step 3, Dimension 2) — it is not meaningful at this scale. Instead, focus on: completeness of each component's API and state coverage, documentation status per component, and whether the system covers the team's highest-frequency needs. The coverage gaps dimension (Step 3, Dimension 4) becomes the most valuable — what common patterns are teams building locally because the system does not yet provide them? The answer to that question is the system's roadmap.\n\n## Step 1b: Define usage signals\n\nBefore proceeding to inventory and audit, establish which usage signals will ground the assessment in Dimension 1. Ask the user:\n\n\"Which usage signals will you track to assess component usage? Select all that apply:\"\n\n- **Figma instantiations** — Detach rates on design library components (high detach rates indicate a component that does not serve its consumers well)\n- **Code imports** — References to component imports across the codebase, counted by frequency\n- **Production shipping** — Components present in actively deployed products vs. unused/experimental\n- **Support tickets** — Questions, bug reports, or support volume per component\n- **Download stats** — npm downloads (if applicable) or analytics from a component documentation platform\n- **User surveys** — Direct feedback from consuming teams about component utility\n\nDocument which signals are available for this audit. Usage assessment in Dimension 1 is only as strong as the signals used — if only one signal is available, note that the usage assessment is based on limited data and may be incomplete.\n\n**Monorepo handling:**\n\nMonorepo structures break standard usage signals. A component published as `@system/button` in its own package may show high npm downloads while `@system/date-picker` shows low — but the download count reflects bundling behaviour, not actual component usage by teams. Apply these adjustments:\n\n- **Per-package download counts are unreliable.** In monorepos, teams often install the umbrella package or a subset of packages. Use import analysis across consuming products instead of download counts where possible.\n- **Detect versioning patterns:** Components with `-next` or `-v2` suffixes (e.g. `button-next`, `DataTableV2`) indicate in-flight migrations. Count both versions but flag the pair — the older version is a deprecation candidate, the newer is not yet fully adopted. Neither version's usage number is accurate in isolation.\n- **Classify private vs. public components:** Components with underscore prefixes (`_InternalBase`, `_LayoutHelper`), components in directories named `internal/`, `private/`, or `utils/`, and components not re-exported from the package's public barrel file (`index.ts`) are internal implementation details. Exclude them from the public component count and from coverage gap analysis. Count them separately as \"internal utilities.\"\n- **Distinguish utility components from user-facing components:** Layout primitives (`Box`, `Stack`, `Flex`, `Grid`, `VisuallyHidden`, `Portal`) are infrastructure components, not user-facing UI. They should be counted in the inventory but categorised separately. A library with 30 components where 15 are layout utilities and 15 are UI components has a different health profile than one with 30 UI components.\n\n**Framework-specific inventory notes:**\n\n- **Vue SFC:** Each `.vue` file in the components directory is typically one component. Check for `