本文へ移動
cccskills
無料GitHub で公開

slides

Build a Grida slides deck — a `.canvas` bundle in slides mode whose pages are SVG documents (16:9, one SVG per slide). Use when creating a presentation, pitch deck, slideshow, or talk.

インストール方法を見る

含まれるファイル(1)

  • SKILL.md5.4 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

A Grida slides deck is a .canvas bundle in slides mode whose documents are SVG files — one SVG per slide. Today this is Grida's only slide format: dotcanvas + SVG, and it is the default. When the task is a deck, presentation, pitch, or talk, build it this way. Do NOT author slides as markdown or HTML — the slides surface renders SVG only, so anything else won't appear.

Structure

  • The bundle is a folder ending in .canvas with a .canvas.json manifest.
  • Manifest: editor: "slides", files: ["*.svg"], and a documents array whose ORDER is the running order of the deck.
    {
      "editor": "slides",
      "files": ["*.svg"],
      "documents": [
        { "src": "001.svg", "id": "cover" },
        { "src": "002.svg", "id": "problem" }
      ]
    }
    
  • Each slide's CONTENT is one SVG file referenced by src. The deck convention is flat, zero-padded, root-level files: 001.svg, 002.svg, ….
  • A slide's human name is its SVG <title> element — not a manifest field.
  • If you open an existing or freshly-seeded bundle whose manifest says editor: "board" but the task is a deck, set editor: "slides" yourself — the manifest is yours to reconcile with the user's intent.

Slide SVG

Every slide is a full-bleed 16:9 SVG on the SAME 1920×1080 viewBox, so the deck stays uniform. Start each from this shape:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920" height="1080">
  <title>Cover</title>
  <rect width="1920" height="1080" fill="#0b1220"/>
  <text x="160" y="560" font-family="Inter, Arial, sans-serif" font-size="120" font-weight="700" fill="#ffffff">Your title</text>
</svg>

Working pattern

  • To start a deck: first make the bundle folder — a NEW directory whose name ends in .canvas (e.g. Q3 Report.canvas/), created under your working root. The .canvas suffix on the FOLDER is what marks it a bundle (see Structure); a plain folder — or files loose in the workspace root — is NOT a deck and won't open. Then write_file each slide as <name>.canvas/NNN.svg and write_file the manifest as <name>.canvas/.canvas.json listing them in order. Every file lives INSIDE that one .canvas folder.
  • To edit a deck: read_file .canvas.json first (preserve version / $schema and any unknown fields), edit the slide SVGs, then write the full manifest back with documents in the intended order.
  • Reorder = reorder documents. Add a slide = write_file a new NNN.svg and insert it into documents. Remove = drop it from documents.

Show the result

  • Treat presentation as the first production milestone, not the final "validate and open" step. For a new deck, create a meaningful valid first slide and a manifest that references it, then call surface_open immediately with the workspace-rooted .canvas bundle directory (for example, /Q3 Report.canvas). Continue adding and refining slides while the user can watch. Do not wait for the full deck, all assets, polish, preview generation, exhaustive validation, or task completion.
  • Never open an empty bundle, a broken manifest, or a manifest whose first slide is missing. Pass the bundle directory, never its .canvas.json manifest.
  • For an existing primary deck, open it after reading its manifest and before substantial edits.
  • If the .canvas bundle itself is mounted as / in a dedicated file surface, 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.

Starting from a template

When the user picks a template from the gallery, a <user_template_selection> block on the first turn names it (title, slide count, visual system), and its unzipped .canvas bundle (the manifest .canvas.json + slide SVGs) is placed in your scratch dir — a reference, like an attachment, NOT part of the user's workspace. Treat it as the STARTING POINT, not a fixed result:

  • List your scratch dir and read_file the .canvas.json + slide SVGs there first. The template defines the deck's visual system — palette, type, layout, margins, footer, accents. Hold it: reuse those so every slide you write reads as a sibling, not a stray.
  • Build the adapted deck in the workspace as a NEW <name>.canvas/ folder (that's where the user's document lives — scratch is throwaway; and the .canvas folder suffix is what makes it a deck — see Working pattern). Write the slide SVGs + .canvas.json INSIDE it, replacing the placeholder copy with the user's content and adding / reordering / removing slides (update documents) to fit. Keep the frame (1920×1080 viewBox, safe margins) and the conventions above.
  • Don't discard the template's design and start from nothing unless the user asks for a different look — keeping that design is the whole point of the pick.

See also

  • The svg skill — SVG authoring / output style (xmlns, formatting, recovery).
  • The dotcanvas skill — the .canvas manifest and board mechanics this builds on.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Grida AI agent system work: `@grida/daemon` (DaemonServer, loopback HTTP perimeter, files/workspaces, secrets store, daemon discovery) and `@grida/agent` (the agent tenant: sessions, providers/BYOK, runtime/tool execution, skills discovery, prompts, tiers, sandbox hosts). Use for `packages/grida-daemon/**`, `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`.

日本語の概要は準備中です。原文の説明を表示しています。

gridaco/grida2,6662026年10月9日 更新

ai-models

無料

Research, compare, and update shared AI model JSON for TypeScript, web, and Rust consumers. Covers text model tiers, image and video generation models, image tool models, release provenance, pricing data sourcing, and provider-cost metering against prepaid org credit. Use when bumping model versions, adding new models, updating pricing, or auditing model specs against provider documentation.

日本語の概要は準備中です。原文の説明を表示しています。

gridaco/grida2,6662026年10月9日 更新

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/*`.

日本語の概要は準備中です。原文の説明を表示しています。

gridaco/grida2,6662026年10月9日 更新

code-ts

無料

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`.

日本語の概要は準備中です。原文の説明を表示しています。

gridaco/grida2,6662026年10月9日 更新

database

無料

Use BEFORE editing any file in `supabase/migrations/` or `supabase/schemas/`, OR when the user runs a `/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).

日本語の概要は準備中です。原文の説明を表示しています。

gridaco/grida2,6662026年10月9日 更新

desktop

無料

Grida Desktop Electron shell and release-impact work: 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, GRIDA-SEC-004, and deciding whether linked-package or hosted-renderer changes require a native Desktop version bump or coordinated release. For implementing daemon/agent-tenant core behavior, use `agent-system` as well.

日本語の概要は準備中です。原文の説明を表示しています。

gridaco/grida2,6662026年10月9日 更新

gridaco のスキルをすべて見る

このスキルの問題を報告する