JavaScript / React / Vue のフロントエンドコードを実装・レビュー・リファクタリングするときに、 現在のコードベースを調査し、適切な設計・パフォーマンス・レンダリングパターンを エージェントが自律的に選んで適用する。ユーザーが hooks-pattern や dynamic-import などの 個別パターンを指定しなくても、必要な reference を選択する。 Trigger: front-end-design-patterns, frontend design patterns, React設計, Vue設計, JavaScript設計, Reactリファクタリング, Vueリファクタリング, フロントエンドパフォーマンス改善, bundle改善, レンダリング戦略, Reactレビュー, Vueレビュー
インストール方法を見るインストールする前に、エージェントに与えられる指示の中身を確認できます。
JavaScript / React / Vue の設計・実装・レビュー・リファクタリングで、Patterns.dev 由来の参照知識を必要な分だけ読み、対象プロジェクトの既存コードに合わせて適用する。 このスキルはパターン名を増やすための教育スキルではなく、コードベース上の具体的な問題を Inspect / Classify / Select references / Apply or Review / Verify の流れで扱うための実務スキル。
package.json、build tool、routing、component 構成、data fetching、state 管理、既存の類似実装を確認してから判断する。references/decision-matrix.md で参照候補を絞り、必要な original reference だけを読む。大量の reference を一括で読み込まない。references/react/*.md、references/vue/*.md、または references/javascript/*.md の original-skill-body を読んでから判断する。依頼対象が明確な場合は対象ファイルと周辺利用箇所から読む。 対象が曖昧な場合は、プロジェクトの entrypoint、router、主要 component、package scripts、build tool を確認して作業範囲を絞る。
最低限確認する観点:
lint / test / typecheck / build などの検証コマンド次のいずれか、または複数に分類する。
分類できない場合は、まずコード上の症状を確認する。設計変更・性能改善・レビュー観点がない一般的な実装では、既存コードの規約だけを優先し、このスキルの pattern reference を無理に使わない。
references/decision-matrix.md を読み、問題領域から参照候補を 1〜4 件に絞る。
React 固有の話は references/react/index.md、Vue 固有の話は references/vue/index.md、framework-agnostic な JavaScript / loading / bundle / web platform の話は references/javascript/index.md を入口にする。
典型例:
選んだ reference の Original Skill Metadata と original-skill-body を読む。
index.md や decision-matrix.md は入口であり、実装判断の根拠は個別 reference に置く。
複数 reference が必要な場合も、まず最小数で判断する。 例えば React の render 問題に bundle 問題が混ざっているときは、render optimization と dynamic import の両方を読むが、無関係な design pattern reference は読まない。
実装・リファクタリングの場合:
レビューの場合:
変更後は対象プロジェクトに存在するコマンドを確認し、変更内容に合う検証を行う。
候補:
npm run lint
npm run test
npm run typecheck
npm run build
UI や browser behavior を変更した場合は、可能ならローカル実行とブラウザ確認も行う。 検証できない場合は、実行できなかった理由と未検証範囲を報告する。
references/decision-matrix.md から必要な reference を選んでいるoriginal-skill-body を読んでいるまだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
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.
日本語の概要は準備中です。原文の説明を表示しています。
セミナー・講義・ウェビナー・研修・実演動画をローカルで文字起こしし、内容を分析して、必要なスライド画像や動画クリップ付きのHTML／Markdown資料を作る。動画から学習資料・実践ガイドを作りたい場合に使う。映像作品の再現設計やCanvas生成は対象外。
責務・依存方向・状態や副作用の境界を監査し、既存挙動を保って段階的にリファクタリングする。read-only監査にも対応する。
AGENTS.mdや既存スキルをGPT-6 Astra向けに監査・整理するときに使う。契約と意図的な他モデル委譲を保ち、重複、過剰な手順、曖昧な停止条件を修正する。
人物の参照写真から、同一性を保った複数アングルのキャラクターシートを生成・修正する。指定された身だしなみや撮影表現も整える。
既存キャラクター画像を、承認制でピクセルアートの正準画像へ変換し、3状態パイロット、クロマ前処理、状態間ジオメトリ検証、9状態生成、遷移QA、仮配置、アプリ内確認、ロールバック可能な正式配置まで行う。キャラクターからCodexペットを作る依頼に加え、ジャンプで小さくなる、状態ごとに身長が変わる、足元が跳ねる、クロマ縁が出る、アニメーションを修復したい依頼で使用する。