Exécutez n'importe quel Skill dans Manus
en un clic

Exécutez n'importe quel Skill dans Manus en un clic

doctor

Étoiles95

Forks10

Mis à jour20 avril 2026 à 05:50

First-run setup + health check. Verifies Chrome DevTools MCP, installs optional deps (monolith, pptxgenjs, puppeteer), creates working dirs, runs smoke test. Use on fresh clone or when things feel broken.

Installation

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Exécuter dans Manus

Source

bluzir

bluzir/claude-code-design

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Exécuter dans Manus

Métiers associésSOC

Basé sur la classification professionnelle SOC

Développeurs de logicielsProfessions informatiques et mathématiques·SOC 15-1252

SKILL.md

readonly

name	doctor
description	First-run setup + health check. Verifies Chrome DevTools MCP, installs optional deps (monolith, pptxgenjs, puppeteer), creates working dirs, runs smoke test. Use on fresh clone or when things feel broken.
allowed-tools	Read Write Bash(claude:) Bash(which:) Bash(brew:) Bash(npm:) Bash(node:) Bash(mkdir:) Bash(ls:) Bash(test:) mcp__chrome-devtools__*

Doctor

Cold-start health check + optional auto-install. Safe to run multiple times.

Phase 1 — Inventory

Run in parallel where possible:

Bash(claude mcp list) — parse output, look for chrome-devtools: ✓ Connected
Bash(which monolith) — existence check
Bash(which node) — required
Bash(which gh) — for /ingest-github
Bash(test -f package.json && echo yes || echo no)
Bash(test -d starters && echo yes || echo no) — expect yes
Bash(test -d artifacts && echo yes || echo no)
Bash(test -d .claude/skills && echo yes || echo no) — expect yes

Phase 2 — Report

Print structured report:

Chrome DevTools MCP: ✓ / ✗ (if ✗, show install command)
monolith CLI:        ✓ / ✗ (optional; needed for /export-standalone)
Node:                ✓ / ✗ (required)
gh CLI:              ✓ / ✗ (needed for /ingest-github)
package.json:        exists / missing
starters/ dir:       exists / missing
artifacts/ dir:      will create
.claude/skills/:     N skills found
FIGMA_TOKEN env:     set / not set (only needed for /ingest-figma)

Phase 3 — Repair (with user consent)

For each missing item, ask the user with AskUserQuestion: "Install X now?" (yes/skip/all).

Repair commands (only on yes):

Chrome DevTools MCP: Bash(claude mcp add chrome-devtools -s user -- npx chrome-devtools-mcp@latest) — note: requires Claude Code restart to take effect
monolith: Bash(brew install monolith) (macOS) or tell user for linux

pptxgenjs + puppeteer:

Bash(test -f package.json || npm init -y)
Bash(npm install -D pptxgenjs puppeteer)

artifacts/ dir: Bash(mkdir -p artifacts assets/thumbs test)

Phase 4 — Smoke test

If everything is green (and user didn't just run install → restart):

Write test/smoke-deck.html:

<!doctype html>
<html><head><meta charset="utf-8"/><title>Smoke</title>
<script src="../starters/deck_stage.js"></script></head>
<body><deck-stage width="1920" height="1080">
  <section style="padding:60px;font:48px/1.2 Georgia"><h1>One</h1></section>
  <section style="padding:60px;font:48px/1.2 Georgia;background:#f4e4d7"><h1>Two</h1></section>
  <section style="padding:60px;font:48px/1.2 Georgia;background:#4a5d2e;color:#fff"><h1>Three</h1></section>
</deck-stage></body></html>

Run /done test/smoke-deck.html
If Chrome DevTools MCP is connected — check screenshot at .claude/last-preview.png exists and console is clean
Report pass/fail

Phase 5 — Hint sheet

Print one-liner hints:

Available commands & skills:
  /make-deck <brief>            — build a slide deck
  /interactive-prototype <brief> — clickable React prototype
  /wireframe <thing>            — low-fi variants
  /create-design-system <src>   — extract style guide
  /ingest-github <url>          — pull tokens from repo
  /ingest-screenshot <path>     — extract tokens from image
  /ingest-figma <url>           — pull from Figma (needs FIGMA_TOKEN)
  /make-tweakable <html>        — add live tweak panel
  /apply-tweaks <html>          — persist panel changes
  /register-asset <html>        — add to assets.html overview
  /verify-artifact <html>       — vision-based QA
  /export-pdf  /export-pptx  /export-standalone  /handoff
  /preview /done /screenshot    — operational atomics

Plus depuis ce dépôt

même dépôt

make-deck

bluzir/claude-code-design

Build an HTML slide deck (1920×1080, keyboard nav, exportable) when user asks for a presentation, pitch deck, slides, or keynote. Uses deck_stage.js starter and Claude Design taste rules.

2026-04-2096

verify-artifact

bluzir/claude-code-design

Screenshot + console sweep + visual inspection of an artifact for layout/color/typography regressions. Silent on pass, reports only on issues. Use after /done reports clean and before end-of-turn.

2026-04-2096

animated-video

bluzir/claude-code-design

Build animated motion design (explainer, transition reel, product intro). Uses Stage/Sprite timeline from animations.jsx for in-browser compositions or Remotion for full video/MP4 workflows.

2026-04-2096

apply-tweaks

bluzir/claude-code-design

Apply buffered tweaks from pending.yaml to the source HTML file. Invoked when user says "save tweaks", "apply tweaks", "persist panel changes", or runs /apply-tweaks.

2026-04-2096

copy-example

bluzir/claude-code-design

Generate a working demo artifact on dummy content so the user can see a reference implementation. Use when user says "show me an example deck", "what does a prototype look like", "give me a starter", "I want to see an example of X". Generates live — not from a static gallery.

2026-04-2096

create-design-system

bluzir/claude-code-design

Extract or build a design system (tokens, components, style guide). Use for "design system", "style guide", "tokens", "UI kit".

2026-04-2096

Doctor

Cold-start health check + optional auto-install. Safe to run multiple times.

Phase 1 — Inventory

Run in parallel where possible:

Bash(claude mcp list) — parse output, look for chrome-devtools: ✓ Connected

Bash(which monolith) — existence check

Bash(which node) — required

Bash(which gh) — for /ingest-github

Bash(test -f package.json && echo yes || echo no)

Bash(test -d starters && echo yes || echo no) — expect yes

Bash(test -d artifacts && echo yes || echo no)

Bash(test -d .claude/skills && echo yes || echo no) — expect yes

Phase 2 — Report

Print structured report:

Chrome DevTools MCP: ✓ / ✗ (if ✗, show install command) monolith CLI: ✓ / ✗ (optional; needed for /export-standalone) Node: ✓ / ✗ (required) gh CLI: ✓ / ✗ (needed for /ingest-github) package.json: exists / missing starters/ dir: exists / missing artifacts/ dir: will create .claude/skills/: N skills found FIGMA_TOKEN env: set / not set (only needed for /ingest-figma)

Phase 3 — Repair (with user consent)

For each missing item, ask the user with AskUserQuestion: "Install X now?" (yes/skip/all).

Repair commands (only on yes):

Chrome DevTools MCP: Bash(claude mcp add chrome-devtools -s user -- npx chrome-devtools-mcp@latest) — note: requires Claude Code restart to take effect

monolith: Bash(brew install monolith) (macOS) or tell user for linux

pptxgenjs + puppeteer:

Bash(test -f package.json || npm init -y)
Bash(npm install -D pptxgenjs puppeteer)

artifacts/ dir: Bash(mkdir -p artifacts assets/thumbs test)

Phase 4 — Smoke test

If everything is green (and user didn't just run install → restart):

Write test/smoke-deck.html:

<!doctype html>
<html><head><meta charset="utf-8"/><title>Smoke</title>
<script src="../starters/deck_stage.js"></script></head>
<body><deck-stage width="1920" height="1080">
  <section style="padding:60px;font:48px/1.2 Georgia"><h1>One</h1></section>
  <section style="padding:60px;font:48px/1.2 Georgia;background:#f4e4d7"><h1>Two</h1></section>
  <section style="padding:60px;font:48px/1.2 Georgia;background:#4a5d2e;color:#fff"><h1>Three</h1></section>
</deck-stage></body></html>

Run /done test/smoke-deck.html

If Chrome DevTools MCP is connected — check screenshot at .claude/last-preview.png exists and console is clean

Report pass/fail

Phase 5 — Hint sheet

Print one-liner hints:

Available commands & skills: /make-deck <brief> — build a slide deck /interactive-prototype <brief> — clickable React prototype /wireframe <thing> — low-fi variants /create-design-system <src> — extract style guide /ingest-github <url> — pull tokens from repo /ingest-screenshot <path> — extract tokens from image /ingest-figma <url> — pull from Figma (needs FIGMA_TOKEN) /make-tweakable <html> — add live tweak panel /apply-tweaks <html> — persist panel changes /register-asset <html> — add to assets.html overview /verify-artifact <html> — vision-based QA /export-pdf /export-pptx /export-standalone /handoff /preview /done /screenshot — operational atomics