storybook-ui

name	storybook-ui
description	Storybook for UI component development — stories, addons, controls, a11y testing, visual regression. Use when working with storybook ui.
domain	content
author	oyi77
license	Apache-2.0
subdomain	content-creation
tags	["content-creation","digital-content","media","storybook","testing"]
version	1.0.0

Overview

Storybook is a frontend workshop for building, testing, and documenting UI components in isolation. Supports React, Vue, Svelte, Angular, and more. Essential for component-driven development.

Capabilities

• Component development in isolation with hot reload
• Interactive controls for props (args, argTypes)
• Accessibility testing with a11y addon
• Visual regression testing with Chromatic
• Interaction testing with play functions
• Documentation with autodocs and MDX

When to Use

Trigger phrases:

• "storybook ui"

• "Storybook for UI component development — stories, addons, controls, a11y testing"

• Building a component library or design system

• Need to develop UI components in isolation

• Want visual regression testing in CI

• Documenting components for team consumption

• Testing accessibility of UI components

When NOT to Use

• Task is about content strategy, not creation (use strategy skills)
• Task is about content distribution (use distribution skills)
• You need to analyze content performance (use analytics skills)
• Task is about content moderation (use moderation tools)
• You don't have content guidelines
• Task requires domain expertise (consult experts)

Pseudo Code

The storybook-ui workflow follows a standard pipeline pattern.

Core flow:

# storybook-ui primary flow
input = prepare(raw_data)
result = process(input, config={addons, component, controls, development, regression})
validate(result)
deliver(result)

Error handling:

on error:
  log(error_details)
  retry_with_backoff(max=3)
  if still_failing: alert_and_escalate()

Core Workflow

# storybook-ui primary flow
input = prepare(raw_data)
result = process(input, config={addons, component, controls, development, regression})
validate(result)
deliver(result)

Error Handling

on error:
  log(error_details)
  retry_with_backoff(max=3)
  if still_failing: alert_and_escalate()

Installation

npx storybook@latest init
# React example
npm install -D @storybook/react @storybook/react-vite

CSF3 Story Format

// Button.stories.tsx
import type { Meta, StoryObj } from "@storybook/react"
import { Button } from "./Button"

const meta: Meta<typeof Button> = {
  title: "Components/Button",
  component: Button,
  tags: ["autodocs"],
  argTypes: {
    variant: { control: "select", options: ["primary", "secondary", "outline"] },
    size: { control: "select", options: ["sm", "md", "lg"] },
  },
}
export default meta
type Story = StoryObj<typeof Button>

export const Primary: Story = {
  args: { variant: "primary", children: "Click me" },
}

export const :  = {
  :  (
    
  ),
}

Interaction Testing

import { expect, userEvent, within } from "@storybook/test"

export const WithInteraction: Story = {
  args: { label: "Counter" },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement)
    await userEvent.click(canvas.getByRole("button"))
    await expect(canvas.getByText("Count: 1")).toBeInTheDocument()
  },
}

Storybook Config

// .storybook/main.ts
export default {
  stories: ["../src/**/*.stories.@(ts|tsx)"],
  addons: ["@storybook/addon-essentials", "@storybook/addon-a11y"],
  framework: "@storybook/react-vite",
}

Common Patterns

• Autodocs: tags: ["autodocs"] auto-generates documentation page
• Decorators: Wrap stories with ThemeProvider, Router, etc.
• Play functions: Test interactions that run in the browser
• MDX docs: Combine Markdown and JSX for rich documentation
• Chromatic: npx chromatic for visual regression in CI

How to Use

1. Define content goal (traffic, engagement, conversion, brand awareness)
2. Research target audience pain points and search intent
3. Generate content using appropriate AI tools
4. Edit and humanize output for authenticity
5. Optimize for target platform (SEO, hashtags, format)
6. Schedule and distribute across channels
7. Measure performance and iterate

Red Flags

• AI-generated content sounds robotic: Always run through humanizer before publishing
• Engagement dropping week-over-week: Content fatigue or algorithm change — vary formats
• Duplicate content across platforms: Adapt content per platform, don't just cross-post
• No content calendar: Sporadic posting kills audience retention
• Ignoring analytics: Content without measurement is just publishing, not marketing

Verification

• Skill output matches expected behavior

Process

1. Analyze the task requirements
2. Apply domain expertise
3. Verify output quality

Anti-Rationalization Table

Rationalization	Reality
"Good enough content works"	Quality content drives engagement. Mediocre content gets ignored.
"I will optimize later"	SEO and distribution need optimization from the start.
"Templates are good enough"	Templates are a starting point. Custom content outperforms generic.