frontend-component
SKILL.md
新規コンポーネント追加
手順
- 配置:
src/components/<Name>.tsxにファイルを作成。関数コンポーネントで、props は型付きで定義する。 - スタイル: Tailwind のユーティリティクラスを使用する。
- ストーリー:
src/components/<Name>.stories.tsxを作成。Jotai を使う場合はProviderとcreateStore()でデコレータをかける。 - 単体テスト:
src/components/<Name>.test.tsxを作成。within(render(...).container)でクエリをスコープする。Jotai 利用時はProviderでラップする。 - export: 必要に応じて
src/components/index.tsなどから re-export する。
ひな形
- コンポーネント: 関数、props 型、return で JSX。
- ストーリー:
Meta<typeof Component>,StoryObj,Defaultストーリーを 1 つ。 - テスト:
describe,it,render+within(container)で 1 件以上。