メニュー
Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | svg-precision |
| description | Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility. |
Generate structurally correct SVGs from a strict JSON spec (scene graph), then validate and optionally render a PNG preview.
references/spec.md).python scripts/svg_cli.py build spec.json out.svgpython scripts/svg_cli.py validate out.svgpython scripts/svg_cli.py render out.svg out.png --scale 2canvas.viewBox and explicit canvas.width/canvas.height.defs (markers, gradients, clipPaths) and reference by id.python scripts/svg_cli.py build <spec.json> <out.svg>python scripts/svg_cli.py validate <svg>python scripts/svg_cli.py render <svg> <out.png> [--scale N]python scripts/svg_cli.py diff <a.svg> <b.svg> <diff.png> [--scale N] (renders + image-diffs)from svg_skill import build_svg, validate_svg
svg_text = build_svg(spec_dict)
report = validate_svg(svg_text)
references/spec.md and fill in concrete numbers.references/spec.md - schema + ready-to-copy templates per SVG typereferences/recipes.md - layout and styling patterns that render consistentlyNavigate the ADC codebase by domain name. Use when finding, locating, or tracing files for any domain (auth, tasks, visualization, github, etc.), when asked 'where is X', when needing to understand how a feature connects across layers, or when starting work on any domain. Also use proactively before reading/searching files to resolve the right paths first.
Execute a sprint plan by reading task files, dispatching subagents per task, and managing review cycles. Uses subagent-driven-development pattern.
Scaffold a new Feature Slice Design domain. Generates all 8 layers (channels, contract, schema, service, handlers, hooks, components, barrel) from a domain name.
ADC-specific QA review skill for wave-scoped task review. Use when reviewing code changes from agent-team tasks — runs incremental lint/typecheck on changed files only, validates against ADC architecture and design system rules. Replaces full-codebase npm run lint/typecheck/build with targeted checks.
Core Tailwind CSS patterns, gotchas, and fixes for layout, alignment, spacing, and responsive design. Use when debugging visual layout issues or writing Tailwind classes.
Build distinctive, production-grade frontend interfaces with high design quality. Use when building web components, pages, dashboards, React components, HTML/CSS layouts, or styling/beautifying any web UI. Avoids generic AI aesthetics. Uses shadcn UI MCP for components.