Frontend

Draw diagrams, charts and CSS animations for GitHub READMEs and documentation as transparent light and dark SVG pairs, with text drawn as glyph outlines so…

Write one rich HTML explainer of a finished feature (background, intuition, code walkthrough, quiz), publish it (or put it in the user's Notion), and check…

Explain a complex topic back to you with visuals - the right diagram for each facet (flowchart, timeline, sequence, schema/ER, state machine, chart…

特定の読み手に向けて、概念・PR・設計を「冗長にならない水準」の速習資料として説明し、図と主張を道具で検証する。読み手のペルソナ（既に知っていること・知らないこと・読み方）を質問と公開情報から作り、その差分だけを書く。図は vlmkit-anim…

Drives a local web app in a headless browser to find and fix functional failures and visual defects, then proves each fix with a re-run.

Visualize repository fleets, PR stacks, and local work in an interactive HTML dashboard or compact text tree.

Use when asked to create, generate, visualize, or convert material into a standalone HTML artifact, single-file self-contained .html report, interactive…

htmx on Go html/template: how a handler picks page, fragment or redirect, how templates carry hx-* attributes, where client JS lives, and how errors and…

Set up a reproducible image generator in a project (Open Graph and social cards, link previews, project or product tiles, README banners, store screenshots)…

Use automatically when developing, modifying, designing, or reviewing frontend interfaces, websites, dashboards, components, styles, layout, accessibility, or…

Guide design-first website and application creation from visual concept through product discovery, UX/UI sign-off, architecture, budgeting, secure…

Capture before/after screenshots of UI views with Playwright and embed them in a PR.

Agree on the UI structure with a low-fidelity wireframe before writing any production frontend code, then lock it.

Runs react-doctor on React codebases and iteratively fixes diagnosed issues until the project reaches a verified score of 100 without shortcuts.

Compute React Flow (@xyflow) canvas geometry correctly — edge label anchors, bezier control points, handle coordinates, node bounds — so labels and edges land…

Create and edit professional motion graphics videos with Remotion (React-based video).

Reviews a chapter of the user's fiction and produces a two-column HTML critique page beside the manuscript, with the prose on the left and anchored comments…

Reads the justfiles of a repository and, for each level that has one (root, apps/frontend, packages/ui, ...), writes a .claude/rules/use-just-commands.md…

Re-verify the dated platform and harness facts the dev skills pin, and file what changed as issues.

Turns a system-design article URL into a runnable local walkthrough lab: playable frontend, docker-compose services plus viewer UIs, and session-based…

Generate genuinely beautiful, on-brand UI instead of generic "AI slop" — use whenever the user asks to build, design, style, or improve a UI, landing page…

Use when writing or reviewing any UI that renders text in this repo — picking a font size, adding a heading, styling a card, label, badge or table cell…

Deep, multi-agent security audit of a codebase — WordPress plugin, Laravel, Next.js, Node/Express, Django/Rails, or any app.

UI/UX design intelligence.