skills.rest
Eyhenij
EyhenijCOMMUNITY
Explore all skills by this author →
GitHub

rt-tools-storybook-story

Creates Storybook stories for Angular components using Test wrapper components and snapshot parameters.

1|Updated Jan 14, 2024
Search Tags:#angular#signals#visual testing#storybook#snapshot#ui-kit#component stories
One-click install
npx skills add https://github.com/Eyhenij/rt-tools --skill rt-tools-storybook-story-eyhenij
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: rt-tools-storybook-story
Source: https://github.com/Eyhenij/rt-tools/tree/main/.claude/skills/rt-tools-storybook-story
Command: npx skills add https://github.com/Eyhenij/rt-tools --skill rt-tools-storybook-story-eyhenij

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Writing Storybook stories for signal-based Angular components fails when stories target InputSignal-based components directly, and visual snapshot tests silently pass when skip markers are forgotten or overlay panels render outside the captured frame. ## Core Features & Use Cases - Test Wrapper Pattern: Stories target a Test*Component wrapper with plain mutable fields instead of the rtui-* component, giving Storybook args a bindable control surface. - State Matrix & Snapshot Rules: Defines snapshot-by-subtraction semantics, width helpers matching media queries, and fullPage framing for CDK Overlay panels rendered outside data-story-root. - Use Case: When adding a story for a new toggle component in @rt-tools/ui-kit-v2, follow the pattern to create the TestRt* wrapper, title it Atoms/..., enumerate enum options in argTypes, and skip redundant frames with a reasoned storySnapshotSkip. ## Quick Start Create a Storybook story for the toggle component following the rt-tools storybook pattern with a Test wrapper and snapshot parameters.

Frequently Asked Questions about rt-tools-storybook-story

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?▼

Create a Test wrapper component with plain public fields next to the story, and target that wrapper in the Meta instead of the InputSignal-based component. The wrapper's mutable fields become the Storybook args control surface.

How to add visual snapshot tests to Storybook stories?▼

Stories are snapshotted by default and skipped by subtraction using storySnapshotSkip with a mandatory reason. Frames are taken at the data-story-root element, and overlay stories need snapshot fullPage set to true.

Why does my Storybook snapshot miss the CDK Overlay panel?▼

CDK Overlay panels render in a container on document body, outside the data-story-root element, so a root-scoped frame never captures them. Open the overlay from a play function and set snapshot fullPage to true.

Why do wrapper styles not apply inside ng-template in Storybook?▼

Angular emulated encapsulation means the wrapper's attribute never reaches nodes inside a projected ng-template, so its styles silently match nothing. Use inline styles or move the node out of the projected template.

When should a Storybook story specify custom snapshot widths?▼

Only when the component has width-based media queries, using helpers like storyWidthAtMost or storyWidthAtLeast that match the actual media query. Strict thresholds shift by one pixel so the frame checks the correct side.

Related Skills

Explore More Software Engineering Skills→
dylantarredylantarre
38

angular

Build token-driven Angular components with signals and standalone components.

Community
Advanced
BruceTyndallBruceTyndall

visual-regression-checker

Capture and compare web application screenshots against a baseline to detect visual drift.

Community
Intermediate
LedgerHQLedgerHQ
23

component-mdx

Writes Storybook MDX component docs using the two-tab Overview and Implementation structure.

Official
Intermediate
heaptracetechnologyheaptracetechnology
13

e2e-test

Automate end-to-end browser tests for multi-step user journeys with Playwright or Cypress.

Community
Advanced