Generate component

Skill feel-flow/agent-skills-examples/generation/generate-component

『Agent Skills 実践ガイド』サンプルスキル集 — コピペで使えるSKILL.md 10種

Install

npx -y skills add feel-flow/agent-skills-examples --skill generate-component

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

プロジェクトの規約に従ったReactコンポーネントを生成する。新規コンポーネントやページの作成時に使用。

SKILL.md

1.3 KB, as published. Nobody here has run it

コンポーネント生成

手順

ユーザーからコンポーネント名とオプションを受け取る
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 = {
  // propsの定義
};

export const {ComponentName} = ({ ...props }: {ComponentName}Props) => {
  return (
    <div className={styles.root}>
      {/* コンポーネントの中身 */}
    </div>
  );
};