Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add ncaq/konoka --skill react-refactor-componentgit clone --depth 1 https://github.com/ncaq/konokaWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/ncaq/konoka/react-refactor-component)<a href="https://agentmods.dev/skills/ncaq/konoka/react-refactor-component"><img src="https://agentmods.dev/badge/skills/ncaq/konoka/react-refactor-component/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/ncaq/konoka/react-refactor-component"><img src="https://agentmods.dev/badge/skills/ncaq/konoka/react-refactor-component.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00029 | $0.01378 |
| Opus 5 | $0.00015 | $0.00689 |
| Sonnet 5 | $0.00006 | $0.00276 |
| Haiku 4.5 | $0.00003 | $0.00138 |
Grade A, and why
react-refactor-component scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
What it actually says
Reactコンポーネントリファクタリング
指示されたReactコンポーネントを、
react-component-conventionスキルで定めるルールに沿ってリファクタリングします。
使い方
/react-refactor-component <ファイルパス または コンポーネント名>
$ARGUMENTSで指定されたコンポーネントと、
その周辺で同じファイルに同居している関連コンポーネントを読み取り、
ルール違反を検出してリファクタリングを行います。
$ARGUMENTSが省略された場合は、
IDEで開いているファイル/ユーザーが直前に話題にしたコンポーネントを対象とします。
ワークフロー
対象を読む
$ARGUMENTSで指定されたコンポーネントファイルをReadで開きます。
ファイル名から責務がわからない場合は、import元の使用箇所もあわせて確認します。
違反項目を洗い出す
以下のチェックリストでコードを点検し、違反箇所を列挙します。
- 構造順序: import → デザイン定義 → props定義 → コンポーネントの順序になっているか
- 1ファイル1コンポーネント: ファイル内のコンポーネントは1つだけか
- 1ファイル1コンポーネント補足: 新規または大幅書き換え対象のファイル名が
index.tsx/index.tsではないか - 肥大化: 関数の冒頭から最初のJSX、つまり
returnの直前までが肥大化していないか - 肥大化: JSX内に重複する構造、深い条件分岐、外側の準備変数の多さ、複数ドメイン概念の混在などの読みづらさが同居していないか
加えてweb-tasukeプラグインの他スキルで定義されているTypeScriptの規約にも違反していないか確認してください。
変更の見取り図をユーザーに提示する
リファクタリングを実行する前に、何をどう変更するつもりかを箇条書きで提示し、合意を取ります。 具体的には次を含めます。
- 切り出す予定のカスタムフック/子コンポーネントとそのファイル名
- 元ファイルの最終的な構成、デザイン定義・props・コンポーネントの配置
- リネームが発生する場合は旧ファイル名 → 新ファイル名のマッピング
フック名やファイル名の好み、分割粒度などユーザーの方針判断が必要な箇所があれば、 ここでAskUserQuestionを使って確認します。
段階的に編集する
合意が取れたらEdit/Writeでリファクタリングを行います。次の順序で進めると壊れにくいです。
- カスタムフックや子コンポーネントなど切り出し先の新規ファイルを作成する
- 元ファイルから切り出した実装を取り除き、新規ファイルからimportする
- デザイン定義 → props → コンポーネントのファイル順序を整える
- ファイル名のリネームが必要な場合は、それを最後に行い、import元をすべて更新する
検証
リファクタリング後、プロジェクトのリンターとビルドを実行して壊していないことを確認します。
エラーが出た場合は、原因を読み取った上で根本修正します。
相談のない// eslint-disable-next-lineやas anyでの回避は禁止です。
報告
最後に、ユーザーへ次を簡潔に報告します。
- 検出した違反項目とその対応
- 新規作成/リネーム/削除されたファイル
- リンターとビルドの結果
- 動作確認が必要な箇所。 リファクタリングなので振る舞いは変わらない想定だが、念のため確認してほしい点を伝える
やってはいけないこと
- バグ修正・仕様変更・最適化など振る舞いの変更を伴うリファクタリングを、 明示的な指示なしに混ぜ込まない
- いずれかのルールを「これは例外でOK」と独断で判断しない。 どうしても例外にせざるを得ない場合は必ずユーザーに確認する
- 「将来こうなるかもしれないから」という理由で抽象化を増やさない。 今ある具体に対して必要最低限の分割だけを行う
svaやpanda CSSのトークンなど既存の命名規約・デザイントークンを勝手に変更しない- 切り出した結果、importの循環参照やファイル間の責務の逆流が起きる構造にしない
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 4d ago First seen · 92 lines · 29 tokens per session scan A 2cf28f1bed8f
react-refactor-component is a skill published in the GitHub repository ncaq/konoka (3 stars, last pushed yesterday), licensed Apache-2.0. It adds 29 tokens to every session and 1,378 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-05.
Other skills, from other repositories
cloudflare-nextjs
Deploy Next.js to Cloudflare Workers via the OpenNext adapter (@opennextjs/cloudflare). Use for SSR/ISR/SSG/App or Pages Router, getCloudflareContext, bindings (D1/R2/KV/AI/Hyperdrive), caching tiers, skew protection, multi-worker, custom worker, env vars, or worker…
aceternity-ui
100+ animated React components (Aceternity UI) for Next.js with Tailwind. Use for hero sections, parallax, 3D effects, or encountering animation, shadcn CLI integration errors.
auto-animate
AutoAnimate (@formkit/auto-animate) zero-config animations for React. Use for list transitions, accordions, toasts, or encountering SSR errors, animation libraries complexity.
base-ui-react
MUI Base UI unstyled React components with Floating UI. Use for accessible components, Radix UI migration, render props API, or encountering positioning, popup, v1.0 rc / pre-GA issues.
bun-nextjs
This skill should be used when the user asks about "Next.js with Bun", "Bun and Next", "running Next.js on Bun", "Next.js development with Bun", "create-next-app with Bun", or building Next.js applications using Bun as the runtime.
bun-react-ssr
Use when building server-rendered React with Bun, including streaming SSR, hydration, renderToString, or custom SSR without a framework.