Skip to content
cccskills
FreePublished on GitHub

apply-design

デザインの差し替え。ロジックは一切触らず見た目(HTML/CSS/テンプレート)だけを更新する。「このデザインに差し替えて」「UIをFigmaの通りに変えて」「見た目だけ変えて」 「デザインを更新して」「CSSだけ直して」などのリクエストで使用する。

ロジック変更を伴う場合はrevise-specを使う。

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

Works withFigma
See how to install

Files included (1)

  • SKILL.md1.6 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

デザインの差し替え

手順

  1. 指定されたSpec IDまたは画面を特定
  2. デザインファイル(スクショ、Figmaリンク等)があれば分析
  3. デザイン指定がない場合:CLAUDE.mdの「デザイン方針」に従う
  4. 現在のコードのUI部分を特定
  5. HTML/CSS/テンプレート等の見た目部分のみ変更(ロジックは触らない)
  6. 変更内容を設計書に記録:
    • 該当する要件定義書にデザイン変更の内容を追記(「デザイン変更履歴」セクション。なければ作成)
    • デザインファイルを使った場合、docs/designs/ に保存して要件定義書からリンクする
  7. .claude/skills/_shared/finish-impl.md の共通仕上げ手順を実行
  8. 次のステップを提案(「他の画面のデザインも更新しますか?」)

ルール

  • ロジック(バリデーション、API呼び出し、データ処理等)は一切変更しない
  • テストが通らなくなった場合はデザイン変更を見直す
  • CLAUDE.mdにデザインルールがあればそれに従う

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

既存プロジェクトに新しいリポジトリを追加する。Workspaceにリポを追加した後、 CLAUDE.md・設計書・ドメイン構成を差分更新する。 「モバイルリポを追加した」「新しいリポを取り込んで」「リポを追加したので設計書を更新して」 「Workspaceにリポを足した」などのリクエストで使用する。 init-spec の移行モードではファイル存在チェックしか行わないため、 既存ドキュメントの内容を新リポに合わせて拡張するにはこのスキルを使う。

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

i-standard1/yamasaki6Updated Aug 26, 2026

既存プロジェクトをサブエージェントで並列分析し、 精度の高い overview.md を生成する。init-spec の前処理として使う。 「既存プロジェクトを分析して」「コードベースを理解して設計書を作って」 「overview.mdを作って」などのリクエストで使用する。 ファイル数が200を超えるプロジェクトで特に有効。 200以下の場合は単一エージェントで全体を読む方が精度が高いため、 init-spec をそのまま実行することを提案する。

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

i-standard1/yamasaki6Updated Aug 26, 2026

browse

Free

ブラウザで画面を確認する。agent-browser CLI を使って画面のスクリーンショット撮影、 アクセシビリティツリー取得、フォーム操作、画面遷移などを行う。 「画面見て」「ブラウザ確認して」「スクショ撮って」「現状把握して」「画面開いて」 「ログインして確認して」「画面の状態を教えて」「UIを確認して」などのリクエストで使用する。 E2Eテストの作成・実行には gen-tests(Playwright)を使うこと。本スキルはテスト実行ではなく 「AIの目」としてブラウザを操作し、画面状態を把握するためのもの。

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

i-standard1/yamasaki6Updated Aug 26, 2026

ClaudeDesign(claude.ai/design)とClaude Codeの連携。DesignSyncツールで デザインプロジェクトからプロトタイプHTML等を取得(インポート)、または ローカルのコンポーネントをデザインシステムプロジェクトへ同期(プッシュ)する。 「ClaudeDesignからデザインを取得して」「claude.ai/design のURLを取り込んで」 「デザインプロジェクトに同期して」「デザインシステムをプッシュして」 などのリクエスト、または claude.ai/design のURLが渡されたときに使用する。 取得したデザインのコード実装への適用は apply-design を使う。

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

i-standard1/yamasaki6Updated Aug 26, 2026

詳細設計書の一括生成。2つのモードを自動判定する: (A) コード分析モード: 既存コードから詳細設計書を逆生成する(init-spec + spec-all 完了後) (B) 設計書ファーストモード: 要件定義書から詳細設計書を新規作成する(コードなし) 「詳細設計を作って」「設計書を完成させて」「実装に必要な設計書を全部作って」 「他のエンジニアに渡せる設計書にして」などのリクエストで使用する。

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

i-standard1/yamasaki6Updated Aug 26, 2026

MkDocs プレビュー(:8000)と承認API(:8765)を同時起動する。「ドックを起動して」「docsプレビュー見たい」「設計書をブラウザで確認したい」「承認ボタン使いたい」等のリクエストで発火する。

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

i-standard1/yamasaki6Updated Aug 26, 2026

See all skills by i-standard1

Report a problem with this skill