A set of instructions for creating and editing SVG files, which are scalable drawings made from text-based shapes and paths, in the Grida editor. Changes are shown on the editor canvas as the file is updated.

Use it when creating or modifying SVG illustrations, diagrams, icons, posters, or other vector artwork in a Grida editor session.

It helps keep SVG files valid while making them visible and editable in the right workspace. It also provides a recovery process when an edit makes the SVG invalid.

svg — Skill by gridaco

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods

npx agentmods add skills/gridaco/grida/svg

Any agent

npx skills add gridaco/grida --skill svg

Clone the repo

git clone --depth 1 https://github.com/gridaco/grida

Made for: Claude Code, Codex.

Per session 39 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 555 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. Scan, not verified.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5	$0.00039	$0.00555
Opus 5	$0.00019	$0.00278
Sonnet 5	$0.00008	$0.00111
Haiku 4.5	$0.00004	$0.00056

Measured 3d ago against content hash 7767e867c1b2, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

svg scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/svg/SKILL.md · 49 lines

How it starts

The opening of the file, as written. The whole thing — 49 lines — stays where its author put it; the contents beside it link to each section on GitHub.

When you operate on .svg files inside a Grida editor session:

Writes are reflected on the canvas instantly if the human is currently viewing that document. Treat the canvas as a live render of what you wrote.
You may create and edit non-SVG files (e.g. /notes/draft.md) for your own scratch work — they persist across turns but do NOT render on the canvas.
On edit_file reason="parse_error", your output broke the SVG. Re-read and fix.

Show the result

Treat presentation as the first production milestone, not the final "validate and open" step. For a new standalone SVG, write a meaningful valid first frame with the intended dimensions and basic visible composition, call surface_open immediately with its workspace-rooted path (for example, /poster.svg), then continue adding and refining details while the user can watch. Do not wait for complete content, polish, preview generation, exhaustive validation, or task completion. For nontrivial work, intentionally start with the basic frame instead of authoring the finished SVG before opening it.
Never open an empty or invalid SVG. For an existing primary SVG, open it before substantial edits.
Open a standalone SVG by its file path. When the SVG belongs to a .canvas board or deck, the board/deck skill owns presentation: open the .canvas bundle directory once its manifest references a valid document, never the internal SVG or .canvas.json manifest.
If the standalone SVG or .canvas bundle is already mounted at the dedicated file surface's root, it is already presented; do not call surface_open just to reopen it.
Treat presentation as auxiliary: continue regardless of the result, never retry based on presentation status, and do not call surface_open after every write.
Use surface_list_open only when the current host surface state is materially useful. It is not required before surface_open.

SVG style

When you produce SVG:

Keep xmlns="http://www.w3.org/2000/svg" on the root element.
Preserve existing viewBox, width, height unless asked.
Preserve unrelated nodes and attributes (ids, classes, transforms).
Match the existing formatting (one element per line, 2-space indent).

Read the full file on GitHub · 49 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

3d ago First seen · 49 lines · 39 tokens per session scan A 7767e867c1b2

Subscribe to this mod's changes

svg is a skill published in the GitHub repository gridaco/grida (2,629 stars, last pushed 12d ago), licensed Apache-2.0. It adds 39 tokens to every session and 555 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Design and UX canvas no-code postgresql supabase webgpu

studio-ui-patterns

Design system UI patterns for Supabase Studio. Use when building or updating pages, forms, tables, charts, empty states, navigation, cards, alerts, or side panels (sheets). Covers layout selection, component choice, and placement conventions.

supabase/supabase · 54 tokens

io-svg

Guides work on SVG import into the Grida Canvas Rust engine (grida crate). Covers crates/grida/src/import/svg/, the gridadev svg-to-grida CLI, cross-boundary FBS codec tests (Rust encode → TS decode), SVG fixture authoring, and known SVG import limitations (text model, filters, transforms). Use when adding SVG feature…

gridaco/nothing · 108 tokens

react-hook-form

Correct React Hook Form usage anywhere in the monorepo — data flow, subscriptions, reset, dirty state, number inputs, and controlled-input rules. Load this BEFORE writing or modifying ANY form code, adding a field to an existing form, touching watch/useWatch/formState/getValues/setValue/reset, wiring a form into a…

supabase/supabase · 123 tokens

safe-sql-execution

Use whenever code will build, return, fetch, or execute SQL that runs against a user's real Postgres database — even when the request reads like an ordinary feature or bug fix and never says "security," "injection," or "SafeSqlFragment." This covers: writing or editing any pg-meta function, query builder, or endpoint…

supabase/supabase · 221 tokens

studio-e2e-tests

Write and run Playwright E2E tests for Supabase Studio (e2e/studio). Use when asked to run e2e tests, write new E2E tests, or debug flaky or failing Playwright tests. Covers running commands, avoiding race conditions, waiting strategies, selectors, helper functions, and CI vs local differences.

supabase/supabase · 74 tokens

studio-mock-api-tests

Component tests for Supabase Studio that mock API requests at the network layer with MSW. Use when writing or reviewing a component test that exercises a React Query hook or mutation, or when migrating an existing test away from vi.mock('@/data/...'). Covers the customRender + addAPIMock template and the jsdom/MSW…

supabase/supabase · 79 tokens