diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json
index 22253231..f2ac1a55 100644
--- a/.claude-plugin/marketplace.json
+++ b/.claude-plugin/marketplace.json
@@ -3,12 +3,12 @@
"owner": {
"name": "TemPad Dev"
},
- "description": "Agent plugins for using TemPad Dev design evidence in coding workflows.",
+ "description": "Agent plugins for reading Figma evidence and authoring native designs with TemPad Dev.",
"plugins": [
{
"name": "tempad-dev",
"source": "./agent-plugins/tempad-dev",
- "description": "Use selected Figma nodes as agent-ready evidence for project-consistent UI implementation.",
+ "description": "Connect your coding agent to Figma. Create and edit native designs, inspect existing designs, and implement UI in your codebase.",
"category": "Design"
}
]
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index d1125dfb..aa24f6f8 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -33,6 +33,14 @@ jobs:
- name: Install browser runtime
run: pnpm --filter @tempad-dev/extension test:setup
+ - name: Check agent plugin
+ run: >-
+ pnpm agent-plugin:dev &&
+ test -z "$(git status --porcelain --untracked-files=all --
+ agent-plugins/tempad-dev
+ .agents/plugins/marketplace.json
+ .claude-plugin/marketplace.json)"
+
- name: Type check
run: pnpm typecheck
diff --git a/.github/workflows/publish-mcp.yml b/.github/workflows/publish-mcp.yml
index 5de2ea44..bef75708 100644
--- a/.github/workflows/publish-mcp.yml
+++ b/.github/workflows/publish-mcp.yml
@@ -2,6 +2,16 @@ name: publish-mcp
on:
workflow_dispatch:
+ inputs:
+ tag:
+ description: npm dist-tag
+ required: true
+ default: latest
+ type: choice
+ options:
+ - latest
+ - next
+ - alpha
permissions:
contents: read
@@ -35,4 +45,8 @@ jobs:
- name: Publish
working-directory: packages/mcp-server
- run: npm publish --access public
+ run: npm publish --access public --tag "${{ inputs.tag }}"
+
+ - name: Verify published version
+ working-directory: packages/mcp-server
+ run: npm view "@tempad-dev/mcp@$(node -p "require('./package.json').version")" version
diff --git a/.gitignore b/.gitignore
index 82a32a28..9b392a30 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,8 +14,10 @@ stats-*.json
.wxt
web-ext.config.ts
dist
+.dev/
coverage
.artifacts/
+.vitest-attachments/
packages/*/coverage
packages/extension/tests/**/__screenshots__/
diff --git a/.lefthook.yml b/.lefthook.yml
index 89dd61e1..1922aa67 100644
--- a/.lefthook.yml
+++ b/.lefthook.yml
@@ -5,10 +5,6 @@ pre-commit:
group:
piped: true
jobs:
- - name: sync-agent-plugin
- glob: '{skill/SKILL.md,agent-plugins/tempad-dev/skills/figma-design-to-code/SKILL.md}'
- run: pnpm sync:agent-plugin
- stage_fixed: true
- name: lint
glob: '*.{ts,js,mjs,cjs,mts,cts,vue}'
run: pnpm exec eslint --fix {staged_files}
diff --git a/AGENTS.md b/AGENTS.md
index 823f76e6..aacd06d5 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -2,121 +2,102 @@
## Purpose
-Provide a single entry point for coding agents. This file links to package-level guides and highlights repo-wide constraints and workflows.
-
-## Repo map (high level)
-
-- `packages/extension/` — Figma plugin + MCP tools implementation
-- `packages/mcp-server/` — MCP server runtime
-- `packages/shared/` — shared types and contracts
-- `packages/plugins/` — plugin-side code and transforms
-- `agent-plugins/` — shared agent plugin bundles and platform manifests
-
-## Start here
-
-- `packages/extension/AGENTS.md`
-- `packages/mcp-server/AGENTS.md`
-- `packages/shared/AGENTS.md`
-- `packages/plugins/AGENTS.md`
-
-## Global conventions
-
-- Package manager: `pnpm`
-- Prefer repo-level scripts unless a package explicitly documents otherwise.
-- When creating commits, use Conventional Commits (for example: `feat: ...`, `fix: ...`, `docs: ...`, `chore: ...`).
-
-## Common commands
-
-- Typecheck: `pnpm typecheck`
-- Lint (and format): `pnpm lint:fix`
-- Test (watch): `pnpm test`
-- Test (run): `pnpm test:run`
-- Test (coverage): `pnpm test:coverage`
-- Extension node tests: `pnpm --filter @tempad-dev/extension test:node`
-- Extension browser tests: `pnpm --filter @tempad-dev/extension test:browser`
-- Extension browser setup: `pnpm --filter @tempad-dev/extension test:setup`
-
-## Doc index
-
-- `TESTING.md`
-- `docs/testing/architecture.md`
-- `docs/extension/mcp-get-code-requirements.md`
-- `docs/extension/mcp-get-code-design.md`
-- `docs/extension/mcp-browser-gateway-design.md`
-- `docs/marketing-screenshots.md`
-
-## Guardrails
-
-- Keep changes minimal and consistent with existing style.
-- Avoid adding new global dependencies unless explicitly requested or approved.
-- Keep pull request descriptions concise. Do not include a validation section unless explicitly requested.
-
-## Contributing & verification
-
-### Tech stack (repo-wide)
-
-- Package manager: `pnpm` (workspace scripts are commonly run as `pnpm -r ...`).
-- Language: TypeScript.
-- Extension: Vue 3 + WXT (Web Extension Toolkit).
-- MCP server: Node.js 18+ + `@modelcontextprotocol/sdk` + WebSocket transport.
-- Shared contracts: `zod` schemas.
-- Build tool (non-extension packages): `tsdown`.
-
-### Key scripts
-
-Run these at repo root unless noted.
-
-- Dev extension: `pnpm dev`
-- Dev site: `pnpm dev:site`
-- Build everything: `pnpm build`
-- Build site: `pnpm build:site`
-- Build extension: `pnpm build:ext`
-- Build plugins: `pnpm build:plugins`
-- Build MCP: `pnpm build:mcp`
-- Typecheck all packages: `pnpm typecheck`
-- Lint all packages: `pnpm lint` / auto-fix: `pnpm lint:fix`
-- Test all packages: `pnpm test:run`
-- Coverage report: `pnpm test:coverage`
-- Format: `pnpm format`
-- Zip extension artifact: `pnpm zip`
-
-### Verification checklist (agent-driven changes)
-
-Pick the checks that match your change.
-
-1. Always
-
-- `pnpm typecheck`
-- `pnpm lint` (or `pnpm lint:fix`)
-- `pnpm test:run`
-
-2. Extension UI / codegen
-
-- `pnpm dev`
-- In Figma, open TemPad Dev panel and validate the impacted section (e.g. “Inspect → Code”).
-
-3. Extension build / packaging
-
-- `pnpm build:ext`
-- `pnpm zip`
-
-4. Rewrite subsystem
-
-- `pnpm --filter @tempad-dev/extension build:rewrite`
-- Optional: `pnpm --filter @tempad-dev/extension tsx scripts/check-rewrite.ts`
- - Requires `FIGMA_EMAIL`, `FIGMA_PASSWORD`, `FIGMA_FILE_KEY`.
-
-5. MCP schemas / tool behavior
-
-- If you change tool schemas/contracts: update `packages/shared` first, then `packages/mcp-server`, then `packages/extension`.
-- Re-check payload limits and omission rules; see `docs/extension/mcp-get-code-requirements.md` and `docs/extension/mcp-get-code-design.md`.
-
-## Testing notes
-
-- Testing runbook and required checks: `TESTING.md`.
-- Testing architecture and coverage model: `docs/testing/architecture.md`.
-- Root coverage scope is configured in `vitest.config.ts` as the single source of truth.
-- Root coverage excludes build artifacts (`**/dist/**`, `**/.output/**`) to avoid polluted reports.
-- Root coverage provider is `istanbul` to avoid V8 remap parse failures under Vite 8 dependency trees.
-- Extension browser tests run in Playwright via `packages/extension/vitest.browser.config.ts`.
-- Do not introduce jsdom-based tests in this repository.
+Use this file as the repo-wide router and source of global invariants. Read only
+the package guide and conditional runbook required by the task; do not preload
+every linked document.
+
+## Repository routing
+
+| Work area | Read next | Responsibility |
+| ----------------------------- | ------------------------------- | -------------------------------------------------------------------------------- |
+| `packages/extension/` | `packages/extension/AGENTS.md` | Figma extension, UI, codegen, browser runtime, and MCP tool implementation |
+| `packages/mcp-server/` | `packages/mcp-server/AGENTS.md` | MCP server, Hub, transport, and tool exposure |
+| `packages/shared/` | `packages/shared/AGENTS.md` | Shared schemas, types, and contracts |
+| `packages/plugins/` | `packages/plugins/AGENTS.md` | Plugin transforms and sandboxed plugin-side code |
+| `skill/` and `agent-plugins/` | This guide | Shared agent skills, manifests, compatibility wrappers, and marketplace metadata |
+
+For a cross-package change, read the guides for every affected package. For a
+repo-wide documentation, configuration, or release task, this root guide is the
+default authority unless a routed document says otherwise.
+
+## Repo-wide invariants
+
+- Package manager: `pnpm`. Prefer repo-level scripts unless a package guide
+ explicitly requires a filtered command.
+- Keep changes minimal and consistent with existing style. Do not add global
+ dependencies without explicit approval.
+- When a tool schema or shared contract changes, update `packages/shared` first,
+ then `packages/mcp-server`, then `packages/extension`.
+- Generated artifacts are not source. Follow the owning workflow and never edit
+ ignored or generated output to simulate a source change.
+- Do not create or amend commits unless explicitly requested. When creating a
+ commit, use Conventional Commits.
+- Keep pull request descriptions concise. Do not add a validation section unless
+ explicitly requested.
+
+## Agent plugin invariants
+
+- `agent-plugins/tempad-dev/` is the tracked release source shared by Codex and
+ Claude. The plugin is distributed through the Git marketplace, not npm.
+- Edit `skill/` for `figma-design-to-code`; the development generator copies it
+ into the tracked release plugin. Edit the tracked
+ `agent-plugins/tempad-dev/skills/figma-canvas-authoring/` source directly.
+- The portable `plugin.json` and `mcp.json` own shared manifest and MCP fields.
+ `pnpm agent-plugin:dev` synchronizes client compatibility wrappers, the copied
+ design-to-code skill, derived icons, and shared marketplace metadata; do not
+ hand-edit those derived fields or copies.
+- `.dev/plugins/tempad-dev-dev/` is the ignored local build. Generate it with
+ `pnpm agent-plugin:dev`; never edit it directly.
+- Run `pnpm agent-plugin:dev` after a change to any generator input, inspect all
+ tracked synchronized outputs, and include the intended release-source changes.
+ Ordinary `pnpm build` must not modify agent-plugin artifacts.
+- Keep Codex and Claude development support equivalent. Both manifests must
+ launch the same working-tree MCP runtime.
+- Release MCP configuration must use `@tempad-dev/mcp@latest`, never an alpha
+ tag, fixed version, or local path.
+- Before preparing, running, reviewing, or asking the user to test an end-to-end
+ Figma authoring task, read `docs/testing/agent-authoring-evolution.md`. It is
+ the sole detailed runbook for runtime refresh, plugin replacement, clean-task
+ identity, evidence review, fix placement, and candidate promotion.
+
+## Core commands
+
+Run these from the repo root:
+
+| Task | Command |
+| --------------------------------- | ----------------------------- |
+| Development | `pnpm dev` |
+| Build all packages | `pnpm build` |
+| Typecheck | `pnpm typecheck` |
+| Lint / auto-fix | `pnpm lint` / `pnpm lint:fix` |
+| Test once | `pnpm test:run` |
+| Coverage | `pnpm test:coverage` |
+| Format | `pnpm format` |
+| Generate development agent plugin | `pnpm agent-plugin:dev` |
+
+Use package-owned commands from the applicable package guide when a narrower
+check is sufficient.
+
+## Conditional documentation
+
+| Task | Read first |
+| ------------------------------------------------------- | --------------------------------------------------------------- |
+| Test selection, required checks, or troubleshooting | `TESTING.md` |
+| Test runtime or coverage architecture | `docs/testing/architecture.md` |
+| End-to-end authoring evolution or live agent evaluation | `docs/testing/agent-authoring-evolution.md` |
+| Extension implementation or MCP behavior | `packages/extension/AGENTS.md`, then its routed design document |
+| Public agent-plugin installation or usage documentation | `agent-plugins/tempad-dev/README.md` |
+| Marketing screenshot work | `docs/marketing-screenshots.md` |
+
+## Verification
+
+Follow `TESTING.md` and every affected package guide. The default repository
+checks are:
+
+1. `pnpm typecheck`
+2. `pnpm lint`
+3. `pnpm test:run`
+
+Add build, browser, packaging, rewrite, coverage, or live Figma checks only when
+the routed guidance and change risk require them. Browser runtime tests must use
+Playwright; do not introduce jsdom-based tests.
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5e1328fd..4b9aa926 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,4 +2,7 @@
- Extension: [packages/extension/CHANGELOG.md](packages/extension/CHANGELOG.md)
- MCP server: [packages/mcp-server/CHANGELOG.md](packages/mcp-server/CHANGELOG.md)
+- Agent Plugin: [agent-plugins/tempad-dev/CHANGELOG.md](agent-plugins/tempad-dev/CHANGELOG.md)
- Plugins SDK: [packages/plugins/CHANGELOG.md](packages/plugins/CHANGELOG.md)
+
+For the coordinated publication process, see [Releasing](docs/releasing.md).
diff --git a/README.md b/README.md
index a9aeb748..13f5fa48 100644
--- a/README.md
+++ b/README.md
@@ -2,11 +2,11 @@
-
+
-
Open handoff tooling for Figma
+
Connecting Figma with developers and their coding agents
@@ -20,17 +20,159 @@
-
+TemPad Dev is an open-source connection between Figma, developers, and their coding agents. Inspect designs and customize code output in the browser, or let your agent read designs, create and edit native Figma content, and implement UI in your project.
+
+## Contents
+
+- [Quick start](#quick-start)
+- [Agent integration](#agent-integration): [canvas design](#create-and-edit-figma-designs), [implementation](#implement-designs-in-code), [setup](#setup-guide), [connection status](#mcp-connection-status)
+- [Inspect designs](#inspect-designs): [CSS and variables](#inspect-css-code), [deep select](#deep-select-mode), [measure](#measure-to-selection-mode), [scroll into view](#scroll-selection-into-view)
+- [Output plugins](#output-plugins): installation, development, and sharing
+
+## Quick start
+
+1. Install TemPad Dev from the [Chrome Web Store](https://chromewebstore.google.com/detail/tempad-dev/lgoeakbaikpkihoiphamaeopmliaimpc) and open a Figma Design file.
+2. Select an element to inspect its code, variables, and layout in the TemPad Dev panel. Manual inspection needs no agent setup.
+3. To use a coding agent, enable **Preferences → Agent integration → MCP access**, select **Set up agents**, and follow the instructions for your client.
+
+The agent connection requires Node.js 22.x, 24.x, or 26+. Canvas editing also requires edit access to the Figma Design file. Setup and upgrade details for the extension, MCP server, and both skills follow below.
+
+## Agent integration
+
+Work with Figma through the coding agent or IDE you already use. TemPad Dev provides design context and canvas operations; your agent uses them alongside your instructions and project context.
+
+### Create and edit Figma designs
+
+Create screens, adjust layout and typography, or revise existing designs. The result consists of native, editable layers. Reuse accessible components, variables, and styles when the task calls for them.
+
+For example, after connecting your agent:
+
+> Create a settings screen in Figma using the available components.
+
+Or select an existing design and ask:
+
+> Adjust the spacing and typography in this screen, keeping its components and content.
+
+The `figma-canvas-authoring` skill guides your agent through relevant resource inspection, editing, and checking the rendered result. Writes require an editable Figma Design file; view-only files and Dev Mode remain read-only.
+
+### Implement designs in code
+
+Select the design in Figma, then ask your agent in the target code project:
+
+> Implement the current Figma selection using this project’s components and styling conventions.
+
+TemPad Dev provides layout, styles, variable references, component information, and assets. The `figma-design-to-code` skill guides the agent through adapting that evidence to the repository and validating the implementation. Generated design code is a starting point; the agent produces the project implementation.
+
+Both workflows use the same MCP connection to Figma. Compatible clients can install the [Agent Plugin](./agent-plugins/tempad-dev/README.md), which bundles the MCP configuration and both skills. Other clients can set up MCP and skills separately.
+
+### Setup guide
+
+
+
+
+
+
+
+1. Install Node.js 22.x, 24.x, or 26+ with `npx`. Keep TemPad Dev open in the Figma tab you want the agent to inspect, then enable **Preferences → Agent integration → MCP access**. When prompted, allow the loopback connection to `127.0.0.1`. Canvas authoring is available while MCP access is enabled and the current Figma Design file is editable.
+2. Select **Set up agents**, choose Codex, Cursor, Claude Code, Gemini, VS Code, OpenCode, or TRAE, and follow the displayed path. Use **Other** for another compatible client. The choice only changes the instructions shown; it does not bind or activate an agent.
+3. The setup flow installs the portable Agent Plugin first for Codex, Cursor, Claude Code, and VS Code. For Gemini, OpenCode, TRAE, and other clients without compatible plugin installation, it uses the client's MCP flow plus the two standalone skills. Every command or config is shown in full for review and copying.
+
+For clients with separate MCP and skill installation, the setup shows each command. Gemini is one example:
+
+
+
+
+
+
+
+Scroll down in the dialog for both skill installation commands:
+
+
+
+
+
+
+
+To install the portable package into all compatible agents detected on your machine:
+
+```bash
+npx plugins add ecomfe/tempad-dev
+```
+
+Pass `--target codex`, `--target cursor`, `--target claude-code`, or `--target vscode` to limit the
+installation to one of the built-in setup targets. Native Codex and Claude marketplace commands,
+plus direct MCP and skill installation, remain documented as compatibility fallbacks in the
+[Agent Plugin guide](./agent-plugins/tempad-dev/README.md).
+
+All plugin and direct `npx`-based setup paths use `@tempad-dev/mcp@latest`.
+
+For the canvas-authoring release, use extension **0.21.0**, MCP server **0.8.0**, and Agent
+Plugin **0.2.0** together. See the [upgrade guide](./agent-plugins/tempad-dev/README.md#upgrading)
+when updating an existing installation.
+
+Keep TemPad Dev open with MCP enabled while using it. If multiple Figma files are connected, click the MCP badge in the panel for the file you want the agent to inspect; that file becomes the active context.
+
+### MCP connection status
+
+When the MCP server is enabled, a badge appears in the TemPad Dev panel title bar showing the current connection status:
+
+- **Unavailable**: The local MCP server is not configured or not running.
+
-
-
-
+
+
+
-
+
+- **Inactive**: TemPad Dev is connected to a local MCP server, but this tab is not currently active because multiple Figma tabs are open. Click the badge to activate MCP for this tab (this deactivates MCP in other tabs).
+
+
+
+
+
+
+
+- **Active**: The MCP server is running, and this tab is active and ready to respond to MCP tool calls.
+
+
+
+
+
+
+
+### Configuration
+
+For optional environment variables, see [`packages/mcp-server/README.md`](./packages/mcp-server/README.md).
+
+### MCP tools
+
+These tools are called by the agent. For everyday use, describe the task in your own words.
+
+- `get_code`: High-fidelity JSX/Vue + TailwindCSS code output by default, plus attached assets and the codegen preset/config used.
+- `get_design_system`: An immutable, deterministic catalog. It returns compact pages of component
+ definitions on accessible pages plus local or directly referenced variable, collection/mode,
+ style, and shader definitions without inspecting canvas usage or loading every page. Cursor
+ continuation exposes omitted definitions; exact-ref lookup returns one bounded definition.
+ With `scope: "fonts"`, it queries available font families and exact native styles without
+ scanning file resources.
+- `apply_canvas`: Creates, updates, removes, or activates exact pages and managed roots. Canvas HTML
+ is optional for page-only operations and native-only updates to existing stable keys inside an
+ exact managed root; a root can be written directly to an exact off-current page without switching
+ editor context. The extension resolves, validates, diffs, applies, and
+ structurally verifies each requested result. Authoring requires edit access to the current Figma
+ Design file.
+- `get_screenshot`: A bounded rendered PNG for selective visual validation.
+- `get_structure`: A structural outline (ids, types, geometry) for an exact node, exact managed
+ page, or the current selection.
+- `upload_asset`: Stores a generated PNG/JPEG/GIF in the local Hub and returns an `assetHash`
+ for canvas authoring.
+- Binary assets are returned as metadata + HTTP download URLs (`asset.url`) in tool responses. Asset MCP resources are not exposed.
---
-## Key features
+
+
+## Inspect designs
### Inspect CSS code
@@ -40,7 +182,7 @@
-Select any element, and you can obtain the CSS code through the plugin's Code panel. In addition to standard CSS code, TemPad Dev also provides styles in the form of JavaScript objects, making it convenient for use in JSX and similar scenarios.
+Select an element to read its CSS in the extension’s Code panel. In addition to standard CSS code, TemPad Dev also provides styles in the form of JavaScript objects, making it convenient for use in JSX and similar scenarios.
@@ -89,7 +231,9 @@ When you hover over a node name section in TemPad Dev's inspect panel, a corresp
---
-### Plugins
+
+
+## Output plugins
@@ -104,7 +248,7 @@ A TemPad Dev plugin is a simple JavaScript file that exports a plugin object as
> [!NOTE]
> Plugin code is stored in the browser's local storage. Plugins are not versioned or auto-updated, so you must manually update them from the UI.
-#### Creating plugins
+### Creating plugins
Use the fully typed `definePlugin` function from the `@tempad-dev/plugins` package to simplify plugin creation.
@@ -154,7 +298,7 @@ Additionally, you can specify a custom `title` and `lang` for the code block or
For full type definitions and helper functions, see [`packages/plugins/src/index.ts`](./packages/plugins/src/index.ts).
-#### Deploying a plugin
+### Deploying a plugin
Ensure your plugin is accessible via a URL that supports cross-origin requests, such as a GitHub repository (or Gist). For instance, you can use a raw URL:
@@ -177,7 +321,7 @@ side channels, deliberate memory pressure, and unsafe generated output are outsi
Review plugin sources accordingly. See [the threat model](./docs/security/local-mcp-threat-model.md)
for the exact guarantees and non-goals.
-#### Sharing a plugin
+### Sharing a plugin
You can also register the plugin into our [plugin registry file](https://github.com/ecomfe/tempad-dev/blob/main/packages/extension/plugins/available-plugins.json) so that your plugin can be installed by name directly.
@@ -201,67 +345,6 @@ Current available plugins:
-## Agent integration
-
-TemPad Dev ships an agent integration for coding agents and IDEs. The integration combines:
-
-- an [MCP](https://modelcontextprotocol.io/) server that lets agents pull code and context directly from the node you have selected in Figma
-- an agent skill that teaches the agent how to interpret that evidence in the current repository
-
-Figma also provides official [remote and desktop MCP servers](https://developers.figma.com/docs/figma-mcp-server/), with the remote server recommended for most users. TemPad Dev is an open, local-control complement for teams that specifically want an inspectable browser-extension pipeline, the existing read-only inspection workflow, programmable output plugins, canonical agent-facing code/token IR, and an explicit context budget. It provides design evidence and a code starting point; the coding agent remains responsible for adapting that evidence to the repository, validating behavior, and producing the final implementation.
-
-With the TemPad Dev panel open and MCP enabled, the MCP server exposes:
-
-- `get_code`: High-fidelity JSX/Vue + TailwindCSS code output by default, plus attached assets and the codegen preset/config used.
-- `get_structure`: A structural outline (ids, types, geometry) for the current selection.
-- Binary assets are returned as metadata + HTTP download URLs (`asset.url`) in tool responses. Asset MCP resources are not exposed.
-
-### Setup guide
-
-
-
-
-
-
-
-1. Install Node.js 18.20.0 or later with `npx`. Keep TemPad Dev open in the Figma tab you want the agent to inspect, then enable **Preferences → Agent integration → MCP access**. When prompted, allow the loopback connection to `127.0.0.1`.
-2. Select **Set up agents**, choose Codex, Cursor, Claude Code, Gemini, VS Code, OpenCode, or TRAE, and follow the displayed path. Use **Other** for another compatible client. The choice only changes the instructions shown; it does not bind or activate an agent.
-3. Prefer the direct action when offered. Every fallback command or config is shown in full for review and copying. Codex and Claude Code plugins include both MCP and the `figma-design-to-code` skill; the other paths show the two required steps separately.
-
-Keep TemPad Dev open with MCP enabled while using it. If multiple Figma files are connected, click the MCP badge in the panel for the file you want the agent to inspect; that file becomes the active context.
-
-### MCP connection status
-
-When the MCP server is enabled, a badge appears in the TemPad Dev panel title bar showing the current connection status:
-
-- **Unavailable**: The local MCP server is not configured or not running.
-
-
-
-
-
-
-
-- **Inactive**: TemPad Dev is connected to a local MCP server, but this tab is not currently active because multiple Figma tabs are open. Click the badge to activate MCP for this tab (this deactivates MCP in other tabs).
-
-
-
-
-
-
-
-- **Active**: The MCP server is running, and this tab is active and ready to respond to MCP tool calls.
-
-
-
-
-
-
-
-### Configuration
-
-For optional environment variables, see [`packages/mcp-server/README.md`](./packages/mcp-server/README.md).
-
diff --git a/TESTING.md b/TESTING.md
index 66acf6b4..988e5916 100644
--- a/TESTING.md
+++ b/TESTING.md
@@ -39,6 +39,13 @@ Root:
- `pnpm --filter @tempad-dev/extension test:setup` (install extension browser runtime)
- `pnpm --filter @tempad-dev/extension test:node` (extension node tests only)
- `pnpm --filter @tempad-dev/extension test:browser` (extension browser tests only)
+- `pnpm agent-eval:authoring [...]` (inspect comparable rollout evidence)
+- `pnpm agent-eval:preflight [--checkout ] [--app-path ]` (reject a stale
+ checkout runtime, inactive extension, or development plugin that does not match
+ the configured Codex desktop host before page creation)
+- `pnpm agent-eval:skills ` (fingerprint the presented skill catalog)
+- `pnpm agent-eval:log ` (retain the small amount
+ of provenance needed to trust a live authoring run)
Per package:
@@ -57,6 +64,9 @@ Per package:
- `pnpm --filter @tempad-dev/mcp test:coverage`
- `pnpm --filter @tempad-dev/shared test:run`
- `pnpm --filter @tempad-dev/shared test:coverage`
+- `pnpm --filter @tempad-dev/site test:run` (node and Chromium reader regressions)
+- `pnpm --filter @tempad-dev/site test:browser`
+- `pnpm --filter @tempad-dev/site test:setup` (install Chromium for site browser tests)
## Required checks by change type
@@ -81,6 +91,23 @@ When changing DOM/browser runtime behavior in extension:
- `pnpm --filter @tempad-dev/extension test:browser`
- Use Playwright browser tests only; do not add jsdom-based tests.
+When changing the end-to-end authoring evaluation process or its runtime identity gate:
+
+- Follow `docs/testing/agent-authoring-evolution.md`.
+- Use the stable minimal open-run wrapper from the evolution runbook, varying only the product
+ platform and product situation by default; add a broad visual direction only when relevant
+ to the question. The agent chooses dimensions and screen/flow extent. Freeze the prompt, intent,
+ model, and reasoning effort immediately before dispatch; do not add a predicted result or evaluator-authored solution detail.
+- Judge the authored result as a whole in plain language. Treat screenshots, native structure,
+ timing, and tool traces as clues: inspect only what can confirm or explain the judgment. Do not
+ introduce fixed quality axes, scores, finding counts, or promotion gates.
+- Add deterministic tests for run-log integrity, runtime fingerprinting, bridge handshake, and
+ write-before rejection at the owning package layers. Deterministic checks do not need live-run
+ log entries.
+- A fresh live Figma task is required only when the selected question needs agent
+ discoverability, visual, structural, transfer, or drift evidence; it is not a default check for
+ deterministic process infrastructure.
+
## Coverage rules (operational)
- Workspace coverage is configured in root `vitest.config.ts`.
@@ -136,3 +163,4 @@ When changing DOM/browser runtime behavior in extension:
- Testing architecture: `docs/testing/architecture.md`
- Extension get_code requirements: `docs/extension/mcp-get-code-requirements.md`
- Extension get_code design: `docs/extension/mcp-get-code-design.md`
+- Agent authoring evolution: `docs/testing/agent-authoring-evolution.md`
diff --git a/agent-plugins/tempad-dev/.claude-plugin/plugin.json b/agent-plugins/tempad-dev/.claude-plugin/plugin.json
index bde03b87..80030bed 100644
--- a/agent-plugins/tempad-dev/.claude-plugin/plugin.json
+++ b/agent-plugins/tempad-dev/.claude-plugin/plugin.json
@@ -1,14 +1,23 @@
{
"name": "tempad-dev",
- "version": "0.1.0",
- "description": "Use selected Figma nodes as agent-ready evidence for project-consistent UI implementation.",
+ "version": "0.2.0",
+ "description": "Connect your coding agent to Figma. Create and edit native designs, inspect existing designs, and implement UI in your codebase.",
"author": {
"name": "TemPad Dev"
},
"homepage": "https://github.com/ecomfe/tempad-dev#agent-integration",
"repository": "https://github.com/ecomfe/tempad-dev",
"license": "MIT",
- "keywords": ["figma", "mcp", "skill", "agent-integration", "design-to-code", "frontend"],
+ "keywords": [
+ "figma",
+ "mcp",
+ "skill",
+ "agent-integration",
+ "design-to-code",
+ "canvas-authoring",
+ "design-system",
+ "frontend"
+ ],
"skills": "./skills/",
"mcpServers": "./.mcp.json"
}
diff --git a/agent-plugins/tempad-dev/.codex-plugin/plugin.json b/agent-plugins/tempad-dev/.codex-plugin/plugin.json
index a420ad27..833ede6f 100644
--- a/agent-plugins/tempad-dev/.codex-plugin/plugin.json
+++ b/agent-plugins/tempad-dev/.codex-plugin/plugin.json
@@ -1,29 +1,47 @@
{
"name": "tempad-dev",
- "version": "0.1.1",
- "description": "Use the TemPad Dev agent integration to turn selected Figma nodes into repo-ready UI code.",
+ "version": "0.2.0",
+ "description": "Connect your coding agent to Figma. Create and edit native designs, inspect existing designs, and implement UI in your codebase.",
"author": {
"name": "TemPad Dev"
},
"homepage": "https://github.com/ecomfe/tempad-dev#agent-integration",
"repository": "https://github.com/ecomfe/tempad-dev",
"license": "MIT",
- "keywords": ["figma", "mcp", "skill", "agent-integration", "design-to-code", "frontend"],
+ "keywords": [
+ "figma",
+ "mcp",
+ "skill",
+ "agent-integration",
+ "design-to-code",
+ "canvas-authoring",
+ "design-system",
+ "frontend"
+ ],
"skills": "./skills/",
"interface": {
"displayName": "TemPad Dev",
- "shortDescription": "Use Figma selections as agent-ready design evidence.",
- "longDescription": "TemPad Dev packages the figma-design-to-code agent skill with MCP server configuration so coding agents can inspect selected Figma nodes and implement project-consistent UI code.",
+ "shortDescription": "Inspect, edit, and implement Figma designs with your agent.",
+ "longDescription": "TemPad Dev connects your coding agent to Figma. Read designs, components, variables, and assets; create and edit native Figma layers; and implement existing designs using your project’s conventions. Includes the MCP connection and skills for canvas editing and design-to-code. Requires the TemPad Dev browser extension; canvas editing also requires edit access to the Figma Design file.",
"developerName": "TemPad Dev",
"category": "Design",
- "capabilities": ["Agent integration", "MCP", "Design-to-code", "Frontend"],
+ "capabilities": [
+ "Agent integration",
+ "MCP",
+ "Design-to-code",
+ "Canvas authoring",
+ "Design systems",
+ "Frontend"
+ ],
"websiteURL": "https://github.com/ecomfe/tempad-dev",
"defaultPrompt": [
- "Use TemPad Dev to implement the selected Figma node.",
- "Convert this Figma selection into repo-ready UI code.",
- "Inspect the selected Figma node with TemPad Dev."
+ "Implement the selected Figma design using this project’s components and styles.",
+ "Create an editable settings screen in Figma using the available components.",
+ "Update the spacing and typography in this Figma design."
],
- "brandColor": "#0098FF"
+ "brandColor": "#0098FF",
+ "composerIcon": "./assets/icon-padded.svg",
+ "logo": "./assets/icon-padded.svg"
},
"mcpServers": "./.mcp.json"
}
diff --git a/agent-plugins/tempad-dev/CHANGELOG.md b/agent-plugins/tempad-dev/CHANGELOG.md
new file mode 100644
index 00000000..d3d405f7
--- /dev/null
+++ b/agent-plugins/tempad-dev/CHANGELOG.md
@@ -0,0 +1,14 @@
+# Changelog
+
+## 0.2.0
+
+- Added `figma-canvas-authoring` for creating and editing native Figma designs, alongside the
+ existing `figma-design-to-code` skill.
+- Added progressive references for native authoring, fonts, images, icons, resource bindings,
+ and scoped editing. Direct, Reuse, and Author workflows keep resource decisions tied to the task.
+- Grounded new compositions in inspectable evidence and required inspection of the rendered result
+ plus relevant native facts, with focused repair of observed defects.
+- Made the portable Agent Plugins 1.0 bundle the shared source for installation, with synchronized
+ Codex and Claude compatibility manifests and refreshed icons.
+- Paired the plugin with extension 0.21.0 and MCP 0.8.0 through `@tempad-dev/mcp@latest`.
+ The MCP server requires Node.js 22.x, 24.x, or 26+.
diff --git a/agent-plugins/tempad-dev/README.md b/agent-plugins/tempad-dev/README.md
index 3042a180..9f2281ed 100644
--- a/agent-plugins/tempad-dev/README.md
+++ b/agent-plugins/tempad-dev/README.md
@@ -1,29 +1,90 @@
# TemPad Dev Agent Plugin
-This plugin packages the TemPad Dev agent integration for Codex and Claude Code. It bundles:
+[简体中文](./README.zh-Hans.md)
-- the `figma-design-to-code` agent skill
-- the TemPad Dev MCP server configuration for selected-node design evidence
+Read, edit, and implement Figma designs through your coding agent or IDE. This plugin includes:
-Install it for Codex:
+- `figma-canvas-authoring`: create and revise native Figma designs, reusing accessible components, variables, and styles as needed.
+- `figma-design-to-code`: use Figma design context to implement UI with your project’s components and conventions.
+- The TemPad Dev MCP server configuration: connect to the Figma file open in your browser.
+
+Requires the TemPad Dev browser extension. Canvas editing also requires edit access to the Figma Design file. For manual inspection and output plugins, see the full [user guide](../../README.md).
+
+The root `plugin.json`, `skills/`, and `mcp.json` follow [Agent Plugins 1.0](https://agent-plugins.org/); client-specific manifests are compatibility wrappers.
+
+## Install the portable plugin
+
+Install into every compatible agent detected on your machine:
+
+```bash
+npx plugins add ecomfe/tempad-dev
+```
+
+To install into one agent only, pass a target such as:
+
+```bash
+npx plugins add ecomfe/tempad-dev --target codex
+npx plugins add ecomfe/tempad-dev --target cursor
+npx plugins add ecomfe/tempad-dev --target claude-code
+npx plugins add ecomfe/tempad-dev --target vscode
+```
+
+The installer reads the portable package first and adapts it only when the selected client needs a
+client-specific layout.
+
+## Client-specific fallbacks
+
+Use these native marketplace flows only when the portable installer is unavailable or client
+policy requires the native path.
+
+### Codex
```bash
codex plugin marketplace add ecomfe/tempad-dev --ref main
codex plugin add tempad-dev@tempad-dev
```
-You can also install **TemPad Dev** from the Codex app plugin directory after adding the marketplace.
+You can also install **TemPad Dev** from the Codex app plugin directory after adding the
+marketplace.
-Install it for Claude Code CLI and Desktop:
+### Claude Code and Claude Desktop
```bash
claude plugin marketplace add ecomfe/tempad-dev
claude plugin install tempad-dev@tempad-dev
```
-The plugin appears in Claude Desktop after the marketplace is added. Both clients use the same
-skill and MCP server configuration from this directory.
+The plugin appears in Claude Desktop after the marketplace is added.
+
+For clients without Agent Plugin support, follow the direct MCP and standalone skill setup in the
+[complete setup guide](../../README.md#agent-integration).
+
+## Usage
+
+Before using the integration, open TemPad Dev in Figma, then open **Preferences → Agent
+integration** and enable **MCP access**. Canvas authoring is available while the active Figma
+Design file is editable.
+
+## Upgrading
+
+The canvas-authoring release pairs Agent Plugin **0.2.0**, TemPad Dev extension **0.21.0**, and
+MCP server **0.8.0**. Node.js **22.x, 24.x, or 26+** is required for the MCP server.
+
+1. Update the browser extension and reload the Figma tab.
+2. Update the installed plugin through the client or installer used originally. With standalone
+ setup, update both `figma-design-to-code` and `figma-canvas-authoring`.
+3. Keep the release MCP configuration on `@tempad-dev/mcp@latest`; replace any previous
+ `@alpha` or fixed alpha version. Reconnect the MCP client and start a new task so it loads the
+ updated tools and skills. If a stale Hub is reported, close tasks using the old MCP server
+ before reconnecting.
+4. Open TemPad Dev, enable **MCP access**, and click the MCP badge in the intended Figma tab when
+ a session choice is needed. The badge selects the file receiving tool calls.
-Before using the integration, open TemPad Dev in Figma, then open **Preferences -> Agent integration** and enable **MCP access**.
+## Packaging source of truth
-For app, CLI, direct MCP, and manual fallbacks, see the [complete setup guide](../../README.md#agent-integration).
+- Edit `plugin.json`, `skills/`, and `mcp.json` for portable content.
+- `.codex-plugin/plugin.json`, `.claude-plugin/plugin.json`, and `.mcp.json` are compatibility
+ wrappers. Their shared metadata and MCP entries are synchronized from the portable files by
+ `pnpm agent-plugin:dev`.
+- Codex-only interface metadata remains in `.codex-plugin/plugin.json` and is preserved during
+ synchronization.
diff --git a/agent-plugins/tempad-dev/README.zh-Hans.md b/agent-plugins/tempad-dev/README.zh-Hans.md
new file mode 100644
index 00000000..39806f30
--- /dev/null
+++ b/agent-plugins/tempad-dev/README.zh-Hans.md
@@ -0,0 +1,84 @@
+# TemPad Dev Agent Plugin
+
+[English](./README.md)
+
+在你的 coding agent 或 IDE 中读取、编辑和实现 Figma 设计。这个插件包含：
+
+- `figma-canvas-authoring`：创建和修改原生 Figma 设计，按任务需要复用可访问的组件、变量和样式。
+- `figma-design-to-code`：读取 Figma 设计信息，结合项目已有组件和约定实现 UI。
+- TemPad Dev MCP server 配置：连接浏览器中打开的 Figma 文件。
+
+需要安装 TemPad Dev 浏览器扩展。画布编辑还需要 Figma Design 文件的编辑权限。手动检查设计和输出插件的完整说明见 [使用指南](../../README.zh-Hans.md)。
+
+根目录的 `plugin.json`、`skills/` 和 `mcp.json` 遵循 [Agent Plugins 1.0](https://agent-plugins.org/)；客户端专用清单是兼容包装。
+
+## 安装可移植插件
+
+安装到本机检测到的所有兼容 agent：
+
+```bash
+npx plugins add ecomfe/tempad-dev
+```
+
+如果只安装到一个 agent，请指定 target，例如：
+
+```bash
+npx plugins add ecomfe/tempad-dev --target codex
+npx plugins add ecomfe/tempad-dev --target cursor
+npx plugins add ecomfe/tempad-dev --target claude-code
+npx plugins add ecomfe/tempad-dev --target vscode
+```
+
+安装器会优先读取可移植 package，仅在目标客户端需要时转换为客户端专用目录结构。
+
+## 客户端专用回退
+
+仅当可移植安装器不可用，或客户端策略要求使用原生流程时，才使用以下 marketplace
+安装方式。
+
+### Codex
+
+```bash
+codex plugin marketplace add ecomfe/tempad-dev --ref main
+codex plugin add tempad-dev@tempad-dev
+```
+
+添加 marketplace 后，也可以从 Codex 应用的插件目录安装 **TemPad Dev**。
+
+### Claude Code 和 Claude Desktop
+
+```bash
+claude plugin marketplace add ecomfe/tempad-dev
+claude plugin install tempad-dev@tempad-dev
+```
+
+添加 marketplace 后，该插件也会出现在 Claude Desktop 中。
+
+不支持 Agent Plugin 的客户端，请按照
+[完整配置指南](../../README.zh-Hans.md#agent-集成)直接配置 MCP 并安装独立 skill。
+
+## 使用
+
+使用前，请在 Figma 中打开 TemPad Dev，然后进入 **Preferences → Agent integration**
+并启用 **MCP access**。启用后，只要当前 Figma Design 文件可编辑，即可进行画布创作。
+
+## 升级
+
+本次画布创作版本应配套使用 Agent Plugin **0.2.0**、TemPad Dev 扩展 **0.21.0** 和 MCP
+server **0.8.0**。MCP server 要求 Node.js **22.x、24.x 或 26+**。
+
+1. 更新浏览器扩展，并重新加载 Figma 标签页。
+2. 通过原先使用的客户端或安装器更新 plugin。独立配置时，请同时更新
+ `figma-design-to-code` 和 `figma-canvas-authoring`。
+3. 正式版 MCP 配置使用 `@tempad-dev/mcp@latest`；请替换旧的 `@alpha` 或固定 alpha 版本。
+ 重新连接 MCP client 并新建任务，以加载更新后的工具和 skill。若提示 Hub 过期，请先关闭
+ 使用旧 MCP server 的任务，再重新连接。
+4. 打开 TemPad Dev 并启用 **MCP access**；需要选择会话时，点击目标 Figma 标签页内的 MCP
+ badge。实际接收工具调用的文件由该 badge 选择。
+
+## 封装内容源
+
+- 可移植内容请修改 `plugin.json`、`skills/` 和 `mcp.json`。
+- `.codex-plugin/plugin.json`、`.claude-plugin/plugin.json` 和 `.mcp.json` 是兼容封装；
+ `pnpm agent-plugin:dev` 会从可移植文件同步公共 metadata 与 MCP 配置。
+- Codex 专用的 interface metadata 仍保存在 `.codex-plugin/plugin.json` 中，并会在同步时保留。
diff --git a/agent-plugins/tempad-dev/assets/icon-padded.svg b/agent-plugins/tempad-dev/assets/icon-padded.svg
new file mode 100644
index 00000000..2e8c6946
--- /dev/null
+++ b/agent-plugins/tempad-dev/assets/icon-padded.svg
@@ -0,0 +1,6 @@
+
diff --git a/agent-plugins/tempad-dev/assets/icon.png b/agent-plugins/tempad-dev/assets/icon.png
new file mode 100644
index 00000000..5d1f6bf2
Binary files /dev/null and b/agent-plugins/tempad-dev/assets/icon.png differ
diff --git a/agent-plugins/tempad-dev/mcp.json b/agent-plugins/tempad-dev/mcp.json
new file mode 100644
index 00000000..4326590e
--- /dev/null
+++ b/agent-plugins/tempad-dev/mcp.json
@@ -0,0 +1,10 @@
+{
+ "$schema": "https://agent-plugins.org/schemas/1.0.0/mcp.schema.json",
+ "mcpServers": {
+ "tempad-dev": {
+ "type": "stdio",
+ "command": "npx",
+ "args": ["-y", "@tempad-dev/mcp@latest"]
+ }
+ }
+}
diff --git a/agent-plugins/tempad-dev/plugin.json b/agent-plugins/tempad-dev/plugin.json
new file mode 100644
index 00000000..78fa0ccc
--- /dev/null
+++ b/agent-plugins/tempad-dev/plugin.json
@@ -0,0 +1,22 @@
+{
+ "$schema": "https://agent-plugins.org/schemas/1.0.0/plugin.schema.json",
+ "name": "tempad-dev",
+ "version": "0.2.0",
+ "description": "Connect your coding agent to Figma. Create and edit native designs, inspect existing designs, and implement UI in your codebase.",
+ "author": {
+ "name": "TemPad Dev"
+ },
+ "homepage": "https://github.com/ecomfe/tempad-dev#agent-integration",
+ "repository": "https://github.com/ecomfe/tempad-dev",
+ "license": "MIT",
+ "keywords": [
+ "figma",
+ "mcp",
+ "skill",
+ "agent-integration",
+ "design-to-code",
+ "canvas-authoring",
+ "design-system",
+ "frontend"
+ ]
+}
diff --git a/agent-plugins/tempad-dev/skills/figma-canvas-authoring/SKILL.md b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/SKILL.md
new file mode 100644
index 00000000..f4a54ea5
--- /dev/null
+++ b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/SKILL.md
@@ -0,0 +1,150 @@
+---
+name: figma-canvas-authoring
+description: >-
+ Create or update native, editable Figma designs with TemPad Dev MCP: screens,
+ flows, components, and requested local design-system resources, including on
+ an empty canvas. Use for Design in Figma work, not Figma-to-code, critique
+ without edits, or raw Plugin API automation.
+---
+
+# Design in Figma
+
+Deliver the smallest complete native Figma result that serves the user's
+situation. Keep the working experience in view as you research, compose, and
+repair. A successful tool call establishes a document change; the rendered
+result and its editable structure establish whether that change served the task.
+
+## Establish the task
+
+Use the user's exact target and constraints. For an existing design, inspect
+`get_code` and its pixels before changing the composition; use `get_structure`
+for hierarchy, geometry, stable keys, or selected native facts. Write to a known
+page directly. Create or activate a page only when the task calls for it.
+Infer low-consequence gaps; ask when a missing decision would materially change
+the result. Keep unrelated account, filesystem, task, and page metadata out of
+product identity and content.
+
+Require an editable Figma Design file and the intended tab's active MCP
+connection. Use the host's TemPad MCP tools for all canvas reads and writes.
+If unavailable, report the integration problem and stop. Do not launch the CLI,
+recreate its transport, use browser automation to set up the canvas, or emit raw
+Plugin API operations. Research and asset acquisition use the host's appropriate
+tools; website research uses the in-app browser when available unless the user
+selected another browser.
+
+## Ground and compose
+
+For net-new or materially redesigned interfaces without an established system,
+read [style-grounding.md](references/style-grounding.md) and inspect relevant
+real product screens or a permitted implementation before the first Canvas
+write. The evidence must expose the interface relationships informing the new
+work. Search snippets, URLs, failed retrievals, and generated concepts do not
+establish a precedent. Subject imagery establishes its depicted content, not
+its surrounding application's design. Try another permitted source when
+retrieval fails; if none is inspectable, disclose the gap and stop. Supplied
+source pixels or implementation can satisfy this boundary; mechanical edits do
+not require unrelated research.
+
+Resolve what the person needs to recognize or change, which content and states
+carry that work, and how the interface makes their consequences perceptible.
+Choose the screen or flow, visual language, density, and scrolling model from
+that situation. Use [visual-composition.md](references/visual-composition.md)
+when forming or reconsidering a composition. Familiar structures and distinctive
+ones both need a reason in the task. Research informs an independent solution;
+it does not authorize copying a composition or placing reference pixels on the
+canvas unless the user requested that treatment.
+
+When selecting or changing fonts, or when script coverage is uncertain, read
+[typefaces.md](references/typefaces.md) to resolve candidates and native identities.
+
+Choose representations by their role in the work. Once an image, icon, diagram,
+or visualization matters to the direction, read
+[visual-assets.md](references/visual-assets.md) and its selected branch. Do not
+silently replace the chosen content or medium to simplify sourcing or markup.
+For content-bearing graphics, preserve meaningful marks and editable
+relationships with native shapes, vectors, text, and groups; styled FRAME
+lookalikes do not acquire drawing semantics. Read
+[document-geometry.md](references/document-geometry.md) for that construction.
+Ordinary UI panels, controls, backgrounds, and separators remain Canvas HTML.
+
+Choose resources from the task, not repetition alone:
+
+- **Direct:** default for a first net-new composition. Use primitives, literals,
+ and assets. Do not discover or create a design system just because shapes or
+ values repeat.
+- **Reuse:** use [design-system-reuse.md](references/design-system-reuse.md) when
+ the user, selected source, or project evidence establishes the applicable
+ system. Catalog names, domain similarity, or mere file presence do not prove
+ relevance.
+- **Author:** use [design-system-authoring.md](references/design-system-authoring.md)
+ when reusable resources are requested or established as part of the
+ deliverable. Prove the composition and one real consumer before propagation.
+
+For selected variables and typography styles, read
+[resource-mapping.md](references/resource-mapping.md): define or discover their
+identities once, then use variable utilities and text-style classes throughout
+the markup.
+
+## Build, inspect, and repair
+
+For markup create or structural update, read
+[canvas-html.md](references/canvas-html.md) and check its preflight before the
+call. Canvas HTML is a strict native-state dialect; browser CSS assumptions do
+not apply. Page-only and native-only operations omit markup. Load native
+mechanics only for the capabilities selected below.
+
+Build a materially complete representative screen, then open its PNG before
+expanding the flow or extracting resources. Judge whether the whole supports
+the intended work. When it does not, focus on the particular relationship or
+execution defect that explains the mismatch and repair it. A skeleton, resource
+board, or generated concept does not establish the real composition.
+
+For updates, read [editing.md](references/editing.md). Preserve the requested
+source, unrelated fields, and stable identities while updating every dependent
+representation of the changed state. For larger results, split at meaningful
+screen or section boundaries and carry shared roles coherently across them.
+
+Inspect every `apply_canvas` result, including warnings. Repair each observed
+unintended defect or disclose why it remains. A local validation failure calls
+for a local payload correction; it does not justify discarding a working root
+or simplifying away the intended content. Open pixels again after the final
+material write, covering every materially distinct screen. Verify native facts
+with `get_structure` when identity, placement, editability, or representation
+matters. Opened pixels prove visual access, not good judgment; a structural pass
+proves only the conditions checked.
+
+Finish when the requested experience is coherent and observed defects are
+repaired, accepted with reason, or disclosed. Report the delivered result and
+material limitations. A verified Direct result is complete without an
+unsolicited component pass.
+
+## Native mechanics — load when selected
+
+Read the selected reference completely; do not preload the capability catalog.
+Examples demonstrate syntax, not a design template.
+
+| Capability | Reference |
+| --------------------------------------------------------------------- | ----------------------------------------------------------- |
+| Exact updates, removal, or editor context | [editing.md](references/editing.md) |
+| Pages, sections, groups, Booleans, masks, transforms, shapes, vectors | [document-geometry.md](references/document-geometry.md) |
+| Paints, media, effects, shaders, grids, guides | [paints-effects.md](references/paints-effects.md) |
+| Exact fonts, rich text, range styles, lists, hyperlinks | [rich-text.md](references/rich-text.md) |
+| Components, variants, properties, Slots | [component-authoring.md](references/component-authoring.md) |
+| Variables, collections, modes, bindings | [variables.md](references/variables.md) |
+| CSS variable utilities and named text-style classes | [resource-mapping.md](references/resource-mapping.md) |
+| Paint, Text, Effect, Grid styles | [local-styles.md](references/local-styles.md) |
+| Authorized independent research, assets, inventory, or QA delegation | [delegation.md](references/delegation.md) |
+
+## Mutation boundaries
+
+Use returned IDs and stable keys as identity, never names. Create describes a
+new complete root or exact new page. Update targets an exact node or page;
+omissions preserve live state. `activate` always requires `page.id` or
+`page.pageKey`, even when only changing selection.
+
+Never mutate outside scope, remove manual or unkeyed content, or remove a
+component with surviving instances. An instance's definition-derived sublayers
+are not authoring targets. Do not mutate remote resources, publish, detach or
+reset instances, execute arbitrary JavaScript, or imitate an unresolved
+resource. Use `null` only for supported links or managed resources the requested
+change actually removes.
diff --git a/agent-plugins/tempad-dev/skills/figma-canvas-authoring/agents/openai.yaml b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/agents/openai.yaml
new file mode 100644
index 00000000..25e5075e
--- /dev/null
+++ b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/agents/openai.yaml
@@ -0,0 +1,7 @@
+interface:
+ display_name: 'Design in Figma'
+ short_description: 'Create user-directed native Figma designs'
+ icon_small: './assets/icon.svg'
+ icon_large: './assets/icon.svg'
+ brand_color: '#0098FF'
+ default_prompt: 'Use $figma-canvas-authoring to create a native Figma design while following my resource constraints.'
diff --git a/agent-plugins/tempad-dev/skills/figma-canvas-authoring/assets/icon.svg b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/assets/icon.svg
new file mode 100644
index 00000000..2e8c6946
--- /dev/null
+++ b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/assets/icon.svg
@@ -0,0 +1,6 @@
+
diff --git a/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/canvas-html.md b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/canvas-html.md
new file mode 100644
index 00000000..aa4cb38f
--- /dev/null
+++ b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/canvas-html.md
@@ -0,0 +1,269 @@
+# Canvas HTML and Tailwind subset
+
+Canvas HTML describes desired state, not browser rendering. Use its elements for
+interface structure and genuine simple UI geometry, not as a drawing medium.
+Do not assemble `div` or `span` primitives to imitate a photograph,
+illustration, icon, logo, texture, or other content-bearing visual; acquire the
+appropriate routed raster or vector asset instead. Classes do not cover every
+Figma result: use routed native bindings for gradients, media, non-shadow
+effects, masks, transforms, exact fonts, and rich text.
+
+One `apply_canvas` markup tree may contain at most 160 elements and 12 levels.
+This is a safety ceiling, not a target. Before calling, count the tree, include
+only assets referenced by that call, and split larger work at meaningful screen
+or section boundaries.
+
+Prefer supported Tailwind utilities; use arbitrary pixels only off the default
+scale. Numeric spacing follows Tailwind v4's `4px` unit. Selected Figma resources
+can use CSS variable utilities and `type-*` text-style classes through
+[resource-mapping.md](resource-mapping.md). Arbitrary project theme extensions,
+variants, plugins, viewport-dependent utilities, and CSS cascade are unsupported.
+
+## Contents
+
+- [Preflight each markup tree](#preflight-each-markup-tree)
+- [Elements and identity](#elements-and-identity)
+- [Layout](#layout)
+- [Appearance and text](#appearance-and-text)
+
+## Preflight each markup tree
+
+Immediately before each create or structural update, scan the complete supplied
+tree once:
+
+- require a fixed width and height on the markup root;
+- give every `div` with children `flex` or `grid`, or make every child absolute
+ with one edge per axis and fixed parent and child dimensions;
+- keep flex, grid, gap, padding, border, corner, and box-shadow classes off
+ `span`;
+- trace every `w-full`, `h-full`, and `grow` against its direct parent's axis and
+ the element's required dimensions;
+- give a fixed-height grid explicit row tracks when its children should fill or
+ divide that height; omitted rows remain content-sized;
+- count at most 160 elements and 12 levels, and include only assets referenced by
+ this call.
+
+Correct the complete set before calling instead of serializing until validation
+reveals issues one at a time.
+
+## Elements and identity
+
+- Use `div`, `span`, or a component tag returned by the active catalog.
+- Give every element one unique `data-key` of letters, numbers, `. / : _ -`.
+- Use `data-node-id` only in update mode to adopt an exact live node; instance
+ sublayers are not authoring targets.
+- When only native state changes, omit markup, target the exact managed root,
+ and key `native` by existing stable keys in that scope. This preserves
+ topology; masks and node removal still require structural markup.
+- Use no arbitrary attributes on `div` or `span`. Common catalog links use
+ `data-var-="vN"` and `data-style-="sN"`; `"none"` explicitly
+ unlinks that field.
+- A `span` contains only text and ` ` or ` ` line breaks. Use
+ `whitespace-pre-wrap` for literal newlines or repeated spaces. A plain `&` is
+ literal unless it forms a semicolon-terminated entity; supported entities
+ decode. Canvas typography does not inherit from a parent `div`: put font and
+ other text utilities on each `span`/TEXT node. Put flex/grid, gaps, padding,
+ borders, corners, and box shadows on a parent `div`.
+- A component tag is childless, includes its returned `data-ref`, and accepts
+ returned props plus the shared class, identity, variable, and style
+ attributes.
+
+Variable attributes use kebab-case native field names: fill, stroke, characters,
+visible, dimensions/bounds, gaps, four paddings/corners/stroke sides, radius,
+stroke weight, opacity, and whole-node font/line-height/letter-spacing/paragraph
+fields. Style attributes are `data-style-fill`, `data-style-stroke`,
+`data-style-text`, `data-style-effect`, and `data-style-grid`. Node-type and
+fallback rules still apply.
+
+Every primitive needs one width and one height. Supported fixed forms are:
+
+- default spacing: `w-N`, `h-N`, `size-N` (`N * 4px`), plus `w-px`, `h-px`, `size-px`
+- default width containers: `w-3xs|2xs|xs|sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl`
+- exact: `w-[Npx]`, `h-[Npx]`, `size-[Npx]`
+- hug: `w-fit`, `h-fit`
+- hug both axes: `size-fit`
+- fill: `w-full`, `h-full`, or `size-full` for both axes
+- bounds: numeric, `px`, or arbitrary-pixel values with `min-w`, `max-w`, `min-h`, or `max-h`;
+ width bounds also accept the default container names; use `min-w-none`, `max-w-none`,
+ `min-h-none`, or `max-h-none` to clear a bound in an update
+
+Text using `w-fit` also needs `h-fit`; prefer `size-fit`. Fixed-width `h-fit`
+remains valid for wrapping text.
+
+Create and update markup roots require fixed width and height; fill, hug, and
+grow are invalid even when the live target has a sized parent.
+
+Use `w-full` only on a `flex-col` cross axis, `h-full` only on a `flex-row`
+cross axis, and `grow` on the main axis; `grow-0` clears growth. `grow` does not
+replace required dimensions—for a row track use `grow w-fit h-[3px]`. Give
+growing text in constrained rows a positive `min-w-*` to prevent collapse.
+Prefer a hug main axis for content stacks whose extent is not behaviorally
+fixed. Otherwise budget the fixed axis as padding + gaps + fixed/minimum child
+extents. A non-overflowing result is still wrong when resolved content consumes
+the intended inset; compare rendered child edges with the layout's padding.
+Grid children may fill cells. Direct dimension variables require fixed
+fallbacks. Fixed sizes must be at least `0.01px`; native lines use `h-[0px]`.
+
+## Layout
+
+Use Auto Layout for ordinary product UI. `flex` follows CSS's horizontal default;
+use `flex-row` when that direction should be explicit and `flex-col` for a
+vertical stack:
+
+- `flex`, `flex flex-row`, or `flex flex-col`
+- `items-start|center|end|baseline`
+- `justify-start|center|end|between`
+- `flex-wrap`, `flex-nowrap`, `content-between`, `content-normal`
+- `gap-N`, `gap-x-N`, `gap-y-N`, or exact `[Npx]`
+- `p`, `px`, `py`, `pt`, `pr`, `pb`, `pl` with `-N`, `-px`, or `-[Npx]`
+- `box-border`, `box-content`
+
+New Auto Layout frames include inside strokes by default (`box-border`);
+`box-content` excludes them. Center/outside strokes never affect layout, and
+each nested frame owns its setting. Fixed create sizes must cover opposing
+padding plus included inside strokes. Figma determines `FILL` geometry and
+border-box distribution. Derive exact descendant or instance sizes from the
+rendered inner box, not nominal parent size; prefer valid cross-axis fill and
+exceed the box only for intentional bleed or overlap.
+
+`managed-content-overflow` means managed Text or INSTANCE exceeds its direct
+managed Frame or Component, or a native INSTANCE contains descendant content
+beyond its own fixed root. Inspect edges, clipping, rendering, and instance
+bounds; resize or realign accidental overflow and retain only intentional bleed,
+crop, or overlap. Property-driven content outside an INSTANCE root is a broken
+component contract rather than intentional consumer overflow.
+
+`justify-between` uses nonnegative native Auto gap and keeps one child at the
+start. Use negative `figma.autoLayout.itemSpacing` only for intentional overlap.
+Omitting box-sizing on update preserves the live setting.
+
+`hidden` and BOOLEAN visibility remove in-flow children, changing gaps,
+positions, and hug bounds. To preserve geometry, keep a fixed slot and toggle
+its inner child. `absolute left-[Npx] top-[Npx]` maps to Ignore Auto Layout for
+true overlays; it needs fixed offsets, cannot fill/grow, and leaves surrounding
+flow unchanged. Its text and Auto Layout descendants may still hug.
+
+For grid use:
+
+- `grid grid-cols-N`
+- optional `grid-rows-N`
+- custom tracks: `grid-cols-[1fr_240px_fit-content(100%)]`
+- optional `grid-flow-row` or `grid-flow-none`
+- child placement: `col-start-N`, `row-start-N`, `col-span-N`, `row-span-N`
+- child alignment: `justify-self-auto|start|center|end`,
+ `self-auto|start|center|end`
+
+Give manual grid children both row and column starts or neither. Auto-flow uses
+source order without explicit starts. A height-hugging grid cannot use flexible
+or automatic rows; fix either its height or row tracks. Omitting `grid-rows-*`
+creates native automatic content-sized rows; increasing only the container
+height does not enlarge them.
+
+For a coherent board larger than one call, first create one fixed parent:
+
+```json
+{
+ "mode": "create",
+ "markup": ""
+}
+```
+
+Then append one bounded screen per update. Keep the root key and classes stable,
+target its returned ID, and omit previously added children so they remain in
+place:
+
+```json
+{
+ "mode": "update",
+ "targetNodeId": "FrameID:app-board",
+ "markup": "
"
+}
+```
+
+For freeform composition, omit layout classes and give each child `absolute`
+with exactly one horizontal edge (`left-*` or `right-*`) and one vertical edge
+(`top-*` or `bottom-*`), including negative or exact values, or use a native
+relative transform. Edge placement needs fixed parent and child sizing modes;
+right/bottom offsets are resolved from live bounds after each markup apply. They
+are placements, not reactive CSS anchors: use Auto Layout for alignment that
+must follow later mode changes without another markup apply. A plain
+non-flex/grid `div` is freeform even with one child; opt into layout for every
+in-flow child. Absolute children cannot grow or fill; use `static` to return one
+to Auto Layout on update.
+
+## Appearance and text
+
+Frame appearance:
+
+- `bg-transparent|white|black`, or an exact CSS hex value
+- Linear backgrounds use `bg-linear-to-t|tr|r|br|b|bl|l|tl` with exact
+ `from-white|black|[#hex]`, optional `via-white|black|[#hex]`, and required
+ `to-white|black|[#hex]` stops. Stops are fixed at 0, optional 0.5, and 1;
+ `bg-gradient-to-*` is accepted as a legacy alias. Do not combine a gradient
+ with a solid background, direct fill paints, or a fill style/variable.
+- `border`, `border-N`, `border-[Npx]`; use `border-x|y|t|r|b|l` with the same widths
+- `border-white|black`, or an exact CSS hex value
+- `rounded`, `rounded-none|xs|sm|md|lg|xl|2xl|3xl|4xl|full`, or `rounded-[Npx]`;
+ prefix the value with `t`, `r`, `b`, `l`, `tl`, `tr`, `br`, or `bl` for individual sides/corners
+- `overflow-hidden`, `overflow-visible`
+- A clipped rounded frame does not paint its inside stroke above children. A
+ filled child that reaches a curved edge can therefore square off or hide the
+ boundary even with `overflow-hidden`; inset it, give the touching child
+ corners a corresponding inner radius, or add a dedicated foreground
+ boundary, then inspect the rendered pixels.
+- Exact pixel shadow lists through `shadow-[...]` or `inset-shadow-[...]`.
+ Each layer needs an explicit hex, `rgb()`, or `rgba()` color and two to four
+ pixel lengths; use underscores for spaces, for example
+ `shadow-[0_8px_24px_rgba(0,0,0,0.16)]`.
+- `shadow-none` and `inset-shadow-none` clear their class-owned effect stack.
+ Theme-dependent named scales such as `shadow-md` are unsupported: use an
+ explicit native style or typed effect/variable binding for a reusable token,
+ or resolve the governing theme before applying and provide the exact value.
+
+Figma accepts shadow spread only on rectangles and ellipses, or on frames,
+components, and instances with a visible fill and clipping enabled.
+
+A new border needs weight and paint, literal or bound. Updates may change either
+independently; omission preserves the other.
+
+New frames are transparent when background is omitted, including frames added
+during update. On an existing frame, omission preserves its live background;
+use `bg-transparent` to clear it. Set an explicit background when fill is
+intended.
+
+Shared appearance:
+
+- `opacity-N` (`N%`) or `opacity-[0..1]`, `hidden`, `visible`
+- `rotate-N`, `-rotate-N`, `rotate-none`, or `rotate-[Ndeg]`
+- `mix-blend-` with `pass-through`, `normal`, `darken`, `multiply`,
+ `plus-darker`, `color-burn`, `lighten`, `screen`, `plus-lighter`,
+ `color-dodge`, `overlay`, `soft-light`, `hard-light`, `difference`,
+ `exclusion`, `hue`, `saturation`, `color`, or `luminosity`
+
+Text:
+
+- `font-sans|serif|mono` resolve to an editor-available family in that category,
+ preferring Inter, Noto Serif, and Noto Sans Mono
+- `font-thin|extralight|light|normal|medium|semibold|bold|extrabold|black`
+- `text-xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl` with their default line
+ heights, `text-SIZE/N`, or `text-[Npx]`
+- `leading-none|tight|snug|normal|relaxed|loose`, `leading-N`, `leading-[Npx]`,
+ `leading-[N%]`, or a unitless arbitrary ratio
+- `tracking-tighter|tight|normal|wide|wider|widest`, `tracking-[Npx]`,
+ `tracking-[N%]`, or `tracking-[Nem]`
+- `text-left|center|right|justify`
+- `normal-case`, `uppercase`, `lowercase`, `capitalize`
+- `no-underline`, `underline`, `line-through`
+- `truncate`, `line-clamp-N`, `line-clamp-none`
+- `text-white|black`, an exact CSS hex value, `whitespace-pre-wrap`
+- `text-shadow-[...]` for an exact pixel text-shadow list with a color and two
+ or three pixel lengths; `text-shadow-none` clears it
+
+A `span` is one TEXT node, so `bg-*` and `text-*` share its fill channel. Put
+background on a parent `div` and color on its child `span`.
+
+Shadow classes compile to the native effect stack; never combine them with
+`figma.effects` or an Effect style on that node.
+
+Unknown elements, attributes, classes, CSS, responsive/state prefixes, custom
+themes, margins, percentages, and plugins fail closed.
diff --git a/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/component-authoring.md b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/component-authoring.md
new file mode 100644
index 00000000..99573887
--- /dev/null
+++ b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/component-authoring.md
@@ -0,0 +1,294 @@
+# Author reusable components
+
+Use this reference after selecting a reusable local component. It explains
+representation, not library strategy. New local components need no
+`get_design_system`; use catalogs only for discovery or normalized library
+props, and exact returned IDs for newly authored components.
+
+## Shared-responsibility decision
+
+New local components are opt-in for net-new authoring. Use Author when the user
+requested reusable components before delivery, accepted a component pass after
+seeing the completed design, or applicable project evidence makes a local
+component deliverable part of the task. Existing components may still be Reuse
+without authoring new ones. Repeated appearance, repeated data, screen count,
+possible future reuse, or tool availability do not opt the user into Author.
+
+Make the decision from real usages after the representative composition is
+visually sound:
+
+1. Name the shared job and compare the intended consumers.
+2. Identify stable anatomy and meaningful content, media, state, availability,
+ label, swap, or slot differences.
+3. Choose Author only when a truthful supported contract provides more
+ coordination value than it costs to create, migrate, and verify. Otherwise
+ keep the responsibility Direct; a brief reason is enough.
+4. Bound Author at the smallest subtree that owns the complete shared job. Do
+ not infer that a parent must become reusable because a nested label, icon,
+ status, or button is reusable.
+
+Do not inventory or rank every recurring family, and do not turn repetition
+into a quota. Record only selected Author responsibilities and their concrete
+consumers. Before propagation, create the smallest real definition, instantiate
+it once, and verify the exact reference. Then replace the selected consumers
+with native instances; never leave literal lookalikes for a responsibility that
+was deliberately selected as Author. Use the exact returned `rootNodeId` or
+`nodeIdsByKey` entry for every usage.
+
+A keyed primitive cannot become an INSTANCE in place. Update its bounded
+ancestor, add the instance under a new key, and remove the old key in the same
+call.
+
+Stop component authoring if the ID is missing, the instance fails, or the
+definition is empty, default-sized, or loses
+properties. Do not substitute primitives or claim completion. Continue only
+independent Direct work, report the degraded component result, and remove a
+temporary definition only when unused and safe. Re-read a corrupt definition
+and its intended usage; never rebuild it in place or remove one with instances.
+Recreate only when unused. If a diagnostic would systematize primitives that
+this definition replaces, reconcile the component first; independent token work
+does not need to wait.
+
+Before handoff, reconcile only selected Author responsibilities with actual
+consumers. Each selected consumer must be a native INSTANCE. Inspect the most
+demanding instance through its descendants; root type and size do not prove
+wrapping, slots, media, or state content fit.
+Revise the contract or boundary when real content breaks it.
+
+Markup-only updates preserve keyed components, sets, instances, and shapes.
+Restate native bindings only when changing native state; new native nodes still
+need declarations or component references.
+
+Copy a complete recipe and change its design facts. Do not infer TemPad's
+component shape from raw Plugin API calls.
+
+## Contents
+
+- [Define the contract from real usages](#define-the-contract-from-real-usages)
+- [Keep source definitions discoverable](#keep-source-definitions-discoverable)
+- [Component and properties](#component-and-properties)
+- [Consume an authored component directly](#consume-an-authored-component-directly)
+- [Variant set](#variant-set)
+- [Slots and instances](#slots-and-instances)
+
+## Define the contract from real usages
+
+Compare every intended usage. Separate stable anatomy from varying content,
+state, or nested substitution; map differences to the smallest supported Text,
+Boolean, Instance Swap, variant, Slot, or nested-composition mechanism. Treat a
+field as invariant only when real usages agree.
+
+Size the contract from real extremes: test the longest wrapping text, widest
+label, largest nested swap, and materially different slots. Compare descendant
+bounds with the INSTANCE root; screenshots can still paint invalid overflow.
+If content exceeds the root, enlarge the definition, add a truthful size
+variant, or move the varying region outside a smaller stable boundary.
+If consumer-specific media cannot be expressed by the available instance
+contract, keep that media direct and componentize the stable surrounding
+responsibility; never freeze one image into every instance to retain a larger
+component boundary.
+
+When stable anatomy should evolve together, expressible state differences
+support a shared contract. Keep it local only when divergence or contract cost
+outweighs coordinated change.
+
+If the contract cannot express a meaningful difference, revise it or keep the
+responsibility local. Never force usages to share placeholder content or an
+accidental default merely because outer geometry repeats.
+
+Model each mutually exclusive categorical concern as one variant axis; do not
+replace it with Booleans that allow impossible combinations. Reserve Booleans
+for independently optional content or behavior.
+
+Expose one choice through both a variant and independent property only when real
+usages vary them independently. Keep each source variant's visible state
+truthful; instance overrides do not repair accidental source defaults.
+
+## Keep source definitions discoverable
+
+Keep main components and sets visible at natural bounds in a clearly named
+source area separate from screens. Never hide, clip, make transparent, or
+invisibly nest them. For several families, use a top-level SECTION with
+`contentsHidden: false`, discoverable definition children, and content-sized
+bounds.
+
+Keep each real definition once, without redundant specimens. Before handoff,
+use `get_structure` to verify every definition is visible and every intended
+consumer is an INSTANCE. Inspect distinct source variants at readable scale;
+names, content, and styling must encode the same state.
+
+Keep the source area operational and visually subordinate: use the smallest
+content-sized container that exposes the definitions, outside the consumer
+board or screen sequence. Do not turn it into a branded artboard, mood board,
+visual-thesis panel, token showcase, or documentation page unless the user asks
+for that deliverable. Product screenshots and presentation framing should stay
+focused on the requested experience.
+
+## Component and properties
+
+This complete call creates a component with TEXT and BOOLEAN properties and
+connects both properties to its label layer.
+
+```json
+{
+ "mode": "create",
+ "markup": "
Continue
",
+ "native": {
+ "button": {
+ "figma": {
+ "name": "Button",
+ "component": {
+ "type": "COMPONENT",
+ "properties": {
+ "label": {
+ "type": "TEXT",
+ "name": "Label",
+ "defaultValue": "Continue"
+ },
+ "show-label": {
+ "type": "BOOLEAN",
+ "name": "Show label",
+ "defaultValue": true
+ }
+ }
+ }
+ }
+ },
+ "button/label": {
+ "figma": {
+ "componentPropertyReferences": {
+ "characters": "label",
+ "visible": "show-label"
+ }
+ }
+ }
+ }
+}
+```
+
+Stable keys such as `label` connect definitions and sublayer references within
+one result; they are not generated Figma property names. Supported property
+types are `BOOLEAN`, `TEXT`, and `INSTANCE_SWAP`, linked through `visible`,
+`characters`, and `mainComponent` respectively.
+
+BOOLEAN properties control visibility, not styling. Hidden in-flow children
+leave Auto Layout. Use this only for intentionally optional content. To preserve
+geometry, toggle an inner layer inside a fixed slot, use `absolute` for a true
+overlay, or use geometry-equivalent variants for whole-state changes.
+
+Treat `layout-affecting-visibility-property` as a contract warning. Fix it when
+geometry must stay stable. Accept intentional reflow only after comparing true
+and false instances for bounds, sibling positions, baselines, and clipping; one
+default-state screenshot is insufficient.
+
+## Consume an authored component directly
+
+Use the exact ID returned by `apply_canvas`. For TemPad-authored components,
+`componentProperties` accepts their stable definition keys. This follow-up
+needs no catalog:
+
+```json
+{
+ "mode": "create",
+ "markup": "
",
+ "native": {
+ "screen/action": {
+ "component": { "id": "ComponentID:created-button" },
+ "componentProperties": { "label": "Save", "show-label": true }
+ }
+ }
+}
+```
+
+Replace the illustrative ID with the returned ID. Never invent IDs or use this
+shortcut for unidentified library components.
+
+## Variant set
+
+This call creates two components in one variant set. Every direct child of a new
+set must be an authored component; names encode axes as `Property=Value`.
+
+```json
+{
+ "mode": "create",
+ "markup": "
Continue
Continue
",
+ "native": {
+ "button-set": {
+ "figma": {
+ "name": "Button",
+ "component": { "type": "COMPONENT_SET" }
+ }
+ },
+ "button/default": {
+ "figma": {
+ "name": "State=Default",
+ "component": { "type": "COMPONENT" }
+ }
+ },
+ "button/hover": {
+ "figma": {
+ "name": "State=Hover",
+ "component": { "type": "COMPONENT" }
+ }
+ }
+ }
+}
+```
+
+Consume the returned set ID and select siblings through variant properties. If
+the call returns the set as `rootNodeId`, this creates Default and Hover:
+
+```json
+{
+ "mode": "create",
+ "markup": "
",
+ "native": {
+ "screen/default": {
+ "component": { "id": "ComponentSetID:created-button-set" }
+ },
+ "screen/hover": {
+ "component": { "id": "ComponentSetID:created-button-set" },
+ "componentProperties": { "State": "Hover" }
+ }
+ }
+}
+```
+
+Replace the ID with returned `rootNodeId`. The set ID creates its default;
+`componentProperties` selects another encoded variant. An exact child ID from
+`nodeIdsByKey` may instantiate that variant directly.
+
+Use `descriptionMarkdown` and `documentationLink` only for real guidance, inside
+`figma.component` beside `type` and `properties`:
+
+```json
+{
+ "figma": {
+ "name": "Button",
+ "component": {
+ "type": "COMPONENT",
+ "descriptionMarkdown": "Primary action"
+ }
+ }
+}
+```
+
+Define shared properties on the component set rather than on one variant.
+
+## Slots and instances
+
+Use `figma.slot` only for an intentional flexible nested-content API. New slots
+must be inside local authored components and include `property.name`; markup
+children become defaults. Optional settings control stretching, empty display,
+child limits, and preferred values.
+
+An `INSTANCE_SWAP` default uses exact live component/set ID `{ "id": "..." }`
+or importable library key `{ "key": "..." }`. Preferred values require
+`{ "type": "COMPONENT" | "COMPONENT_SET", "key": "..." }` and accept neither
+live IDs nor catalog refs. Resolve catalog identity before authoring and never
+invent it. Put advanced state under `figma.instance`; omission preserves normal
+override behavior.
+
+Never edit a remote component, nest a main component inside another main
+component, delete a component with surviving instances, or create properties
+and variants that the requested component API does not need.
diff --git a/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/delegation.md b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/delegation.md
new file mode 100644
index 00000000..181b7cc9
--- /dev/null
+++ b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/delegation.md
@@ -0,0 +1,82 @@
+# Delegate bounded evidence work
+
+Delegate evidence gathering or isolated production, never focal judgment. The
+main agent synthesizes results and remains the only Canvas writer.
+
+## Pass the delegation gate
+
+Delegate only work that is:
+
+1. **Separable:** has a stable objective independent of evolving design choices.
+2. **Compressible:** needs only a compact task-local brief.
+3. **Isolated:** is read-only or produces an isolated artifact without mutating
+ Figma, design-system state, or another agent's files.
+4. **Verifiable:** returns citations, importable asset references, exact facts,
+ or a bounded defect list the main agent can inspect.
+5. **Worth coordinating:** gains enough from parallelism, specialist capability,
+ or independent review to justify handoff and synthesis.
+
+Keep work local if any condition fails. Do not delegate for ritual, convenience,
+or another unsupported aesthetic opinion.
+
+## Write a complete handoff
+
+Give each worker one objective and its relevance, only required task evidence
+and constraints, permitted tools and sources, explicit exclusions including no
+Canvas writes, and an exact output contract and stop condition. The main agent
+must read required Canvas references and set safety boundaries; never delegate
+interpretation of this skill. Prefer fresh or minimum-context workers, pass
+source evidence rather than conclusions, and avoid overlapping assignments.
+
+## Suitable tracks
+
+### Research scout
+
+After framing the design problem, delegate a bounded evidence question. Return:
+
+```txt
+open decision; exact source; applicable finding; relevance; authority boundary
+```
+
+The scout does not choose direction. Combine questions only when their search
+space is shared; use multiple scouts only for independent spaces.
+
+### Asset scout
+
+After fixing asset requirements and import contract, return one importable
+`imageUrl` or `assetHash` per asset plus MIME type, dimensions, provenance, and
+factual description. Return no bytes, rejected candidates, or transcript. The
+main agent owns selection and integration.
+
+### Independent QA scout
+
+After a representative composition exists, provide a fresh worker its
+screenshot and frozen brief without creator rationale or suspected defects. Ask
+for at most eight observations:
+
+```txt
+severity; screen/node or region; observed defect; visible evidence; violated constraint
+```
+
+The scout neither edits nor declares completion; the main agent checks findings
+against the live canvas.
+
+### Inventory scout
+
+Use read-only inventory when independent volume warrants it, such as several
+screens or icon candidates. Require exact findings and references, not a design
+proposal.
+
+## Orchestrate conservatively
+
+- Default to one worker; use at most two concurrent non-overlapping workers.
+- Keep a faster local critical path with the main agent.
+- Only the main agent resolves intent and conflicts, chooses direction, calls
+ `apply_canvas`, and accepts the result.
+- Resolve conflicts from evidence, not voting; discard unverifiable or
+ out-of-scope claims and stop when evidence is sufficient.
+
+Never delegate interdependent page or component construction, component
+authoring plus instance placement, concurrent updates to one root, final
+composition, or final acceptance. These require one ordered mutation stream and
+continuous awareness of the whole.
diff --git a/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/design-system-authoring.md b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/design-system-authoring.md
new file mode 100644
index 00000000..45825de5
--- /dev/null
+++ b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/design-system-authoring.md
@@ -0,0 +1,87 @@
+# Implement a selected local design system
+
+Use this reference only when the user or resolved plan requires new local
+components, variables, or styles. It translates that plan into native resources
+and verifies delivery; it does not choose component strategy, visual language,
+resource inventory, or token taxonomy.
+
+## Establish the implementation contract
+
+Before writing, identify each selected resource, responsibility, concrete
+consumer, meaningful variation, and exclusion. Resolve any open material
+boundary first. For components, use the gate in
+[component-authoring.md](component-authoring.md); screen count, one-screen scope,
+and visual similarity alone neither establish nor exclude a component.
+
+Keep a private reconciliation map:
+
+```txt
+selected resource -> native representation -> intended consumers
+```
+
+A resource is complete only when its native definition or binding exists and
+every intended consumer uses it. Equivalent primitives or literals are not
+coverage.
+
+## Translate the plan
+
+Use this loop:
+
+1. Stabilize one representative composition.
+2. Author only selected resources with known consumers.
+3. Exercise each contract in that composition.
+4. Propagate native instances and bindings to all intended consumers.
+5. Reconcile the final artifact with the map.
+
+Preserve the decided semantics:
+
+- A variable carries a semantic value consumers must bind and evolve together;
+ name it by role, not literal.
+- A local style carries a reusable paint, text, effect, or grid definition. Do
+ not duplicate one decision across resource types unless required.
+- A component carries a reusable responsibility. Define stable anatomy and
+ expose only variations required by real usages.
+
+Use [resource-mapping.md](resource-mapping.md) to map selected variable and text
+style identities once per apply, then consume them through familiar variable
+utilities and `type-*` classes. A new resource and its first consumer can share
+one call. Query available fonts independently through `get_design_system` with
+`scope: "fonts"`; selecting a family does not require discovering a file system.
+
+Consume a component through a childless instance placeholder without layout or
+appearance classes. Do not make a repeated shell or wrapping top-level subtree
+a component unless every consumer can use that placeholder through supported
+properties. Slots do not permit markup children on instance placeholders; keep
+incompatible wrappers as ordinary structure around a compatible inner boundary.
+
+Map each real component difference to the smallest supported mechanism: Text,
+Boolean, Instance Swap, variant, Slot, or nested composition. Use one variant
+axis per mutually exclusive categorical concern and Booleans only for
+independently optional concerns. Do not encode arbitrary content as variants,
+generate unused combinations, or freeze varying content as invariant.
+
+If supported native mechanisms cannot express a real usage, do not weaken or
+redesign it silently. Choose another valid boundary or report the limitation.
+
+Read [variables.md](variables.md), [local-styles.md](local-styles.md), or
+[component-authoring.md](component-authoring.md) only for selected resource
+types.
+
+## Verify the native handoff
+
+Verify through representative consumers, not definitions alone: inspect native
+bindings, Auto Layout, text resizing, property behavior, and every material
+state. Raw literals and primitive lookalikes do not demonstrate system usage.
+
+For components, verify visible inspectable definitions and native INSTANCE
+consumers using [component-authoring.md](component-authoring.md). For variables
+and styles, inspect live bindings rather than apply input or equal values.
+
+Resolve warnings through real consumers, or remove a resource only when the
+resolved plan no longer includes it. Tool friction, payload size, or an easy
+resource type does not alter the plan. Do not create swatches, specimens,
+definition panels, or redundant examples solely for verification; add
+documentation only when requested.
+
+Finish when selected resources support all requested usages and the live Figma
+structure reconciles with the map. Do not expand for imagined future needs.
diff --git a/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/design-system-reuse.md b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/design-system-reuse.md
new file mode 100644
index 00000000..11cf574f
--- /dev/null
+++ b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/design-system-reuse.md
@@ -0,0 +1,59 @@
+# Reuse an existing design system
+
+Use this reference only when reuse is allowed and relevant. If the user rejects
+a design system, use Direct.
+
+## Discover definitions
+
+Call `get_design_system` without arguments. Its immutable deterministic catalog
+contains:
+
+- a `catalogId` scoping all short refs;
+- component tags, props, source pages, and native sizes;
+- variables, collections, modes, styles, and shaders as refs such as `v1`,
+ `k1`, `m1_2`, `s1`, and `h1`;
+- `cssName` on variables and `className` on text styles for direct use in markup;
+- `omitted` and `nextCursor` when more definitions remain.
+
+The catalog neither scans usage nor loads pages or ranks resources. Select from
+returned names, pages, summaries, props, types, scopes, and defaults. Continue a
+cursor or inspect an exact ref only until evidence is sufficient.
+
+Prefer, in order: catalog component, supported component prop, matching native
+style, semantic variable, then primitive or literal for a real gap.
+
+When variants, anatomy, layout, or semantic meaning affect the result, inspect
+the exact `ref` with the same `catalogId`. Use its `previewNodeId` with
+`get_screenshot` only when appearance affects selection. Read an existing
+composition with `get_code` or `get_screenshot`; catalogs do not reveal usage
+conventions. Never invent refs, IDs, keys, props, or variant values.
+
+## Apply catalog resources
+
+Component tags are childless, include returned `data-ref`, and use exact props.
+Omit size classes to preserve native size. Use returned CSS variable names and
+text-style classes through [resource-mapping.md](resource-mapping.md). For other
+native fields, bind `data-var-="vN"` or `data-style-="sN"`; put
+collection modes or strict native links under `native[data-key]`.
+
+Replace every illustrative ref in this contract with one from the active
+catalog:
+
+```json
+{
+ "mode": "create",
+ "catalogId": "ds_example",
+ "markup": "
Team settings
",
+ "theme": { "textStyles": { "type-body": { "ref": "s1" } } },
+ "native": {
+ "settings": {
+ "variableModes": { "k1": "m1_1" }
+ }
+ }
+}
+```
+
+If a mandatory component is absent, ask the user to open its definition page;
+otherwise use the normal primitive fallback. An empty canvas does not block
+catalog reuse. When reuse is unavailable, create a small coherent primitive
+draft—never a token or component library solely for one screen.
diff --git a/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/document-geometry.md b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/document-geometry.md
new file mode 100644
index 00000000..b54a98d4
--- /dev/null
+++ b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/document-geometry.md
@@ -0,0 +1,123 @@
+# Document and native geometry
+
+Use `native[key].figma` only for state HTML and classes cannot express honestly;
+it remains declarative desired state.
+
+## Contents
+
+- [Pages and containers](#pages-and-containers)
+- [Shapes and vectors](#shapes-and-vectors)
+- [Transforms, masks, and native state](#transforms-masks-and-native-state)
+
+## Pages and containers
+
+Top-level `page` can set a name, exact zero-based document index, solid RGBA
+background, ordered guides, and explicit variable modes. Page-only create uses
+a new `pageKey` plus name and activates the created page. Page-only update uses
+an exact `id` or `pageKey` and omits markup. A create root may target an existing
+or new page directly; writing an existing off-current page does not activate it.
+Markup updates stay on the target node's page.
+
+Use top-level `mode: "activate"` with exact page identity when editor context or
+selection matters; `selection: []` clears selection. Use top-level `mode:
+"remove"` with an owned `pageKey` to delete a page. Page deletion rejects the
+last page, manual or unowned content, and surviving external dependencies.
+
+Use:
+
+- `figma.section: { contentsHidden? }` for canvas organization;
+- `figma.group: true` for an intrinsic group;
+- `figma.booleanOperation: "UNION" | "SUBTRACT" | "INTERSECT" | "EXCLUDE"`
+ for non-destructive geometry.
+
+Sections can be canvas roots or direct children of sections; a frame cannot
+contain a section. Sections require fixed pixel dimensions and freeform
+children. Groups and Booleans use `w-fit h-fit` with freeform children. A new
+group needs one child and a Boolean needs two. When updating an intrinsic
+container's children,
+describe every live direct child because order is semantic.
+
+Sections have no frame clipping, so omit `overflow-hidden` and
+`overflow-visible`. When `targetNodeId` is an existing section, retain
+`figma.section` on the root or the frame-typed markup root is rejected.
+
+## Shapes and vectors
+
+Use a childless `div` with `figma.shape`:
+
+- `{ "type": "RECTANGLE" }`
+- `{ "type": "LINE" }`
+- `{ "type": "ELLIPSE", "arc": { "startAngle", "endAngle", "innerRadius" } }`
+- `{ "type": "POLYGON", "pointCount": 3 }`
+- `{ "type": "STAR", "pointCount": 5, "innerRadius": 0.5 }`
+- `{ "type": "VECTOR", "paths": [...] }`
+- `{ "type": "VECTOR", "network": {...}, "handleMirroring": "..." }`
+
+Use exact uppercase `M L Q C Z` paths for already-decided custom vector
+geometry. Selected icon roles use sourced SVG through [icons.md](icons.md), not
+remembered paths. Use a vector network only for branching segments, per-vertex
+state, or region-specific fills or styles. Never provide both. New vectors need
+geometry; omission preserves it on update and an empty path or network clears
+it.
+
+Each path item is an object. `windingRule` is `"NONE"`, `"NONZERO"`, or
+`"EVENODD"`; use `"NONE"` for an open stroked path. Path data uses
+whitespace-separated uppercase commands and numbers.
+
+Figma normalizes path geometry to tight bounds before applying markup size. The
+childless `div` defines final bounds, not a preserved viewport. For alignment,
+offset it by the path's minimum x/y and size it to the x/y spans; otherwise a
+partial-range path stretches to the box. Verify rendered anchors because
+`get_structure` returns node bounds, not path coordinates.
+
+This Direct recipe creates an editable branch curve:
+
+```json
+{
+ "mode": "create",
+ "markup": "
",
+ "native": {
+ "branch": {
+ "figma": {
+ "name": "Branch",
+ "shape": {
+ "type": "VECTOR",
+ "paths": [
+ {
+ "windingRule": "NONE",
+ "data": "M 14 300 C 30 252 52 188 104 20"
+ }
+ ]
+ },
+ "fills": [],
+ "strokes": [{ "type": "SOLID", "color": { "r": 0.447, "g": 0.314, "b": 0.231 } }],
+ "stroke": { "weight": 2, "cap": "ROUND", "join": "ROUND" }
+ }
+ }
+ }
+}
+```
+
+## Transforms, masks, and native state
+
+- `figma.name` sets the display name; `data-key` remains identity.
+- `locked` and `aspectRatioLocked` set interaction state.
+- `relativeTransform` is a complete native 2×3 unit-axis transform; width and
+ height carry scale. Do not combine it with `rotate-*`. On create roots, TemPad
+ preserves rotation and skew but replaces translation with automatic placement.
+- `stroke` carries weights, alignment, caps, joins, miter, and `dashPattern`.
+- `corners` carries radii and smoothing.
+- `mask` is `"ALPHA"`, `"VECTOR"`, `"LUMINANCE"`, or `null`.
+
+Place a mask before masked siblings inside one dedicated frame and describe all
+direct siblings on update. A non-null mask needs a following sibling. Omission
+preserves mask state; `null` disables it.
+
+After changing a mask, layout grid, or frame guide, call `get_structure` with
+`options.native: true` on the smallest relevant root. Verify `native.mask` and
+sibling order, or returned `native.layoutGrids` and `native.guides`; desired
+bindings alone are insufficient.
+
+Use `{ "ref": "…" }` for catalog resources nested in native state and
+`sourceCanvasKey` or `{ "canvasKey": "…" }` for same-result forward node
+references. Never insert raw Plugin API calls.
diff --git a/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/editing.md b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/editing.md
new file mode 100644
index 00000000..f8653bd5
--- /dev/null
+++ b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/editing.md
@@ -0,0 +1,44 @@
+# Edit an existing result
+
+Use this reference for an update, removal, or change of editor context. Read the
+exact target and recover managed keys from structured tool results when prior
+call context is unavailable. Names are labels, not identity.
+
+## Describe the desired change
+
+Trace the requested change through its visible dependents: a changed selection
+may affect the working surface, label, enabled action, and summary. Preserve
+unrelated content and relationships. Preserving the source does not mean
+retaining stale representations of its previous state.
+
+Use the smallest owning target that can express the complete change:
+
+- For native state on existing keys, target the exact managed root and send only
+ `native`; omit markup to preserve topology.
+- For structural changes, read `canvas-html.md`, keep `data-key` stable, and
+ include the affected structure. Omitted existing fields and keyed elements
+ retain their live state; omission is not deletion.
+- `removeKeys` removes owned descendants. Top-level `mode: "remove"` removes an
+ exact managed root or page. Do not remove manual/unkeyed content, unmanaged
+ resources, or surviving external consumers.
+- `mode: "activate"` requires `page.id` or `page.pageKey`, even for a
+ selection-only change. It changes editor context, not document state. An
+ exact off-current-page write does not require activation.
+
+Respect instance boundaries. Change an instance root or its authorized
+component definition, never a definition-derived sublayer. Select only the
+native references needed for the intended change.
+
+## Recover locally
+
+Read the entire mutation result. For a rejected payload, correct all reported
+issues together without changing the design to fit the error. A verification
+failure is rolled back by TemPad; do not assume a partial successful edit.
+For an unknown transport outcome, read the exact target before retrying a create
+or removal so an uncertain response does not become a duplicate mutation.
+
+Repair warnings where they occur. Replace a whole root only when an observed
+structural defect requires it and the complete intended content can be
+preserved. Reopen the affected composition after its last material write and
+inspect its dependents; read back protected native facts when preservation
+matters. Do not expand a local correction into an unrelated restyle.
diff --git a/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/icons.md b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/icons.md
new file mode 100644
index 00000000..b3457638
--- /dev/null
+++ b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/icons.md
@@ -0,0 +1,65 @@
+# Deliver icons
+
+Use this reference only after the composition selects an icon role. It does not
+require icons, set an icon count, or choose a family or visual style.
+
+Prefer permitted current-file, catalog, project, or user sources; otherwise use
+a trustworthy brief-compatible source and record material license constraints.
+When inspected evidence establishes a family or geometry, use that permitted
+source or a compatible one. A general library is a fallback only when its
+stroke or fill, optical weight, corners, negative space, and platform semantics
+remain coherent. Do not diversify sources by quota.
+
+Import exact SVG geometry. Never redraw a known icon from memory or replace an
+icon role with Unicode, emoji, TEXT, or assembled primitives. A character,
+shape, or cluster that communicates an affordance, object, or semantic category
+is an icon role even when beside a worded label. Before markup, scan literal
+text for pictographic Unicode, emoji, and symbols and route each qualifying mark
+to a permitted vector source. Simple geometry remains valid only when it is
+itself the intended status or data mark, divider, decoration, or brand shape.
+
+Search results and snippets identify external candidates only; they establish
+neither geometry nor license. Open the governing license once and fetch or open
+every exact SVG used before markup. If either remains uninspected, omit an
+optional icon or report a required gap instead of inventing one.
+
+For Direct delivery, give the icon a childless `div` whose classes supply the
+decided wrapper bounds. Declare the inspected SVG document in
+`assets[assetKey]` with `type: "SVG"`, then set
+`native[nodeKey].figma.svg.assetKey` to that alias. An optional `color` resolves
+`currentColor`; omit it for explicit-color SVGs. Figma may import a Frame with
+Vector children; treat that subtree as one opaque asset and never flatten or
+reconcile it.
+
+This complete Direct recipe demonstrates the required shape, not a design
+default; its identifiers and values stand in for the already-decided role and
+inspected source:
+
+```json
+{
+ "mode": "create",
+ "markup": "",
+ "assets": {
+ "search": {
+ "type": "SVG",
+ "svg": ""
+ }
+ },
+ "native": {
+ "search-icon": {
+ "figma": { "svg": { "assetKey": "search", "color": "#334155" } }
+ }
+ }
+}
+```
+
+Omit `color` when it is not part of the selected source. A markup-only call
+cannot deliver the SVG geometry. Once an icon source has been selected and
+inspected, do not replace it with text or primitives merely to avoid the
+`assets` and `native` mapping.
+
+For larger exact SVG, declare a Hub asset using a full lowercase SHA-256:
+
+```json
+{ "type": "SVG", "assetHash": "" }
+```
diff --git a/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/images.md b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/images.md
new file mode 100644
index 00000000..b019a960
--- /dev/null
+++ b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/images.md
@@ -0,0 +1,120 @@
+# Deliver images and illustrations
+
+Use this reference only after the composition selects an image or illustration
+role and the common boundaries in [visual-assets.md](visual-assets.md) establish
+its subject and medium.
+
+Treat existing assets, rights-established remote sources, generation, and
+purpose-built vectors as acquisition routes. Choose the nearest route that
+satisfies content, fidelity, rights, quality, and import requirements; tools
+have no global priority. Before importing a remote asset, establish its
+applicable usage rights and a recoverable source. A search result, accessible
+URL, CDN host, or lack of a watermark does not establish permission. Confirm
+Canvas delivery before layout depends on the asset.
+
+When depiction is part of a record, keep it. Text, category icons, generic
+placeholders, and numbered markers may index the record but cannot replace its
+visual content. Source or generate an established raster role, preserve exact
+vector art when vector is the real medium, or disclose the gap.
+
+Keep only enough trace to recover material choices, the remote source and its
+applicable terms, or content distinctions. Combine role, evidence, medium,
+source, rights, and import treatment in one short rationale when needed; do not
+create a per-asset ceremony. Record exact creator, license, or attribution only
+when the applicable terms, policy, or handoff requires it; assets sharing one
+route and terms may share a trace.
+
+When medium is unspecified, use nearest visual evidence or ask if the choice is
+material; otherwise state a low-consequence assumption.
+
+Use generation when the decided role needs a bespoke or fictional subject,
+identity, composition, or treatment. In a prototype, a coherent generated set
+may be the nearest truthful source for distinct fictional records; do not
+require stock search merely because each subject is ordinary. For a real named
+subject or supplied identity, use the supplied or rights-established source and
+do not generate a substitute. Before generation, map each planned asset to the
+subject and consumer it serves; skip ceremony that does not protect fidelity,
+rights, or import.
+
+Compose generation and Hub import in one programmatic execution so image bytes
+never enter prose or expire between calls: pass the generator's `data:` URL
+directly to TemPad's `upload_asset`, read its returned `assetHash`, then declare
+that hash as an IMAGE asset in `apply_canvas`. Do not regenerate an unchanged
+prompt only to recover an importable URL. If generation or `upload_asset` is
+unavailable, choose a rights-established public image source only when it
+preserves the intended medium; otherwise disclose the required gap. Never
+generate first and silently switch medium because import failed.
+
+Use `imageUrl` for a rights-established public IMAGE paint or same-file
+`imageHash` for an existing image. For generated or other local Hub content,
+declare the returned full lowercase SHA-256, then use its alias in a basic fill:
+
+```json
+{
+ "assets": { "image": { "type": "IMAGE", "assetHash": "" } },
+ "native": {
+ "image-node": {
+ "figma": {
+ "fills": [{ "type": "IMAGE", "assetKey": "image", "scaleMode": "FILL" }]
+ }
+ }
+ }
+}
+```
+
+Inline bytes and local paths are unsupported. Remote URLs must resolve directly
+to accessible images, not pages or thumbnails.
+
+When a supplied canvas image is itself a permitted source artifact and an exact
+visible subregion must carry into the result, reuse its same-file `imageHash`
+instead of redrawing that content. For an axis-aligned source rectangle
+`(x, y, width, height)` within an image of size `(imageWidth, imageHeight)`, and
+a destination with the same aspect ratio, declare:
+
+```js
+{
+ type: "IMAGE",
+ imageHash: "",
+ scaleMode: "CROP",
+ imageTransform: [
+ [width / imageWidth, 0, x / imageWidth],
+ [0, height / imageHeight, y / imageHeight]
+ ]
+}
+```
+
+Supply the evaluated finite numbers, not expression strings. If the destination
+aspect ratio differs, first choose an aspect-correct source rectangle rather
+than stretching the subject. Open the rendered crop and verify its native IMAGE
+fill; a valid transform does not prove that the intended subject was isolated.
+
+When the medium must remain a real image, verify with `get_structure` and
+`options.native: true`; `native.imageFills` must contain the expected non-null
+Figma hash. Input URLs, successful mutation, and visually similar screenshots
+are not native read-back.
+
+The main agent owns placement, crop, and final verification. In a comparison,
+make visual differences represent the subjects rather than their source files:
+normalize incidental canvas padding, crop, background, viewpoint, and apparent
+scale when they would bias the decision; preserve and explain differences that
+are real or cannot be normalized faithfully.
+
+Before markup, map every content-bearing image consumer to the subject it
+claims to depict. Reuse one asset and crop only when consumers represent that
+same subject; distinct records require distinct assets or crops that visibly
+isolate the correct subject. A composite scene may serve the composition it
+depicts, but cannot stand in for several named records. Stop and source or
+generate missing media instead of serializing a false mapping.
+
+When a gallery, carousel, or thumbnail set promises several views of one
+subject, every retained view must add distinct, truthful information. Repeating
+one unchanged source and crop does not satisfy that role; unrelated subjects
+break identity. Use distinct sourced views, evidence-supported crops, or
+generation/editing only for a named same-subject coverage need that sourcing
+cannot satisfy. Otherwise reduce the views or disclose the gap.
+
+For repeated depictions of the same subject, keep asset identity and crop
+stable unless evidence requires variation. If required media remains
+unavailable, report it; omit optional media or use a neutral slot only when the
+requested outcome is unchanged. A neutral slot is an explicit fallback, not
+representative content or proof of reusable variation.
diff --git a/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/local-styles.md b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/local-styles.md
new file mode 100644
index 00000000..74aec685
--- /dev/null
+++ b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/local-styles.md
@@ -0,0 +1,61 @@
+# Author local styles
+
+Use this reference only when the user or resolved system plan requires a local
+style. Do not extract styles from an ordinary screen. New local resources need
+no catalog; send `catalogId` only when a nested `{ "ref": "…" }` deliberately
+reuses an existing resource.
+
+Copy this recipe and change its design facts. Style authoring keys persist
+file-wide and are neither names nor IDs. Namespace keys by product and role. In
+shared drafts, also prefix generic visible names that could collide; retain
+established project naming when already clear.
+
+For whole-node typography, prefer a `theme.textStyles` alias and a `type-*`
+class using [resource-mapping.md](resource-mapping.md). The recipe below shows
+the explicit native binding form, also used for paint, effect, and grid styles.
+
+```json
+{
+ "mode": "create",
+ "markup": "
Account
",
+ "styles": {
+ "product/style/surface": {
+ "type": "PAINT",
+ "name": "Product/Color/Surface",
+ "paints": [{ "type": "SOLID", "color": { "r": 1, "g": 1, "b": 1 } }]
+ },
+ "product/style/heading": {
+ "type": "TEXT",
+ "name": "Product/Typography/Heading",
+ "fontName": { "family": "Inter", "style": "Semi Bold" },
+ "fontSize": 20,
+ "lineHeight": { "unit": "PIXELS", "value": 28 }
+ }
+ },
+ "native": {
+ "card": {
+ "styles": {
+ "fill": { "styleKey": "product/style/surface" }
+ }
+ },
+ "card/title": {
+ "styles": {
+ "text": { "styleKey": "product/style/heading" }
+ }
+ }
+ }
+}
+```
+
+Types are `PAINT`, `TEXT`, `EFFECT`, and `GRID`, using `paints`, text fields,
+`effects`, or `layoutGrids` respectively. For exact Paint, Effect, and Grid
+shapes beyond this recipe, read [paints-effects.md](paints-effects.md).
+
+Omission preserves managed state. Top-level `null` removes a managed style only
+when absence is required and all live consumers are cleared or removed in the
+same result. Never mutate remote resources, invent library keys, or create a
+broad style library for one screen.
+
+`unbound-created-style` means a same-call style lacks a `styleKey` consumer.
+Bind it to a representative property performing its named role or remove it. A
+swatch or unrelated binding is not coverage.
diff --git a/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/paints-effects.md b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/paints-effects.md
new file mode 100644
index 00000000..c32b82f2
--- /dev/null
+++ b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/paints-effects.md
@@ -0,0 +1,111 @@
+# Paints, effects, grids, guides, and media
+
+Use this reference whenever the result uses a nontrivial shadow, blur, glass,
+texture, noise, image paint, layered gradient material, or layout aid, including
+effects expressed as Canvas HTML classes. Resolve an image or illustration's
+role, subject, and medium through [visual-assets.md](visual-assets.md), then its
+source and delivery through [images.md](images.md). Prefer a matching catalog
+style; otherwise use direct native arrays.
+
+## Catalog links
+
+```html
+
+```
+
+A style owns its channel. Do not combine a non-null fill or stroke style with a
+whole-node variable on the same paint. Styled strokes still need literal,
+typed, or variable-bound geometry. `null` unlinks; omission preserves.
+
+## Resolve shadow references
+
+Named scales such as `shadow-md` are theme references, not portable geometry:
+
+- Reuse: bind the matching catalog Effect style.
+- Author: create and bind a local Effect style only when the system plan requires
+ it.
+- Direct: use an exact `shadow-[...]` class or typed `figma.effects` value.
+
+Never assume Tailwind defaults or create a token only to resolve a named class.
+`shadow-none`, `inset-shadow-none`, and `text-shadow-none` explicitly clear.
+
+Treat an outer shadow's rendered halo as part of the composition. Inspect the
+final PNG beyond the root edges; visible granular or noisy fringe, or a halo
+that dominates the captured bounds, is a defect even when the frame itself is
+intact. Preserve intended depth by tightening blur, spread, or opacity or using
+smaller layered shadows, then recheck. Do not flatten established material
+treatment merely to hide the defect.
+
+## Native paint and effect stacks
+
+`figma.fills` and `figma.strokes` support ordered solid, linear/radial/angular/
+diamond gradient, image/video, Pattern, and fill-shader paints.
+`figma.effects` supports ordered shadows, normal/progressive blur, noise,
+texture, glass, and effect shaders.
+
+A `SOLID` paint uses RGB `color` and optional paint-level `opacity`; only
+gradient stops use RGBA colors. Keep stroke geometry, including `dashPattern`,
+in `figma.stroke`, not the stroke paint.
+
+Use the exact gradient enum and normalized RGBA stop shape; do not translate
+from CSS or Plugin API names:
+
+```json
+{
+ "figma": {
+ "fills": [
+ {
+ "type": "GRADIENT_LINEAR",
+ "gradientTransform": [
+ [1, 0, 0],
+ [0, 1, 0]
+ ],
+ "gradientStops": [
+ { "position": 0, "color": { "r": 1, "g": 0.43, "b": 0.29, "a": 1 } },
+ { "position": 1, "color": { "r": 0.16, "g": 0.09, "b": 0.24, "a": 1 } }
+ ]
+ }
+ ]
+ }
+}
+```
+
+Other gradient enums are `GRADIENT_RADIAL`, `GRADIENT_ANGULAR`, and
+`GRADIENT_DIAMOND`.
+
+Omission preserves a stack; `[]` clears it. Direct stacks cannot share their
+channel with a literal class, whole-node variable, or style. Use variable refs
+such as `{ "ref": "v1" }` and shader refs such as `{ "ref": "h1" }`; use only
+returned shader property IDs and declared value shapes.
+
+For images, provide exactly one same-file `imageHash`, public HTTP(S) `imageUrl`,
+or call-scoped `assetKey` for a full-SHA-256 Hub IMAGE asset. PNG, JPEG, and GIF
+are limited to 4096×4096. For video, provide exactly one same-file `videoHash` or
+public `videoUrl` for MP4, MOV, or WebM up to 100 MB. URLs must need no
+credentials. Reuse `figmaImageHash`, `figmaImageHashes`, or `figmaVideoHashes`
+from `get_code` only in the same file; they identify native media, not preview
+bytes.
+
+A Pattern uses exactly one existing `sourceNodeId` or same-result
+`sourceCanvasKey`.
+
+## Layout aids
+
+Prefer a matching Grid style. Otherwise `figma.layoutGrids` declares ordered
+row, column, or square grids on frames, components, sets, and instances. Use
+`"AUTO"` for automatic row or column count. Do not bind `sectionSize` with
+`STRETCH` or `offset` with `CENTER`.
+
+`figma.guides` is the complete ordered X/Y guide list: omission preserves and
+`[]` clears. Page guides live under `page.guides`.
+
+For wrapping linear Auto Layout, `figma.autoLayout` may set signed
+`itemSpacing`, positive or synchronized-null `counterAxisSpacing`, and
+`itemReverseZIndex`. Never declare one physical gap in both classes and native
+state.
diff --git a/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/resource-mapping.md b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/resource-mapping.md
new file mode 100644
index 00000000..4d3f3db8
--- /dev/null
+++ b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/resource-mapping.md
@@ -0,0 +1,138 @@
+# Use resources in Canvas classes
+
+Keep layout and visual composition in markup. Put a reusable value's native
+identity in the catalog or a call-scoped `theme`, then reference it by class.
+Variables remain bound Figma variables, including mode changes. A `type-*`
+class binds an entire native TextStyle. Ordinary utilities such as `gap-4` and
+`text-base` remain literals and do not create or discover resources.
+
+## Existing system
+
+When the applicable system permits reuse, discover it with `get_design_system`.
+Use returned variable `cssName` and TEXT-style `className` with its `catalogId`:
+`bg-(--surface)`, `gap-(--spacing-content)`, `type-body`. These are examples of
+names, not assumed resources. Read a style's exact ref when its font, metrics,
+or bindings affect the choice.
+
+The catalog uses valid WEB code syntax when available, otherwise derives a
+name. It disambiguates collisions and keeps the resulting alias tied to one
+exact identity for that catalog's lifetime. Use the returned name unchanged;
+never derive identity from equal values, similar names, or another catalog.
+
+For task-specific names, add `theme.variables: { "--surface": { "ref": "v1" } }`
+or `theme.textStyles: { "type-body": { "ref": "s1" } }`. Use returned refs. An
+alias cannot replace another catalog alias with a different resource. A stable
+authoring key and catalog ref for the same native identity may share an alias.
+
+## New system
+
+When the deliverable includes a design system, define the selected variables
+and styles through `variableCollections` and `styles`. Map their stable keys in
+`theme` and consume them in the same call. A primitive draft without a system
+still uses ordinary classes; repetition alone does not require resource creation.
+
+This complete recipe illustrates the relationship. Change the design facts,
+namespace resource keys for the product, and confirm the font family/style in
+the environment before authoring it.
+
+```json
+{
+ "mode": "create",
+ "markup": "
Account settings
",
+ "theme": {
+ "variables": {
+ "--surface": { "variableKey": "product/color/surface" },
+ "--content-gap": { "variableKey": "product/space/content" }
+ },
+ "textStyles": { "type-body": { "styleKey": "product/type/body" } }
+ },
+ "variableCollections": {
+ "product/theme": {
+ "name": "Product/Theme",
+ "modes": { "light": { "name": "Light" }, "dark": { "name": "Dark" } },
+ "variables": {
+ "product/color/surface": {
+ "name": "Surface",
+ "type": "COLOR",
+ "codeSyntax": { "WEB": "var(--surface)" },
+ "values": {
+ "light": { "r": 1, "g": 1, "b": 1 },
+ "dark": { "r": 0.08, "g": 0.09, "b": 0.11 }
+ }
+ },
+ "product/space/content": {
+ "name": "Space/Content",
+ "type": "FLOAT",
+ "values": { "light": 16, "dark": 16 }
+ }
+ }
+ }
+ },
+ "styles": {
+ "product/type/body": {
+ "type": "TEXT",
+ "name": "Product/Typography/Body",
+ "fontName": { "family": "Inter", "style": "Regular" },
+ "fontSize": 16,
+ "lineHeight": { "unit": "PIXELS", "value": 24 }
+ }
+ }
+}
+```
+
+On later calls, retain the small `theme` mapping and omit resource definitions
+unless changing them. The stable keys resolve the same native resources. The
+mapping is local to the call, so different screens can use different aliases
+without changing the file's naming. Authoring keys and native identities
+persist; aliases do not create a second resource registry.
+
+Use [variables.md](variables.md) for modes, aliases, scopes, and resource updates;
+use [local-styles.md](local-styles.md) for style definitions. A TextStyle may
+bind selected typography primitives through its `variables` fields when those
+values must change together. Do not create font-family, size, or weight tokens
+solely to express a single named text role: the TextStyle can hold those facts.
+
+## Supported variable utilities
+
+Both `gap-(--space)` and `gap-[var(--space)]` work. Explicit type hints resolve
+ambiguous Tailwind prefixes, for example `text-(length:--body-size)` versus
+`text-(color:--foreground)`.
+
+| Utility | Native value |
+| ---------------------------------------------------------------------- | ------------------------------------------------------- |
+| `bg-(--surface)`, `text-(--foreground)`, `border-(--border)` | COLOR fill or stroke; border still needs a width |
+| `w/h/size/min-w/max-w/min-h/max-h-(--value)` | FLOAT dimensions, in pixels |
+| `gap/gap-x/gap-y-(--value)` | FLOAT layout gaps, in pixels; axes follow flex or grid |
+| `p/px/py/pt/pr/pb/pl-(--value)` | FLOAT padding, in pixels |
+| `rounded/rounded-tl/rounded-tr/rounded-br/rounded-bl-(--value)` | FLOAT corner radius, in pixels |
+| `border-(length:--width)` | FLOAT stroke width, in pixels |
+| `text-(length:--size)`, `leading-(--leading)`, `tracking-(--tracking)` | FLOAT font size, line height, letter spacing, in pixels |
+| `font-(family-name:--family)` | STRING font family |
+| `font-(--weight)` | FLOAT font weight, 1–1000 |
+| `opacity-(--opacity)` | FLOAT opacity, 0–1 |
+
+The tool reads an initial native value itself and retains the variable binding;
+do not add a second literal fallback class. Native node, layout, and scope rules
+still apply. This is a bounded mapping to Figma fields, not a CSS engine: no
+`calc()`, var fallbacks, arbitrary expressions, or cascade. FLOAT metrics use
+the native units above, not unitless CSS line-height multipliers.
+
+## Typography ownership
+
+`type-body` consumes the whole TextStyle. Keep color, sizing, alignment, and
+wrapping classes on the text node as needed; omit font, weight, size, leading,
+tracking, case, and decoration overrides owned by that style. Choose another
+style or explicitly unlink the style for a deliberate local treatment. Composite
+typography has no single Figma variable type, so `type-*` is an explicit custom
+utility convention rather than a Tailwind default or a fabricated CSS variable.
+
+Inline `data-var-*`, `data-style-*`, and `native` bindings remain available for
+fields outside this subset, exact native fonts/styles, and explicit unlinking.
+Use one mechanism per property. Unknown names, conflicting declarations,
+incompatible types, and cyclic variable aliases require correction; the tool
+does not guess a replacement.
+
+Updates preserve omitted native state. Removing a resource class or replacing
+it with a literal does not unlink the existing binding: explicitly clear the
+variable/style with its `data-var-*="none"`, `data-style-*="none"`, or supported
+`native` null binding when that is the intended change.
diff --git a/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/rich-text.md b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/rich-text.md
new file mode 100644
index 00000000..3e26cc97
--- /dev/null
+++ b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/rich-text.md
@@ -0,0 +1,52 @@
+# Rich text and hyperlinks
+
+Use this reference for native font application or Figma-only text behavior;
+use [typefaces.md](typefaces.md) when font selection or availability needs resolving.
+Use `span` for editable text. Put whole-node typography in classes, a catalog
+Text style, or semantic variable bindings when possible.
+
+`native[key].figma.text` supports:
+
+- exact whole-node `fontName`, `autoRename`, vertical alignment, and leading
+ trim;
+- paragraph indent/spacing, list spacing, hanging punctuation/list;
+- whole-node hyperlink;
+- ordered rich-text `ranges`.
+
+Do not combine `autoRename: true` with fixed `figma.name`.
+
+When no Text style or typography variable expresses the chosen family and
+style, use the exact available Figma font:
+
+```json
+{
+ "fontName": { "family": "IBM Plex Sans", "style": "Medium" }
+}
+```
+
+Do not combine it with `font-*` classes, linked Text styles, or font family/style
+variables. Never guess family or style availability.
+
+Range `start` and `end` are UTF-16 offsets into final characters. Ranges must be
+ordered, non-overlapping, and set at least one property; split overlapping
+intentions into disjoint intervals. A range may set font name/size, case,
+letter spacing, line height, complete underline state, native fills, Text/Paint
+style, list options, indentation, paragraph spacing, hyperlink, and supported
+text-range variables.
+
+Use `{ "ref": "s1" }` for a catalog range style and `{ "ref": "v1" }` for a
+range variable. `null` unlinks supported styles or hyperlinks; omission
+preserves.
+
+Hyperlinks support URLs and node targets. For a same-result target:
+
+```json
+{
+ "type": "NODE",
+ "value": { "canvasKey": "settings/help" }
+}
+```
+
+The target may appear later in markup; never remove a live hyperlink target. If
+a catalog component exposes text through a prop, set that prop instead of
+editing internal layers.
diff --git a/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/style-grounding.md b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/style-grounding.md
new file mode 100644
index 00000000..2a83efca
--- /dev/null
+++ b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/style-grounding.md
@@ -0,0 +1,80 @@
+# Ground design judgment
+
+Use this reference for a new direction, material redesign, or consequential
+uncertainty not settled by the user or an established source. Exact reproduction
+and mechanical edits use their supplied evidence directly.
+
+## Inspect what can change the decision
+
+Start with the nearest credible evidence: the supplied design or implementation,
+real product states, primary platform requirements, or adjacent visual work.
+Choose separate evidence for behavior and visual expression when needed. A
+functional walkthrough can establish behavior without settling visual language;
+a visually relevant product state or adjacent visual work can show how density,
+controls, surfaces, icon/text economy, and states cohere without establishing
+behavior it does not expose. One artifact may inform both only when the relevant
+behavior and pixels are actually inspected.
+
+Open the relevant state at useful scale. A homepage or brand campaign may not
+show the working interface. Search cards, prose, remembered products, generated
+images, and failed retrievals are not inspected visual precedents. A content
+photograph establishes what it depicts, not the surrounding application's
+interaction or composition. Follow the main skill's first-write evidence
+boundary when retrieval fails.
+
+An image-search result that exposes only a screenshot description or URL remains
+a search card. Open the actual product-state pixels at useful scale before
+treating them as visual grounding; otherwise use the result only as behavioral
+description.
+
+Research is grounded when it changes, confirms, or reopens a material decision
+in the new result. Retain enough source identity and context to support that
+claim; do not invent a source-by-source decision report. If a source contributed
+nothing consequential, do not cite it as a precedent. Generic expertise helps
+interpret the evidence; its familiar defaults are not evidence about this
+product.
+
+There is no source quota. Stop when further investigation is unlikely to change
+a material choice. Do not research routine decisions for ceremony. Keep source
+screens outside the authored result unless the user asked to place or reproduce
+them, and preserve required source content and behavior when adapting a design.
+
+## Form a provisional direction
+
+Integrate the brief, evidence, and professional judgment into a relationship
+among content, state, and action, with a visual language that makes it fitting
+and perceptible. A new design needs its own solution; independence is not a
+reason to discard an applicable interaction or representation because it is
+harder to source or serialize.
+
+Before the first write, be able to state privately what the inspected pixels
+changed or confirmed about the recurring visual language. A mood label or
+task-themed palette is not that direction; if the same control and surface
+grammar could survive a noun swap, inspect more relevant pixels or reconsider
+the synthesis.
+
+Resolve recurring visual roles enough to try them in a real composition. The
+foundation is provisional and may change after seeing pixels. It is not a
+separate foundation board or permission to create components, variables, or
+styles outside the task's resource scope.
+
+Reconsider choices whose only justification is habit or semantic association.
+Ask what in the brief or inspected reality makes the proposed treatment fit.
+Familiar solutions can be appropriate; choosing the opposite of a criticized
+motif is no stronger evidence. Functional specificity alone does not settle
+expression, and stylistic difference alone does not make the product useful.
+
+## Externalize unresolved visual choices
+
+If materially different visual hypotheses remain and a capable image-generation
+tool is available, a bounded visual exploration can help you see their
+consequences. Open those pixels and use them to reconsider the composition;
+omit this step when the direction is already clear.
+
+Generated concepts are speculative sketches, not real-product evidence or
+flattened Figma deliverables. Do not trust their text/data or trace them
+literally. A generated subject chosen as actual product content is a separate
+asset decision under `visual-assets.md`.
+
+Return to the representative native composition and inspect it. Let a mismatch
+reopen the decision it actually challenges; otherwise complete the design.
diff --git a/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/typefaces.md b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/typefaces.md
new file mode 100644
index 00000000..185284bc
--- /dev/null
+++ b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/typefaces.md
@@ -0,0 +1,48 @@
+# Choose and apply fonts
+
+Use this reference when selecting or changing fonts, delivering a required
+family/style, or resolving uncertainty about the text's scripts. Availability
+can change a provisional choice; query before committing when that matters.
+
+Start from applicable Text styles, typography variables, project fonts, or
+supplied references. Preserve established font identities for ordinary edits.
+For a new direction, form candidates from the language, text roles, density,
+and visual intent. A portable `font-sans|serif|mono` category does not establish
+an exact family or suitable coverage for the actual text.
+
+## Query what can change the choice
+
+`get_design_system` with `scope: "fonts"` reads the environment without scanning
+file resources. It is valid for direct composition, reuse, and an independent
+system, including a blank page.
+
+- With candidate family names, use `families: ["Noto Sans SC"]` to inspect
+ exact native style names and missing families in one call; batch candidates.
+- Use `query: "Noto"` when the family name itself needs discovery. This searches
+ names, not language coverage or visual suitability.
+- Continue `nextCursor` with the same filters only when more results could
+ affect the choice. Reuse current evidence rather than querying per text node.
+
+Use returned or source-established native names. For an unavailable provisional
+candidate, reconsider the choice. For a required font, preserve the requirement
+and disclose the delivery gap rather than silently substituting another family.
+
+## Apply the selected typography
+
+Reuse the applicable TextStyle or font variables. If a new design system is in
+scope, define the selected text roles as TextStyles and consume their `type-*`
+classes through [resource-mapping.md](resource-mapping.md). Font selection alone
+does not require creating styles or tokens.
+
+For direct composition, `font-[family-name:Noto_Sans_SC] font-semibold` fixes
+the family and chooses its closest available weight. Underscores encode spaces;
+`\_` preserves an underscore. Use `native[key].figma.text.fontName` with exact
+`{ family, style }` when the native style identity matters; see
+[rich-text.md](rich-text.md). Weight matching is approximate. For variable-driven
+typography, consider the family/weight/style combinations in the delivered modes.
+
+Inspect representative real content in the composition, including relevant
+scripts, numbers, punctuation, and wrapping. Availability and successful loading
+do not prove glyph coverage; a correct-looking screenshot alone does not prove
+native font identity or current editability. Reopen the font choice when the
+observed text challenges it, without requiring a separate specimen board.
diff --git a/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/variables.md b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/variables.md
new file mode 100644
index 00000000..692a8699
--- /dev/null
+++ b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/variables.md
@@ -0,0 +1,154 @@
+# Author local variables
+
+Use this reference after the representative pixel check when repeated colors
+may carry shared semantic roles, or when the user or resolved system plan
+requires local variables. Do not extract tokens from an ordinary screen. New
+resources need no catalog; send `catalogId` only for deliberate nested
+`{ "ref": "…" }` reuse.
+
+## Contents
+
+- [Decide from real roles](#decide-from-real-roles)
+- [Author variables](#author-variables)
+- [Bind and verify](#bind-and-verify)
+- [Update and remove](#update-and-remove)
+
+## Decide from real roles
+
+After any selected representative component reconciliation and before
+propagation, call full `get_code` with unresolved tokens only when repeated
+colors plausibly represent semantic roles whose coordinated maintenance matters.
+Treat `literalClusters` as candidate locations, not a to-do list. Select a role
+only when concrete consumers should evolve together; split mixed roles even
+when their literal values match. Leave incidental, local, and ambiguous
+repetition literal. If the diagnostic is unavailable, do not infer a system
+from repetition.
+
+For each selected role, map concrete consumer and field to a semantic variable
+key, bind every representative consumer, then re-run once to confirm the role is
+exposed through `tokens` and no longer unresolved. A non-empty
+`literalClusters` result is acceptable.
+
+Carry only selected mappings into propagation. A later apply that includes a
+consumer of a selected role must bind that field in the same call; an inherited
+instance binding does not cover sibling literals. Before finalization, scan each
+materially distinct dependent root that uses a selected role once, fix missing
+bindings for those roles, and recheck only changed roots. Do not create variables
+to empty diagnostics, expand the map from literal equality, or repeat scans after
+the selected roles are verified.
+
+## Author variables
+
+Copy this recipe and change its design facts. Collection and variable authoring
+keys persist file-wide and are neither names nor IDs. Choose one
+collision-resistant prefix for the independent system; recover existing exact
+keys when intentionally updating it. Mode keys are collection-scoped.
+
+```json
+{
+ "mode": "create",
+ "markup": "
Account
",
+ "variableCollections": {
+ "product/theme": {
+ "name": "Theme",
+ "modes": {
+ "light": { "name": "Light" },
+ "dark": { "name": "Dark" }
+ },
+ "variables": {
+ "product/color/surface": {
+ "name": "Color/Surface",
+ "type": "COLOR",
+ "scopes": ["ALL_FILLS"],
+ "values": {
+ "light": { "r": 1, "g": 1, "b": 1 },
+ "dark": { "r": 0.08, "g": 0.09, "b": 0.11 }
+ }
+ },
+ "product/space/md": {
+ "name": "Spacing/Medium",
+ "type": "FLOAT",
+ "scopes": ["GAP"],
+ "values": {
+ "light": 16,
+ "dark": 16
+ }
+ }
+ }
+ }
+ },
+ "native": {
+ "card": {
+ "variables": {
+ "fill": { "variableKey": "product/color/surface" },
+ "gap": { "variableKey": "product/space/md" }
+ },
+ "variableModes": {
+ "product/theme": "dark"
+ }
+ }
+ }
+}
+```
+
+A new collection needs `name` and at least one named mode. Each variable needs
+`name`, `type`, and a value for every mode. Types are `BOOLEAN`, `COLOR`,
+`FLOAT`, and `STRING`. Values may alias another variable:
+
+```json
+{ "variable": { "variableKey": "…" } }
+```
+
+Valid scopes:
+
+- general: `ALL_SCOPES`, `TEXT_CONTENT`, `CORNER_RADIUS`, `WIDTH_HEIGHT`, `GAP`,
+ `OPACITY`;
+- color: `ALL_FILLS`, `FRAME_FILL`, `SHAPE_FILL`, `TEXT_FILL`, `STROKE_COLOR`,
+ `EFFECT_COLOR`;
+- numeric effect/stroke: `STROKE_FLOAT`, `EFFECT_FLOAT`;
+- typography: `FONT_FAMILY`, `FONT_STYLE`, `FONT_WEIGHT`, `FONT_SIZE`,
+ `LINE_HEIGHT`, `LETTER_SPACING`, `PARAGRAPH_SPACING`, `PARAGRAPH_INDENT`.
+
+Use `STROKE_COLOR`, not `ALL_STROKES`. Combine neither `ALL_SCOPES` with other
+scopes nor `ALL_FILLS` with `FRAME_FILL`, `SHAPE_FILL`, or `TEXT_FILL`;
+`ALL_FILLS` may coexist with a non-fill scope such as `STROKE_COLOR`.
+
+## Bind and verify
+
+Bind through `native[key].variables` using the exact supported field, such as
+`fill`, `stroke`, `gap`, `paddingTop`, `width`, `visible`, `fontSize`, or
+`characters`. Retain a matching literal class when Figma needs an initial paint
+or numeric fallback.
+
+Bind each variable to representative fields performing its semantic role.
+Prefer `GAP` for shared gaps/padding, `WIDTH_HEIGHT` for semantic control/icon
+sizes, and `CORNER_RADIUS` for shared radii. Do not tokenize viewport dimensions,
+one-off crops, content-derived geometry, or optical corrections merely because
+numbers repeat.
+
+A representative binding proves usability, not complete coverage. Bind every
+consumer intended to evolve with the role; keep equal peer literals only when
+incidental or independently owned.
+
+`apply_canvas` reports `unbound-created-variable` when a new variable lacks a
+same-result consumer. Bind it to a real consumer or remove it. A staged warning
+may be temporary, but final delivery must show a native binding; equal literals
+do not count.
+
+`variable-fallback-mismatch` means a bound literal matches none of the
+same-call variable's direct or aliased mode values. Align the fallback with a
+real mode or bind the variable that owns the value, or the binding will silently
+change the declared markup.
+
+## Update and remove
+
+After changing a variable value, update and verify every intended consumer that
+cannot carry a native binding, such as `figma.svg.color`; omission leaves its
+old literal in place.
+
+Omission preserves managed state. Top-level `null` removes a managed variable,
+mode, or collection only when absence is required and all consumers are cleared
+or removed in the same result. Never mutate remote resources, invent parent
+collections or library keys, or build a broad token system for one screen.
+Extended collections must inherit a real local or catalog collection and obey
+plan limits.
diff --git a/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/visual-assets.md b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/visual-assets.md
new file mode 100644
index 00000000..eaa3d4c8
--- /dev/null
+++ b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/visual-assets.md
@@ -0,0 +1,57 @@
+# Choose and preserve visual assets
+
+Use this reference after the design selects an icon, image,
+illustration, diagram, or vector asset. It governs role, medium, source
+integrity, editability, and delivery—not whether the design should contain that
+asset or what the finished visual style should be.
+
+Research pixels and generated screen concepts remain evidence for judgment,
+not canvas content. Import, reproduce, annotate, or compare them only when the
+user explicitly requests that treatment. When evidence establishes that the
+new product needs an asset role, acquire or author a truthful asset for the new
+result instead of redrawing or embedding the reference.
+
+## Preserve the decided role
+
+Start from the composition, not an available tool or assumed asset slot. Once a
+material role is selected, fulfill it faithfully; sourcing difficulty is not a
+reason to replace an image, icon, visualization, or exact medium with easier
+text or plausible geometry.
+
+Depiction is a role, not a medium. Choose raster, sourced vector,
+agent-authored vector, diagram, or another medium only when the brief, inspected
+evidence, or a low-consequence assumption supports it. Convenience never
+changes the medium.
+
+Treat content-bearing visualization—such as a chart, map, waveform, notation,
+document or media preview, or domain instrument—as a first-class
+representation. Identify the user decision and the visual structures that make
+it possible. Preserve enough context and density to act; a stylized trace or
+labeled decoration is not the representation. When only topology or sequence
+is intended, name and design it as a diagram.
+
+When recognition depends on a subject's real appearance—such as a person,
+product, food, place, room, photograph, cover, or shared-media preview—preserve
+that distinction with a real sourced or generated image unless the brief or
+inspected evidence independently establishes an illustrated language.
+
+Preserve editability semantics. Build changing diagram labels, shapes, and
+relationships as native structure; use an opaque SVG only when exact vector art
+is the asset. An SVG wrapper with Vector descendants does not make a diagram
+model editable. If editable primitives cannot carry a required representation,
+use an evidence-supported native, vector, or raster base with changing overlays
+editable, or disclose the gap.
+
+For material assets retain enough evidence for identity and content fidelity,
+provenance and applicable rights, source quality, and Canvas-compatible form.
+Never silently change subject, style, or medium. Crops, masks, overlays, and
+retouching must preserve the depicted subject; do not hide distinctive branding
+or features to make one subject represent another.
+
+## Load only the selected branch
+
+- For an icon role, read [icons.md](icons.md).
+- For an image or illustration, read [images.md](images.md).
+
+For diagrams and other custom vector art, use the source and editability
+boundaries above, then load only the required geometry or paint mechanics.
diff --git a/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/visual-composition.md b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/visual-composition.md
new file mode 100644
index 00000000..27993d33
--- /dev/null
+++ b/agent-plugins/tempad-dev/skills/figma-canvas-authoring/references/visual-composition.md
@@ -0,0 +1,64 @@
+# Compose a product interface
+
+Use this reference when forming or reconsidering a composition. Keep the
+person's working experience in view; use the questions below only where they
+help resolve a decision. They are not independent quality axes.
+
+## Find the working relationship
+
+What is the person attending to, and what can they do with it in the depicted
+state? Does the chosen screen or flow expose the user's central work, or merely
+promise it through a button whose destination is absent? What changes across
+states, and what must remain perceptible while that happens? Arrange content,
+controls, and context so their relationship is understandable in the rendered
+whole.
+
+A familiar shell may be the right answer. Reconsider it when it hides the
+working object, requires unnecessary reading or navigation, or survives only
+because task-specific nouns make it look relevant. Novelty and decoration do
+not repair that mismatch.
+
+As content grows, what extends: the document or an owned scrolling region?
+Choose document flow, a fixed workspace, or a hybrid from product behavior;
+check that making room has not silently redefined the device or window viewport.
+Density and control scale follow platform, frequency, precision, and environment
+of use. In frequent expert work, inspect the real product's interaction economy
+before carrying over the spacing and repeated explanations of an occasional
+consumer journey. Preserve legibility and suitable targets in either case.
+
+## Make meaning perceptible
+
+What should someone notice now, and what should stay available without
+competing? Resolve type, position, scale, color, contrast, media, depth, and space
+together. Repeated roles need recognizable treatment; differences need to carry
+meaning in this task. An expressive role does not by itself justify the first
+familiar palette, shape, or effect.
+
+Choose text, icons, images, and graphics by recognition, comparison,
+manipulation, and expression. Familiar iconographic affordances can reduce the
+reading and space required by repeated controls; words can be more precise.
+Inspect that tradeoff at actual size, including when every action has become
+text. Source selected icons through `visual-assets.md`; sourcing effort is not
+a design reason to drop their role.
+
+A working graphic must carry the distinctions needed for the decision. Check
+whether its marks, scale, context, and state make the relevant comparison or
+manipulation possible. Changing a label does not change what the marks encode. This is a question
+of represented meaning, not a quota for detail or a preferred graphic style. Use `visual-assets.md` for truthful
+source and native representation.
+
+## Learn from the rendered result
+
+Open the representative composition at useful scale. Mentally follow the
+central action through its visible consequences. Does the selected state agree
+with the working surface, available action, and result? If the experience breaks,
+inspect the particulars that explain where and why.
+
+Judge spacing from visible relationships: nested insets, seams, baselines,
+grouping, and repeated rhythm. Nominal padding or a non-overflowing bounding box
+does not prove that the intended space survived native layout. Repair the
+owning relationship instead of decorating over it.
+
+Carry resolved shared roles into dependent screens while allowing their layouts
+to differ with the work. Stop when the requested whole is coherent and the
+observed defects are resolved; do not keep polishing to fill a checklist.
diff --git a/agent-plugins/tempad-dev/skills/figma-design-to-code/SKILL.md b/agent-plugins/tempad-dev/skills/figma-design-to-code/SKILL.md
index a65e8e30..a5bb5f20 100644
--- a/agent-plugins/tempad-dev/skills/figma-design-to-code/SKILL.md
+++ b/agent-plugins/tempad-dev/skills/figma-design-to-code/SKILL.md
@@ -1,392 +1,177 @@
---
name: figma-design-to-code
description: >-
- Implement or update project-consistent UI code from a Figma selection or
- nodeId using TemPad Dev MCP. Use when the user wants visible Figma UI
- recreated, ported, or integrated into the target project's framework,
- styling system, tokens, and existing components when available. Do not use
- for design critique, product invention, generic code review, or for guessing
- hidden states, responsiveness, or behavior not shown in design or project
- evidence.
-metadata:
- version: '4.3'
+ Implement or update project-consistent UI code from a visible Figma selection
+ or nodeId using TemPad Dev MCP. Use when the user wants Figma UI recreated,
+ ported, or integrated into the target project's framework, styling system,
+ tokens, assets, and existing components. Do not use for design critique,
+ product invention, generic code review, or guessing states, responsiveness,
+ or behavior not evidenced by Figma, the project, or the user.
---
-# TemPad Dev: Figma Design to Code
+# Implement Figma design in code
-Use this skill to turn TemPad Dev design evidence into project-consistent UI
-code.
+Turn visible Figma evidence into the smallest project-native implementation
+that preserves the intended result. Keep that result focal: project files,
+TemPad output, rules, and tool calls are evidence for the implementation, not
+deliverables to reproduce mechanically.
-TemPad Dev MCP must be available and able to provide trustworthy design
-evidence for the current selection or provided `nodeId`. If not, stop and tell
-the user to enable or reconnect TemPad Dev MCP.
+Require TemPad Dev MCP to provide trustworthy design evidence for the current
+selection or an exact `nodeId` inside the user's established scope. Never
+reconstruct the design from memory, screenshots alone, or `get_structure`
+metadata.
-Within this skill, TemPad Dev MCP is the authoritative source of design
-evidence. Treat:
+## Evidence and authority
-- project files and project instructions as implementation truth when available
-- TemPad Dev output as design truth
-- the user as the source of truth for missing product or implementation
- decisions
+Use each source only for what it can establish:
-Do not infer project conventions before reading local evidence.
+- **The user** sets scope, requirements, prohibitions, and missing product or
+ implementation decisions.
+- **The project** sets framework, file placement, component boundaries,
+ styling, tokens, assets, dependencies, and verification conventions.
+- **TemPad Dev** sets visible structure and rendered design facts.
-For concerns orthogonal to Figma-to-code translation, follow project
-instruction files such as `AGENTS.md` and other project instructions instead of
-defining new policy in this skill. If such a concern is unspecified there and
-would materially change the implementation, ask the user or stop.
+Follow project instruction files for concerns outside Figma-to-code
+translation. Do not add policy for routing, analytics, i18n, CMS, or other
+orthogonal systems.
-## Evidence model
+TemPad can establish visible hierarchy, layout, spacing, typography, color,
+effects, token references, exported assets, and codegen unit context. It cannot
+establish unevidenced states, responsive behavior, business logic, navigation,
+validation, analytics, or project conventions. Treat `get_structure` as
+hierarchy and geometry evidence only, never as missing style truth.
-Use three evidence channels for different jobs:
+## Workflow
-- **Project evidence**: `AGENTS.md` or equivalent project instruction files,
- design-system docs, token/theme docs, component docs, existing primitives,
- nearby implementations, framework/styling config, asset rules, and project
- scripts
-- **Design evidence**: `tempad-dev:get_code` first for markup, styles, tokens,
- assets, warnings, and codegen facts; `tempad-dev:get_structure` only for
- hierarchy, geometry, overlap, and retry targeting
-- **User input**: missing behavioral intent, responsive intent, target file,
- acceptable tradeoffs, asset or dependency decisions, or other product or
- implementation decisions that cannot be recovered from project or design
- evidence
+### 1. Establish the implementation envelope
-## What TemPad Dev can and cannot prove
+Read only local evidence that can change this implementation, in this order:
-TemPad Dev can prove:
+1. applicable `AGENTS.md` or equivalent instructions;
+2. relevant design-system, token, component, and asset guidance;
+3. the nearest comparable implementation and reusable primitives;
+4. framework, styling, and check configuration needed for this task.
-- the visible structure of the current selection or a provided `nodeId`
-- explicit layout, spacing, typography, color, radius, borders, shadows,
- gradients, masks, filters, compositing, and other rendered visual details
-- token references and values when present
-- exported assets and whether an SVG may safely adopt one contextual color
- channel via `themeable`
-- codegen facts such as actual output language, `cssUnit`, `scale`, and
- `rootFontSize`
+Determine the target file or component boundary, framework, styling method,
+token and asset paths, reuse candidates, dependency constraints, and narrowest
+relevant checks. Inspect Tailwind version and theme scales only when the
+project actually uses Tailwind-compatible tooling.
-TemPad Dev cannot prove:
+Do not inventory the repository broadly after the needed envelope is clear. If
+a missing project decision would materially change the result, ask before
+implementation.
-- hidden, hover, active, loading, error, empty, disabled, or responsive states
- unless separately evidenced
-- non-visual product requirements such as behavior, business logic, validation,
- navigation, or analytics
-- project conventions, file placement, component boundaries, primitive-reuse
- policy, token-mapping policy, or asset workflow beyond what the project
- already establishes
-- missing style truth from `get_structure`; it is only a structure aid
+### 2. Read the design at the requested scope
-## Default operating rules
+Call TemPad Dev's `get_code` before implementing:
-Do not output `data-hint-*` attributes.
+- use `resolveTokens: false` by default;
+- omit `nodeId` for the current single selection; pass one only when the user
+ supplied it or TemPad returned the exact ID for a targeted read inside the
+ user's established scope;
+- set `preferredLang` from the established project target;
+- keep TemPad's default vector behavior unless the user explicitly requests
+ asset-preserving vector fidelity and the active MCP version supports it.
-Never invent visual details or behavior not evidenced, including color,
-typography, spacing, radius, borders, shadows, gradients, opacity, overlays,
-blur, hidden states, responsive behavior, interactions, or asset semantics.
+Use `resolveTokens: true` only when the user explicitly does not want design
+token references. Treat returned `lang` as authoritative because plugin
+configuration may override `preferredLang`.
-Treat advanced or uncommon style output from TemPad Dev as intentional unless
-project constraints force an adaptation.
+Retain the returned `code`, `lang`, `warnings`, `assets`, `tokens`, and
+`codegen` facts that bear on the implementation. Use
+`codegen.config.{cssUnit,rootFontSize,scale}` for exact unit conversion.
-Only ask the user when the answer would materially change the implementation and
-cannot be established from project or design evidence. Typical blockers:
+Prefer one top-level read that preserves the requested composition. If the
+tool is unavailable, points at the wrong file, or returns incomplete evidence,
+read [recovery.md](references/recovery.md) before doing anything else.
-- more than one plausible target file or component boundary
-- more than one plausible existing primitive or abstraction to reuse
-- missing behavior, state, or responsive intent
-- asset, dependency, or token workflow requiring a product decision
+### 3. Separate facts, adaptations, and gaps
-If a gap is minor and non-blocking, proceed with a clearly stated inference.
+Before editing, distinguish:
-Prefer the **smallest safe change**. Do not perform unrelated refactors or add
-new abstractions unless project patterns clearly call for them.
+- **design facts** to preserve;
+- **project-native adaptations** supported by existing components, tokens,
+ utilities, or asset conventions;
+- **unevidenced product decisions** that must remain unimplemented or be asked.
-Do not enter open-ended visual tuning loops without new evidence. If remaining
-differences cannot be proved from project or design evidence, warn clearly and
-stop or hand off for user validation.
+Map by rendered value and semantics, not by a convenient name. A familiar
+component or token is a candidate, not proof of equivalence. If more than one
+material implementation path remains equally plausible, ask the user. Infer
+only low-consequence details and report any inference that affects the result.
-## Workflow
+### 4. Implement the smallest coherent change
+
+- Keep the established framework, styling system, file placement, imports, and
+ abstraction level. Do not introduce a parallel system.
+- Reuse an existing primitive only when its semantics and rendered behavior fit
+ without guessing. Do not force reuse that erases design facts.
+- Preserve exact rendered values unless project evidence proves an equivalent
+ token, utility, or component. For `rem` output, convert with TemPad's actual
+ `cssUnit`, `rootFontSize`, and `scale`.
+- Preserve intentional uncommon output, including pseudo-elements, filters,
+ masks, blend and backdrop effects, gradients, and non-default compositing,
+ unless a documented project constraint requires an adaptation.
+- Implement only evidenced states and responsiveness. Do not invent hover,
+ loading, error, empty, disabled, or responsive behavior.
+- Use native semantic elements and preserve keyboard access and accessible
+ names when an established primitive does not already provide them.
+- Add no runtime or build dependency without user approval unless the user has
+ explicitly waived that constraint.
+- Keep `data-hint-*` attributes out of shipped code.
+
+When TemPad returns relevant entries, load only the matching protocol:
+
+- assets: read [Assets](references/assets-and-tokens.md#assets) and follow the
+ project's asset delivery path;
+- token references: read [Tokens](references/assets-and-tokens.md#tokens) and
+ follow the project's token workflow.
+
+Read both when both are present and skip both when neither is present.
+
+Do not enter a visual tuning loop. Change the implementation again only when
+new project, design, tool, or verification evidence identifies a concrete
+defect.
+
+### 5. Verify in the project's real workflow
+
+Run the narrowest relevant checks defined by project instructions and scripts.
+Repair implementation failures and rerun the affected checks. Use an existing
+preview, screenshot, or comparison workflow when available; do not invent a
+universal verification matrix.
+
+If no runnable check exists, report the implementation as unverified. Do not
+claim visual completion without a real project comparison path; ask the user
+to confirm the rendered result against Figma.
+
+## Hard stops
+
+Stop instead of shipping when:
-### 1. Read local evidence first
+- TemPad is unavailable, unauthorized, inactive on the intended file, or
+ cannot provide a trustworthy visible parent composition;
+- the target is unreadable or not visible;
+- project, design, and user evidence still conflict after targeted recovery;
+- a missing decision would materially change behavior, structure, dependency,
+ asset delivery, or token mapping;
+- required assets cannot be retrieved or stored under project policy.
-Read local evidence before implementing. Prioritize, in order:
+If blocked, give at most three concrete actions that would unblock the task.
-1. `AGENTS.md` or equivalent project instruction files
-2. relevant design-system, token, and component docs
-3. existing primitives/components and nearby implementations
-4. config files and scripts that constrain output
+## Handoff
-Establish at least:
+Report:
-- framework/runtime and file conventions
-- styling rules, including whether utilities are used and how classes are
- ordered or formatted
-- token/theme system and mode handling
-- asset and icon pipeline
-- reusable primitives/components, file placement, and import path conventions
-- the narrowest established project checks for this change, if any
+- what changed and where;
+- only the relevant adaptation, inference, warning, asset/token handling, or
+ residual visual risk;
+- checks run, their result, and what remains unverified.
+
+Keep absent concerns absent from the handoff. Do not produce a compliance
+checklist for branches the task never used.
-Only if the project actually uses Tailwind or Tailwind-compatible tooling,
-detect Tailwind version and config before changing class syntax or ordering.
+## Decision example
-For Tailwind projects, also inspect the local theme scales relevant to exact-
-value mapping, especially spacing, sizing, radius, and typography.
-
-If a material implementation constraint is still missing after local evidence,
-ask the user instead of inferring it.
-
-### 2. Fetch the top-level design snapshot
-
-Call `tempad-dev:get_code` first.
-
-Use these defaults:
-
-- `resolveTokens: false`
-- pass `nodeId` only when the user provided one; otherwise use the current
- selection
-- set `preferredLang` to match the project target, such as `jsx` or `vue`
-
-Use TemPad's default vector behavior unless the user explicitly asks for
-asset-preserving vector fidelity and the current MCP version clearly supports
-it.
-
-Use `resolveTokens: true` only when the user explicitly does not want
-design-token usage.
-
-Treat returned `lang` as authoritative because TemPad Dev plugin or config may
-override `preferredLang`.
-
-Record these as design facts:
-
-- `code`
-- `lang`
-- `warnings`
-- `assets`, if present
-- `tokens`, if present
-- `codegen`
-
-Use `codegen.config.{cssUnit,rootFontSize,scale}` as the authoritative unit
-context for exact-value mapping.
-
-Prefer fetching the full requested top-level selection first so parent
-composition and containment are not lost.
-
-### 3. Resolve incomplete or conflicting evidence before implementing
-
-If `get_code` warns or fails, narrow uncertainty instead of guessing.
-
-- **`depth-cap`**: keep the returned top-level result as the source of parent
- layout and composition, then use returned `data-hint-id` values to choose
- narrower `get_code` follow-ups for the subtrees you still need.
-- **budget overflow or shell response**: keep the returned parent shell as the
- composition source of truth, then fetch omitted child subtrees separately and
- fill them into that known shell. Prefer the smallest parent container that
- still preserves the shared layout for the child subtrees you must assemble.
- Do not treat plain string truncation as usable evidence.
-- **layout, hierarchy, or overlap uncertainty**: call
- `tempad-dev:get_structure`, but use it only to resolve hierarchy or geometry,
- or to choose a narrower parent-shell retry target. Do not treat it as
- missing style truth.
-- **remaining contradiction**: if project evidence, design evidence, and
- structure evidence still conflict after narrowing, stop.
-- **untrustworthy parent recovery**: if you still cannot obtain a trustworthy
- parent shell or parent composition via `get_code`, stop full implementation
- and ask the user to narrow scope or choose the highest-priority subtree.
-
-Retry policy:
-
-- retry once only for transient transport or connectivity failures
-- do not blind-retry deterministic issues such as invalid selection, hidden
- node, wrong file, `depth-cap`, budget overflow, or unreadable target; change
- scope or inputs first
-
-If TemPad MCP appears unavailable, inactive, or pointed at the wrong file, stop
-and tell the user to:
-
-- enable MCP access in TemPad Dev Preferences > Agent integration
-- keep the correct TemPad Dev / Figma tab active
-- use the MCP badge in the TemPad Dev panel to activate the correct file if
- multiple Figma tabs are open
-
-If asking the user to narrow scope because of budget overflow, report the
-current consumption, limit, and overage from the error text.
-
-### 4. Implement code in the established project style
-
-Translate TemPad Dev output into the implementation's established patterns.
-
-- Reuse existing primitives and abstractions when they fit **without guessing**.
-- Keep the established framework and styling system. Do not introduce a second
- one.
-- Follow established file placement and import conventions.
-- If the implementation is utility-first, keep utilities and match existing
- conventions. Otherwise translate generated utilities into the established
- styling approach while preserving values.
-- Preserve exact values. Do not coarsen arbitrary values such as `py-[4px]`,
- `text-[12px]`, or `font-[600]` into named utilities unless local project
- evidence proves the same rendered value; for `rem` output, use
- `codegen.config.{cssUnit,rootFontSize,scale}` to convert exactly. Apply this
- to spacing, sizing,
- inset, gap, radius, `font-size`, `line-height`, `letter-spacing`, and
- `font-weight`.
-- Implement the base state only unless variants, interactions, or responsive
- behavior are evidenced.
-- Preserve emitted pseudo-elements. If TemPad output includes `before:`,
- `after:`, `content-*`, or equivalent CSS, keep them or use an established
- equivalent with the same rendered result.
-- Preserve other high-fidelity details from `get_code`, including pseudo-
- classes, filters, masks, blend or backdrop effects, and other non-default
- visual properties, unless implementation constraints require adaptation.
-- New runtime or build dependencies require user confirmation unless explicitly
- waived.
-- Extract new abstractions only when repetition plus established patterns
- justify it.
-- If multiple plausible primitives, layout abstractions, or delivery strategies
- fit and evidence does not decide, ask the user instead of guessing.
-
-#### Assets
-
-Follow the established asset policy first.
-
-- Download bytes only from TemPad-provided `asset.url`. Never substitute public
- internet assets.
-- Treat assets as files to save or reference, not as text evidence to parse.
-- If policy forbids storing assets, you may reference TemPad URLs, but you must
- warn that the output depends on the local TemPad asset server.
-- If a vector is emitted as `
+ 
+
+
+
+ 
+ 
+