# Wmeints Awesome Claude Code Storybook Testing

> ---

- Skill: `tomevault-io/wmeints-awesome-claude-code-storybook-testing` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/wmeints-awesome-claude-code-storybook-testing`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/wmeints-awesome-claude-code-storybook-testing/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/wmeints-awesome-claude-code-storybook-testing

---

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

```jsx
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](https://tomevault.io/claim/wmeints) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-13 -->