synerise-design: Skill for Claude Code

Overview

Analyse a single component package and write a CLAUDE.md file inside it (packages/components/<package-name>/CLAUDE.md). The file gives Claude (and other AI tools) a concise, accurate mental model of the component so future tasks — bug fixes, new features, audits, Code Connect — can be completed without re-reading every source file each time.

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 document? (e.g. modal, button, popover)"

Workflow

Step 1 — Read all source files

Locate and read every relevant file in the package. Do NOT skip files — the quality of the CLAUDE.md depends on reading the actual code.

packages/components/<package-name>/
  src/
    <Name>.tsx              ← main component
    <Name>.types.ts(x)      ← prop interfaces
    <Name>.styles.tsx       ← styled-components
    index.ts(x)             ← public exports
    <SubName>/              ← sub-components (recurse into each)
    use*.ts(x)              ← custom hooks
    *utils*, *helpers*, *constants*  ← utilities
    __specs__/ or *.test.tsx         ← tests (scan but don't read in full)
  package.json
  README.md (if present)

Also check for stories (used to understand usage patterns, not documented in full):

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

Step 2 — Analyse the component

Extract the following information from the source files:

2.1 Purpose

What does this component do? One or two sentences. Derive from component name, JSDoc, README, and actual render output.

2.2 Public API

For each exported symbol from index.ts:

• Component name
• Props interface (all props with types and defaults — read from .types.ts and defaultProps / default parameter values)
• Whether it has a ref / forwardRef
• Imperative handles (useImperativeHandle)