| name | generate-component |
| description | プロジェクトの規約に従ったReactコンポーネントを生成する。新規コンポーネントやページの作成時に使用。 |
| argument-hint | <コンポーネント名> [--page] |
コンポーネント生成
手順
- ユーザーからコンポーネント名とオプションを受け取る
- template.tsx のひな型に従ってコンポーネントを生成する
- examples/good-component.tsx のスタイルに従い、examples/bad-component.tsx のパターンは避ける
--page オプションがある場合はページコンポーネントとして生成する
出力ルール
- 関数コンポーネント(アロー関数)で記述する
- Propsは型定義を分離して
type {Name}Props = {...} で定義する
- デフォルトエクスポートは使わない(named exportのみ)
- スタイリングは CSS Modules を使用する
テンプレート
import styles from "./{ComponentName}.module.css";
type {ComponentName}Props = {
};
export const {ComponentName} = ({ ...props }: {ComponentName}Props) => {
return (
<div className={styles.root}>
{/* コンポーネントの中身 */}
</div>
);
};