bluzir

@bluzir source repo

19 skills
0 followers
6 hours ago last updated

▌
Doctor · bluzir
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.

0
installs
▌
Inspect · bluzir
Resolve a natural-language element description ("the red button in the hero", "the third card from the top") to a concrete DOM element in the current preview + source-code location. Uses Chrome DevTools MCP take_snapshot UIDs for deterministic targeting. Use when user asks to change/style/remove a specific visual element without pointing at source code.

0
installs
▌
Make Deck · bluzir
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.

0
installs
▌
Wireframe · bluzir
Explore 3+ design variations in low-fi/greyscale on a labeled canvas for comparison. Use when user asks for wireframes, lo-fi, ideas, variants, sketches, many options.

0
installs
▌
Export PDF · bluzir
Export an HTML artifact to PDF via headless Chromium (puppeteer Page.pdf). For multi-slide decks one page per <section>.

0
installs
▌
Export PPTX · bluzir
Export an HTML deck to PPTX via per-slide screenshots. Requires Node + pptxgenjs + puppeteer (run /doctor first).

0
installs
▌
Apply Tweaks · bluzir
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.

0
installs
▌
Copy Example · bluzir
Copy Example

0
installs
▌
Ingest Figma · bluzir
Pull design tokens + frame structure from a Figma URL via the Figma REST API. Requires FIGMA_TOKEN env var.

0
installs
▌
Ingest Github · bluzir
Clone a GitHub repo and extract design tokens (colors, fonts, spacing) from its codebase. Use when user gives a github.com URL and wants a design system or design work rooted in the repo's style.

0
installs
▌
Animated Video · bluzir
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.

0
installs
▌
Make Tweakable · bluzir
Add an in-artifact floating Tweaks panel that lets the user adjust colors, fonts, spacing, layout variants live in the preview. Persists via claude-pipe pattern (pending.yaml + apply-tweaks skill).

0
installs
▌
Register Asset · bluzir
Register a design artifact in design-assets.json, capture a thumbnail, and regenerate assets.html overview grid. Use when an artifact is ready for review, or user says "add to overview", "register", "track this".

0
installs
▌
Verify Artifact · bluzir
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.

0
installs
▌
Export Standalone · bluzir
Bundle an HTML artifact into a single self-contained file with all CSS/JS/images inlined as data URLs. Requires `monolith` CLI (brew install monolith).

0
installs
▌
Ingest Screenshot · bluzir
Analyze an uploaded image (screenshot of a design, website, app) and extract design tokens to use as a starting point. Use when user pastes or attaches an image and says "recreate this", "match this image", "use this style".

0
installs
▌
Use Design System · bluzir
Explicitly load a design system from the org-level registry at ~/.claude/design-systems/<name>/ for the current project. Use when user says "use the Acme design system", "apply company-x tokens", or similar.

0
installs
▌
Create Design System · bluzir
Create Design System

0
installs
▌
Interactive Prototype · bluzir
Build a hi-fi clickable React prototype with realistic device chrome. Triggered by "prototype", "clickable", "app mockup", "interactive demo".

0
installs

19 published skills