grida

Grida AI agent system work: `@grida/agent`, AgentHost, AgentSidecar server, loopback HTTP transport, sessions, workspaces/files, secrets/BYOK, providers, runtime/tool execution, skills discovery, prompts, tiers, and sandbox policy. Use for `packages/grida-ai-agent/**`, desktop sidecar protocol changes, agent chat transport, and bugs in agent state or streams. For pure Electron window, preload, menu, deep-link, or CDP work, use `desktop`.

SEO best practices for the Grida project across Next.js pages, blog posts, and documentation. Covers Next.js metadata API, Open Graph / Twitter cards, sitemaps, image search optimization, structured data (JSON-LD), Docusaurus frontmatter, and content writing for search. Use when creating or editing public-facing pages under editor/app/(www), writing blog posts, authoring docs, or reviewing SEO-related metadata. Trigger phrases: "SEO", "metadata", "sitemap", "open graph", "og image", "meta tags", "search ranking", "structured data", "JSON-LD".

Research, compare, and update AI model configurations. Covers text model tiers, image and video generation models, image tool models, pricing data sourcing, and the budget/rate-limit system. Use when bumping model versions, adding new models, updating pricing, or auditing model specs against provider documentation.

Pure Electron work for Grida Desktop: BrowserWindow, preload, `window.grida`, menus, protocol/deep links, file associations, Forge, path-scoped bridge security, Electron-only UI bugs, and CDP / Playwright verification. Use for `desktop/`, `editor/app/desktop/**`, `editor/scaffolds/desktop/**`, `editor/lib/desktop/**`, `/desktop/*` CSP, and GRIDA-SEC-004. For AgentHost, sessions, tools, providers, or `packages/grida-ai-agent/**`, use `agent-system`.

Author and manage user-facing documentation for the Grida Canvas editor. Covers writing style, tone, product screenshots, demo state preparation, and content structure for pages under docs/editor/. Use when creating or editing canvas editor documentation, capturing screenshots of canvas features, or planning visual demos. Trigger phrases: "write user docs", "document this feature", "screenshot for docs", "canvas user guide", "update help page".

Decide which family a doc belongs to before drafting — SDK/developer, user/product, or working-group (WG) — since family sets the audience, home, and tone. Use when creating, moving, or restructuring docs, when unsure which directory a doc belongs in, or when a request says "document this" / "write docs for X" without naming the kind. Routes to the specialized skill for each family.

Author SVG figures for Grida docs — diff-able, version-controlled vector diagrams embedded in doc pages instead of screenshots. Provides reusable primitives (selection chrome, size badges, anchor pins, resize cursors, click ripples), color/typography tokens, a starter template, and finished examples to crib from. Canvas user docs (docs/editor/) are the first consumer; the kit is meant to generalize to any product's docs. Use when drawing diagrams that explain UI behaviour — gestures, alignment, before/after states — that a screenshot alone can't capture. Trigger phrases: "svg diagram", "draw a figure", "visual for docs", "explain this gesture visually", "before/after diagram".

Doctrine for drafting and keeping working-group docs under `docs/wg/**` — RFC/RFD specs and findings/research/glossary. A WG doc is a language-agnostic, code-agnostic study of a domain: it argues *why* and defines *what*, never *how in our code*. Use when writing or editing anything under `docs/wg/`, an RFC/RFD, a spec, a design note, a glossary, or research findings — including "write up the design", "document the spec", or "capture what we learned". Not for plans/TODOs (untracked `*.plan.md`), user docs, or SDK API refs — use `docs` to route those.

Establish what is actually true and current for the surface you are about to change — not just search. Grounding = locate the authoritative source and reconcile sources that disagree (code vs doc, migration vs schema, memory vs current code, live vs archived), not take the first hit. Use before any grep/find/explore of the codebase or docs, when deciding which of several definitions is the real one, or when a doc or memory conflicts with the code. Covers the source-of-truth hierarchy, reconciliation discipline, scoped ripgrep, and the docs/tags.yml + docsearch.py index.

Doctrine for designing and evolving any **SDK** Grida ships — TypeScript, Rust, or otherwise. "SDK" here means a surface that crosses a foreign-or-foreign-treated boundary: published packages, separately-versioned consumers, FFI bindings, public-by-design modules. An SDK's job is to refuse; a strict, honest surface rejects the wrong contents and keeps the package testable in isolation. Default is "core, not customizable"; customization is the exception, defended by a deciding table. Use when authoring or evolving any such surface — `@grida/*` published packages, `crates/*` published or FFI-exported, intent/message vocabularies, any contract a second author will compile against. Internal-only helper packages are welcome to follow, not forced. Companion skill for two-sided contract work: $sdk-seam. Critique partners: $pedantic, $etiology. Related: $naming.

Discipline for the seam between two SDKs (or two sides of one contract) that the same hand writes. The failure mode: "we own both sides" produces dirty contracts no foreign reviewer would accept. The exercise: pretend the other side is FFI, IPC, or a network protocol you cannot rewrite. Spawn an adversarial subagent profiled as the producer's maintainer; negotiate the change as a feature request, not a PR. Companion to $sdk-design. Language-agnostic — applies to a TS package + its consumer, a Rust crate + its WASM binding, two services sharing a wire format, or any other boundary the same author writes both ends of.

Surface workflow for billing in Grida — Stripe (subscriptions) + Metronome (AI credit ledger). The stable contracts: `grida_billing.*` is not REST-exposed (views/RPCs only), `fn_billing_apply_*` are the single mutation points, webhook receivers are `GRIDA-SEC-001`, BYOK is the `GRIDA-SEC-003` carve-out. Use when touching `editor/lib/billing/`, `editor/scripts/billing/`, the `grida_billing` schema, the webhook receivers, or the entitlement gate. Companion to `ee`.

Working pattern for enterprise-edition features in Grida — the commercial/hosted concerns (entitlement, BYOD, billing) on top of the OSS core. Anchor for the `GRIDA-EE: <surface>` grep marker, `(ee)` route group, `*-hosted` package suffix, and namespaced `grida_*` schema. Use when adding or touching an EE-only feature, or deciding whether a feature is EE territory. Surface skills (`ee-billing`) are siblings.

Pre-PR discipline for a public-by-default repo. What a reviewer enforces beyond CI: secrets and internal data in diffs or screenshots, docs that name their reader, and the cleaning pass where incomplete or confusing artifacts get dropped. Use before opening any PR against `gridaco/grida` or when finalizing work for review.

React-specific code shape in the Grida editor. Hooks cannot be tested or benchmarked and silently break tuned UX under layered composition, so they are barred from the engine and main system — load-bearing logic lives in classes and namespaces, hooks only as thin edge wires. `data-testid` follows component-root discipline: one per significant component, not scattered. Use when authoring React in `editor/grida-canvas-react/`, `editor/components/`, `editor/scaffolds/`, or `editor/app/*`.

TypeScript code shape inside a well-named module — taste, not lint. Prefer one class or namespace per file (the unit a test targets) over scattered free exports; consolidate related code, don't fragment. The unit of code should be the unit of spec. Use when authoring TS in `editor/grida-canvas*`, `editor/lib/`, or `packages/*`. Sibling to the `naming` skill; React-specific shape lives in `code-react`.

Bug-fix discipline — every defect has an etiology, the chain of cause that produced the observable fault; trace it before patching. Errors only grow: a bandaid leaks unless genuinely localized and leak-free. Walk the diagnostic ladder (presentation → proximate cause → API contract → isolated or systemic) before writing the fix. Use when authoring or reviewing any bug fix, regression patch, "quick fix" PR, or when deciding whether to ship, defer, or refactor.

Role profile — a reviewer who is fact-seeking, bedrock-seeking, honest, and rejecting. Demands that arguments rest on small facts that cannot be wrong (not on stacked assumptions dressed up as foundation), and that deliberately-unclear concepts be quarantined — never leaked into solid layers, never mixed with each other. Catches the failure mode where designs ship after partial grounding: most of the spec researched, the design feels finished, and the unresearched remainder holds the deal-breaker. Invoke with `/pedantic <target>` (e.g. `/pedantic review this design doc`, `/pedantic review the SDK design`, `/pedantic review this PR`). Probes cover logical structure (definitions, assumptions, boundaries, contradictions, unfalsifiability, vague quantifiers, counterexamples), epistemic honesty (researchable vs. discoverable-only-by-doing), bedrock integrity (assumed-bedrock, leaked uncertainty, mixed unclarity), and design pathology (YAGNI, wrong-layer abstraction, unclear responsibility, fragmentation, over-engi

Write any link or URL so it resolves where it is rendered, not where it lives in the repo. Use when authoring or editing a link — in docs, source docstrings, READMEs (incl. npm-published), or product UI: docs cross-refs, "see SECURITY.md", universal `/_/` routes, GitHub URLs.

Use BEFORE editing any file in `supabase/migrations/` or `supabase/schemas/`, OR when the user runs `/database <subcommand>` (`compact local migration`, `rls scenarios`, `align`). Encodes the three contracts that protect the Grida database layer: applied migrations are immutable, RLS implementation mirrors tests (never the reverse), `schemas/*.sql` is the human-readable end-state. Companion to `supabase/AGENTS.md` (RLS, grants, security boundaries).

How to handle `GRIDA-SEC-<id>` security boundaries in the Grida repo. Triggers when you encounter a `GRIDA-SEC` tag in source/docs, when modifying files under any tagged path, or when adding a new prevented- vulnerability record. Each `GRIDA-SEC-<id>` identifies a structural trust boundary documented in `/SECURITY.md`. This skill explains the contract, mandates a security review before committing changes to any tagged file, and shows how to register a new id. Use whenever "GRIDA-SEC" appears in context.

Manual-invocation only. Five-phase feature loop (audit → ground → fixture → implement → verify) for driving a single CSS feature to Chromium parity in the grida htmlcss renderer.

Manual-invocation only. Five-phase feature loop (audit → ground → fixture → implement → verify) for driving a single SVG feature to Chromium parity in the grida `htmlcss::svg` renderer. Sibling to `dev-render-htmlcss-feature` (HTML/CSS path); same loop shape, different corpus (resvg-test-suite + Chrome bake) and different scoring (multi-oracle: consensus / disputed / UB).

Design, review, and debug visual rendering tests: reftests (independent oracle), golden/snapshot regression tests, probe tests (pixel assertions without vision), SVG reftest suites, and Figma refig suites. Use when adding pixel diffs, choosing an oracle strategy, or comparing renderer output against a ground truth.

Research upstream and peer projects to inform Grida's design and implementation. Use when investigating how Chromium, Skia, Servo, Taffy, or peer canvas editors solve a problem before writing code. Covers source-code exploration and research document authoring under docs/wg/research/.

Guides performance investigation, benchmarking, and optimization of the Grida Canvas web editor (TypeScript reducer, Immer, React hooks). Use when profiling reducer dispatch cost, diagnosing slow interactions (drag, resize, color change), writing or running editor benchmarks, instrumenting with PerfObserver, or optimizing the JS-side state management pipeline.

Guides authoring, organizing, and referencing test fixtures across the project. Use when creating new fixtures, writing tests that depend on fixtures, or deciding what should be checked into git.

Guides work on the Figma I/O package (@grida/io-figma, packages/grida-canvas-io-figma/). Covers the fig-kiwi binary parser, Kiwi→REST→Grida conversion pipeline, fig2grida CLI, REST API JSON conversion, and testing with clipboard/fig/REST fixtures. Use when adding node type support, fixing conversion bugs, extending fig2grida, working on the fig-kiwi parser, writing tests for Figma import, or debugging clipboard paste failures after a Figma update.

Guides work on the Grida file format (.grida), the I/O packages that read/write it, and the Rust decoder that loads it into the canvas runtime. Use when working with .grida files, the FlatBuffers schema, file loading/saving, archive packing, clipboard encode/decode, or debugging format round-trip issues.

Guides work on SVG import into the Grida Canvas Rust engine (grida crate). Covers crates/grida/src/import/svg/, the grida_dev 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 support, fixing import bugs, authoring SVG test fixtures, debugging cross-boundary codec failures, or investigating what SVG elements map to which Grida node types.

How to think about names in the Grida repo — not conventions, but what a name commits you to, reveals about the system, and costs to change. The central discipline is that a strict, honest name refuses to grow, and that refusal drives the repo's shape (flat modules, small agnostic packages, suffix siblings). Use when planning a new package, crate, module, directory, route group, or test corpus — the name comes first.

Guides performance optimization work on the Grida Canvas Rust rendering engine (grida crate). Use when asked to benchmark, profile, optimize, or analyze rendering performance — panning, zooming, compositing, caching, culling, or frame budgeting.

Query images with a local Ollama vision model without loading the image into the main agent context. Use when you need to describe a screenshot, check whether rendered content is present, detect overlapping elements, or ask any visual question about a PNG/JPEG/WebP file. Requires Ollama running locally with the Gemma 4 multimodal model (`gemma4` on Ollama). Script: .agents/skills/vision/scripts/ask.py. Trigger phrases: "describe image", "what does this screenshot show", "does the canvas contain content", "check screenshot visually", "look at this image", "any overlapping elements", "vision query".

Draft high-signal social posts from real work — auto-researches the current PR, recent commits, or working tree to capture the essence, then writes concise, human, builder-first posts for X/Twitter (and optionally Reddit).