Execute qualquer Skill no Manus
com um clique

Execute qualquer Skill no Manus com um clique

doctor

Estrelas95

Forks10

Atualizado20 de abril de 2026 às 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.

Instalação

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Executar no Manus

Fonte

bluzir

bluzir/claude-code-design

Abrir repositório GitHub Ver repositórios do creator

Download

Executar no Manus

Ocupações relacionadasSOC

Baseado na classificação ocupacional SOC

Desenvolvedores de softwareInformática e Matemática·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

Mais deste repositório

mesmo repositório

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

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