Jeden Skill in Manus ausführen
mit einem Klick

Jeden Skill in Manus mit einem Klick ausführen

doctor

Sterne95

Forks10

Aktualisiert20. April 2026 um 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

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

In Manus ausführen

Quelle

bluzir

bluzir/claude-code-design

GitHub-Repository öffnen Creator-Repositorys ansehen

Download

In Manus ausführen

Verwandte BerufeSOC

Basierend auf der SOC-Berufsklassifikation

SoftwareentwicklerInformatik- und Mathematikberufe·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

Mehr aus diesem Repository

gleiches Repository

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-2095

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-2095

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-2095

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-2095

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-2095

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-2095

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