SAIスキル大辞典Agent Skills Dictionary
⌕
文字
トップ›Skill›component-refactoring
UI/UX

component-refactoring

component-refactoring

Difyフロントエンドの高複雑度Reactコンポーネントを、フックや子コンポーネントへ分割して段階的に整理する。

AIスキル大辞典による日本語要約
品質評価90/100評価確度：十分
人気度（GitHub Star） 86発掘スコア 66
01

このSkillでできること

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

使い方

01
STEP 1

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

02
STEP 2

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

03
STEP 3

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

04
STEP 4

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

03

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
04

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

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

このDifyのReactコンポーネントを分析し、複雑度を下げる段階的なリファクタリング計画を作ってください。
出力例を見る
検出指標、抽出方針、変更単位、各段階の検証結果
05

安全性チェック

自動解析による参考情報です。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
06

関連Skill