fix(design): make workflows self-contained, add bundled-skill contract (#498)

* fix(design): make workflows self-contained, add bundled-skill contract (#474 finding 2)

The design skill's banner and social-photos workflows named skills the plugin
does not ship (frontend-design, ai-artist, ai-multimodal, chrome-devtools,
project-management, assets-organizing) and claudekit command namespaces
(/ckm:brand, /ck:ui-ux-pro-max), so those steps fail or force the agent to
improvise under a plugin or CLI install. Rewrite them after the pattern of
#473: bundled skills stay referenced by name, optional tooling becomes an
optional runtime capability, unbundled steps are implemented inline or
dropped. The same references sat in references/social-photos-design.md, so
the fix covers the skill directory, not just SKILL.md; the CLI copy is synced.

check-asset-sync.yml gains a bundled-skill contract over both skill trees:
no /ck: or /ckm: namespace, every "`name` skill" reference must be a
directory under .claude/skills, and none of the claudekit-only names above
in any spelling.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

* fix(design): address review - list-aware skill grep, case-insensitive denylist, banner intro, report naming

- contract grep 2 walks comma/and/or lists so every member is checked, not
  only the last one, and accepts the sub-skill and bold forms; grep 3 matches
  case-insensitively; the step comment states what is not covered
- banner intro no longer claims "no sibling skills" while step 2 names the
  bundled ui-ux-pro-max skill
- social-photos report name stated inline instead of "naming pattern from
  session hooks" (a claudekit convention nothing in the bundle provides);
  "persistent" dropped from the task-list step; device-scale note scoped to
  tools that support it

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

* fix(ci): match wrapped skill lists - read each file as one record in the bundled-skill contract

A Markdown list wrapped over two lines ("`playwright-mcp`,\n`brand`, and
`ui-ux-pro-max` skills") passed the line-oriented allowlist grep. Read the
file as one record (-z, separators as \s+) so wrapped lists are still lists;
a hit now names the file and the name instead of the line. grep's own exit
status is taken inside the substitution so an unreadable file still fails the
step under plain bash -e, pipefail or not.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

---------

Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>

.claude/skills/design/SKILL.md

@@ -27,9 +27,9 @@ Unified design skill: brand, tokens, UI, logo, CIP, slides, banners, social phot
 
 | Task | Sub-skill | Details |
 |------|-----------|---------|
-| Brand identity, voice, assets | `brand` | External skill |
-| Tokens, specs, CSS vars | `design-system` | External skill |
-| shadcn/ui, Tailwind, code | `ui-styling` | External skill |
+| Brand identity, voice, assets | `brand` | Bundled sibling skill |
+| Tokens, specs, CSS vars | `design-system` | Bundled sibling skill |
+| shadcn/ui, Tailwind, code | `ui-styling` | Bundled sibling skill |
 | Logo creation, AI generation | Logo (built-in) | `references/logo-design.md` |
 | CIP mockups, deliverables | CIP (built-in) | `references/cip-design.md` |
 | Presentations, pitch decks | Slides (built-in) | `references/slides.md` |
@@ -74,7 +74,7 @@ python3 scripts/logo/generate.py --brand "TechFlow" --provider muapi --muapi-mod
 
 **IMPORTANT:** When scripts fail, try to fix them directly.
 
-After generation, **ALWAYS** ask user about HTML preview via `AskUserQuestion`. If yes, invoke `/ui-ux-pro-max` for gallery.
+After generation, **ALWAYS** ask user about HTML preview via `AskUserQuestion`. If yes, use the bundled `ui-ux-pro-max` skill for the gallery.
 
 ## CIP Design (Built-in)
 
@@ -139,16 +139,16 @@ Load `references/slides-create.md` for the creation workflow.
 
 ## Banner Design (Built-in)
 
-22 art direction styles across social, ads, web, print. Uses `frontend-design`, `ai-artist`, `ai-multimodal`, `chrome-devtools` skills.
+22 art direction styles across social, ads, web, print. This workflow needs nothing outside the bundle: `references/banner-sizes-and-styles.md` and the bundled `ui-ux-pro-max` skill for style and palette guidance. Browser research, image generation, and screenshot capture are optional runtime capabilities; when unavailable, use supplied assets, CSS-built visuals, and the runtime's standard preview or capture workflow.
 
 Load `references/banner-sizes-and-styles.md` for complete sizes and styles reference.
 
 ### Banner: Workflow
 
 1. **Gather requirements** via `AskUserQuestion` — purpose, platform, content, brand, style, quantity
-2. **Research** — Activate `ui-ux-pro-max`, browse Pinterest for references
-3. **Design** — Create HTML/CSS banner with `frontend-design`, generate visuals with `ai-artist`/`ai-multimodal`
-4. **Export** — Screenshot to PNG at exact dimensions via `chrome-devtools`
+2. **Research** — Read `references/banner-sizes-and-styles.md` and use the bundled `ui-ux-pro-max` skill for style and palette guidance; if browser research is available and permitted, collect 3–5 references
+3. **Design** — Create the HTML/CSS banner at exact platform dimensions; use supplied assets or CSS-built visuals, or an authorized image-generation capability if the runtime provides one
+4. **Export** — Capture PNG at exact dimensions with the runtime's browser or screenshot capability; if unavailable, deliver the HTML/CSS source and mark PNG export as pending
 5. **Present** — Show all options side-by-side, iterate on feedback
 
 ### Banner: Quick Size Reference
@@ -224,20 +224,20 @@ python3 scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" -
 
 ## Social Photos (Built-in)
 
-Multi-platform social image design: HTML/CSS → screenshot export. Uses `ui-ux-pro-max`, `brand`, `design-system`, `chrome-devtools` skills.
+Multi-platform social image design: HTML/CSS → screenshot export. Uses the bundled `ui-ux-pro-max`, `brand`, and `design-system` skills; screenshot export runs through Chrome headless, Playwright, or Puppeteer (see the reference).
 
 Load `references/social-photos-design.md` for sizes, templates, best practices.
 
 ### Social Photos: Workflow
 
-1. **Orchestrate** — `project-management` skill for TODO tasks; parallel subagents for independent work
+1. **Orchestrate** — Track the steps below with the runtime's native task list; parallel subagents for independent work
 2. **Analyze** — Parse prompt: subject, platforms, style, brand context, content elements
 3. **Ideate** — 3-5 concepts, present via `AskUserQuestion`
-4. **Design** — `/ckm:brand` → `/ckm:design-system` → randomly invoke `/ck:ui-ux-pro-max` OR `/ck:frontend-design`; HTML per idea × size
-5. **Export** — `chrome-devtools` or Playwright screenshot at exact px (2x deviceScaleFactor)
-6. **Verify** — Use Chrome MCP or `chrome-devtools` skill to visually inspect exported designs; fix layout/styling issues and re-export
+4. **Design** — bundled `brand` → `design-system` → `ui-ux-pro-max` skills; HTML per idea × size
+5. **Export** — Chrome headless, Playwright, or Puppeteer screenshot at exact px (2x device scale factor where the tool supports it; see the reference)
+6. **Verify** — Open the exported PNGs in an available browser or image viewer and inspect them; fix layout/styling issues and re-export
 7. **Report** — Summary to `plans/reports/` with design decisions
-8. **Organize** — Invoke `assets-organizing` skill to sort output files and reports
+8. **Organize** — Sort output files and reports into the project's asset directories
 
 ### Social Photos: Key Sizes
 
@@ -329,5 +329,5 @@ logo workflow leaves at the provider default.
 
 ## Integration
 
-**External sub-skills:** brand, design-system, ui-styling
-**Related Skills:** frontend-design, ui-ux-pro-max, ai-multimodal, chrome-devtools
+**Bundled sub-skills:** brand, design-system, ui-styling
+**Related Skills:** ui-ux-pro-max

.claude/skills/design/references/logo-design.md

@@ -79,7 +79,7 @@ Options: `--style`, `--industry`, `--prompt`, `--provider`, `--atlas-model`, `--
 1. Generate design brief → `scripts/logo/search.py --design-brief`
 2. Generate logo variations → `scripts/logo/generate.py --brand --style --industry`
 3. Ask user about HTML preview → `AskUserQuestion` tool
-4. If yes, invoke `/ui-ux-pro-max` for HTML gallery
+4. If yes, use the bundled `ui-ux-pro-max` skill for the HTML gallery
 
 ## Detailed References
 

.claude/skills/design/references/social-photos-design.md

@@ -1,6 +1,6 @@
 # Social Photos Design Guide
 
-Design social media images via HTML/CSS rendering + screenshot export. Orchestrates `ui-ux-pro-max`, `brand`, `design-system`, and `chrome-devtools` skills.
+Design social media images via HTML/CSS rendering + screenshot export. Orchestrates the bundled `ui-ux-pro-max`, `brand`, and `design-system` skills; screenshot export runs through Chrome headless, Playwright, or Puppeteer.
 
 ## Platform Sizes
 
@@ -22,9 +22,9 @@ Design social media images via HTML/CSS rendering + screenshot export. Orchestra
 
 ## Workflow
 
-### Step 1: Activate Project Management
+### Step 1: Plan the Work
 
-Invoke `project-management` skill to create persistent TODO tasks via Claude's native task orchestration. Break down into:
+Create TODO tasks with the runtime's native task list. Break down into:
 - Requirement analysis task
 - Idea generation task(s)
 - HTML design task(s) — can parallelize per size/variant
@@ -55,11 +55,11 @@ Present ideas to user via `AskUserQuestion` for approval before designing.
 
 ### Step 4: Design HTML Files
 
-Activate these skills in sequence:
+Use these bundled skills in sequence:
 
-1. **`/ckm:brand`** — Extract brand colors, fonts, voice from user's project
-2. **`/ckm:design-system`** — Get design tokens (spacing, typography scale, color palette)
-3. **Randomly invoke ONE of:** `/ck:ui-ux-pro-max` OR `/ck:frontend-design` — for layout, hierarchy, visual balance. Pick one at random each run for design variety.
+1. **`brand`** — Extract brand colors, fonts, voice from user's project
+2. **`design-system`** — Get design tokens (spacing, typography scale, color palette)
+3. **`ui-ux-pro-max`** — Layout, hierarchy, visual balance; search a different style, palette, or font pairing per concept for design variety.
 
 For each approved idea + each target size, create an HTML file:
 
@@ -119,7 +119,7 @@ output/social-photos/
 
 ### Step 5: Screenshot Export
 
-Use Chrome headless, `chrome-devtools` skill, or Playwright/Puppeteer to capture exact-size screenshots.
+Use Chrome headless, Playwright, or Puppeteer to capture exact-size screenshots.
 
 **IMPORTANT:** Always add a delay (3-5s) after page load for fonts/images to fully render before capture.
 
@@ -145,9 +145,9 @@ Key flags:
 - `--hide-scrollbars` — prevents scrollbar artifacts in screenshots
 - `--window-size=WxH` — sets exact pixel dimensions
 
-#### Option B: chrome-devtools skill
+#### Option B: Browser automation provided by the runtime
 
-Invoke `/chrome-devtools` with instructions to:
+If the runtime offers a browser-automation or screenshot capability (for example a browser MCP server), use it to:
 1. Open each HTML file in browser
 2. Set viewport to exact target dimensions
 3. Wait 3-5s for fonts/images to fully load
@@ -210,7 +210,7 @@ async function captureScreenshots(htmlFiles) {
 
 ### Step 6: Verify & Fix Designs
 
-Use Chrome MCP or `chrome-devtools` skill to visually inspect each exported PNG:
+Open each exported PNG in an available browser or image viewer and inspect it:
 
 1. Open exported screenshots and check for layout/styling issues
 2. Verify: fonts rendered correctly, colors match brand, text readable at thumbnail size
@@ -227,7 +227,7 @@ Use Chrome MCP or `chrome-devtools` skill to visually inspect each exported PNG:
 
 ### Step 7: Generate Summary Report
 
-Save report to `plans/reports/` with naming pattern from session hooks.
+Save the report as `plans/reports/{YYMMDD}-social-photos-{topic}.md`.
 
 Report structure:
 
@@ -269,9 +269,9 @@ Report structure:
 
 ### Step 8: Organize Output
 
-Invoke `assets-organizing` skill to organize all output files and reports:
+Organize all output files and reports:
 - Move/copy exported PNGs to proper asset directories
-- Ensure reports are in `plans/reports/` with correct naming
+- Ensure reports are in `plans/reports/` under the name from Step 7
 - Clean up intermediate HTML files if requested
 - Tag outputs with metadata (platform, size, concept name)
 
@@ -326,4 +326,4 @@ This sub-skill handles social media image design only. Does NOT handle:
 - Animation/motion graphics
 - Print production files (CMYK, bleed)
 - Direct social media posting/scheduling
-- AI image generation (use `ai-artist` skill for that)
+- AI image generation (supply images, or generate them with a separate authorized capability)

.github/workflows/check-asset-sync.yml

@@ -93,3 +93,64 @@ jobs:
           fi
           if [ "$status" -eq 0 ]; then echo "OK: all skill paths are skill-relative"; fi
           exit "$status"
+      # Bundled-skill contract (#474 finding 2): the skill directories under .claude/skills are
+      # everything a plugin or CLI install ships, so a workflow step that names a skill outside
+      # that set ("frontend-design", "chrome-devtools", ...) or a claudekit command namespace
+      # ("/ckm:brand", "/ck:frontend-design") fails silently or leaves the agent improvising under
+      # either install. #473 made banner-design self-contained; this step keeps every shipped
+      # skill that way. Three greps over every shipped Markdown file in both trees:
+      # 1. no claudekit command namespace - "/ck:" or "/ckm:" not preceded by a word character
+      #    or "/", so a URL or file path containing the letters is not a hit;
+      # 2. every backticked name followed by "skill", "skills" or "sub-skill" (the form these docs
+      #    use to name a skill) must be a directory under .claude/skills - an allowlist, so a new
+      #    unbundled name fails without editing this file. The lookahead walks a list ("`a`, `b`,
+      #    and `c` skills", separators ", ", " and ", " or ", "/", " -> ") so every member is
+      #    checked, not only the last one, and tolerates "**" around the name. The file is read as
+      #    one record (-z, separators as \s+) so a list wrapped over several lines is still a
+      #    list; a hit therefore names the file and the name, not the line;
+      # 3. none of the claudekit-only skill names the shipped docs used to reference, matched
+      #    case-insensitively in their hyphenated spelling - "Related Skills: frontend-design, ..."
+      #    carries neither backticks nor a "skill" suffix, so 2. cannot see it. "project-management"
+      #    is also ordinary English: a hit in prose is a reword, not a workflow step.
+      # Not covered: a spaced or underscored spelling ("frontend design"); a bare name with no
+      # backticks and no "skill" suffix that is not on the list in 3.; mentions inside scripts
+      # (brand/scripts/extract-colors.cjs names ai-multimodal three times as a hint, one of them
+      # "if installed" - not a workflow step); cli/assets/templates, the CLI's rendered core skill,
+      # which neither this step nor the path contract scans (clean at the time of writing); and a
+      # bundled-set change - a skill directory added or removed under .claude/skills moves the
+      # allowlist with it, which is the intent.
+      # grep exit codes as above: for 1. and 3. only 1 (no hits) passes; for 2. hits are fine as
+      # long as every name is bundled, and 2 (error) never passes.
+      - name: Bundled-skill contract - no unbundled skill or claudekit command references
+        run: |
+          [ -d .claude/skills ] || { echo "::error::.claude/skills is missing - the bundled set cannot be derived"; exit 1; }
+          bundled=$(find .claude/skills -mindepth 1 -maxdepth 1 -type d -printf '%f\n' | LC_ALL=C sort)
+          [ -n "$bundled" ] || { echo "::error::.claude/skills has no skill directories - the bundled set cannot be derived"; exit 1; }
+          status=0
+          rc=0; LC_ALL=C grep -rnIP --include='*.md' '(?<![\w/])/ckm?:' .claude/skills cli/assets/skills || rc=$?
+          if [ "$rc" -ne 1 ]; then
+            echo "::error::claudekit command namespaces (/ck:, /ckm:) are not shipped by this plugin - name the bundled skill instead (see #474 finding 2); grep rc=$rc"
+            status=1
+          fi
+          rc=0; hits=$(LC_ALL=C grep -rzoIP --include='*.md' '`[a-z0-9-]+`(?:\*\*)?(?=(?:(?:,\s+|\s+and\s+|,\s+and\s+|\s+or\s+|,\s+or\s+|/|\s+→\s+|\s+->\s+)(?:\*\*)?`[a-z0-9-]+`(?:\*\*)?)*\s+(?:sub-)?[Ss]kills?\b)' .claude/skills cli/assets/skills | tr '\0' '\n'; exit "${PIPESTATUS[0]}") || rc=$?
+          if [ "$rc" -eq 2 ]; then echo "::error::grep failed while scanning for skill references (rc=2)"; status=1; fi
+          unbundled=0
+          while IFS= read -r hit; do
+            [ -n "$hit" ] || continue
+            name=$(printf '%s\n' "$hit" | sed 's/.*`\([^`]*\)`.*/\1/')
+            if ! printf '%s\n' "$bundled" | grep -qxF -- "$name"; then
+              printf '%s\n' "$hit"
+              unbundled=1
+            fi
+          done <<< "$hits"
+          if [ "$unbundled" -ne 0 ]; then
+            echo "::error::skill references outside the bundled set ($(printf '%s' "$bundled" | tr '\n' ' ')) fail under a plugin or CLI install - implement the step inline, name a bundled skill, or drop the step (see #474 finding 2)"
+            status=1
+          fi
+          rc=0; LC_ALL=C grep -rniIP --include='*.md' '\b(frontend-design|ai-artist|ai-multimodal|chrome-devtools|assets-organizing|project-management)\b' .claude/skills cli/assets/skills || rc=$?
+          if [ "$rc" -ne 1 ]; then
+            echo "::error::claudekit-only skill names are not shipped by this plugin - implement the step inline, name a bundled skill, or drop the step (see #474 finding 2); grep rc=$rc"
+            status=1
+          fi
+          if [ "$status" -eq 0 ]; then echo "OK: shipped skill docs reference only bundled skills"; fi
+          exit "$status"

cli/assets/skills/design/SKILL.md

@@ -27,9 +27,9 @@ Unified design skill: brand, tokens, UI, logo, CIP, slides, banners, social phot
 
 | Task | Sub-skill | Details |
 |------|-----------|---------|
-| Brand identity, voice, assets | `brand` | External skill |
-| Tokens, specs, CSS vars | `design-system` | External skill |
-| shadcn/ui, Tailwind, code | `ui-styling` | External skill |
+| Brand identity, voice, assets | `brand` | Bundled sibling skill |
+| Tokens, specs, CSS vars | `design-system` | Bundled sibling skill |
+| shadcn/ui, Tailwind, code | `ui-styling` | Bundled sibling skill |
 | Logo creation, AI generation | Logo (built-in) | `references/logo-design.md` |
 | CIP mockups, deliverables | CIP (built-in) | `references/cip-design.md` |
 | Presentations, pitch decks | Slides (built-in) | `references/slides.md` |
@@ -74,7 +74,7 @@ python3 scripts/logo/generate.py --brand "TechFlow" --provider muapi --muapi-mod
 
 **IMPORTANT:** When scripts fail, try to fix them directly.
 
-After generation, **ALWAYS** ask user about HTML preview via `AskUserQuestion`. If yes, invoke `/ui-ux-pro-max` for gallery.
+After generation, **ALWAYS** ask user about HTML preview via `AskUserQuestion`. If yes, use the bundled `ui-ux-pro-max` skill for the gallery.
 
 ## CIP Design (Built-in)
 
@@ -139,16 +139,16 @@ Load `references/slides-create.md` for the creation workflow.
 
 ## Banner Design (Built-in)
 
-22 art direction styles across social, ads, web, print. Uses `frontend-design`, `ai-artist`, `ai-multimodal`, `chrome-devtools` skills.
+22 art direction styles across social, ads, web, print. This workflow needs nothing outside the bundle: `references/banner-sizes-and-styles.md` and the bundled `ui-ux-pro-max` skill for style and palette guidance. Browser research, image generation, and screenshot capture are optional runtime capabilities; when unavailable, use supplied assets, CSS-built visuals, and the runtime's standard preview or capture workflow.
 
 Load `references/banner-sizes-and-styles.md` for complete sizes and styles reference.
 
 ### Banner: Workflow
 
 1. **Gather requirements** via `AskUserQuestion` — purpose, platform, content, brand, style, quantity
-2. **Research** — Activate `ui-ux-pro-max`, browse Pinterest for references
-3. **Design** — Create HTML/CSS banner with `frontend-design`, generate visuals with `ai-artist`/`ai-multimodal`
-4. **Export** — Screenshot to PNG at exact dimensions via `chrome-devtools`
+2. **Research** — Read `references/banner-sizes-and-styles.md` and use the bundled `ui-ux-pro-max` skill for style and palette guidance; if browser research is available and permitted, collect 3–5 references
+3. **Design** — Create the HTML/CSS banner at exact platform dimensions; use supplied assets or CSS-built visuals, or an authorized image-generation capability if the runtime provides one
+4. **Export** — Capture PNG at exact dimensions with the runtime's browser or screenshot capability; if unavailable, deliver the HTML/CSS source and mark PNG export as pending
 5. **Present** — Show all options side-by-side, iterate on feedback
 
 ### Banner: Quick Size Reference
@@ -224,20 +224,20 @@ python3 scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" -
 
 ## Social Photos (Built-in)
 
-Multi-platform social image design: HTML/CSS → screenshot export. Uses `ui-ux-pro-max`, `brand`, `design-system`, `chrome-devtools` skills.
+Multi-platform social image design: HTML/CSS → screenshot export. Uses the bundled `ui-ux-pro-max`, `brand`, and `design-system` skills; screenshot export runs through Chrome headless, Playwright, or Puppeteer (see the reference).
 
 Load `references/social-photos-design.md` for sizes, templates, best practices.
 
 ### Social Photos: Workflow
 
-1. **Orchestrate** — `project-management` skill for TODO tasks; parallel subagents for independent work
+1. **Orchestrate** — Track the steps below with the runtime's native task list; parallel subagents for independent work
 2. **Analyze** — Parse prompt: subject, platforms, style, brand context, content elements
 3. **Ideate** — 3-5 concepts, present via `AskUserQuestion`
-4. **Design** — `/ckm:brand` → `/ckm:design-system` → randomly invoke `/ck:ui-ux-pro-max` OR `/ck:frontend-design`; HTML per idea × size
-5. **Export** — `chrome-devtools` or Playwright screenshot at exact px (2x deviceScaleFactor)
-6. **Verify** — Use Chrome MCP or `chrome-devtools` skill to visually inspect exported designs; fix layout/styling issues and re-export
+4. **Design** — bundled `brand` → `design-system` → `ui-ux-pro-max` skills; HTML per idea × size
+5. **Export** — Chrome headless, Playwright, or Puppeteer screenshot at exact px (2x device scale factor where the tool supports it; see the reference)
+6. **Verify** — Open the exported PNGs in an available browser or image viewer and inspect them; fix layout/styling issues and re-export
 7. **Report** — Summary to `plans/reports/` with design decisions
-8. **Organize** — Invoke `assets-organizing` skill to sort output files and reports
+8. **Organize** — Sort output files and reports into the project's asset directories
 
 ### Social Photos: Key Sizes
 
@@ -329,5 +329,5 @@ logo workflow leaves at the provider default.
 
 ## Integration
 
-**External sub-skills:** brand, design-system, ui-styling
-**Related Skills:** frontend-design, ui-ux-pro-max, ai-multimodal, chrome-devtools
+**Bundled sub-skills:** brand, design-system, ui-styling
+**Related Skills:** ui-ux-pro-max

cli/assets/skills/design/references/logo-design.md

@@ -79,7 +79,7 @@ Options: `--style`, `--industry`, `--prompt`, `--provider`, `--atlas-model`, `--
 1. Generate design brief → `scripts/logo/search.py --design-brief`
 2. Generate logo variations → `scripts/logo/generate.py --brand --style --industry`
 3. Ask user about HTML preview → `AskUserQuestion` tool
-4. If yes, invoke `/ui-ux-pro-max` for HTML gallery
+4. If yes, use the bundled `ui-ux-pro-max` skill for the HTML gallery
 
 ## Detailed References
 

cli/assets/skills/design/references/social-photos-design.md

@@ -1,6 +1,6 @@
 # Social Photos Design Guide
 
-Design social media images via HTML/CSS rendering + screenshot export. Orchestrates `ui-ux-pro-max`, `brand`, `design-system`, and `chrome-devtools` skills.
+Design social media images via HTML/CSS rendering + screenshot export. Orchestrates the bundled `ui-ux-pro-max`, `brand`, and `design-system` skills; screenshot export runs through Chrome headless, Playwright, or Puppeteer.
 
 ## Platform Sizes
 
@@ -22,9 +22,9 @@ Design social media images via HTML/CSS rendering + screenshot export. Orchestra
 
 ## Workflow
 
-### Step 1: Activate Project Management
+### Step 1: Plan the Work
 
-Invoke `project-management` skill to create persistent TODO tasks via Claude's native task orchestration. Break down into:
+Create TODO tasks with the runtime's native task list. Break down into:
 - Requirement analysis task
 - Idea generation task(s)
 - HTML design task(s) — can parallelize per size/variant
@@ -55,11 +55,11 @@ Present ideas to user via `AskUserQuestion` for approval before designing.
 
 ### Step 4: Design HTML Files
 
-Activate these skills in sequence:
+Use these bundled skills in sequence:
 
-1. **`/ckm:brand`** — Extract brand colors, fonts, voice from user's project
-2. **`/ckm:design-system`** — Get design tokens (spacing, typography scale, color palette)
-3. **Randomly invoke ONE of:** `/ck:ui-ux-pro-max` OR `/ck:frontend-design` — for layout, hierarchy, visual balance. Pick one at random each run for design variety.
+1. **`brand`** — Extract brand colors, fonts, voice from user's project
+2. **`design-system`** — Get design tokens (spacing, typography scale, color palette)
+3. **`ui-ux-pro-max`** — Layout, hierarchy, visual balance; search a different style, palette, or font pairing per concept for design variety.
 
 For each approved idea + each target size, create an HTML file:
 
@@ -119,7 +119,7 @@ output/social-photos/
 
 ### Step 5: Screenshot Export
 
-Use Chrome headless, `chrome-devtools` skill, or Playwright/Puppeteer to capture exact-size screenshots.
+Use Chrome headless, Playwright, or Puppeteer to capture exact-size screenshots.
 
 **IMPORTANT:** Always add a delay (3-5s) after page load for fonts/images to fully render before capture.
 
@@ -145,9 +145,9 @@ Key flags:
 - `--hide-scrollbars` — prevents scrollbar artifacts in screenshots
 - `--window-size=WxH` — sets exact pixel dimensions
 
-#### Option B: chrome-devtools skill
+#### Option B: Browser automation provided by the runtime
 
-Invoke `/chrome-devtools` with instructions to:
+If the runtime offers a browser-automation or screenshot capability (for example a browser MCP server), use it to:
 1. Open each HTML file in browser
 2. Set viewport to exact target dimensions
 3. Wait 3-5s for fonts/images to fully load
@@ -210,7 +210,7 @@ async function captureScreenshots(htmlFiles) {
 
 ### Step 6: Verify & Fix Designs
 
-Use Chrome MCP or `chrome-devtools` skill to visually inspect each exported PNG:
+Open each exported PNG in an available browser or image viewer and inspect it:
 
 1. Open exported screenshots and check for layout/styling issues
 2. Verify: fonts rendered correctly, colors match brand, text readable at thumbnail size
@@ -227,7 +227,7 @@ Use Chrome MCP or `chrome-devtools` skill to visually inspect each exported PNG:
 
 ### Step 7: Generate Summary Report
 
-Save report to `plans/reports/` with naming pattern from session hooks.
+Save the report as `plans/reports/{YYMMDD}-social-photos-{topic}.md`.
 
 Report structure:
 
@@ -269,9 +269,9 @@ Report structure:
 
 ### Step 8: Organize Output
 
-Invoke `assets-organizing` skill to organize all output files and reports:
+Organize all output files and reports:
 - Move/copy exported PNGs to proper asset directories
-- Ensure reports are in `plans/reports/` with correct naming
+- Ensure reports are in `plans/reports/` under the name from Step 7
 - Clean up intermediate HTML files if requested
 - Tag outputs with metadata (platform, size, concept name)
 
@@ -326,4 +326,4 @@ This sub-skill handles social media image design only. Does NOT handle:
 - Animation/motion graphics
 - Print production files (CMYK, bleed)
 - Direct social media posting/scheduling
-- AI image generation (use `ai-artist` skill for that)
+- AI image generation (supply images, or generate them with a separate authorized capability)