Skip to content

Ship design-system Claude skills in the react-components package - #147

Open
RomanPogorov wants to merge 1 commit into
masterfrom
aidbox-ui-pattern-recommendations
Open

Ship design-system Claude skills in the react-components package#147
RomanPogorov wants to merge 1 commit into
masterfrom
aidbox-ui-pattern-recommendations

Conversation

@RomanPogorov

Copy link
Copy Markdown
Contributor

What

Distributes the hs:react-components and hs:layouts Claude skills inside @health-samurai/react-components so any consumer of the package gets them — version-locked to the installed release.

How consumers use it

pnpm add @health-samurai/react-components
# then, once:
pnpm hs-react-components sync-skills   # or wire to postinstall

sync-skills copies the skills into <project>/.claude/skills/ (or --symlink) and gitignores them. Wiring it to the consumer's postinstall keeps skills matched to the installed package version.

Contents

  • Skills moved into packages/react-components/skills/ (source of truth); skills + bin added to files so they publish.
  • hs:react-components — generated from source: every component with its props/states/variants/defaults, composition parts, exported *Props type, plus patterns.md (rules), tokens.md, icons.md. Generator: scripts/skill/generate.mjs (extracts cva variants + story argTypes); config.json holds curated metadata; a guard errors if a component is missing from config; check-skill gates staleness (wired into pre-commit).
  • hs:layouts — recommended app-shell / list / master-detail / editor / console / builder / states patterns distilled from Aidbox UI (framed as recommendations, not requirements).
  • bin hs-react-components sync-skills (copy default, --symlink, --dir).
  • create-react-app --skills now wires a postinstall that runs sync-skills.
  • Version bump to 0.0.0-alpha.22.

Notes

  • Adding a component: add an entry to scripts/skill/config.json, run pnpm generate-skill. The guard makes this non-optional.
  • Pre-existing noNonNullAssertion lint findings in src/components/code-editor/* are untouched by this PR.

🤖 Generated with Claude Code

Distribute the hs:react-components and hs:layouts skills with the package
itself so any consumer gets them, version-locked to the installed release.

- Move skills into packages/react-components/skills/ (source of truth) and
  add skills + bin to files so they publish.
- Generate the component skill from source (cva variants + story argTypes)
  via scripts/skill/generate.mjs; config.json holds curated metadata; a guard
  errors when a component is missing, and check-skill gates staleness.
- Enrich every component reference with props/states/composition/type; add
  patterns.md (rules), tokens.md, icons.md.
- Add hs:layouts: recommended app-shell/list/master-detail/editor/console/
  builder/states patterns distilled from Aidbox UI.
- Add bin `hs-react-components sync-skills` (copy default, --symlink) that
  installs skills into a project's .claude/skills and gitignores them.
- create-react-app --skills wires a postinstall that runs sync-skills.
- pre-commit runs check-skill; bump to 0.0.0-alpha.22.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@andreyorst
andreyorst requested a review from Panthevm July 29, 2026 11:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant