| name | create-svg |
| description | Create SVG cards or board game components for an existing Digitable project by reading game context, gathering card/component details, confirming a rough layout, and producing editable SVG based on the bundled placeholder template. |
| compatibility | opencode |
| metadata | {"digitable-kind":"svg-component-creation"} |
Create SVG
Use this skill when the user wants to create an SVG card, token, board element, or other printable game component.
Required Context
Only create SVGs inside a project that has a game.json. Read game.json first and use it for theme, tone, and component context.
Start card designs from assets/placeholder_front.svg.
Inspect the placeholder structure before designing so image and text regions stay editable.
Workflow
- Ask what kind of component the user wants: card, token, board, tile, player aid, or another component.
- Gather the component's gameplay fields, dimensions, and style direction.
- For cards, ask about fields such as name, background URL, ability text, icon, cost, tags, stats, and deck.
- Print a compact ASCII layout preview before writing the SVG.
- Iterate on the layout if the user requests changes.
- Create the SVG with editable, clearly named elements.
SVG Rules
- For text, always include an appropriately sized
rect in defs following the placeholder template pattern.
- If the component is expected to have artwork, reserve a prominent dedicated
<image> element for it.
- Use a template
href such as /placeholder.svg for artwork slots unless the user provided a real asset path.
- Never replace the main artwork area with
path, circle, polygon, or other vector illustration stand-ins.
- Decorative vector shapes are allowed only as framing or accents around the artwork placeholder.
- Size image elements deliberately and give each artwork slot a meaningful ID such as
artwork, character_art, or vehicle_art.
- Give all important text and image elements meaningful IDs.
- Keep text inside its intended region.
- Preserve editability over clever rendering tricks.
Handoff
Use component-explorer when the user wants multiple card or component directions before committing to an SVG. Use rules-explorer when component text implies unresolved timing, targeting, or scoring rules.
