본문으로 건너뛰기
cccskills
무료GitHub에 공개

stories

Invoke FIRST, before creating, editing, or deleting components, stories, styles, CSS, themes, colors, or design tokens — anything that changes how the UI looks, no exceptions. Also for starting or previewing Storybook to verify UI, requests to show, browse, or list components, stories, or UI states, and docs, props, or usage lookups.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(1)

  • SKILL.md2.4 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Prerequisites:

  1. Storybook must be installed in the project. Invoke the /storybook-init skill to set up Storybook, but only if the user explicitly invoked this skill and approves a Storybook installation.
  2. Storybook must be at least 10.5 (or next while 10.5 is not yet released). Invoke the /storybook-upgrade skill to upgrade it, but only if the user explicitly approved a Storybook upgrade.
  3. Ensure @storybook/addon-mcp is installed. If it is missing, install it with npx storybook add @storybook/addon-mcp.

Run the Storybook dev server and every storybook ai command from the same working directory: the package where Storybook is installed (in a monorepo often a leaf package such as packages/ui).

Run STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai --help and read the output in its entirety to get the mandatory, ordered workflow for working on UI changes, writing stories, and keeping stories in sync with every frontend component you create, modify, or delete. This workflow explains how to write stories, preview stories, and display a curated Storybook review.

Before invoking any storybook ai command for the first time in a session, run STORYBOOK_FEATURE_AI_CLI=1 npx storybook ai <command> --help and read it fully. The top-level help only lists the commands; each command's payload shape and usage rules (which fields to include when) live in its own help output. Never guess a --json payload from the command name — a validation error only reports missing required fields, not the optional fields the workflow expects you to provide.

Some commands require a running Storybook dev server. When Claude preview tooling is available, start the dev server through that tooling:

  1. Ensure there is a Storybook launch entry in .claude/launch.json (the preview_start tool description documents the file format) with autoPort: true and port: 6006. Use the project's preferred package manager and existing package.json Storybook script instead of inventing a new command whenever possible.
  2. Start the Storybook launch entry with the preview_start tool.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

init

무료

Use when adding Storybook to a project that does not have Storybook configured yet.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

storybookjs/mcp2712026년 9월 7일 업데이트

setup

무료

Use this skill when Storybook is already installed and the user wants a working `preview` file and stories for real components.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

storybookjs/mcp2712026년 9월 7일 업데이트

Use when adding Storybook to a project that does not have Storybook configured yet.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

storybookjs/mcp2712026년 9월 7일 업데이트

Use this skill when Storybook is already installed and the user wants a working `preview` file and stories for real components.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

storybookjs/mcp2712026년 9월 7일 업데이트

Use this skill when Storybook exists but needs an upgrade.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

storybookjs/mcp2712026년 9월 7일 업데이트

upgrade

무료

Use this skill when Storybook exists but needs an upgrade.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

storybookjs/mcp2712026년 9월 7일 업데이트

storybookjs의 스킬 모두 보기

이 스킬의 문제 신고