Generate component

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

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

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.

SKILL.md

1.3 KB, 321 tokens by cl100k_base, 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>
  );
};

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.