rt-tools-storybook

Enforces Storybook story structure and state-coverage rules for Angular UI kit showcases.

1|Updated Jan 14, 2024
One-click install
npx skills add https://github.com/Eyhenij/rt-tools --skill rt-tools-storybook-eyhenij
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: rt-tools-storybook
Source: https://github.com/Eyhenij/rt-tools/tree/main/.claude/skills/rt-tools-storybook
Command: npx skills add https://github.com/Eyhenij/rt-tools --skill rt-tools-storybook-eyhenij

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Writing Storybook stories for the rt-tools Angular UI kits involves strict conventions — wrapper components, story typing, global providers, and a state-coverage contract — that are easy to violate silently, leaving components under-tested and showcase links broken. ## Core Features & Use Cases - Story authoring rules: Defines the Test*Component wrapper pattern, story typing, controls, and environment decorators for both ui-kit showcases (ports 6006 and 6007). - State-coverage contract: Requires Playground, per-axis stories, States, and Themes stories so every input axis is shown at every value, with undeclarable axes documented rather than skipped. - Atomic design organization: Classifies stories into Atoms, Molecules, Organisms, and Templates with fixed storySort ordering and slug-stable snapshot references. - Use Case: When adding a new button variant to @rt-tools/ui-kit-v2, apply this rule to create the wrapper, the axis matrix stories, and the Overview MDX page that pass the showcase build and docs verification. ## Quick Start Apply the rt-tools-storybook rule to create a complete story set with wrapper, controls, and state matrix for the new component in projects/ui-kit-v2.

Frequently Asked Questions about rt-tools-storybook

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

FAQPage Schema
How do I write a Storybook story for an Angular signal-based component?

Target a Test*Component wrapper rather than the kit component directly, because signal inputs cannot bind to Storybook controls. The wrapper holds the demonstration state and lives next to the story in stories/component/.

What stories are required for state coverage in a UI component library?

Each component needs an Overview MDX page, a Playground story, one story per input axis showing every value, a States story covering default/hover/focus/disabled, and a Themes story showing light and dark side by side.

Should Storybook global providers go in preview.ts or story decorators?

Providers without which the component does not render belong in preview.ts, not in a per-story decorator. A local decorator fixes only its own story while leaving the component's other matrices failing.

Why does my Storybook config change pass linting but fail the build?

The .storybook folder is excluded from ESLint and the package typecheck, so config errors are caught only by the showcase build. Confirm edits with pnpm run build-storybook rather than the general check suite.

When should Storybook axes be crossed in a coverage matrix?

Cross axes only when they visibly affect one another, such as theme and appearance. The full cartesian product is rejected because it produces unmaintainable grids, like over a thousand cells on a button.