docs: note about Storybook

CONTRIBUTING.md

@@ -203,6 +203,90 @@ niraxは、Misskeyで使用しているオリジナルのフロントエンド
 vue-routerとの最大の違いは、niraxは複数のルーターが存在することを許可している点です。
 これにより、アプリ内ウィンドウでブラウザとは個別にルーティングすることなどが可能になります。
 
+## Storybook
+
+Misskey uses [Storybook](https://storybook.js.org/) for UI development.
+
+### Setup
+
+```bash
+cd path/to/packages/frontend
+pnpm tsc -p .storybook && (node .storybook/generate.js & node .storybook/preload-locale.js & node .storybook/preload-theme.js)
+```
+
+### Run
+
+```bash
+cd path/to/packages/frontend
+pnpm storybook dev
+```
+
+### Usage
+
+When you create a new component (in this example, `MyComponent.vue`), the story file (`MyComponent.stories.ts`) will be automatically generated by the `.storybook/generate.js` script.
+You can override the default story by creating a impl story file (`MyComponent.stories.impl.ts`).
+
+```ts
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable import/no-duplicates */
+import { StoryObj } from '@storybook/vue3';
+import MyComponent from './MyComponent.vue';
+export const Default = {
+	render(args) {
+		return {
+			components: {
+				MyComponent,
+			},
+			setup() {
+				return {
+					args,
+				};
+			},
+			computed: {
+				props() {
+					return {
+						...args,
+					};
+				},
+			},
+			template: '<MyComponent v-bind="props" />',
+		};
+	},
+	args: {
+		foo: 'bar',
+	},
+	parameters: {
+		layout: 'centered',
+	},
+} satisfies StoryObj<typeof MkAvatar>;
+```
+
+If you want to opt-out from the automatic generation, create a `MyComponent.stories.impl.ts` file and add the following line to the file.
+
+```ts
+import MyComponent from './MyComponent.vue';
+void MyComponent;
+```
+
+You can use msw to mock API requests in the storybook. Creating a `MyComponent.stories.msw.ts` file and add the following line to the file.
+
+```ts
+import { rest } from 'msw';
+export const handlers = [
+	rest.post('/api/notes/timeline', (req, res, ctx) => {
+		return res(
+			ctx.json({
+				notes: [],
+				users: [],
+				hasNext: false,
+			})
+		);
+	}),
+];
+```
+
+Don't forget to re-run the `.storybook/generate.js` script after adding, editing, or removing the above files.
+
 ## Notes
 ### How to resolve conflictions occurred at pnpm-lock.yaml?