synerise-design: Skill for Claude Code

Overview

Perform a thorough quality audit of a single component package in the design system. The audit covers dead code, unit tests, Storybook stories, interactive tests, console logs, suppression comments, code organisation, README completeness, and package.json dependency hygiene. Output is a structured report grouped by severity, followed by a prioritised fix plan for critical and important findings.

Arguments

The user must provide:

1. Package name — e.g., modal, button, popover (kebab-case directory name under packages/components/)

If the package name was not provided, ask: "Which package would you like to audit? (e.g. modal, button, popover)"

Workflow

Step 1 — Locate the package

Find and read all source files for the package:

packages/components/<package-name>/src/         ← component source
packages/storybook/stories/components/<PascalName>/   ← stories

If the stories directory uses a different casing or name, search with:

packages/storybook/stories/components/**/<PascalName>*.stories.tsx

Read all relevant files before forming any judgements. Typical structure to read:

• package.json — declared dependencies, peerDependencies, devDependencies
• <Name>.tsx — main component
• <Name>.types.ts / <Name>.types.tsx — prop types
• <Name>.styles.tsx / style/ — styled-components
• index.ts / index.tsx — public exports
• Sub-component files in nested directories
• Custom hooks: use*.ts / use*.tsx
• Utility/helper files: *utils*, *helpers*, *constants*
• __specs__/ or *.test.tsx — unit tests
• *.stories.tsx — regular stories
• *.test.stories.tsx / *.tests.stories.tsx — interactive/play stories
• README.md — package documentation

Step 2 — Run automated checks

Run these commands and capture the output; use findings to support manual analysis:

# Check for console.log / console.error / console.warn
grep -rn "console\." packages/components/<package-name>/src/ --include="*.ts" --include="*.tsx"

# Check for ts-ignore / ts-expect-error / @ts-nocheck
grep -rn "@ts-ignore\|@ts-expect-error\|@ts-nocheck" packages/components/<package-name>/src/

# Check for eslint-disable comments
grep -rn "eslint-disable" packages/components/<package-name>/src/

# List exported symbols from index
cat packages/components/<package-name>/src/index.ts 2>/dev/null || cat packages/components/<package-name>/src/index.tsx

# Count test files
find packages/components/<package-name>/src -name "*.test.tsx" -o -name "*.spec.tsx" | wc -l

# Count story files
find packages/storybook/stories/components/<PascalName> -name "*.stories.tsx" 2>/dev/null | wc -l

# Check README exists and get its size
wc -l packages/components/<package-name>/README.md 2>/dev/null || echo "MISSING"

# List all import statements in source files (to cross-reference against package.json)
grep -rh "^import" packages/components/<package-name>/src/ --include="*.ts" --include="*.tsx" | grep "from '" | sed "s/.*from '\\([^']*\\)'.*/\\1/" | grep -v '^\.' | sort -u

# Check for MDX overview
ls packages/storybook/stories/components/<PascalName>/Overview.mdx 2>/dev/null || echo "MISSING"

# List argTypes from stories
grep -A 1 "argTypes:" packages/storybook/stories/components/<PascalName>/<PascalName>.stories.tsx | head -30