system-auditor

Audit design system tokens, folder structure, and npm distributable standards.

23|4|Updated May 7, 2025
One-click install
npx skills add https://github.com/Stack-and-Flow/design-system --skill system-auditor-stack-and-flow
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: system-auditor
Source: https://github.com/Stack-and-Flow/design-system/tree/main/.atl/skills/system-auditor
Command: npx skills add https://github.com/Stack-and-Flow/design-system --skill system-auditor-stack-and-flow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Ensures Stack-and-Flow is a complete, consumer-ready design-system package by auditing tokens, structure, and npm distributability rather than focusing on individual components.

Core Features & Use Cases

  • Token architecture audit: Verify semantic naming, completeness, primitive-vs-semantic layering, and Tailwind v4 @theme compliance.
  • Folder and public API audit: Check atoms/molecules/organisms organization, re-export strategy, and style distribution expectations for consumers.
  • npm distributable audit: Validate package.json essentials, peerDependencies correctness, build output formats, and publish readiness.
  • Actionable remediation: Provide concrete before/after proposals for every issue found, aimed at improving real distributability and theming reliability.

Quick Start

Run a system-level audit for tokens, structure, and npm distributable readiness, then return a structured compliance report with proposed improvements and a final pass verdict.

Frequently Asked Questions about system-auditor

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

FAQPage Schema
How do I audit a design system package for npm publish readiness?

To audit a design system package for npm publish readiness, verify token architecture, folder structure, and package.json exports to ensure consumer distributability. This process checks peerDependencies, build output formats, and theme.css compliance to produce a final PASS verdict.

What is semantic token layering in a design system architecture?

Semantic token layering in a design system architecture separates primitive design values from semantic naming conventions within theme.css. Auditing this layering ensures Tailwind v4 @theme compliance and verifies that tokens are structured correctly for reliable consumer theming.

How do I validate peerDependencies in an npm design system package?

Validating peerDependencies in an npm design system package requires inspecting package.json exports to ensure correct dependency declarations for consumers. A system-level audit verifies these peerDependencies alongside build output formats to confirm distributable standards are met.

Does my design system folder structure need atoms, molecules, and organisms organization?

A design system folder structure benefits from atoms, molecules, and organisms organization to maintain a clear public API. Auditing this structure verifies the re-export strategy and style distribution expectations, ensuring consumers can correctly import components.

What is a design system compliance matrix and when do I need one?

A design system compliance matrix is a structured report detailing token architecture, folder structure, and npm distributable standards verification. You need one during release readiness checks to identify issues and receive concrete before and after improvement proposals.

Why does my design system theme audit fail Tailwind v4 @theme compliance?

A design system theme audit fails Tailwind v4 @theme compliance when semantic naming, token completeness, and primitive versus semantic layering do not align with expected standards. Inspecting theme.css tokens identifies these architecture gaps and generates remediation proposals.