dtpr-symbol-design

The symbol-tier skill. Scope is one symbol — proposing a new one, redesigning an existing one, or iterating to a final choice for an element draft. Output is a set of SVG variants ready to drop into app/public/dtpr-icons/symbols/<symbol_id>.svg, a local HTML preview that renders all variants at multiple scales, and (after the user picks one) a finalized SVG with its save path.

The skill produces three variants per round rather than a single guess — enough to compare silhouette strategies (object-centric vs. action-centric vs. frame-centric, stroke vs. filled) without overwhelming review. The user picks one, asks for refinements, or requests another round of three with different strategies.

When to fire

• The user wants an SVG symbol for a proposed or existing DTPR element, drawn in the DTPR house style.
• The user wants to compare a few icon directions before committing — "show me three options for X".
• The user wants to refine an existing symbol — strip clutter, simplify the silhouette, redo at sign scale.
• A dtpr-element-design session reaches the symbol step and hands off here.
• The user wants to redesign an icon that fails legibility at sign scale (~24×24).

Trigger phrases

"draft an SVG for X", "design an icon for the Y element", "give me three icon options for cloud storage", "iterate on the symbol for Z", "redesign the X icon", "what would the icon for differential privacy look like in DTPR style".

Workflow

Phase 0 — Pin the concept and target category. One-sentence concept, target category_id, candidate symbol_id (snake_case, category prefix by convention). Uses list_categories when the user is uncertain.

Phase 1 — Sibling read. Reads 2–3 sibling SVGs from the target category in app/public/dtpr-icons/symbols/ to match house style. For an existing-symbol redesign, also reads the current SVG. Captures the silhouette family, dominant drawing technique, and any frame motif (alert triangle for risks_*, person figure for rights_*, input/output arrows for processing_*).

Phase 2 — Draft three variants. Each carries a different silhouette strategy across three axes: reading (object-centric / action-centric / frame-centric), technique (stroke line-work / filled silhouette / hybrid), and composition (single object / two-object relation / contained). Every variant holds the house style — 36×36 viewBox, currentColor only, ~2px rounded line weight, ≤6 distinct shapes, single concept, sign-scale legibility.

Phase 3 — Write the local HTML preview. Writes the three variant SVGs and an index.html to .context/dtpr-symbols/<symbol_id>/ (or an OS temp dir fallback). The preview renders each variant at 16/24/36/64 px in a prefers-color-scheme-aware page so currentColor reads in both light and dark mode. Variants are inlined into the page rather than loaded via <img> so currentColor resolves against the surrounding HTML — an <img src>-loaded SVG resolves it against the SVG document's own default (black). Surfaces the absolute file:// URL for the user to open.

Phase 4 — Per-variant legibility note. For each variant, a 2–3 sentence note covering concept legibility at 24×24, family fit with the sibling read, and one specific risk (or "no concerns").

Phase 5 — Iterate or finalize. Asks which variant to refine, or whether to run another round of three with different strategies. On finalize, runs a tightening pass on the chosen variant — normalizing stroke widths, rounding sharp corners, dropping forbidden attributes — and emits the cleaned SVG with the save path.

Output

A proposal with Concept / Sibling read / Variants (three numbered, each with a strategy tag, a one-line concept tag, a legibility note, and a fenced ```svg code block) / Preview (file:// URL) / Next step (iterate or finalize prompt).

On finalize, the Variants section collapses to a single Final section with the cleaned SVG and the save path app/public/dtpr-icons/symbols/<symbol_id>.svg. The user saves the file themselves; the skill never writes into app/public/dtpr-icons/symbols/.

Non-goals

No raster output — SVG only. No external image generation in this version — variants are drawn by the model from the house-style rules and sibling reads. No file-system writes outside the preview root. No YAML drafting — element fields belong to dtpr-element-design. No category-wide visual review — that belongs to dtpr-category-audit. No comprehension grading — full rubric grading belongs to dtpr-comprehension-audit. No animation or multi-state variants — a symbol is one static icon, monochrome, sized for sign-scale rendering.

Source

plugin/dtpr/skills/dtpr-symbol-design/SKILL.md in the repository.