new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Storybook · Setup · all subjects

installation & framework setup

15 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Install addon-docs package

Install @storybook/addon-docs with: yarn add -D @storybook/addon-docs. Docs has peer dependencies on react. If writing stories in MDX, add react as well: yarn add -D react.

Framework-specific installation for addon-docs

Framework-specific installation guides exist for addon-docs: React, Vue 3, Angular, Ember, Web Components, and Common setup (all other frameworks). These should be consulted during installation.

React peer dependency for MDX in Angular

MDX has peer dependencies on react. If you want to write stories in MDX with Angular, you may need to add react as a dependency: yarn add -D react

Install @storybook/addon-docs for Angular

To add Storybook Docs for Angular, install the @storybook/addon-docs package using yarn add -D @storybook/addon-docs. Ensure that the versions for all @storybook/* packages match.

Automatic Compodoc setup during sb init

During sb init for Angular, you will be asked whether you want to setup Compodoc for your project. Answer yes to have Compodoc ready to use automatically.

Install @compodoc/compodoc dependency

To use Compodoc, install it as a dev dependency: yarn add -D @compodoc/compodoc

Install @storybook/addon-docs for Vue 3

To add Storybook Docs to a Vue 3 project, install the addon-docs package using yarn add -D @storybook/addon-docs. Ensure that the versions for all @storybook/* packages match.

Getting started with Vite and Storybook on new project

On a new Vite project, run: npm create vite@latest (follow the prompts), then npx storybook@latest init --builder vite && npm run storybook

Install Storybook with Vite builder flag

When installing Storybook, use the `--builder=vite` flag if you do not have a `vite.config` file at your project root. If a vite.config file exists, the vite builder is chosen automatically.

storybook-setup output instructions

Follow the printed Markdown output precisely when running the setup command. Do not substitute your own plan.

storybook-setup skill prerequisites

Before using the storybook-setup skill, confirm that Storybook exists by checking for package.json and .storybook/ directory. If not present, switch to the storybook-init skill instead.

Storybook setup skill purpose

The setup skill is used when Storybook is already installed and the user wants a working preview file and stories for real components.

How to run Storybook AI setup

Run the command 'npx storybook ai setup' from the project root, or from the Storybook package in a monorepo.

Storybook setup skill prerequisites

The setup skill requires two prerequisites: (1) Storybook must already exist, confirmed by the presence of package.json and .storybook/ directory; if not present, the storybook:init skill should be used instead. (2) Storybook must be at least version 10.5 (or next while 10.5 is not yet released); if older or upgrade/repair is needed, the storybook:upgrade skill should be used first.

Follow printed Markdown in setup skill

When running the setup skill, follow the printed Markdown precisely and do not substitute your own plan.

Give your agent this brain