Validate component, test, and story file naming and presence.
npx skills add https://github.com/ynotradio/site --skill test-story-coupling
Please help me install this Agent Skill. Skill: test-story-coupling Source: https://github.com/ynotradio/site/tree/main/.claude/skills/test-story-coupling Command: npx skills add https://github.com/ynotradio/site --skill test-story-coupling
This Skill enforces strict naming conventions and file presence requirements to ensure that every user-facing component has corresponding test and story files, preventing technical debt and improving maintainability.
UserProfileCard component, this skill ensures you create UserProfileCard.tsx, UserProfileCard.test.tsx, and UserProfileCard.stories.tsx with matching names, or that UserProfileCard.stories.tsx includes interaction tests.Run the pre-commit hook to validate test and story file coupling for staged component files.
High-intent search queries and answers about installing and using this skill.
To enforce component, test, and story file consistency, you can validate strict naming conventions and file presence using a pre-commit hook and CI validation. This ensures user-facing components have matching `.test.tsx` and `.stories.tsx` files, preventing technical debt.
To ensure Storybook stories have corresponding test files, enforce file completeness via pre-commit validation. This verifies that every user-facing component has matching `.stories.tsx` and `.test.tsx` files with exact, case-sensitive naming.
The best way to automate naming convention checks is by running a pre-commit hook that validates staged component files. This enforces exact, case-sensitive naming for component, test, and story files before changes are committed to the codebase.
File validation differs significantly: user-facing components require both `.test.tsx` and `.stories.tsx` files, while utilities and migration scripts only require `.test.ts` files to pass CI validation and maintain code quality.
Yes, you can pass validation if your Storybook story includes interaction tests. The file completeness check allows a component's `.stories.tsx` file to satisfy testing requirements when it contains interaction tests, rather than requiring a separate `.test.tsx` file.
mauriciodelrioConfigure ESLint, Prettier, or Biome with strict linting rules for React projects.
albinotonninaDiagnose and fix failing tests by reproducing failures and running the full test suite.
TheBushidoCollectiveAutomate Storybook interaction tests with userEvent and waitFor assertions.
georgekhananaevEnforce cross-language code quality standards across TypeScript, Python, Go, and Rust.