Skip to content
cccskills
FreePublished on GitHub

front-end-refactor-loop

指定フロントエンド範囲のcomponent・state・render・loadingを監査し、挙動を保ってリファクタリングする。read-only監査にも対応する。

The English summary is being prepared. Showing the original description.

See how to install

Files included (67)

  • SKILL.md11.4 KB
  • agents/openai.yaml303 B
  • references/front-end-design-patterns/decision-matrix.md9.4 KB
  • references/front-end-design-patterns/index.md1.3 KB
  • references/front-end-design-patterns/javascript/bundle-splitting.md4.8 KB
  • references/front-end-design-patterns/javascript/command-pattern.md5.1 KB
  • references/front-end-design-patterns/javascript/compression.md21.8 KB
  • references/front-end-design-patterns/javascript/dynamic-import.md4.2 KB
  • references/front-end-design-patterns/javascript/factory-pattern.md3.8 KB
  • references/front-end-design-patterns/javascript/flyweight-pattern.md5.0 KB
  • references/front-end-design-patterns/javascript/import-on-interaction.md18.6 KB
  • references/front-end-design-patterns/javascript/import-on-visibility.md2.6 KB
  • references/front-end-design-patterns/javascript/index.md4.8 KB
  • references/front-end-design-patterns/javascript/islands-architecture.md12.9 KB
  • references/front-end-design-patterns/javascript/js-performance-patterns.md11.2 KB
  • references/front-end-design-patterns/javascript/loading-sequence.md21.1 KB
  • references/front-end-design-patterns/javascript/mediator-pattern.md5.0 KB
  • references/front-end-design-patterns/javascript/mixin-pattern.md6.2 KB
  • references/front-end-design-patterns/javascript/module-pattern.md9.5 KB
  • references/front-end-design-patterns/javascript/observer-pattern.md7.2 KB
  • references/front-end-design-patterns/javascript/prefetch.md5.1 KB
  • references/front-end-design-patterns/javascript/preload.md9.2 KB
  • references/front-end-design-patterns/javascript/prototype-pattern.md5.5 KB
  • references/front-end-design-patterns/javascript/provider-pattern.md12.8 KB
  • references/front-end-design-patterns/javascript/proxy-pattern.md7.0 KB
  • references/front-end-design-patterns/javascript/prpl.md7.8 KB
  • references/front-end-design-patterns/javascript/route-based.md2.2 KB
  • references/front-end-design-patterns/javascript/singleton-pattern.md11.5 KB
  • references/front-end-design-patterns/javascript/static-import.md2.9 KB
  • references/front-end-design-patterns/javascript/third-party.md26.4 KB
  • references/front-end-design-patterns/javascript/tree-shaking.md4.4 KB
  • references/front-end-design-patterns/javascript/view-transitions.md15.3 KB
  • references/front-end-design-patterns/javascript/virtual-lists.md13.0 KB
  • references/front-end-design-patterns/javascript/vite-bundle-optimization.md16.2 KB
  • references/front-end-design-patterns/react/ai-ui-patterns.md18.6 KB
  • references/front-end-design-patterns/react/client-side-rendering.md8.4 KB
  • references/front-end-design-patterns/react/compound-pattern.md9.0 KB
  • references/front-end-design-patterns/react/hoc-pattern.md12.2 KB
  • references/front-end-design-patterns/react/hooks-pattern.md20.2 KB
  • references/front-end-design-patterns/react/incremental-static-rendering.md6.7 KB
  • references/front-end-design-patterns/react/index.md3.4 KB
  • references/front-end-design-patterns/react/presentational-container-pattern.md7.3 KB
  • references/front-end-design-patterns/react/progressive-hydration.md9.8 KB
  • references/front-end-design-patterns/react/react-2026.md19.4 KB
  • references/front-end-design-patterns/react/react-composition-2026.md13.1 KB
  • references/front-end-design-patterns/react/react-data-fetching.md15.0 KB
  • references/front-end-design-patterns/react/react-render-optimization.md27.9 KB
  • references/front-end-design-patterns/react/react-selective-hydration.md4.8 KB
  • references/front-end-design-patterns/react/react-server-components.md10.6 KB
  • references/front-end-design-patterns/react/render-props-pattern.md10.3 KB
  • references/front-end-design-patterns/react/server-side-rendering.md8.7 KB
  • references/front-end-design-patterns/react/static-rendering.md6.0 KB
  • references/front-end-design-patterns/react/streaming-ssr.md6.7 KB
  • references/front-end-design-patterns/vue/async-components.md8.5 KB
  • references/front-end-design-patterns/vue/components.md8.7 KB
  • references/front-end-design-patterns/vue/composables.md13.0 KB
  • references/front-end-design-patterns/vue/container-presentational.md7.5 KB
  • references/front-end-design-patterns/vue/data-provider.md7.2 KB
  • references/front-end-design-patterns/vue/dynamic-components.md6.5 KB
  • references/front-end-design-patterns/vue/index.md2.0 KB
  • references/front-end-design-patterns/vue/provide-inject.md6.4 KB
  • references/front-end-design-patterns/vue/render-functions.md6.7 KB
  • references/front-end-design-patterns/vue/renderless-components.md6.6 KB
  • references/front-end-design-patterns/vue/script-setup.md8.6 KB
  • references/front-end-design-patterns/vue/state-management.md9.7 KB
  • references/prompt-templates.md3.9 KB
  • references/report-templates.md3.2 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

front-end-refactor-loop

指定されたフロントエンド範囲を、挙動変更なしで反復的に整理する。main Codex がループ制御、採否判定、統合、検証、最終報告を担当し、監査と実装を進める。独立した監査や局所実装は、分担利益があり実行環境で許可される場合にだけ委譲する。

絶対ルール

  • 設計パターン資料は、このスキルの references/front-end-design-patterns/ から読む。
  • cursor-agent-sprint-cli は WORKSPACE/.codex/skills/dev/cursor-agent-sprint-cli をパス参照して使う。
  • Cursor CLI worker にversion control/remote操作、sprint 完了判断、最終報告、進行管理ファイルの任意更新を任せない。
  • 機能、UI 仕様、公開 API、データ形式、保存形式、URL、イベント順、外部 API 呼び出しを意図的に変えない。
  • 既存の未コミット変更を戻さない。関係がある場合は差分を読んで作業し、関係がなければ触らない。
  • worker の報告だけで採用しない。main Codex が必ず git diff、write scope、検証結果を確認する。
  • 性能改善を主張する変更、render / state / bundle / canvas / list / queue に影響する変更では、必要に応じて性能計測ゲートを通す。

参照資料

必要になった時点で以下を読む。最初から全 reference を読み込まない。

  • 設計パターンの入口: references/front-end-design-patterns/decision-matrix.md
  • React 参照候補: references/front-end-design-patterns/react/index.md
  • Vue 参照候補: references/front-end-design-patterns/vue/index.md
  • JavaScript / bundle / loading 参照候補: references/front-end-design-patterns/javascript/index.md
  • Worker 用プロンプト雛形: references/prompt-templates.md
  • ループ報告雛形: references/report-templates.md

decision-matrix.md で現在の症状に必要な候補へ絞り、必要な個別 reference の Original Skill Metadata と original-skill-body を読む。

Read-only audit mode

利用者が監査のみを依頼した場合、または呼出元スキルがread-only audit modeを指定した場合、この節をSprint初期化、Cursor preflight、実装委譲、修正loopより優先する。

  • repositoryと指定scopeをfreshに読み、編集、Sprint/進捗file作成、テスト/build実行、Cursor CLI、Gitの状態変更、外部作用を行わない。
  • 許容された既存差分をgit status --shortで確認し、baselineと現在差分の両方を監査する。
  • decision-matrix.mdから現在の症状に必要なreferenceを選び、選んだ個別referenceを読む。
  • component/composition、hook/effect、context/selector/state、render/canvas/list、bundle/loading、accessibility、SSRのうちscopeへ適用する観点を一件目で止めずに一巡する。
  • blanket memoization、行数だけの分割、未計測の性能主張、UI仕様変更、新dependencyをfindingへ昇格させない。
  • audit agentは採否、goal化、実装、完了判定をせず、一回のfresh reportを返して停止する。

出力には次を含める。

  1. 実際に確認したscopeとpath
  2. 選択したpattern referenceと適用理由
  3. findingごとのseverity、path/line、到達するrender/interaction経路、影響、最小修正境界、既存oracle、性能計測要否
  4. 既に差分で直っている問題、却下/deferした候補と理由

追加のP0/P1/P2がなければNO_FINDINGSとする。read-only audit modeはここで終了する。

起動前確認

ユーザー指示から以下を確定する。危険な曖昧さがない限り、質問で止まらず既存コードから推定する。

  • 対象範囲: route、component、directory、feature、関連 hook / store / utility。
  • 変更禁止条件: 機能、UI、公開 API、データ形式、保存形式、外部通信、イベント順。
  • 検証条件: typecheck、lint、test、build、browser check、既存 fixture。
  • 結果記録: 修正ループごとに変更path、採否、検証結果を記録する。

最初に repository context を読む。

git status --short

あわせて AGENTS.md、package.json、対象ファイル、周辺利用箇所、既存 test、build / lint / typecheck script を確認する。

Sprint 初期化

Cursor CLI workerへ実際に委譲する場合だけ、cursor-agent-sprint-cliを読み、1回のrunにつき1つのSprintを使う。main単独では会話内または既存PLANへscope、採用finding、検証結果を記録し、Sprint初期化を省略する。

WORKSPACE="$(pwd)"
SPRINT_SKILL_DIR="$WORKSPACE/.codex/skills/dev/cursor-agent-sprint-cli"
SPRINT_SLUG="frontend-refactor-<short-slug>"
"$SPRINT_SKILL_DIR/scripts/init_sprint.sh" --workspace "$WORKSPACE" --slug "$SPRINT_SLUG"
. "$WORKSPACE/.codex/tmp/$(date +%y%m%d)_$SPRINT_SLUG/sprint-env.sh"

SPRINT_SKILL_DIR が存在しない場合だけ、リポジトリ実体に合わせて絶対パスを確認する。cursor-agent-sprint-cli の scripts や templates はこのスキルへコピーしない。

brief.md には対象範囲、挙動維持制約、参照する pattern reference、検証コマンド、完了条件を書く。tasks.md には round、audit task、implementation task、main-owned task、write scope、禁止範囲、検証を記録する。

全体フロー

  1. 対象範囲と検証条件を確定する。
  2. decision-matrix.md から今回使う設計パターン reference を選び、必要な個別 reference を読む。
  3. mainまたは許可されたread-only担当が固定scopeを監査する。Cursor委譲時も通常のpreflightは追加しない。
  4. mainが全findingの採否と必要な性能計測を決め、完了条件を固定する。性能Gate対象は実装前にbaselineを測る。
  5. 依存順に実装する。局所委譲する場合は排他的scopeとoracleを渡し、mainが検収する。
  6. 性能計測が必要ならbefore/afterを同条件で測り、一時計測コードを削除する。
  7. mainが差分、挙動維持、必要な検証を確認し、変更pathと結果を記録する。
  8. 統合後に固定scopeをfreshに読み直して最終監査する。修正が必要なら影響範囲を再確認する。
  9. 採用findingの解消、必要な検証、固定scopeのNO_FINDINGSが揃ったら報告する。

新規監査

初回と統合後の最終監査は、固定scopeの現在の実装を直接確認する。独立評価を行う場合は先入観を与えないfreshなread-only担当を使う。修正後の再確認では、既知のfindingと影響経路を引き継ぎ、根拠なしに全面監査を繰り返さない。

監査 task は原則 read-only にする。対象が広い場合は、route、component、shared hook、state、media、bundle などで scope を分け、各 worker の担当範囲を重ねすぎない。

監査 worker には以下を必ず渡す。

  • repository 絶対パス。
  • git status --shortで許容する既存差分と、今回のread scope。
  • read-only 制約。
  • 対象範囲。
  • 読むべき pattern reference の候補。
  • 設計パターン資料はこのスキルの同梱referenceから選ぶこと。
  • 出力形式と NO_FINDINGS の完了条件。

完了判定に使えるのは、開始時の差分と今回の採用修正をbaselineとして照合し、対象範囲をfreshに読み直し、指定形式で返した結果だけ。BLOCKED、形式崩れ、親セッションの要約、範囲外の一般論は採用しない。

指摘の採否

NO_FINDINGS でない場合、main Codex が全件を読む。

  • 機能変更、UI 仕様変更、公開 API 変更、データ形式変更を含む提案は採用しない。
  • 好みだけの抽象化、既存規約に合わない置き換え、大きな依存追加は採用しない。
  • 採用する指摘は、変更範囲、挙動維持根拠、検証方法、性能計測要否を明確にする。
  • 同一 round 内で安全に直せる指摘はまとめて直す。write scope が重なる作業を複数 worker に並列委譲しない。

実装委譲の基準

Cursor CLI worker に渡してよいもの:

  • 単一 component / hook / utility の局所整理。
  • テスト追加や fixture 追加。
  • import 整理、型補助、純粋関数抽出。
  • write scope を絶対パスで限定でき、他 task と重ならない変更。

main Codex が担当するもの:

  • component API、routing、state / context、data fetching、bundle boundary などの contract 判断。
  • 複数 worker 成果の統合。
  • 性能計測ゲートの設計と結果判断。
  • version control操作、最終検証、最終報告。
  • write scope が広い変更、既存未コミット変更に接する変更。

性能計測ゲート

以下に該当する場合は、原則として before / after の最小計測を行う。

  • render 回数、React commit duration、state churn に影響する。
  • state / context / selector / memo / callback / component boundary を変える。
  • list / grid / card / table / canvas / image preview / hover / drag / queue / timer に関わる。
  • route split、lazy import、bundle size に関わる。
  • large object state、large data URL、image encode / decode、canvas 同期処理に関わる。
  • レポートで「速くなる」「再描画が減る」「bundle が分離される」と主張する。

型整理、命名整理、局所ファイル分割、dead code 削除、import 整理、性能改善を主張しない保守性中心の変更では省略してよい。省略した場合は理由を書く。

計測コードは一時差分にする。after 計測後に必ず削除し、git status --short と git diff で残っていないことを確認する。

検証

変更内容に合う最小検証を実行する。

優先順:

  1. typecheck
  2. 対象ファイル lint
  3. 対象 test
  4. build
  5. browser check
  6. 性能計測ゲートの after 計測

これは全件の実行順を強制するものではない。変更が影響する検証とrepository必須checkを選び、合格後は新しい変更や失敗がある場合だけ再実行する。

検証できない場合は、理由、代替確認、残リスクを report に書く。

許可範囲内の修正と検証は完了まで続ける。契約衝突、追加権限、必須証拠の取得不能がある場合は、その依存箇所だけを未確認として報告する。

完了条件

  • 固定scopeの最終監査と必要な影響範囲の再確認で、未解決のP0/P1/P2がなくNO_FINDINGSとなっている。
  • 採用した指摘が実装・検収・検証済みである。
  • 性能計測ゲート対象の一時計測コードが残っていない。
  • 修正済みloopの変更path、採否、検証結果が記録済みである。
  • 対象差分が採用修正と一致し、既存の利用者差分を保護している。今回の未コミット差分を残してよく、clean化のためのcommit・reset・削除を行わない。
  • 最終レポートに対象範囲、loop 履歴、適用した pattern、検証結果、性能計測の有無、残リスクを含めている。

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Rebuild a degraded AI image to remove crunchy textures and repeated-edit artifacts while preserving identity, style, and composition. Use for clean remakes, not ordinary retouching or upscaling.

The English summary is being prepared. Showing the original description.

ryryo/dot-claude-dev3Updated Oct 18, 2026

セミナー・講義・ウェビナー・研修・実演動画をローカルで文字起こしし、内容を分析して、必要なスライド画像や動画クリップ付きのHTML/Markdown資料を作る。動画から学習資料・実践ガイドを作りたい場合に使う。映像作品の再現設計やCanvas生成は対象外。

The English summary is being prepared. Showing the original description.

ryryo/dot-claude-dev3Updated Oct 18, 2026

責務・依存方向・状態や副作用の境界を監査し、既存挙動を保って段階的にリファクタリングする。read-only監査にも対応する。

The English summary is being prepared. Showing the original description.

ryryo/dot-claude-dev3Updated Oct 18, 2026

AGENTS.mdや既存スキルをGPT-6 Astra向けに監査・整理するときに使う。契約と意図的な他モデル委譲を保ち、重複、過剰な手順、曖昧な停止条件を修正する。

The English summary is being prepared. Showing the original description.

ryryo/dot-claude-dev3Updated Oct 18, 2026

人物の参照写真から、同一性を保った複数アングルのキャラクターシートを生成・修正する。指定された身だしなみや撮影表現も整える。

The English summary is being prepared. Showing the original description.

ryryo/dot-claude-dev3Updated Oct 18, 2026

既存キャラクター画像を、承認制でピクセルアートの正準画像へ変換し、3状態パイロット、クロマ前処理、状態間ジオメトリ検証、9状態生成、遷移QA、仮配置、アプリ内確認、ロールバック可能な正式配置まで行う。キャラクターからCodexペットを作る依頼に加え、ジャンプで小さくなる、状態ごとに身長が変わる、足元が跳ねる、クロマ縁が出る、アニメーションを修復したい依頼で使用する。

The English summary is being prepared. Showing the original description.

ryryo/dot-claude-dev3Updated Oct 18, 2026

See all skills by ryryo

Report a problem with this skill