component-refactoring｜AIスキル大辞典

このSkillでできること

✓複雑度や行数の指標を確認する
✓状態、イベント、API処理を抽出する
✓大きなコンポーネントを子コンポーネントに分割する
✓各段階でlint、型チェック、テストを行う

使い方

STEP 1

analyze-componentの結果や対象コンポーネントを示す

STEP 2

検出された機能に応じて分割計画を作る

STEP 3

一度に一つの部分を抽出する

STEP 4

既存の命名、ディレクトリ、export互換性を確認する

Skillのインストール

AIにこのSkillを追加してもらう

GitHub URLごとCodexやClaude Codeへ渡し、現在の環境に合う方法を判断してもらいます。

このGitHubリポジトリにあるSkillを確認し、現在の環境に適した方法でインストールしてください。
インストール後、正常に利用できることを確認し、基本的な使い方も簡潔に説明してください。

Repository:
https://github.com/Charlie85270/Dorothy

手動でインストールする

README / SKILL.mdから機械抽出できたコマンドのみ表示しています。推測したコマンドではありません。

git clone https://github.com/Charlie85270/Dorothy.git
cd Dorothy/app/dorothy
npm install
npx @electron/rebuild        # Rebuild native modules for Electron
npm run electron:dev          # Development mode
npm run electron:build        # Production build (DMG)

npm install
npm run dev

このSkillを使うプロンプト例

Skill名を明示すると、意図したSkillを使わせやすくなります。自動発動型では必須とは限りません。

このDifyのReactコンポーネントを分析し、複雑度を下げる段階的なリファクタリング計画を作ってください。

出力例を見る

検出指標、抽出方針、変更単位、各段階の検証結果

安全性チェック

自動解析による参考情報です。Skillの安全性を保証するものではありません。

外部API通信検出あり

Shellコマンド実行検出あり

ファイル読み取り明確な記述なし

ファイル書き込み明確な記述なし

ネットワークアクセス検出あり

認証情報明確な記述なし

検出根拠を見る

shell: sk execution logs | --- ## Development ### Scripts ```bash npm run dev # Next.js dev server npm run electron:dev # Electron + Next.
network: eautiful desktop app to orchestrate your [Claude Code](https://claude.ai/code) ,[Codex](https://chatgpt.com/codex), [Gemini](https://geminicli.com/), [Gr
network: te your [Claude Code](https://claude.ai/code) ,[Codex](https://chatgpt.com/codex), [Gemini](https://geminicli.com/), [Grok](https://x.ai/cli) and local a

component-refactoring

このSkillでできること

使い方

Skillのインストール

AIにこのSkillを追加してもらう

このSkillを使うプロンプト例

安全性チェック

関連Skill

code-kit

verify-wink

od-contribute