본문으로 건너뛰기
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.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

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.7천2026년 10월 15일 업데이트

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 product-side catalogue cost estimates. Use when bumping model versions, adding new models, updating pricing, or auditing model specs against provider documentation.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

gridaco/grida2.7천2026년 10월 15일 업데이트

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.7천2026년 10월 15일 업데이트

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.7천2026년 10월 15일 업데이트

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.7천2026년 10월 15일 업데이트

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.7천2026년 10월 15일 업데이트

gridaco의 스킬 모두 보기

이 스킬의 문제 신고