name: storybook-testing
description: Use this skill to create or modify tests for a component.
Component testing
Use this skill to create or modify component tests for the application.
Creating stories
Create a separate story for each state of the component.
Add tests to verify event handling logic included in the component.
Stories must be added next to the component.
If the component file is button.tsx then the stories file is button.stories.tsx
Template for a component story
import { GitHubSignInButton } from "./github-signin-button"; // The module exporting the component
import { Meta, StoryObj } from "@storybook/nextjs-vite"; // Required framework components
const meta = {
component: GitHubSignInButton, // The exported component
title: "Components/Auth/GitHubSignInButton", // The logical path to the component.
}
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {},
};
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1---2name: wmeints-awesome-claude-code-storybook-testing3description: ---4---5---6name: storybook-testing7description: Use this skill to create or modify tests for a component.8----910## Component testing1112Use this skill to create or modify component tests for the application.1314## Creating stories1516- Create a separate story for each state of the component.17- Add tests to verify event handling logic included in the component.18- Stories must be added next to the component. 19- If the component file is `button.tsx` then the stories file is `button.stories.tsx`2021## Template for a component story2223```jsx24import { GitHubSignInButton } from "./github-signin-button"; // The module exporting the component25import { Meta, StoryObj } from "@storybook/nextjs-vite"; // Required framework components2627const meta = {28 component: GitHubSignInButton, // The exported component29 title: "Components/Auth/GitHubSignInButton", // The logical path to the component.30}3132export default meta;33type Story = StoryObj<typeof meta>;3435export const Default: Story = {36 args: {},37};38```3940---41> Converted and distributed by [TomeVault](https://tomevault.io/claim/wmeints) — claim your Tome and manage your conversions.42<!-- tomevault:4.0:skill_md:2026-04-13 -->
Run npx skillmds@latest add tomevault-io/wmeints-awesome-claude-code-storybook-testing in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
--- It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.