連休？そもそも用事がないこもりです。こんにちは。
前回のアップデートからあまり間が空いていませんが、新しいスキルが2つ増えたのと、既存スキルにもそれに関わる更新が入りました。今回は「作ったモックアップを順番に最適化して仕上げられるパイプライン」「モックアップ生成をAI任せにせず、日本のサイトらしい演出を好みで追加指定できるスキル」という、実案件寄りの内容が中心となっております。
これで講座内のスキルは計31個となりました。
更新されたスキルの変更内容は以下にまとめていますが、「japanese-web-guideline」については、スキルの読み込みが有効にも関わらずタスクを実行中にその指定をスキップしてしまい、効果が適用されたりされなかったりというランダムに起きていた挙動を改善しました。今後はきちんと日本語サイト固有の調整などが効いてくれると思います。
なお、今回の新規追加、変更分のスキルは講座内に反映済です。
夏休み応援クーポンまだ間に合います
7月20日（祝・海の日）の23:59まで、「夏休み応援クーポン」的な感じで来週からの価格改定の前に、現在の販売価格から5,500円オフのディスカウントクーポンを配布中です（商品詳細ページにも記載があります）。チェックアウト時にご利用ください。
今回そのキャンペーンを始めるにあたり、講座内に収録されているスキルをフル活用してお試し的なランディングページを作ってみました。こちらトップページだけですが、コードに一切触れずに環境構築〜要件定義〜エージェントによる生成〜各種最適化処理まで約1時間30分で作業終了（使用モデル: Sonnet 5 - High）。
コンテンツの中身は、「brief-me」スキルでの指示を使ってエージェントが自分で好き勝手に書き起こしたものです（スキルの紹介については、講座内のREADMEのテキストは読ませています）。つまり、文章についてはほとんど手を入れていませんし、最適化といっても文字の折り返しの調整などを「click-to-fix」を使ったブラウザから指示した程度です。
新規スキル
finish-me
すでに構築済みのモックアップに対して、仕上げ工程だけをまとめて実行するパイプラインスキルです。
-
rewrite-me（文言を BRIEF.md に合わせる）→mobile-polish（モバイル最適化）→click-to-fix（目視レビュー・手動修正）→tailwind-review（クラス整理）→ プロジェクトが Astro の場合のみastro-doctor（構造最適化）の順で実行します -
full-pipelineがサブエージェントで最後まで自律実行するのに対し、こちらは各ステップが自分自身の質問をそのままあなたに投げかける対話形式です - 1ステップ終わるごとに「次へ進む / このステップをスキップ / ここで終了」を確認するので、各工程の判断に自分で関わりながら仕上げられます
「手放しで全部やってほしいときは full-pipeline、1工程ずつ確認しながら仕上げたいときは finish-me」という使い分けでどうぞ。
japanese-lp-seasoning
日本の商業ランディングページや企業サイトでよく使われる機能的なあしらい — フルブリード演出（Heroへの横幅一杯の写真配置など）・カルーセル・バナースライダー・スクロール連動アニメーション・縦書き — を、選択してから実装するスキルです。
- 最初に「賑やかに寄せるか、引き算で見せるか」という密度の質問を1問だけ挟みます。余白を大胆に使うミニマル方向も同格の正式な選択肢で、引き算を選んだ場合は余白比率と1点アクセントのガイドラインが適用されます
- 「賑やかに」を選んだ場合のみ、具体的な演出を複数選択で選びます。リストは例示であって正解の全てではなく、「とりあえずカルーセルを入れておく」ような機械的な採用はしません
-
cognitive-ui-designがページの構造（視線誘導パターン）を扱うのに対し、こちらは構造とは別軸の装飾・機能レイヤーを扱うので、併用できます - 実装はライブラリ追加より先にネイティブ CSS（
scroll-snap、IntersectionObserver など）を検討する方針で、prefers-reduced-motionへの配慮も組み込み済みです
単体で呼び出せるほか、create-mockup / create-multi-mockup から呼び出すこともできます（下記の更新参照）。なお、このスキルは扱うドメインが日本の商業サイトそのものなので、本体も日本語のまま配布しています。
更新スキル
japanese-web-guideline
-
見出し直下の説明文が折り返して複数行になる場合の揃え方を
text-justifyに統一しました。従来は折り返し時に左揃え（text-left）へ切り替える指定でしたが、中央揃えの見出しの下で左揃えの段落が並ぶと端の凹凸が目立つため、両端揃えに変更しています -
見出しへの
text-wrap: balance+word-break: keep-allを、デフォルトでは有効化しない方針に変更しました。このスタイルは孤立文字や和欧混植の不自然な改行を抑えてくれる一方、コンテンツ次第で副作用が出ます —balanceはモバイルで不自然に短い位置での折り返しを生むことがあり、keep-allは折り返し候補を減らすため長い見出しではみ出し・横スクロールが起きがちです。しかもこれは CSS だけでは自動解決できず、<wbr />の手動挿入というコンテンツ依存の調整が必要になります - 新しい方針では、見出しの折り返しは成り行き＋明示的な
<br>（モバイルのみ有効化する<br class="md:hidden" />など）で処理し、スタイル自体はコメントアウトした状態で CSS に仕込んでおきます。完了報告時に「コメントを解除して、はみ出す箇所に<wbr />を追加すればさらに細かく調整できる」という案内が入るので、有効化するかどうかはコンテンツを見ながら自分で判断できます。なお本文向けのp { text-wrap: pretty }は副作用が小さいため、従来どおり有効のままです
create-mockup / create-multi-mockup
-
japanese-lp-seasoningとの連携を追加しました。同スキルをインストールしていると、冒頭の質問バッチに「演出の密度感」の質問（賑やかに / 引き算で / 使わない）が1問追加され、回答に応じて seasoning が自動で呼び出されます -
create-multi-mockupでは密度と演出の選択は全パターン共通で1回だけ確認します。選ばれた演出は「共有メニュー」として扱われ、各パターンは自分のレイアウト構造とコンテンツに合う演出だけを採用します — 全パターンに同じ演出をベタ貼りはしません - seasoning を入れていない場合の挙動は従来と変わりません
- 「日本語サイトですか？」に「はい」と答えたのに、実装段階でガイドラインがたまに無視される問題を修正しました。原因は2つあり、①ガイドラインの読み込みが序盤に1回だけで、実装ステップに再確認の指示がなかったため、質問や色決めを挟むうちに抜け落ちていた ②「既存プロジェクトに追加」モードではガイドライン適用ステップごとスキップされる設計で、質問には答えたのに回答が捨てられていた、というものです
- 修正は3点セットです。実装直前にガイドラインの主要ルール（イタリック禁止・見出しの揃え・両端揃え・本文の実 px・行間）を再確認するブロックを追加し、実装後チェックに grep による機械判定（イタリックの混入・広すぎる行間の検出）とガイドラインのチェックリスト走査を追加、さらに「既存に追加」モードでも japanese-web-guideline だけは適用されるようにしました。日本語サイトの回答が最後まで確実に効くようになります
入手・更新方法
マイコース内の「KMRVID Calude Skills」の最初の動画に添付してある最新版のファイルをを再ダウンロードし、お使いのスキルフォルダを ~/.claude/skills/ に上書きコピーしてください（作業ディレクトリ内でお使いの場合は、そこの `.claude/skills/` へ）。
新規の finish-me と japanese-lp-seasoning は、依存関係の詳細を README の「スキルの依存関係」セクションにまとめてあるので、あわせてご確認ください。