菜单
Refactor React components to follow project conventions. Use when reorganizing, splitting, or cleaning up existing React component files.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
Generate a commit message from staged changes and let the user review before committing. Use when the user wants to commit changes or create a git commit.
Generate a GitHub pull request title and body from the current branch and let the user review before creation. Use when the user wants to create a pull request.
Investigate any topic by querying multiple external sources (web, official docs, GitHub, MCP servers). Use whenever a question requires information not already in the working context, including library behavior, API specifications, error diagnostics, version comparisons, or general factual lookup.
himari is ncaq's rio-like custom Haskell Prelude. Import it with a single `import Himari`, never `import Himari.Prelude` or other submodules directly. Use when writing or reviewing Haskell code in a project that depends on the himari package.
Prefer the most specific built-in method over general-purpose ones in TypeScript/JavaScript. Use includes over indexOf, some over filter().length, find over filter()[0], flatMap over map().flat(), at(-1) over length-based access, startsWith/endsWith/includes over indexOf on strings, structuredClone over JSON round-trip. Use when writing or reviewing code that searches, tests, transforms arrays, objects, or strings.
Avoid for loops (C-style, for...of, for...in) in TypeScript/JavaScript. Prefer higher-order Array methods like map, filter, find, some, every, reduce. Use when writing or reviewing loops or iteration over arrays, objects, Map, Set, or String.
| name | react-refactor-component |
| description | Refactor React components to follow project conventions. Use when reorganizing, splitting, or cleaning up existing React component files. |
| argument-hint | [file-path or component-name] |
| allowed-tools | AskUserQuestion, Bash(biome:*), Bash(eslint:*), Bash(git diff:*), Bash(git mv:*), Bash(git status:*), Bash(nix:*), Bash(nix-fast-build:*), Bash(npm:*), Bash(pnpm:*), Bash(prettier:*), Bash(tsc:*), Bash(yarn:*), Edit, Glob, Grep, Read, Write |
指示されたReactコンポーネントを、
react-component-conventionスキルで定めるルールに沿ってリファクタリングします。
/react-refactor-component <ファイルパス または コンポーネント名>
$ARGUMENTSで指定されたコンポーネントと、
その周辺で同じファイルに同居している関連コンポーネントを読み取り、
ルール違反を検出してリファクタリングを行います。
$ARGUMENTSが省略された場合は、
IDEで開いているファイル/ユーザーが直前に話題にしたコンポーネントを対象とします。
$ARGUMENTSで指定されたコンポーネントファイルをReadで開きます。
ファイル名から責務がわからない場合は、import元の使用箇所もあわせて確認します。
以下のチェックリストでコードを点検し、違反箇所を列挙します。
index.tsx/index.tsではないかreturnの直前までが肥大化していないか加えてweb-tasukeプラグインの他スキルで定義されているTypeScriptの規約にも違反していないか確認してください。
リファクタリングを実行する前に、何をどう変更するつもりかを箇条書きで提示し、合意を取ります。 具体的には次を含めます。
フック名やファイル名の好み、分割粒度などユーザーの方針判断が必要な箇所があれば、 ここでAskUserQuestionを使って確認します。
合意が取れたらEdit/Writeでリファクタリングを行います。次の順序で進めると壊れにくいです。
リファクタリング後、プロジェクトのリンターとビルドを実行して壊していないことを確認します。
エラーが出た場合は、原因を読み取った上で根本修正します。
相談のない// eslint-disable-next-lineやas anyでの回避は禁止です。
最後に、ユーザーへ次を簡潔に報告します。
svaやpanda CSSのトークンなど既存の命名規約・デザイントークンを勝手に変更しない