feat(skill): screenshot-to-lism-html スキルを追加 - #508
daisuke999 wants to merge 6 commits into
Conversation
lism-css-guide の補助スキルとして、Webデザインのスクリーンショット画像から Lism CSS を使った忠実なHTML再現を行うワークフロー（画像分割 → 抽象DOMツリー 抽出 → プリミティブへのマッピング → セクション別コーディング → Visual Critique の 5 フェーズ）を追加。
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughスクリーンショットからLism CSSベースのHTMLを生成する新規Skillと、その運用資料、補助スクリプト、検証・対照実験の記録を追加しています。 Changesscreenshot-to-lism-html Skill 一式
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant SplitImageScript
participant CapturePreviewScript
participant CompareScript
participant Filesystem
User->>SplitImageScript: 入力画像を渡してセクション分割を実行
SplitImageScript->>Filesystem: section_XX.png を保存
User->>CapturePreviewScript: 生成HTMLのプレビュー撮影を依頼
CapturePreviewScript->>Filesystem: スクロールセグメントを合成してPNG保存
User->>CompareScript: 参照画像とプレビューPNGの比較を依頼
CompareScript->>Filesystem: analysis.md と viewer HTML を出力
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
ddryo
left a comment
ddryo
left a comment
There was a problem hiding this comment.
Claude Review (by claude-fable-5)
PR: #508 feat(skill): screenshot-to-lism-html スキルを追加
概要
スクリーンショット画像からLism CSSベースのHTMLを忠実に再現するワークフロースキルscreenshot-to-lism-htmlの新規追加（18ファイル、+3762行）。画像分割→抽象DOMツリー抽出→骨格HTML→セクション別スタイリング→Visual Critiqueの5フェーズ構成で、Lism CSSの記法・トークンはlism-css-guideへ委譲する設計。
指摘事項
Blocking（マージ前に修正が必要）
-
pattern-catalog.md:15— 「container（コンテンツ幅制限）」の対応クラスがis--container/<Container>になっているが、幅制限の役割を持つのはis--wrapper/<Wrapper>- 理由: 実CSS（
packages/lism-css/src/scss/trait/is/_container.scss）で確認したところ、.is--containerはcontainer-type: inline-sizeの宣言と--sz--bleedの伝播のみで、幅制限機能を持たない。幅制限＋センタリングは.is--wrapper（子要素へのmax-inline-size+margin-inline: auto）の責務。lism-css-guide/SKILL.mdの役割分担表（幅制御の行）とも不一致。マッピング表の先頭行の誤りのため、生成されるHTML全般で幅制限が効かない恐れがある - 提案:
is--wrapper/<Wrapper>（サイズはcontentSize/-max-sz:*）へ修正。コンテナクエリ基準としてis--containerが別途必要になるケースは補足として書き分ける
- 理由: 実CSS（
-
SKILL.md:77-78/generation-prompts.md:55, 60/pattern-catalog.md:37, 55— 現行lism-css-guideに存在しない節名を参照（計6箇所）- 理由: 「プリフライト・トークン照合」「プリフライト・c--定義時の分解」「プリフライト・プリミティブ選定」「
c--*分解ルール」という語・節名は現行のskills/lism-css-guide/のどこにも存在しない（旧版ガイド前提の記述）。参照先が見つからず、エージェントが探索で迷うか参照を諦める - 提案: 現行の節へ張り替える（トークン照合→
references/authoring.md「デザインデータ取り込みフロー」、c--分解→antipatterns.md「Property Class で書けるのに CSS で書く」およびSKILL.mdのC7、プリミティブ選定→SKILL.mdのC2〜C4）
- 理由: 「プリフライト・トークン照合」「プリフライト・c--定義時の分解」「プリフライト・プリミティブ選定」「
-
SKILL.md:77— デザインデータ取り込みフローの説明が現行ガイドの内容と食い違う- 理由: (a) 参照先が
lism-css-guide/SKILL.mdとされているが、実体はreferences/authoring.md「デザインデータ取り込みフロー」にある。(b) A/B/Cの定義が現行と入れ替わっている（PR: A=px直書き / B=最寄りトークン / C=基準値上書き ⇔ 現行: A=最寄りトークンに丸める / B=カスタムトークン化または基準値上書き / C=px直書き（例外））。(c) 現行フローでは画像入力の既定動作は「最寄りトークンへ丸める」であり、全値でユーザー確認を求める記述は現行ルールと不整合 - 提案: A/B/Cを本スキル側で再定義せず、
references/authoring.mdのフローへの参照に置き換える（選択肢の正本はガイド側にある旨も明記）
- 理由: (a) 参照先が
-
SKILL.md:38, 51, 88/visual-critique-loop.md:12— スクリプト実行パスがCursor由来（.cursor/skills/...）のまま- 理由: 本リポジトリ配下では
skills/screenshot-to-lism-html/scripts。PR本文で調整予定と自認されているが、このままではリポジトリ内で手順どおりに動かない - 提案: 本リポジトリ基準のパスへ修正（
../../../../前提の相対パス指定も合わせて見直し）
- 理由: 本リポジトリ配下では
-
scripts/split_image.js:112— 画像処理失敗時もexit code 0で終了する- 理由: catchブロックが
console.errorのみでprocess.exit(1)していない。エージェントはBashのexit codeで成否判定するため、分割失敗のままPhase 1へ進む恐れがある。capture_preview.jsは失敗時にexit(1)しており不統一 - 提案: catchで
process.exit(1)する。あわせて入力ファイルの存在チェック（capture_preview.js:42と同様）と、mkdirSyncをバリデーション後へ移動
- 理由: catchブロックが
Advisory（改善推奨・将来対応可）
- Phase 4のVisual Critiqueがデスクトップ幅（1280px）のスクショのみで、レスポンシブ検証のステップがない。
capture_preview.jsは第3引数で幅を受け取れるため、SP幅（375px等）での撮影→比較をループに含めると、Phase 3で要求しているレスポンシブ実装の検証手段ができる scripts/compare_header_hero.jsは検証専用（macOS固有のChromeパス・検証画像専用の座標・リポジトリに存在しない出力物への参照）で、そのままでは動作しない。冒頭コメントで自認済みだが、lism-cli skill addはディレクトリ丸ごとコピーする実装のため、配布物に含めるかは要判断（docsと一緒に退避が自然）docs/00〜06は純粋な検証記録でスキル実行時には参照されない。上記と同じ理由でdocuments/等への移動または削除を推奨。特に01-prior-research-summary.mdには個人名を含むローカル絶対パス（/Users/daisuke/...）が十数箇所あるため、残す場合も精査を推奨spec-definition-rules.md:15—--base-*/--accent-*という表記だが、実在するのは--base/--base-2/--accentのみでシリーズ体系はない（tokens.mdセマンティックカラー表）。実在トークン名の列挙が安全pattern-catalog.md:36/spec-definition-rules.md:35— 「ホバーの浮き上げも-hov:*」と読める記述だが、-hov:*にtranslateY系プリセットは存在しない（property-class/hov.md）。影は-hov:-bxsh、浮き上げはカスタム対応と書き分けないと、存在しないクラス（-hov:lift等）の生成を誘発するSKILL.md:107-112— ファイルを指すGitHub URLがtree/main/...形式。リダイレクトされ実害はないが、ファイル参照はblob/main/...が正しく、リポジトリ内の既存リンクの慣習とも不一致
良い点
- Phase 1で「コード禁止」の構造抽出を挟み、セクション分割・Visual Critiqueループと組み合わせる設計は、VLMの「典型LPテンプレ当てはめ」幻覚への対策として合理的
- 記法・トークン・命名を
lism-css-guideへ完全委譲し再定義しない方針が明確で、二重管理を避けられている - 登場するクラス名・プリミティブ名・コンポーネント名の大部分は実在・用法とも正確だった（
lism-css-guideと全数照合済み）。capture_preview.jsのfinallyでのbrowser.close()など、スクリプトの作りも概ね丁寧 - 対照検証の記録（docs/05, 06）まで残されており、設計判断の根拠を追える
総合判断
REQUEST_CHANGES — Blocking 5件の修正後のマージを推奨します。特にBlocking 1（幅制限の誤マッピング）と2・3（旧版lism-css-guide前提の参照）は、このスキルの生成品質・委譲設計の根幹に直結します。アプローチ自体は有望で、指摘はいずれも局所的な修正で対応可能です。
.cursor/skills/固定のcdを廃止し、<skill-dir>表記（SKILL.mdのある場所）を導入。 npm run経由をやめてnode直接実行にすることで、実行時cwdがscripts/に 固定されず、入出力パスをプロジェクトルート基準で渡せるようにした （../../../../ハックの解消）。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
上記レビューの Blocking 4（Cursor由来のスクリプト実行パス） を 39b7824 で修正しました。 対応内容
1. Lism のスキルは CLI 配信時にユーザーが環境を選択するため（ 2.
# Before
cd .cursor/skills/screenshot-to-lism-html/scripts
npm run split -- ../../../../<入力画像パス> ../../../../<出力先ディレクトリ>/sections
# After（プロジェクトルートから実行）
node <skill-dir>/scripts/split_image.js <入力画像パス> <出力先ディレクトリ>/sections変更ファイル: 補足
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (3)
skills/screenshot-to-lism-html/scripts/capture_preview.js (1)
53-56: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value
headless: 'new'は puppeteer v22 では移行期の値package.json で
puppeteerは^22.0.0を指定していますが、v22からはheadless: true（デフォルト）が新ヘッドレスモードとなり、'new'は旧バージョン向けの移行フラグです。動作上は問題ない可能性が高いですが、意図を明確にするならheadless: true（省略可）への統一を推奨します。🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@skills/screenshot-to-lism-html/scripts/capture_preview.js` around lines 53 - 56, The Puppeteer launch configuration in capture_preview.js is using the transitional headless: 'new' value, which is unnecessary for puppeteer v22. Update the browser launch setup in the capture_preview flow to use headless: true (or omit the option entirely if default behavior is acceptable) so the intent matches the current Puppeteer version and avoids relying on the older migration flag.skills/screenshot-to-lism-html/scripts/split_image.js (1)
96-108: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick winセクション抽出のたびに画像を再デコードしており非効率
ループ内で毎回
sharp(inputPath)を新規生成しているため、セクション数分だけファイルからの再デコードが発生します。既存のimageを.clone()して.extract()する方が効率的です。♻️ 修正案
const outputPath = path.join(outputDir, `section_${String(i + 1).padStart(2, '0')}.png`); - await sharp(inputPath) + await image + .clone() .extract({ left: 0, top: top, width: width, height: sectionHeight }) .toFile(outputPath);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@skills/screenshot-to-lism-html/scripts/split_image.js` around lines 96 - 108, The section extraction loop in split_image.js is re-decoding the source image on every iteration by creating a new sharp(inputPath) instance each time. Reuse the already loaded image object in this flow by cloning the existing image pipeline and calling .extract() on the clone inside the loop, so the logic around boundaries, outputPath, and the save step stays the same while avoiding repeated file decoding.skills/screenshot-to-lism-html/scripts/package.json (1)
10-13: 🔒 Security & Privacy | 🔵 Trivial | ⚡ Quick win
puppeteerを 25.x 系へ更新してください
puppeteer22.x は現行のサポート対象外なので、この依存を最新の 25.x 系へ上げたほうがよいです。CI/ローカルの再現性と今後のセキュリティ更新の面でメリットがあります。🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@skills/screenshot-to-lism-html/scripts/package.json` around lines 10 - 13, Update the puppeteer dependency in the package.json dependencies block from the current 22.x range to a 25.x range. Keep the change limited to the puppeteer entry alongside sharp, and verify any code that relies on Puppeteer APIs still matches the 25.x version used by the screenshot-to-lism-html scripts.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@skills/screenshot-to-lism-html/pattern-catalog.md`:
- Around line 17-24: The mobile-behavior notes in pattern-catalog.md are too
absolute and can force unsupported hamburger or image/text reorder changes.
Update the guidance for the affected layout patterns (especially
inline-row/cluster and media-with-content) to make mobile substitutions
conditional on what is actually present in the screenshot, so the recommended
behavior stays faithful to the source image rather than applying a universal
rule.
In `@skills/screenshot-to-lism-html/scripts/capture_preview.js`:
- Around line 69-103: In capture_preview.js, the segment compositing logic in
the scroll/screenshot loop leaves the first segment uncropped when pageHeight is
smaller than SEGMENT_HEIGHT, so the full viewport image is passed into
sharp.composite() and can throw. Update the segment handling around the
segments/composite build to crop any segment that extends past pageHeight,
including the first one, by applying the same bottom-trimming logic before
pushing each entry into composite.
In `@skills/screenshot-to-lism-html/scripts/split_image.js`:
- Around line 112-114: The catch block in split_image.js only logs the error and
lets the script exit with code 0, so the failure is not propagated to callers.
Update the error-handling path in the image processing flow to mirror
capture_preview.js by calling process.exit(1) after console.error in the catch
block, so npm run split correctly signals failure to CI and downstream
workflows. Use the existing split_image.js error handling around the image
processing entry point to locate the change.
---
Nitpick comments:
In `@skills/screenshot-to-lism-html/scripts/capture_preview.js`:
- Around line 53-56: The Puppeteer launch configuration in capture_preview.js is
using the transitional headless: 'new' value, which is unnecessary for puppeteer
v22. Update the browser launch setup in the capture_preview flow to use
headless: true (or omit the option entirely if default behavior is acceptable)
so the intent matches the current Puppeteer version and avoids relying on the
older migration flag.
In `@skills/screenshot-to-lism-html/scripts/package.json`:
- Around line 10-13: Update the puppeteer dependency in the package.json
dependencies block from the current 22.x range to a 25.x range. Keep the change
limited to the puppeteer entry alongside sharp, and verify any code that relies
on Puppeteer APIs still matches the 25.x version used by the
screenshot-to-lism-html scripts.
In `@skills/screenshot-to-lism-html/scripts/split_image.js`:
- Around line 96-108: The section extraction loop in split_image.js is
re-decoding the source image on every iteration by creating a new
sharp(inputPath) instance each time. Reuse the already loaded image object in
this flow by cloning the existing image pipeline and calling .extract() on the
clone inside the loop, so the logic around boundaries, outputPath, and the save
step stays the same while avoiding repeated file decoding.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: da722bb7-b78e-4ee1-a7fb-913d89cd25a5
⛔ Files ignored due to path filters (1)
skills/screenshot-to-lism-html/scripts/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (17)
skills/screenshot-to-lism-html/SKILL.mdskills/screenshot-to-lism-html/docs/00-project-overview.mdskills/screenshot-to-lism-html/docs/01-prior-research-summary.mdskills/screenshot-to-lism-html/docs/02-llm-skill-approach-proposal.mdskills/screenshot-to-lism-html/docs/03-usage-prompt-examples.mdskills/screenshot-to-lism-html/docs/04-how-it-works.mdskills/screenshot-to-lism-html/docs/05-validation-2026-07-03-findings.mdskills/screenshot-to-lism-html/docs/06-baseline-without-subskill-2026-07-04.mdskills/screenshot-to-lism-html/docs/README.mdskills/screenshot-to-lism-html/generation-prompts.mdskills/screenshot-to-lism-html/pattern-catalog.mdskills/screenshot-to-lism-html/scripts/capture_preview.jsskills/screenshot-to-lism-html/scripts/compare_header_hero.jsskills/screenshot-to-lism-html/scripts/package.jsonskills/screenshot-to-lism-html/scripts/split_image.jsskills/screenshot-to-lism-html/spec-definition-rules.mdskills/screenshot-to-lism-html/visual-critique-loop.md
| const segments = []; | ||
| for (let y = 0; y < pageHeight; y += SEGMENT_HEIGHT) { | ||
| await page.evaluate((yy) => window.scrollTo(0, yy), y); | ||
| await page.evaluate(() => new Promise((r) => setTimeout(r, 150))); | ||
| const buf = await page.screenshot({ fullPage: false }); | ||
| segments.push({ top: y, buffer: buf }); | ||
| } | ||
|
|
||
| const composite = []; | ||
| for (let i = 0; i < segments.length; i++) { | ||
| const meta = await sharp(segments[i].buffer).metadata(); | ||
| const desiredTop = segments[i].top; | ||
| const excess = desiredTop + meta.height - pageHeight; | ||
| let inBuf = segments[i].buffer; | ||
| let placeTop = desiredTop; | ||
| if (excess > 0 && i > 0) { | ||
| inBuf = await sharp(segments[i].buffer) | ||
| .extract({ left: 0, top: excess, width: viewportWidth, height: meta.height - excess }) | ||
| .png() | ||
| .toBuffer(); | ||
| } | ||
| composite.push({ input: inBuf, top: placeTop, left: 0 }); | ||
| } | ||
|
|
||
| await sharp({ | ||
| create: { | ||
| width: viewportWidth, | ||
| height: pageHeight, | ||
| channels: 3, | ||
| background: { r: 255, g: 255, b: 255 }, | ||
| }, | ||
| }) | ||
| .composite(composite) | ||
| .png() | ||
| .toFile(outputImagePath); |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🌐 Web query:
sharp composite error when input image height greater than base image height
💡 Result:
In the sharp library, the composite operation requires that all input images being composited are either the same size as or smaller than the base (or background) image [1][2][3]. If an overlay image has a height (or width) greater than the base image, the library will throw the error: "Image to composite must have same dimensions or smaller" [4][5][6]. To resolve this, you must ensure the base image is large enough to accommodate the overlays [4]. Common strategies include: 1. Create a larger base canvas: Use the sharp constructor with the create option to define a background image with dimensions sufficient to contain all your overlay images [4][7]. 2. Resize inputs: Resize the input images before composition so that none exceed the dimensions of the base image [7]. 3. Separate pipelines: If you are attempting to perform operations like rotation or extraction after a composition that results in a larger image, you must break the process into at least two separate pipelines [6][8]. For example, perform the composition first, export the result to a buffer, and then process that buffer in a new sharp pipeline for the subsequent operations [8]. This constraint is fundamental to how sharp handles compositing, as the base image acts as the primary canvas for all subsequent overlay operations [1][3].
Citations:
- 1: https://sharp.pixelplumbing.com/api-composite/
- 2: https://stackoverflow.com/questions/78433605/how-to-composite-a-static-background-image-and-gif-with-sharp-nodejs-package
- 3: https://christoshrousis.com/writing/08-using-node-sharp-to-stack-and-overlay-images-over-each-other-to-create-fun-composites/
- 4: Error : Image to composite must have same dimensions or smaller lovell/sharp#3213
- 5: Image to composite must have same dimensions or smaller lovell/sharp#2728
- 6: question for offset in composite and extract lovell/sharp#3769
- 7: How to resize images when composite lovell/sharp#3729
- 8: Rotate after composite throws "Image to composite must have same dimensions or smaller" lovell/sharp#3333
🏁 Script executed:
#!/bin/bash
set -euo pipefail
sed -n '1,180p' skills/screenshot-to-lism-html/scripts/capture_preview.jsRepository: lism-css/lism-css
Length of output: 1957
先頭セグメントも下端で切り詰めてください
pageHeight < SEGMENT_HEIGHT の場合、i === 0 の画像が viewport 高のまま composite() に渡り、sharp で例外になります。先頭セグメントにも pageHeight までの crop を入れてください。
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@skills/screenshot-to-lism-html/scripts/capture_preview.js` around lines 69 -
103, In capture_preview.js, the segment compositing logic in the
scroll/screenshot loop leaves the first segment uncropped when pageHeight is
smaller than SEGMENT_HEIGHT, so the full viewport image is passed into
sharp.composite() and can throw. Update the segment handling around the
segments/composite build to crop any segment that extends past pageHeight,
including the first one, by applying the same bottom-trimming logic before
pushing each entry into composite.
- 幅制限マッピングをis--container→is--wrapper/<Wrapper>へ修正 （is--containerはコンテナクエリ基準の宣言のみで幅制限機能を持たない） - 現行ガイドに存在しない節名参照（プリフライト・*、c--*分解ルール）を C一覧（C1/C5/C7）・antipatterns.md・references/authoring.mdの現行節へ張り替え - デザインデータ取り込みフローのA/B/C再定義をやめ、正本（references/authoring.md）へ 委譲。画像入力の既定動作（最寄りトークンへ丸める）を明記 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
skills/*/scripts/ の独立Nodeスクリプトはtsconfigのproject service対象外のため、 lint-staged経由のeslintがパースエラーになりコミットできなかった。 既存の配布用ファイル除外（.lang等）と同じパターンで除外する。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
catchブロックがエラーログのみでexit code 0のまま終了しており、 エージェントがBashの終了コードで分割の成否を判定できなかった。 入力画像の存在チェック（capture_preview.jsと同様）も追加。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
レビューの残りの Blocking（1・2・3・5）を修正しました。これで Blocking 5 件はすべて対応済みです。 対応内容Blocking 1: 幅制限マッピングの修正（9301efa3）
Blocking 2・3: リニューアル後の lism-css-guide への追従（9301efa3）現行ガイドに存在しない節名参照（「プリフライト・トークン照合」「プリフライト・c-- 定義時の分解」「プリフライト・プリミティブ選定」「
デザインデータ取り込みフローは、A/B/C の選択肢を本スキル側で再定義するのをやめ（定義が現行ガイドと入れ替わっていたため）、正本である Blocking 5: split_image.js のエラーハンドリング（8ff454c8）catch ブロックに 付随対応: eslint の ignores 追加（60966a25）
残タスク（Advisory）
|
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
skills/screenshot-to-lism-html/SKILL.md (1)
102-113: 🔒 Security & Privacy | 🔴 Critical | 🏗️ Heavy lift他スキルの内部ファイル参照を外してください。
lism-css-guide/SKILL.mdや配下の個別ファイルを必須参照にしているため、peer skill の内部指示を横断的に読める構成になっています。これはスキル境界を越えて情報を露出させる経路になるので、必要なルールはこのスキル側に最小限だけ移すか、公開済みの共通ドキュメントへ切り出してください。🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@skills/screenshot-to-lism-html/SKILL.md` around lines 102 - 113, Remove the mandatory references to other skill’s internal files from the “外部参照” section in SKILL.md, since it currently points to peer skill docs like lism-css-guide/SKILL.md and its subfiles. Update the guidance so screenshot-to-lism-html only depends on this skill’s own instructions, or replace those links with a small set of public/shared docs that do not expose peer skill internals. Keep the needed rules locally here and use a clear symbol like the “Phase 2 以降で必ず参照” section to find and revise it.Source: Linters/SAST tools
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@skills/screenshot-to-lism-html/SKILL.md`:
- Around line 102-113: Remove the mandatory references to other skill’s internal
files from the “外部参照” section in SKILL.md, since it currently points to peer
skill docs like lism-css-guide/SKILL.md and its subfiles. Update the guidance so
screenshot-to-lism-html only depends on this skill’s own instructions, or
replace those links with a small set of public/shared docs that do not expose
peer skill internals. Keep the needed rules locally here and use a clear symbol
like the “Phase 2 以降で必ず参照” section to find and revise it.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 9abfc221-400c-40c7-8f92-663e8c196934
📒 Files selected for processing (5)
eslint.config.mjsskills/screenshot-to-lism-html/SKILL.mdskills/screenshot-to-lism-html/generation-prompts.mdskills/screenshot-to-lism-html/pattern-catalog.mdskills/screenshot-to-lism-html/scripts/split_image.js
✅ Files skipped from review due to trivial changes (2)
- skills/screenshot-to-lism-html/generation-prompts.md
- skills/screenshot-to-lism-html/pattern-catalog.md
🚧 Files skipped from review as they are similar to previous changes (1)
- skills/screenshot-to-lism-html/scripts/split_image.js
- 実在しないカラートークン表記（--base-*/--accent-*）を実在名の列挙へ修正 - カードのホバー説明を書き分け（影は-hov:-bxsh、浮き上げはカスタムCSS。 -hov:*にtranslateY系プリセットは存在しないため） - ファイルを指すGitHub URLをtree/main→blob/mainへ修正（ディレクトリ参照は維持） Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
Advisory 4〜6 を b1fa7e0 で修正しました。
残りは Advisory 1（Phase 4 のレスポンシブ検証）と Advisory 2・3（検証記録 |
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
skills/screenshot-to-lism-html/SKILL.md (2)
12-19: 🔒 Security & Privacy | 🟠 Major | 🏗️ Heavy lift他スキルの内部ファイル参照をやめてください。
lism-css-guideのSKILL.mdや個別ドキュメントのパスを列挙すると、このスキルが peer skill の内部構成に依存します。静的解析でも指摘されている通り、他スキルのファイル/ディレクトリを参照する設計は避け、依存先はlism-css-guideという名前だけに留めてください。修正案
-本スキルは、[`lism-css-guide`](https://github.com/lism-css/lism-css/tree/main/skills/lism-css-guide) の**補助スキル**として機能します。 +本スキルは、`lism-css-guide` の**補助スキル**として機能します。 +Lism CSS 固有の記法・命名規則・トークンは `lism-css-guide` の公開ドキュメントに委譲してください。 -Phase 2 以降で必ず参照： -- [lism-css-guide/SKILL.md](...) -- [lism-css-guide/primitive-class.md](...) -- [lism-css-guide/tokens.md](...) -- [lism-css-guide/property-class.md](...) -- [lism-css-guide/antipatterns.md](...) -- [lism-css-guide/responsive.md](...) +Phase 2 以降では、`lism-css-guide` の公開ドキュメントのみを参照し、内部ファイルパスは列挙しないでください。Also applies to: 102-112
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@skills/screenshot-to-lism-html/SKILL.md` around lines 12 - 19, Remove the explicit references to the peer skill’s internal files and paths in screenshot-to-lism-html/SKILL.md; the guidance should depend only on the lism-css-guide skill name, not its SKILL.md or document locations. Update the explanatory text in this section so it still states the division of responsibilities between screenshot-to-lism-html and lism-css-guide, while avoiding any mention of internal directory structure or file names.Source: Linters/SAST tools
66-67: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
is--containerの例示を更新してください。この箇所に旧クラス名が残っていると、生成時に再び誤ったプリミティブ選定を誘導します。
is--wrapper/<Wrapper>に合わせてください。修正案
- `l--stack`, `l--columns`, `l--grid`, `is--container` など + `l--stack`, `l--columns`, `l--grid`, `is--wrapper` など🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@skills/screenshot-to-lism-html/SKILL.md` around lines 66 - 67, `is--container` の例示が古いので、`SKILL.md` の該当説明を `is--wrapper` / `<Wrapper>` に合わせて更新してください。`design-inventory.json` を契約とする構造変換の説明自体はそのままにしつつ、`pattern-catalog.md` に出てくるプリミティブの例示として `is--wrapper` を使うように修正し、`index.html` 生成時に誤ったクラス選定を誘導しないようにしてください。
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@skills/screenshot-to-lism-html/SKILL.md`:
- Around line 12-19: Remove the explicit references to the peer skill’s internal
files and paths in screenshot-to-lism-html/SKILL.md; the guidance should depend
only on the lism-css-guide skill name, not its SKILL.md or document locations.
Update the explanatory text in this section so it still states the division of
responsibilities between screenshot-to-lism-html and lism-css-guide, while
avoiding any mention of internal directory structure or file names.
- Around line 66-67: `is--container` の例示が古いので、`SKILL.md` の該当説明を `is--wrapper` /
`<Wrapper>` に合わせて更新してください。`design-inventory.json`
を契約とする構造変換の説明自体はそのままにしつつ、`pattern-catalog.md` に出てくるプリミティブの例示として `is--wrapper`
を使うように修正し、`index.html` 生成時に誤ったクラス選定を誘導しないようにしてください。
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: dff581e3-d70a-4f0a-a6eb-1274cec709eb
📒 Files selected for processing (3)
skills/screenshot-to-lism-html/SKILL.mdskills/screenshot-to-lism-html/pattern-catalog.mdskills/screenshot-to-lism-html/spec-definition-rules.md
✅ Files skipped from review due to trivial changes (2)
- skills/screenshot-to-lism-html/spec-definition-rules.md
- skills/screenshot-to-lism-html/pattern-catalog.md
This branch was successfully deployed
2 participants
概要
lism-css-guideの 補助スキル として、Webデザインのスクリーンショット画像から Lism CSS を使った HTML を忠実に再現するためのワークフロー定義スキルscreenshot-to-lism-htmlをskills/配下に追加します。VLM（視覚言語モデル）は LP 全体画像から「よくある LP のコード」を出力しがち（写真の重なり・カラム比率・見出しのフォント差等を見落とす）です。これに対し、画像分割 → 抽象 DOM ツリー抽出 → プリミティブへのマッピング → セクション別コーディング → Visual Critique の 5 フェーズを厳格に踏ませてハルシネーションを抑止する構成にしています。
Lism CSS 固有の記法・トークン・命名規則は再定義せず、すべて
lism-css-guideに委譲する設計です。本スキルは「画像から読み取ったレイアウトパターンを Lism CSS のどのプリミティブに落とすか」のマッピング表・ワークフロー制御を担当します。変更内容
skills/screenshot-to-lism-html/を新規追加（18 ファイル）。Skill 本体（ワークフロー・ルール類）
SKILL.md— 5 フェーズのワークフロー定義（Phase 0〜4）とlism-css-guideとの役割分担pattern-catalog.md— 画像から読み取ったレイアウトパターン → Lism CSS プリミティブへのマッピング表spec-definition-rules.md— 抽象 DOM ツリー抽出ルール（Phase 1 用の記述フォーマット）generation-prompts.md— 各フェーズのコード生成指示書visual-critique-loop.md— 生成 HTML のスクリーンショットと元画像を突き合わせる自己検証ループ指示書補助スクリプト（
scripts/）split_image.js— 入力画像のセクション分割（Phase 0）capture_preview.js— 生成 HTML のスクリーンショット撮影（Phase 4）compare_header_hero.js— セクション比較補助package.json/package-lock.json— 依存関係定義（sharp/puppeteer）ドキュメント（
docs/）docs/README.mdをインデックスとして、以下 7 本のプロジェクト背景・設計検討・使い方ドキュメントを収録。00-project-overview.md— プロジェクト概要（目的・スコープ・主要決定事項）01-prior-research-summary.md— 先行研究の抽出メモ02-llm-skill-approach-proposal.md— 手法提案（セクション分割・Visual Critique 等）03-usage-prompt-examples.md— Skill 呼び出し時のユーザー側プロンプト例集04-how-it-works.md— 仕組みの解説（Mermaid 図付き、非エンジニア向け）05-validation-2026-07-03-findings.md— 初回通し検証の振り返り06-baseline-without-subskill-2026-07-04.md— 補助スキル未使用時との対照検証補足
scripts/node_modules/はコミットに含めていません（.gitignore対象）。初回利用時はSKILL.mdの「事前準備」に記載のnpm installを実行してください。SKILL.md内のスクリプト実行パスは Cursor 由来（.cursor/skills/...）の記述が残っています。lism-css リポジトリ配下ではskills/screenshot-to-lism-html/scriptsになるため、配信・利用形態が固まったタイミングで別途調整予定です。docs/README.mdに「本 docs 配下で言及されるinput//output/配下のパスは lism-css リポジトリ反映前の検証環境を指す」旨を注記済みです。lism-css-guide本体には手を加えません。役割分担はSKILL.mdの「位置づけ」節に明記しています。検証サンプル
Summary by CodeRabbit