القائمة
React / JSX / TSX / .jsx / .tsx 実装を書く前に、コンポーネント設計、Atomic Design を補助観点にした UI 分割、hooks、props、state、UI 実装の責務分離を確認するときに使う。
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/version-1/agents-docs --skill code-reactيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
Git リポジトリで新しい作業を始める前に、最新のデフォルトブランチへ追従し、タスク内容に合う作業ブランチを作成して、不要なローカルブランチ整理を非同期に依頼するときに使う。ユーザーが「ブランチ切って」「作業を始める準備して」「新しいタスク用ブランチを作って」「最新 main から始めたい」などを依頼した場合はこの skill を使い、ブランチ名を報告してからタスク詳細の入力を待つ。
Issue Finder agent がコードベースを変更せず、指定された finder 分野の課題を根拠付きで調査し、優先順位付けした Markdown を指定ディレクトリへ出力するときの共通手順、安全制約、品質基準、出力 contract を定義する。
コード、設定、依存関係、権限境界にある悪用可能な脆弱性を安全に調査し、コードを変更せず課題レポートへ整理するため issue-finder agent に委譲するときに使う。一般的なコードレビュー、侵入や攻撃の実行、脆弱性修正には使わない。
استنادا إلى تصنيف SOC المهني
| name | code-react |
| description | React / JSX / TSX / .jsx / .tsx 実装を書く前に、コンポーネント設計、Atomic Design を補助観点にした UI 分割、hooks、props、state、UI 実装の責務分離を確認するときに使う。 |
React 実装で、コンポーネント境界、状態、表示ロジックを整理して既存 UI に馴染む判断をするための参照 skill。
この skill は、React 実装中に component 境界、hooks / props / state、Atomic Design の補助観点、責務分離を確認するために使う。
画面構成、大きな JSX 分割、component tree、実装順序を先に整理する必要がある場合は、component-design を先に使う。
Atomic Design は、UI を小さな部品から組み立てるための補助観点として使う。
ただし atoms / molecules / organisms の分類を目的化しない。
atoms / molecules は design system 層として扱い、ドメイン知識を持たせない。
この層では design token、variant、layout、interaction state など、見た目と基本操作だけを表現する。
業務ルール、API 由来のデータ構造、ユーザーや注文などのドメイン語彙が入る component は feature / domain 側へ置く。
優先する判断軸:
atoms / molecules が design system の見た目、状態、操作だけを表現しているか。