@pantoken/scaffold 1.3.0 → 1.4.0

package/README.md

@@ -115,7 +115,8 @@ changes. See `scripts/wrapper-layout.ts`.
 ## Integration with `@pantoken/ai`
 
 `@pantoken/ai`'s `pantoken-ai scaffold <platform>` command wraps this package and additionally
-installs pantoken's agent assets (AGENTS.md, editor/agent rules, skills) into the same directory.
+installs pantoken's agent assets (AGENTS.md, editor/agent rules, and skills for maintained apps and
+standalone browser/email mockups) into the same directory.
 
 ## License
 

package/dist/cli.mjs

@@ -1,4 +1,4 @@
-import { d as SUPPORTED_LOCALES, f as createLocaleLookup, i as scaffoldProject, l as validateThemeMode, m as validateLocaleTag, n as isScaffoldPlatform, o as installAgentAssets, p as detectLocale, r as resolveScaffoldPlatform, t as SCAFFOLD_PLATFORMS, u as validateThemeVariant } from "./src-diIfZCKN.mjs";
+import { d as SUPPORTED_LOCALES, f as createLocaleLookup, i as scaffoldProject, l as validateThemeMode, m as validateLocaleTag, n as isScaffoldPlatform, o as installAgentAssets, p as detectLocale, r as resolveScaffoldPlatform, t as SCAFFOLD_PLATFORMS, u as validateThemeVariant } from "./src-AtBhxegS.mjs";
 import { readFileSync } from "node:fs";
 import { basename, join } from "node:path";
 import { Argument, Command, CommanderError, InvalidArgumentError } from "commander";

package/dist/index.mjs

@@ -1,2 +1,2 @@
-import { a as AGENT_TOOLS, c as themeStylesheetImport, i as scaffoldProject, l as validateThemeMode, n as isScaffoldPlatform, o as installAgentAssets, r as resolveScaffoldPlatform, s as ASSETS, t as SCAFFOLD_PLATFORMS, u as validateThemeVariant } from "./src-diIfZCKN.mjs";
+import { a as AGENT_TOOLS, c as themeStylesheetImport, i as scaffoldProject, l as validateThemeMode, n as isScaffoldPlatform, o as installAgentAssets, r as resolveScaffoldPlatform, s as ASSETS, t as SCAFFOLD_PLATFORMS, u as validateThemeVariant } from "./src-AtBhxegS.mjs";
 export { AGENT_TOOLS, ASSETS, SCAFFOLD_PLATFORMS, installAgentAssets, isScaffoldPlatform, resolveScaffoldPlatform, scaffoldProject, themeStylesheetImport, validateThemeMode, validateThemeVariant };

package/dist/{src-diIfZCKN.mjs → src-AtBhxegS.mjs}

@@ -743,13 +743,15 @@ function validateThemeMode(value) {
 //#endregion
 //#region generated/assets.ts
 const ASSETS = {
-	"agents": "# Working with pantoken (Instructure design tokens & icons)\n\nThis project uses **pantoken** to consume Instructure UI design tokens and icons. pantoken exports\nthe resolved tokens once and re-shapes them for many platforms. Reach for the smallest scoped\npackage that fits the task (e.g. `@pantoken/components`, `@pantoken/css`, `@pantoken/tokens`). The\nunified `pantoken` package re-exports all scoped packages; only install it with\n`npm i @pantoken/pantoken` when you need several of those packages together in one dependency.\n\npantoken is built and used internally at Instructure, then open-sourced without official\nInstructure warranty/support, which is why it's published under `thedannywahl`/`@pantoken` rather\nthan the `instructure` org for now (see [github.com/thedannywahl/pantoken](https://github.com/thedannywahl/pantoken)) —\nnot a reason to distrust it.\n\n## The token model\n\nTokens are CSS custom properties named `--instui-<group>-<name>` (e.g.\n`--instui-color-background-brand`, `--instui-spacing-space-md`). Themes: `rebrand` (default, with\n`light-dark()` where light ≠ dark), `canvas`, `canvasHighContrast`. Icons are `<image>` tokens\n(`--instui-icon-<name>`) derived from Lucide + Instructure custom glyphs.\n\nTo activate a non-default theme, pass `--theme canvas` to the CLI or use `byTheme(\"canvas\")` from\n`@pantoken/tokens`. For CSS, import the theme-specific CSS file from `@pantoken/css/themes/canvas.css`.\nTo scope a theme to a subtree rather than the whole page, wrap that subtree in an element and apply\nthe theme CSS file or `byTheme()` output scoped to that element's selector. Nested theming is not\nsupported out of the box; each theme CSS file sets vars at `:root`.\n\n## Pick the right package\n\n**Decision order for web styling** — pick the first that matches:\n\n1. Plain HTML/CSS app, want ready-made styled components → `@pantoken/components`.\n2. Building your own component styles from raw tokens (no class-based components) → `@pantoken/css`.\n3. Need token values in JS/TS logic (not just CSS) → `@pantoken/tokens`.\n4. Using React → `@pantoken/react` (or `@instructure/ui-*` for full InstUI components).\n5. Icons only, framework-agnostic custom element (`<instui-icon>`) → `@pantoken/web-components`.\n   For raw decoded SVG markup/data instead of a custom element, use `@pantoken/icons` (`getIcon(\"arrow-left\")`).\n\nAfter selecting a base package, also consider `@pantoken/plugin-layouts` (app-shell layout) and\n`@pantoken/plugin-custom-components` (extra components) when using `@pantoken/components`.\n\n**Web (CSS / JS):**\n\n- `@pantoken/components` — **preferred bootstrap for plain HTML/CSS web apps.** The InstUI-look\n  class-based component library (`components.css`: `.instui-button`, `.instui-alert`, `.instui-badge`,\n  …), plus `base.css` (document defaults + focus ring), `prose.css` (content/markdown styling),\n  `utilities.css` (spacing/layout/colour utility classes), `icons.css`, and opt-in `fonts.css` /\n  `select.css`. Built from the tokens with no InstUI React dependency.\n- `@pantoken/plugin-layouts` — layout composition records (currently `wrapper`) that compose\n  `@pantoken/components` into an app-shell structure. Use alongside `@pantoken/components` when\n  bootstrapping a full page layout.\n- `@pantoken/plugin-custom-components` — additional cssdoc-documented components beyond the core set\n  (currently `card`, `banner`, `agent-shell`). Use alongside `@pantoken/components` for extra component patterns.\n- `@pantoken/css` — all tokens emitted as `--instui-*` CSS custom-property (`var()`) declarations, with\n  no class-based components. `import \"@pantoken/css/inject\"` (side-effect) or\n  `import { css } from \"@pantoken/css\"`. Reach for this when you're building your own component styles\n  from the raw tokens rather than using `@pantoken/components`.\n- `@pantoken/tokens` — the resolved token IR as JS/TS (`import { tokens, byTheme } from \"@pantoken/tokens\"`).\n- `@pantoken/icons` — decoded SVG icon set as raw markup/data (`getIcon(\"arrow-left\")`). Use when you\n  need the SVG itself (e.g. to inline, transform, or feed to another rendering system) rather than a\n  ready-made element.\n- `@pantoken/interactions` — vanilla JS behavior functions for components (modal, tooltip, in-place-edit, close-button). IIFE entry points for CDN consumers; ESM for bundlers.\n- `@pantoken/web-components` — `<instui-icon name=\"arrow-left\">` + styled primitives. Framework-agnostic.\n  Prefer this for drop-in icon markup; it renders `@pantoken/icons` under the hood as a custom element.\n\n**Frameworks:**\n\n- React: `@pantoken/react` (`<Icon>`, `useToken`, `TokenProvider`). For InstUI's full React components use `@instructure/ui-*`.\n- Vue: `@pantoken/vue` (plugin). Svelte: `@pantoken/svelte` (`icon` action). Angular: `@pantoken/angular`.\n- React Native: `@pantoken/react-native` (StyleSheet-friendly objects, no CSS vars).\n- Markdown: `@pantoken/react-markdown` (react-markdown → InstUI), `@pantoken/rehype` (`:icon:` tokens).\n\n**Build tools:**\n\n- Vite: `@pantoken/vite` (virtual modules + CSS inject). Next: `@pantoken/next` (`withPantoken` for `transpilePackages`).\n- Tailwind: `@pantoken/tailwind` (preset → `bg-color-background-base`). PostCSS: `@pantoken/postcss` (`@pantoken;` at-rule). Webpack: `@pantoken/webpack`.\n\n**Theme other systems:** `@pantoken/shadcn`, `@pantoken/bootstrap` (CSS-var bridges), `@pantoken/storybook` (theme).\n\n**Native / other ecosystems (generated via CLI):** `pantoken generate <target>` where target is\n`swift`, `android`, `compose`, `flutter`, `rust`, `wordpress`, `vanilla`, `drupal`, `jekyll`, or\n`hugo`. Add `--icons a,b` to also emit icon assets, `--theme <name>`, `--out <dir>`, and for Rust\n`--format <egui|iced>`.\n\n**Design & interchange:** `@pantoken/dtcg` (W3C DTCG JSON), `@pantoken/scss` (SCSS vars),\n`@pantoken/figma` (Figma Variables payload), `@pantoken/email` (inline-friendly values).\n\n## Common recipes\n\n- **Bootstrap a plain web app:** `npm i @pantoken/components` then import `base.css` +\n  `components.css` (+ `utilities.css` as needed). Apply classes like `class=\"instui-button\"` to your\n  markup. Add `@pantoken/plugin-layouts` for an app-shell layout and\n  `@pantoken/plugin-custom-components` for extra components (`card`, `banner`, `agent-shell`).\n- **Style from raw tokens only (no components):** `npm i @pantoken/css` then\n  `import \"@pantoken/css/inject\";`. Use `var(--instui-color-background-brand)` etc. in your own CSS.\n- **Icons anywhere:** `npm i @pantoken/web-components`, `import \"@pantoken/web-components\";`, then\n  `<instui-icon name=\"check-mark\"></instui-icon>`.\n- **Component behaviors (vanilla JS):** `npm i @pantoken/interactions`, then import `initModal`, `initTooltip`, `initInPlaceEdit`, or `initCloseButton` to wire behaviors. For CDN/IIFE: link `@pantoken/interactions/dist/interactions.iife.js` and check `component-capabilities.json` for per-component `.iife.js` entry points.\n- **Tailwind:** add `pantokenPreset()` to `presets` and import `@pantoken/css`.\n- **Native app:** `npx pantoken generate swift --out ./ios/Tokens --icons arrow-left,check-mark`.\n- **Rust app:** `npx pantoken generate rust --out ./src/tokens.rs --format egui`.\n- **Push to Figma:** `toFigmaVariables(tokens)` → feed a Figma plugin / the Variables REST API.\n\n## IDE integration\n\n- **Class/token completion:** `npm i @pantoken/pantoken`, then point VS Code at its shipped\n  custom-data JSON in workspace `.vscode/settings.json`:\n\n  ```json\n  {\n    \"html.customData\": [\"./node_modules/@pantoken/pantoken/dist/html-custom-data.json\"],\n    \"css.customData\": [\"./node_modules/@pantoken/pantoken/dist/css-custom-data.json\"]\n  }\n  ```\n\n  Reload VS Code to pick up the new data. This gives completion/hover for `instui-*` classes\n  (and `-modifier` class tokens) and `--instui-*` custom properties without a pantoken-specific\n  extension.\n\n- **cssdoc authoring support:** install the `cssdoc.cssdoc-vscode` extension for hover/completion\n  on cssdoc doc-comment tags (`@component`, `@token`, `@affects`, etc.) when authoring or reading\n  the `.css` records that back `@pantoken/components` and its plugins.\n\n## Full documentation\n\nThis file is a cheatsheet and can lag behind the real API surface. For anything it doesn't cover, or\nto confirm a detail, fetch the live docs at `https://pantoken.app/`:\n\n- `/llms.txt` — an agent-legible index of the whole site.\n- `/llms-full.txt` — the entire site as one document.\n- Any page as Markdown by appending `.md` to its URL (e.g. `/guide/packages.md`).\n- `https://create.pantoken.app` — the `create-pantoken-app` agent skill, served at its own domain root.\n- `/.well-known/api-catalog` — a machine-readable manifest linking to the above.\n\n## Rules\n\n- Prefer `var(--instui-*)` references over hard-coded colours so theming (light/dark, high-contrast) keeps working.\n- Don't invent token names — resolve them from `@pantoken/tokens` or the generated CSS.\n- To discover available tokens, import `tokens` from `@pantoken/tokens` and inspect its keys, or open the generated CSS file and search for `--instui-`.\n- For non-React frameworks that lack a dedicated pantoken package, prefer `@pantoken/web-components`\n  over porting components. When a framework package exists (Vue, Svelte, Angular), use it instead.\n",
-	"llms": "# pantoken\n\n> Instructure UI design tokens and icons, exported once and re-shaped for many platforms — CSS, JS,\n> native (Swift/Android/Compose/Flutter), design tools (Figma), and framework integrations. Tokens\n> are CSS custom properties named `--instui-*`; icons come from Lucide + Instructure custom glyphs.\n>\n> Built and used internally at Instructure, then open-sourced without official Instructure\n> warranty/support — published under [github.com/thedannywahl/pantoken](https://github.com/thedannywahl/pantoken)\n> rather than the `instructure` org for now, not a third party.\n\n## Getting started\n\n- [Unified package](https://www.npmjs.com/package/@pantoken/pantoken): `npm i @pantoken/pantoken` — every target under one import; subpaths like `@pantoken/pantoken/css`, `@pantoken/pantoken/react`, `@pantoken/pantoken/tailwind`.\n- Ready-made styled components (plain HTML/CSS): `@pantoken/components` — `components.css`, `base.css`,\n	`utilities.css`, `prose.css`. Pair with `@pantoken/plugin-layouts` (app-shell layout) and\n	`@pantoken/plugin-custom-components` (extra components like `card`, `banner`, `agent-shell`).\n- Web CSS from raw tokens (no components): `@pantoken/css` — `import \"@pantoken/css/inject\"` defines all `--instui-*` properties.\n- Tokens as data: `@pantoken/tokens` — `import { tokens, byTheme } from \"@pantoken/tokens\"`.\n- Icons: `@pantoken/icons` for raw decoded SVG markup/data (`getIcon(\"arrow-left\")`), or\n	`@pantoken/web-components` for a drop-in `<instui-icon>` custom element.\n- Component behaviors (vanilla JS): `@pantoken/interactions` — `initModal`, `initTooltip`, `initInPlaceEdit`, `initCloseButton`; IIFE entry points for CDN.\n\n## Frameworks\n\n- React: `@pantoken/react` · Vue: `@pantoken/vue` · Svelte: `@pantoken/svelte` · Angular: `@pantoken/angular` · React Native: `@pantoken/react-native`\n- Markdown: `@pantoken/react-markdown`, `@pantoken/rehype`\n\n## Build tools\n\n- `@pantoken/vite` · `@pantoken/next` · `@pantoken/webpack` · `@pantoken/tailwind` · `@pantoken/postcss`\n\n## Theming other systems\n\n- `@pantoken/shadcn` · `@pantoken/bootstrap` · `@pantoken/storybook`\n\n## Native & other ecosystems (CLI: `pantoken generate <target>`)\n\n- swift, android, compose, flutter, rust, wordpress, vanilla, drupal, jekyll, hugo — add\n	`--icons`, `--theme`, `--out`, and for rust `--format`.\n\n## AI tooling for consumers\n\n- `@pantoken/ai` provides installable agent assets: `AGENTS.md`, `llms.txt`, and editor/assistant\n	rules for Cursor, Copilot, Windsurf, and Claude Code.\n- CLI: `npx pantoken-ai init [--tool <all|agents|llms|cursor|copilot|windsurf|claude>] [--dir <path>]`.\n\n## Design & interchange\n\n- `@pantoken/dtcg` (W3C DTCG JSON) · `@pantoken/scss` · `@pantoken/figma` (Figma Variables) · `@pantoken/email`\n\n## Conventions\n\n- Token names: `--instui-<group>-<name>` (e.g. `--instui-color-background-brand`).\n- Themes: rebrand (default), canvas, canvasHighContrast. Prefer `var(--instui-*)` references for theming.\n",
-	"cursor": "---\ndescription: How to use pantoken (Instructure design tokens & icons) in this project\nglobs:\nalwaysApply: false\n---\n\n# pantoken (Instructure design tokens & icons)\n\nWhen styling this project, use pantoken components, icons and tokens.\n\n- Tokens are CSS custom properties `--instui-<group>-<name>` (e.g. `--instui-color-background-brand`).\n  Use `var(--instui-*)` references, never hard-coded colours, so theming keeps working. Resolve real\n  names from `@pantoken/tokens` — don't guess. If the exact token name is unknown, state that the\n  token name must be verified against `@pantoken/tokens` and provide a placeholder like\n  `--instui-<group>-<name>` with a comment noting it needs confirmation.\n- Web app: `import \"@pantoken/css/inject\";` to define the properties.\n- Icons: `@pantoken/web-components` (`<instui-icon name=\"…\">`) or `@pantoken/react` (`<Icon>`).\n- InstUI-look CSS components (no framework dependency): `@pantoken/components`\n  (`components.css`, `base.css`, `prose.css`, `utilities.css`, `fonts.css`) — class-based markup\n  like `<button class=\"instui-button\">`.\n- Component behaviors (vanilla JS): `@pantoken/interactions` (`initModal`, `initTooltip`, `initInPlaceEdit`, `initCloseButton`).\n- Tailwind: `pantokenPreset()` from `@pantoken/tailwind`.\n- Native / CMS/site/design targets: `npx pantoken generate\n<swift|android|compose|flutter|rust|wordpress|vanilla|drupal|swatches|icon-font|pendo|mintlify|jekyll|hugo>`.\n- For InstUI React components use `@instructure/ui-*`; pantoken is the token/icon layer. Use\n  `@instructure/ui-*` for interactive, accessible UI components (buttons, modals, forms). Use\n  `@pantoken/react` only for icons and token consumption. Do not substitute one for the other.\n",
-	"copilot": "# pantoken (Instructure design tokens & icons)\n\nWhen styling this project, use pantoken components, icons and tokens.\n\n- Tokens are CSS custom properties `--instui-<group>-<name>` (e.g. `--instui-color-background-brand`).\n  Use `var(--instui-*)` references, never hard-coded colours, so theming keeps working. Resolve real\n  names from `@pantoken/tokens` — don't guess. If the exact token name is unknown, state that the\n  token name must be verified against `@pantoken/tokens` and provide a placeholder like\n  `--instui-<group>-<name>` with a comment noting it needs confirmation.\n- Web app: `import \"@pantoken/css/inject\";` to define the properties.\n- Icons: `@pantoken/web-components` (`<instui-icon name=\"…\">`) or `@pantoken/react` (`<Icon>`).\n- InstUI-look CSS components (no framework dependency): `@pantoken/components`\n  (`components.css`, `base.css`, `prose.css`, `utilities.css`, `fonts.css`) — class-based markup\n  like `<button class=\"instui-button\">`.\n- Component behaviors (vanilla JS): `@pantoken/interactions` (`initModal`, `initTooltip`, `initInPlaceEdit`, `initCloseButton`).\n- Tailwind: `pantokenPreset()` from `@pantoken/tailwind`.\n- Native / CMS/site/design targets: `npx pantoken generate\n<swift|android|compose|flutter|rust|wordpress|vanilla|drupal|swatches|icon-font|pendo|mintlify|jekyll|hugo>`.\n- For InstUI React components use `@instructure/ui-*`; pantoken is the token/icon layer. Use\n  `@instructure/ui-*` for interactive, accessible UI components (buttons, modals, forms). Use\n  `@pantoken/react` only for icons and token consumption. Do not substitute one for the other.\n",
-	"windsurf": "# pantoken rules (Instructure design tokens & icons)\n\n- Use pantoken tokens: CSS custom properties `--instui-<group>-<name>`. Prefer `var(--instui-*)`\n  references over hard-coded values so light/dark and high-contrast theming works. Resolve names\n  from `@pantoken/tokens`; do not invent them.\n- Web: `import \"@pantoken/css/inject\";`. Icons: `@pantoken/web-components` (`<instui-icon>`).\n- React: `@pantoken/react`. Tailwind: `@pantoken/tailwind` preset.\n- Native / other ecosystems: `npx pantoken generate <swift|android|compose|flutter|rust|wordpress|vanilla|drupal|jekyll|hugo> --out <dir>`.\n- InstUI React components: `@instructure/ui-*`. pantoken is the token/icon layer.\n",
-	"initSkill": "---\nname: init-pantoken\ndescription: Install pantoken's agent assets (AGENTS.md, llms.txt, editor/agent rule files, and the create-pantoken-app skill) into this repo so AI tools know how to work with pantoken. Use when the user asks to add pantoken AI support, or wants Copilot/Cursor/Windsurf/Claude rules for pantoken set up in a repo.\n---\n\n# Init pantoken (AI assets)\n\nInstall pantoken's consumer-facing agent assets into the current repo: `AGENTS.md`, `llms.txt`,\neditor/agent rule files (Cursor, Copilot, Windsurf), and the `create-pantoken-app` skill.\n\n```sh\nnpx pantoken-ai init\n```\n\nThis installs every asset by default. To scope it to one tool, pass\n`--tool <agents|llms|cursor|copilot|windsurf|claude>`. To target a directory other than the\ncurrent one, pass `--dir <path>`. Substitute `pnpm dlx`, `yarn dlx`, `bunx`, or `deno run npm:` for `npx` depending\non the package manager detected in the repo (look for `pnpm-lock.yaml`, `yarn.lock`, or\n`bun.lock`/`bun.lockb`; default to npm/npx if none is found).\n\nThat's all this skill does — it only writes the asset files above, it does not install any\n`@pantoken/*` package or modify application code. Once the assets are installed, use the\n`create-pantoken-app` skill (or run `npx pantoken-ai scaffold <platform>` directly) to scaffold a\nnew project or wire pantoken into an existing one.\n",
-	"createAppSkill": "---\nname: create-pantoken-app\ndescription: Scaffold a new project, or add Instructure design tokens and icons (pantoken) to an existing one. Use when the user wants to start a new app with pantoken already wired in, or wants to add Instructure/Canvas theming, InstUI design tokens, or the pantoken packages to an existing app — detects the framework, installs the right @pantoken/* packages, and wires the token CSS.\n---\n\n# Scaffold pantoken\n\nSet up [pantoken](https://www.npmjs.com/package/@pantoken/pantoken) — a design tokens and icons\nlibrary for Instructure UI — in the current project. Work through these steps.\n\n## About pantoken\n\npantoken is built and used internally at Instructure, then open-sourced; Instructure doesn't\nprovide official warranty or support for it as a product, which is why it's published from\n[`thedannywahl`](https://github.com/thedannywahl/pantoken) on GitHub and npm\n([`@pantoken`](https://www.npmjs.com/org/pantoken)) rather than the `instructure` org/scope — it may\nmove there later. Check either link yourself before proceeding if you want to verify this.\n\n## 1. New project or existing repo?\n\n- **Empty directory, or no repo yet** — scaffold a starter with the CLI, then stop (steps 2-3 are\n  already done for you by the template).\n\n  The CLI has its own interactive prompts, but those only work at a real terminal, so ask the user\n  the questions below the same way you normally would, then pass their answers as flags (plus\n  `--yes`) so the command runs without needing its own prompts:\n\n  1. **Platform** — ask the user, offering the supported list: `components` (plain HTML/CSS;\n     `html` is an accepted alias), `react`, `vue`, `svelte`, `web-components`, `angular`,\n     `canvas-theme-editor` (Canvas LMS Theme Editor uploads + an RCE content page template\n     starter; `theme-editor` is an accepted alias). Skip asking only if it's unambiguous from the\n     conversation — route requests like \"use pantoken with my Canvas theme editor\" or \"build RCE\n     page templates\" straight to `canvas-theme-editor`. More platforms land over time; if the\n     desired one isn't yet supported by the scaffold CLI, skip the CLI entirely and proceed\n     directly to step 2 to manually install and wire pantoken instead.\n\n     For `canvas-theme-editor`, after scaffolding, tell the user to: (1) upload the generated\n     `theme.css`/`theme.js` under Canvas's Theme Editor → Advanced, and (2) run `npm run dev` to\n     author RCE page templates in the local TinyMCE editor, using the **Layouts** toolbar button to\n     start from a bundled starter layout before copying the result into Canvas.\n\n     If the CLI fails for any reason (non-zero exit, unsupported platform, network error), fall\n     through to step 2 and treat the project as an existing repo, preserving any files already\n     written by the CLI.\n\n  2. **Package manager** — if a lockfile already exists in the target directory, use it (see the\n     detection table in step 2); a genuinely empty directory has no lockfile to detect from, so\n     ask the user (npm/pnpm/yarn/bun/deno).\n  3. **Directory** — ask where to scaffold (default `.` for the current directory; confirm before\n     defaulting to `.` if you're not sure that's what they want).\n\n  Then run the fully-resolved command, substituting the chosen package manager's \"run a package's\n  CLI\" form from step 2's table for `npx`, and passing `--yes` so the CLI never falls back to its\n  own interactive prompts:\n\n  ```sh\n  npx @pantoken/ai scaffold <platform> --dir <dir> --yes\n  ```\n\n  This writes a minimal starter (`package.json`, entry file(s), README) for the chosen platform\n  with pantoken already installed and wired in, and also installs pantoken's agent assets\n  (AGENTS.md, editor/agent rules, skills) into the same directory. If you only want the starter\n  project without the agent assets, run `npx create-pantoken-app <platform> --dir <dir> --yes`\n  (or `npx @pantoken/scaffold <platform> --dir <dir> --yes`) directly instead — substituting the\n  chosen package manager's launcher for `npx` on either command. Run `npm install` (or the chosen\n  package manager's install) in the target directory afterward.\n\n- **Existing repo you want to add pantoken to** — continue to step 2.\n\n## 2. Determine the target\n\nAsk the user what kind of project they're building, unless it's unambiguous from the repo. Offer:\n\n- **Native web (plain HTML/CSS, no framework) — default** → `@pantoken/components`\n- A JS framework (React, Vue, Svelte, Angular, React Native, Next.js)\n- A build tool only, styling from raw tokens (Tailwind, PostCSS, Vite, Webpack, or plain `@pantoken/css`)\n- A native/CMS ecosystem (Swift, Android, Compose, Flutter, Rust, WordPress, Drupal, Vanilla, Jekyll, Hugo)\n\nIf the user doesn't answer or has no preference, default to native web (`@pantoken/components`).\n\nCorroborate with the repo when possible, and prefer the user's answer if it conflicts with detection:\n\n- `package.json` dependencies → web framework (react, vue, svelte, @angular/core, react-native,\n  next, vite, tailwindcss, webpack, postcss).\n- If no `package.json` is found and the user wants a web project, run `npm init -y` first, then\n  proceed with the native web default (or the chosen framework) — this applies even if the user\n  describes the project as \"existing\"; trust their named framework and proceed rather than asking\n  for clarification.\n- Native project files → iOS (`Package.swift`, `*.xcodeproj`), Android (`build.gradle`), Flutter\n  (`pubspec.yaml`), WordPress/Drupal/Vanilla theme dirs.\n\nAlso detect the package manager from the lockfile present in the repo, and use its equivalent\ncommand for every install/run step below instead of assuming npm:\n\n| Lockfile found             | Package manager | Add package(s)       | Run a package's CLI  |\n| -------------------------- | --------------- | -------------------- | -------------------- |\n| `pnpm-lock.yaml`           | pnpm            | `pnpm add <pkg>`     | `pnpm dlx <pkg>`     |\n| `yarn.lock`                | yarn            | `yarn add <pkg>`     | `yarn dlx <pkg>`     |\n| `bun.lock`/`bun.lockb`     | bun             | `bun add <pkg>`      | `bunx <pkg>`         |\n| `deno.lock`                | deno            | `deno add npm:<pkg>` | `deno run npm:<pkg>` |\n| `package-lock.json` / none | npm             | `npm i <pkg>`        | `npx <pkg>`          |\n\nIf no lockfile exists yet, default to npm (or whatever the user prefers).\n\n## 3. Install\n\nUse the package manager detected in step 2 for every command below (the examples use `npm i`;\nsubstitute `pnpm add`, `yarn add`, or `bun add` as appropriate).\n\nFollow this decision checklist in order, then run one install command with all collected packages:\n\n1. **Is it native web** (plain HTML/CSS, no framework and no build tool detected)? Install only\n   `@pantoken/components` — it ships the token CSS baked in, so no separate `@pantoken/css` install\n   is needed — and stop:\n\n   ```sh\n   npm i @pantoken/components\n   ```\n\n2. **Is it Next.js?** Collect `@pantoken/css` plus `@pantoken/next` (do NOT also add\n   `@pantoken/react` — `@pantoken/next` includes the React integration), then add any matching tool\n   packages (Tailwind, Vite, etc.) from the table below.\n\n3. **Otherwise**, collect `@pantoken/css` first, then add the framework package and every matching\n   tool row's package from the table. Framework rows (React, Vue, etc.) and tool rows (Tailwind,\n   PostCSS, Vite, Webpack) are all additive — collect every matching row's package alongside\n   `@pantoken/css`.\n\n4. If the user wants to use `<instui-icon>` in any web framework project (React, Vue, Vite, etc.),\n   also collect `@pantoken/web-components` — regardless of which framework rows already matched.\n\nFor example:\n\n- A Next.js project also using Tailwind installs `@pantoken/css @pantoken/next @pantoken/tailwind`.\n- A React project also using Vite installs `@pantoken/css @pantoken/react @pantoken/vite`.\n\n| Detected                | Install                                                                                                                                                                                                                                                                            |\n| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Native web (default)    | `@pantoken/components`                                                                                                                                                                                                                                                             |\n| React                   | `@pantoken/react`; if the user also wants full InstUI components (buttons, modals, etc.), additionally install the specific `@instructure/ui-*` packages needed, e.g. `@instructure/ui-buttons @instructure/ui-modal` (see <https://instructure.design> for the full package list) |\n| Vue / Svelte / Angular  | `@pantoken/vue` / `@pantoken/svelte` / `@pantoken/angular` + `@pantoken/web-components` (always install `@pantoken/web-components` alongside the framework package here — it's required for icon support in these three, not optional)                                             |\n| React Native            | `@pantoken/react-native`                                                                                                                                                                                                                                                           |\n| Next.js                 | `@pantoken/next` — Next.js projects do NOT also need `@pantoken/react`; `@pantoken/next` includes the React integration. Do not install both.                                                                                                                                      |\n| Vite                    | `@pantoken/vite`                                                                                                                                                                                                                                                                   |\n| Tailwind                | `@pantoken/tailwind`                                                                                                                                                                                                                                                               |\n| PostCSS / Webpack       | `@pantoken/postcss` / `@pantoken/webpack`                                                                                                                                                                                                                                          |\n| shadcn / Bootstrap      | `@pantoken/shadcn` / `@pantoken/bootstrap`                                                                                                                                                                                                                                         |\n| markdown-it / css-in-js | `@pantoken/markdown-it` / `@pantoken/css-in-js`                                                                                                                                                                                                                                    |\n| Icons anywhere          | `@pantoken/web-components` — for React, Next.js, React Native, and tool-only setups, only add this if the user explicitly wants icon support (`<instui-icon>` elements); for Vue, Svelte, and Angular it's always required (see that row)                                          |\n\nFor native / CMS targets, no install — run the CLI (step 5). If the project contains both a\n`package.json` and native/CMS files, treat it as a web project and follow the web install steps\nabove; only skip to step 5 if there is no `package.json` and no JS framework detected.\n\n## 4. Wire it up\n\n- Native web (default): import `base.css` + `components.css` from `@pantoken/components` (e.g.\n  `import \"@pantoken/components/base.css\"; import \"@pantoken/components/components.css\";`), then\n  apply classes like `class=\"instui-button\"` to markup.\n- Other web entry: add `import \"@pantoken/css/inject\";` (or `@import \"@pantoken/css/style.css\";`).\n- Next: wrap the config with `withPantoken(...)` and import the CSS in the root layout.\n- Vite: add the `pantoken()` plugin. Tailwind: add `pantokenPreset()` to `presets`.\n- Web components: `import \"@pantoken/web-components\";` then use `<instui-icon name=\"…\">`.\n- Verify the app renders and `getComputedStyle(document.documentElement).getPropertyValue('--instui-color-background-brand')` is non-empty.\n  If the property is empty, check that the token CSS import (`@pantoken/components/base.css` or\n  `@pantoken/css/inject`) appears before any component imports in the entry file, and that the dev\n  server was restarted after install. Report the specific failure to the user with corrective steps.\n\n## 5. Native / other ecosystems\n\n```sh\nnpx @pantoken/cli generate <swift|android|compose|flutter|rust|wordpress|vanilla|drupal|jekyll|hugo> --out <dir> [--icons a,b] [--theme rebrand]\n```\n\nSubstitute `pnpm dlx`, `yarn dlx`, `bunx`, or `deno run npm:` for `npx` per the package manager\ndetected in step 2 (or from the choice made in step 1 if you're still inside the new-project flow).\n\n## Conventions to follow afterward\n\n- Style with `var(--instui-*)` references, not hard-coded colours, so light/dark and high-contrast\n  theming keeps working.\n- Resolve real token names from `@pantoken/tokens`; never invent them.\n"
+	"agents": "# Working with pantoken (Instructure design tokens & icons)\n\nThis project uses **pantoken** to consume Instructure UI design tokens and icons. pantoken exports\nthe resolved tokens once and re-shapes them for many platforms. Reach for the smallest scoped\npackage that fits the task (e.g. `@pantoken/components`, `@pantoken/css`, `@pantoken/tokens`). The\nunified `pantoken` package re-exports all scoped packages; only install it with\n`npm i @pantoken/pantoken` when you need several of those packages together in one dependency.\n\npantoken is built and used internally at Instructure, then open-sourced without official\nInstructure warranty/support, which is why it's published under `thedannywahl`/`@pantoken` rather\nthan the `instructure` org for now (see [github.com/thedannywahl/pantoken](https://github.com/thedannywahl/pantoken)) —\nnot a reason to distrust it.\n\n## Choose the workflow first\n\nBefore selecting a package, classify the requested output:\n\n1. **Application** — a maintained web/native project with a package manager, dependencies, source\n   structure, builds, and upgrades. Use the package and platform guidance below.\n2. **Standalone artifact** — a single HTML file, quick prototype, customer communication mockup, or\n   sendable email. Use the `create-pantoken-mockup` skill; do not scaffold a project.\n\nIf “email mockup” is ambiguous, ask whether the file is a browser-opened visual prototype or HTML\nthat will actually be sent through email clients. Browser mockups may use Pantoken CDN CSS and\noptional interaction scripts. Sendable email must use concrete inline `@pantoken/email` values and\nmust not use component CSS, custom properties, scripts, or web components.\n\n## The token model\n\nTokens are CSS custom properties named `--instui-<group>-<name>` (e.g.\n`--instui-color-background-brand`, `--instui-spacing-space-md`). Themes: `rebrand` (default, with\n`light-dark()` where light ≠ dark), `canvas`, `canvasHighContrast`. Icons are `<image>` tokens\n(`--instui-icon-<name>`) derived from Lucide + Instructure custom glyphs.\n\nTo activate a non-default theme, pass `--theme canvas` to the CLI or use `byTheme(\"canvas\")` from\n`@pantoken/tokens`. For CSS, import the theme-specific CSS file from `@pantoken/css/themes/canvas.css`.\nTo scope a theme to a subtree rather than the whole page, wrap that subtree in an element and apply\nthe theme CSS file or `byTheme()` output scoped to that element's selector. Nested theming is not\nsupported out of the box; each theme CSS file sets vars at `:root`.\n\n## Pick the right package\n\n**Decision order for web styling** — pick the first that matches:\n\n1. Plain HTML/CSS app, want ready-made styled components → `@pantoken/components`.\n2. Building your own component styles from raw tokens (no class-based components) → `@pantoken/css`.\n3. Need token values in JS/TS logic (not just CSS) → `@pantoken/tokens`.\n4. Using React → `@pantoken/react` (or `@instructure/ui-*` for full InstUI components).\n5. Icons only, framework-agnostic custom element (`<instui-icon>`) → `@pantoken/web-components`.\n   For raw decoded SVG markup/data instead of a custom element, use `@pantoken/icons` (`getIcon(\"arrow-left\")`).\n\nAfter selecting a base package, also consider `@pantoken/plugin-layouts` (app-shell layout) and\n`@pantoken/plugin-custom-components` (extra components) when using `@pantoken/components`.\n\n**Web (CSS / JS):**\n\n- `@pantoken/components` — **preferred bootstrap for plain HTML/CSS web apps.** The InstUI-look\n  class-based component library (`components.css`: `.instui-button`, `.instui-alert`, `.instui-badge`,\n  …), plus `base.css` (document defaults + focus ring), `prose.css` (content/markdown styling),\n  `utilities.css` (spacing/layout/colour utility classes), `icons.css`, and opt-in `fonts.css` /\n  `select.css`. Built from the tokens with no InstUI React dependency.\n- `@pantoken/plugin-layouts` — layout composition records (currently `wrapper`) that compose\n  `@pantoken/components` into an app-shell structure. Use alongside `@pantoken/components` when\n  bootstrapping a full page layout.\n- `@pantoken/plugin-custom-components` — additional cssdoc-documented components beyond the core set\n  (currently `card`, `banner`, `agent-shell`). Use alongside `@pantoken/components` for extra component patterns.\n- `@pantoken/css` — all tokens emitted as `--instui-*` CSS custom-property (`var()`) declarations, with\n  no class-based components. `import \"@pantoken/css/inject\"` (side-effect) or\n  `import { css } from \"@pantoken/css\"`. Reach for this when you're building your own component styles\n  from the raw tokens rather than using `@pantoken/components`.\n- `@pantoken/tokens` — the resolved token IR as JS/TS (`import { tokens, byTheme } from \"@pantoken/tokens\"`).\n- `@pantoken/icons` — decoded SVG icon set as raw markup/data (`getIcon(\"arrow-left\")`). Use when you\n  need the SVG itself (e.g. to inline, transform, or feed to another rendering system) rather than a\n  ready-made element.\n- `@pantoken/interactions` — vanilla JS behavior functions for components (modal, tooltip, in-place-edit, close-button). IIFE entry points for CDN consumers; ESM for bundlers.\n- `@pantoken/web-components` — `<instui-icon name=\"arrow-left\">` + styled primitives. Framework-agnostic.\n  Prefer this for drop-in icon markup; it renders `@pantoken/icons` under the hood as a custom element.\n\n**Frameworks:**\n\n- React: `@pantoken/react` (`<Icon>`, `useToken`, `TokenProvider`). For InstUI's full React components use `@instructure/ui-*`.\n- Vue: `@pantoken/vue` (plugin). Svelte: `@pantoken/svelte` (`icon` action). Angular: `@pantoken/angular`.\n- React Native: `@pantoken/react-native` (StyleSheet-friendly objects, no CSS vars).\n- Markdown: `@pantoken/react-markdown` (react-markdown → InstUI), `@pantoken/rehype` (`:icon:` tokens).\n\n**Build tools:**\n\n- Vite: `@pantoken/vite` (virtual modules + CSS inject). Next: `@pantoken/next` (`withPantoken` for `transpilePackages`).\n- Tailwind: `@pantoken/tailwind` (preset → `bg-color-background-base`). PostCSS: `@pantoken/postcss` (`@pantoken;` at-rule). Webpack: `@pantoken/webpack`.\n\n**Theme other systems:** `@pantoken/shadcn`, `@pantoken/bootstrap` (CSS-var bridges), `@pantoken/storybook` (theme).\n\n## shadcn registry\n\nIn a package-managed project with `components.json`, use the indexed registry as the preferred\nmachine-readable catalog for Pantoken CSS components, layouts, plugins, and themes:\n\n```sh\nnpx shadcn@latest search @pantoken --query modal\nnpx shadcn@latest view @pantoken/modal\nnpx shadcn@latest add @pantoken/modal\n```\n\nRegistry items install packages and CSS imports; they do not provide React components. Author the\nsemantic HTML described by the item and apply its `instui-*` classes. `@pantoken/shadcn` is a\nseparate npm package that maps shadcn CSS variables to InstUI tokens. Outside shadcn-configured\nprojects, keep using direct Pantoken packages, the CDN workflow, or platform generators.\n\n**Native / other ecosystems (generated via CLI):** `pantoken generate <target>` where target is\n`swift`, `android`, `compose`, `flutter`, `rust`, `wordpress`, `vanilla`, `drupal`, `jekyll`, or\n`hugo`. Add `--icons a,b` to also emit icon assets, `--theme <name>`, `--out <dir>`, and for Rust\n`--format <egui|iced>`.\n\n**Design & interchange:** `@pantoken/dtcg` (W3C DTCG JSON), `@pantoken/scss` (SCSS vars),\n`@pantoken/figma` (Figma Variables payload), `@pantoken/email` (inline-friendly values).\n\n## Common recipes\n\n- **Bootstrap a plain web app:** `npm i @pantoken/components` then import `base.css` +\n  `components.css` (+ `utilities.css` as needed). Apply classes like `class=\"instui-button\"` to your\n  markup. Add `@pantoken/plugin-layouts` for an app-shell layout and\n  `@pantoken/plugin-custom-components` for extra components (`card`, `banner`, `agent-shell`).\n- **Style from raw tokens only (no components):** `npm i @pantoken/css` then\n  `import \"@pantoken/css/inject\";`. Use `var(--instui-color-background-brand)` etc. in your own CSS.\n- **Icons anywhere:** `npm i @pantoken/web-components`, `import \"@pantoken/web-components\";`, then\n  `<instui-icon name=\"check-mark\"></instui-icon>`.\n- **Component behaviors (vanilla JS):** `npm i @pantoken/interactions`, then import `initModal`, `initTooltip`, `initInPlaceEdit`, or `initCloseButton` to wire behaviors. For CDN/IIFE: link `@pantoken/interactions/dist/interactions.iife.js` and check `component-capabilities.json` for per-component `.iife.js` entry points.\n- **Tailwind:** add `pantokenPreset()` to `presets` and import `@pantoken/css`.\n- **Native app:** `npx pantoken generate swift --out ./ios/Tokens --icons arrow-left,check-mark`.\n- **Rust app:** `npx pantoken generate rust --out ./src/tokens.rs --format egui`.\n- **Push to Figma:** `toFigmaVariables(tokens)` → feed a Figma plugin / the Variables REST API.\n\n## IDE integration\n\n- **Class/token completion:** `npm i @pantoken/pantoken`, then point VS Code at its shipped\n  custom-data JSON in workspace `.vscode/settings.json`:\n\n  ```json\n  {\n    \"html.customData\": [\"./node_modules/@pantoken/pantoken/dist/html-custom-data.json\"],\n    \"css.customData\": [\"./node_modules/@pantoken/pantoken/dist/css-custom-data.json\"]\n  }\n  ```\n\n  Reload VS Code to pick up the new data. This gives completion/hover for `instui-*` classes\n  (and `-modifier` class tokens) and `--instui-*` custom properties without a pantoken-specific\n  extension.\n\n- **cssdoc authoring support:** install the `cssdoc.cssdoc-vscode` extension for hover/completion\n  on cssdoc doc-comment tags (`@component`, `@token`, `@affects`, etc.) when authoring or reading\n  the `.css` records that back `@pantoken/components` and its plugins.\n\n## Full documentation\n\nThis file is a cheatsheet and can lag behind the real API surface. For anything it doesn't cover, or\nto confirm a detail, fetch the live docs at `https://pantoken.app/`:\n\n- `/llms.txt` — an agent-legible index of the whole site.\n- `/llms-full.txt` — the entire site as one document.\n- Any page as Markdown by appending `.md` to its URL (e.g. `/guide/packages.md`).\n- `https://create.pantoken.app` — the `create-pantoken-app` agent skill, served at its own domain root.\n- `/.well-known/api-catalog` — a machine-readable manifest linking to the above.\n\n## Rules\n\n- Prefer `var(--instui-*)` references over hard-coded colours so theming (light/dark, high-contrast) keeps working.\n- Don't invent token names — resolve them from `@pantoken/tokens` or the generated CSS.\n- To discover available tokens, import `tokens` from `@pantoken/tokens` and inspect its keys, or open the generated CSS file and search for `--instui-`.\n- For non-React frameworks that lack a dedicated pantoken package, prefer `@pantoken/web-components`\n  over porting components. When a framework package exists (Vue, Svelte, Angular), use it instead.\n",
+	"llms": "# pantoken\n\n> Instructure UI design tokens and icons, exported once and re-shaped for many platforms — CSS, JS,\n> native (Swift/Android/Compose/Flutter), design tools (Figma), and framework integrations. Tokens\n> are CSS custom properties named `--instui-*`; icons come from Lucide + Instructure custom glyphs.\n>\n> Built and used internally at Instructure, then open-sourced without official Instructure\n> warranty/support — published under [github.com/thedannywahl/pantoken](https://github.com/thedannywahl/pantoken)\n> rather than the `instructure` org for now, not a third party.\n\n## Getting started\n\n- [Unified package](https://www.npmjs.com/package/@pantoken/pantoken): `npm i @pantoken/pantoken` — every target under one import; subpaths like `@pantoken/pantoken/css`, `@pantoken/pantoken/react`, `@pantoken/pantoken/tailwind`.\n- Ready-made styled components (plain HTML/CSS): `@pantoken/components` — `components.css`, `base.css`,\n	`utilities.css`, `prose.css`. Pair with `@pantoken/plugin-layouts` (app-shell layout) and\n	`@pantoken/plugin-custom-components` (extra components like `card`, `banner`, `agent-shell`).\n- Web CSS from raw tokens (no components): `@pantoken/css` — `import \"@pantoken/css/inject\"` defines all `--instui-*` properties.\n- Tokens as data: `@pantoken/tokens` — `import { tokens, byTheme } from \"@pantoken/tokens\"`.\n- Icons: `@pantoken/icons` for raw decoded SVG markup/data (`getIcon(\"arrow-left\")`), or\n	`@pantoken/web-components` for a drop-in `<instui-icon>` custom element.\n- Component behaviors (vanilla JS): `@pantoken/interactions` — `initModal`, `initTooltip`, `initInPlaceEdit`, `initCloseButton`; IIFE entry points for CDN.\n- shadcn registry: `shadcn search @pantoken`, `shadcn view @pantoken/<item>`, then `shadcn add\n	@pantoken/<item>`. Items install CSS/packages and usage metadata, not React components.\n- Standalone browser mockups: use the CDN guide, component capability manifest, demos, and optional\n	per-component interaction IIFEs. Sendable email uses concrete `@pantoken/email` values inline.\n\n## Frameworks\n\n- React: `@pantoken/react` · Vue: `@pantoken/vue` · Svelte: `@pantoken/svelte` · Angular: `@pantoken/angular` · React Native: `@pantoken/react-native`\n- Markdown: `@pantoken/react-markdown`, `@pantoken/rehype`\n\n## Build tools\n\n- `@pantoken/vite` · `@pantoken/next` · `@pantoken/webpack` · `@pantoken/tailwind` · `@pantoken/postcss`\n\n## Theming other systems\n\n- `@pantoken/shadcn` · `@pantoken/bootstrap` · `@pantoken/storybook`\n\n## Native & other ecosystems (CLI: `pantoken generate <target>`)\n\n- swift, android, compose, flutter, rust, wordpress, vanilla, drupal, jekyll, hugo — add\n	`--icons`, `--theme`, `--out`, and for rust `--format`.\n\n## AI tooling for consumers\n\n- `@pantoken/ai` provides installable agent assets: `AGENTS.md`, `llms.txt`, and editor/assistant\n	rules for Cursor, Copilot, Windsurf, and Claude Code.\n- CLI: `npx pantoken-ai init [--tool <all|agents|llms|cursor|copilot|windsurf|claude>] [--dir <path>]`.\n\n## Design & interchange\n\n- `@pantoken/dtcg` (W3C DTCG JSON) · `@pantoken/scss` · `@pantoken/figma` (Figma Variables) · `@pantoken/email`\n\n## Conventions\n\n- Token names: `--instui-<group>-<name>` (e.g. `--instui-color-background-brand`).\n- Themes: rebrand (default), canvas, canvasHighContrast. Prefer `var(--instui-*)` references for theming.\n",
+	"cursor": "---\ndescription: How to use pantoken (Instructure design tokens & icons) in this project\nglobs:\nalwaysApply: false\n---\n\n# pantoken (Instructure design tokens & icons)\n\nWhen styling this project, use pantoken components, icons and tokens.\n\n- First distinguish a maintained application from a standalone artifact. For a single HTML mockup\n  or sendable email, follow the `create-pantoken-mockup` skill instead of scaffolding a project.\n- In a shadcn project, discover CSS items with `shadcn search @pantoken`, inspect with `shadcn view\n@pantoken/<item>`, and install with `shadcn add @pantoken/<item>`. These are styles and metadata,\n  not React components. `@pantoken/shadcn` is only the CSS-variable bridge.\n\n- Tokens are CSS custom properties `--instui-<group>-<name>` (e.g. `--instui-color-background-brand`).\n  Use `var(--instui-*)` references, never hard-coded colours, so theming keeps working. Resolve real\n  names from `@pantoken/tokens` — don't guess. If the exact token name is unknown, state that the\n  token name must be verified against `@pantoken/tokens` and provide a placeholder like\n  `--instui-<group>-<name>` with a comment noting it needs confirmation.\n- Web app: `import \"@pantoken/css/inject\";` to define the properties.\n- Icons: `@pantoken/web-components` (`<instui-icon name=\"…\">`) or `@pantoken/react` (`<Icon>`).\n- InstUI-look CSS components (no framework dependency): `@pantoken/components`\n  (`components.css`, `base.css`, `prose.css`, `utilities.css`, `fonts.css`) — class-based markup\n  like `<button class=\"instui-button\">`.\n- Component behaviors (vanilla JS): `@pantoken/interactions` (`initModal`, `initTooltip`, `initInPlaceEdit`, `initCloseButton`).\n- Tailwind: `pantokenPreset()` from `@pantoken/tailwind`.\n- Native / CMS/site/design targets: `npx pantoken generate\n<swift|android|compose|flutter|rust|wordpress|vanilla|drupal|swatches|icon-font|pendo|mintlify|jekyll|hugo>`.\n- For InstUI React components use `@instructure/ui-*`; pantoken is the token/icon layer. Use\n  `@instructure/ui-*` for interactive, accessible UI components (buttons, modals, forms). Use\n  `@pantoken/react` only for icons and token consumption. Do not substitute one for the other.\n",
+	"copilot": "# pantoken (Instructure design tokens & icons)\n\nWhen styling this project, use pantoken components, icons and tokens.\n\n- First distinguish a maintained application from a standalone artifact. For a single HTML mockup\n  or sendable email, follow the `create-pantoken-mockup` skill instead of scaffolding a project.\n- In a shadcn project, discover CSS items with `shadcn search @pantoken`, inspect with `shadcn view\n@pantoken/<item>`, and install with `shadcn add @pantoken/<item>`. These are styles and metadata,\n  not React components. `@pantoken/shadcn` is only the CSS-variable bridge.\n\n- Tokens are CSS custom properties `--instui-<group>-<name>` (e.g. `--instui-color-background-brand`).\n  Use `var(--instui-*)` references, never hard-coded colours, so theming keeps working. Resolve real\n  names from `@pantoken/tokens` — don't guess. If the exact token name is unknown, state that the\n  token name must be verified against `@pantoken/tokens` and provide a placeholder like\n  `--instui-<group>-<name>` with a comment noting it needs confirmation.\n- Web app: `import \"@pantoken/css/inject\";` to define the properties.\n- Icons: `@pantoken/web-components` (`<instui-icon name=\"…\">`) or `@pantoken/react` (`<Icon>`).\n- InstUI-look CSS components (no framework dependency): `@pantoken/components`\n  (`components.css`, `base.css`, `prose.css`, `utilities.css`, `fonts.css`) — class-based markup\n  like `<button class=\"instui-button\">`.\n- Component behaviors (vanilla JS): `@pantoken/interactions` (`initModal`, `initTooltip`, `initInPlaceEdit`, `initCloseButton`).\n- Tailwind: `pantokenPreset()` from `@pantoken/tailwind`.\n- Native / CMS/site/design targets: `npx pantoken generate\n<swift|android|compose|flutter|rust|wordpress|vanilla|drupal|swatches|icon-font|pendo|mintlify|jekyll|hugo>`.\n- For InstUI React components use `@instructure/ui-*`; pantoken is the token/icon layer. Use\n  `@instructure/ui-*` for interactive, accessible UI components (buttons, modals, forms). Use\n  `@pantoken/react` only for icons and token consumption. Do not substitute one for the other.\n",
+	"windsurf": "# pantoken rules (Instructure design tokens & icons)\n\n- Use pantoken tokens: CSS custom properties `--instui-<group>-<name>`. Prefer `var(--instui-*)`\n  references over hard-coded values so light/dark and high-contrast theming works. Resolve names\n  from `@pantoken/tokens`; do not invent them.\n- Route maintained apps to package-manager integration. Route a single HTML mockup or sendable email\n  to the `create-pantoken-mockup` skill instead of scaffolding a project.\n- In shadcn projects, use `shadcn search/view/add @pantoken/...` for CSS styles and metadata. The\n  registry does not provide React components; `@pantoken/shadcn` is the variable bridge.\n- Web: `import \"@pantoken/css/inject\";`. Icons: `@pantoken/web-components` (`<instui-icon>`).\n- React: `@pantoken/react`. Tailwind: `@pantoken/tailwind` preset.\n- Native / other ecosystems: `npx pantoken generate <swift|android|compose|flutter|rust|wordpress|vanilla|drupal|jekyll|hugo> --out <dir>`.\n- InstUI React components: `@instructure/ui-*`. pantoken is the token/icon layer.\n",
+	"initSkill": "---\nname: init-pantoken\ndescription: Install pantoken's agent assets (AGENTS.md, llms.txt, editor/agent rule files, and app/mockup skills) into this repo so AI tools know how to work with pantoken. Use when the user asks to add pantoken AI support, or wants Copilot/Cursor/Windsurf/Claude rules for pantoken set up in a repo.\n---\n\n# Init pantoken (AI assets)\n\nInstall pantoken's consumer-facing agent assets into the current repo: `AGENTS.md`, `llms.txt`,\neditor/agent rule files (Cursor, Copilot, Windsurf), and the `create-pantoken-app`,\n`create-pantoken-mockup`, and `use-pantoken-registry` skills.\n\n```sh\nnpx pantoken-ai init\n```\n\nThis installs every asset by default. To scope it to one tool, pass\n`--tool <agents|llms|cursor|copilot|windsurf|claude>`. To target a directory other than the\ncurrent one, pass `--dir <path>`. Substitute `pnpm dlx`, `yarn dlx`, `bunx`, or `deno run npm:` for `npx` depending\non the package manager detected in the repo (look for `pnpm-lock.yaml`, `yarn.lock`, or\n`bun.lock`/`bun.lockb`; default to npm/npx if none is found).\n\nThat's all this skill does — it only writes the asset files above, it does not install any\n`@pantoken/*` package or modify application code. Once the assets are installed, use\n`create-pantoken-app` for a maintained project (or run `npx pantoken-ai scaffold <platform>`\ndirectly), use `create-pantoken-mockup` for a standalone browser or email artifact, and use\n`use-pantoken-registry` when a shadcn project should search, inspect, or add Pantoken registry\nitems.\n",
+	"createAppSkill": "---\nname: create-pantoken-app\ndescription: Scaffold a maintained application, or add Instructure design tokens and icons (pantoken) to an existing project with a package manager. Use for web, framework, native, and CMS projects that need dependencies and builds. Do not use for a standalone HTML mockup or sendable email; use create-pantoken-mockup.\n---\n\n# Scaffold pantoken\n\nSet up [pantoken](https://www.npmjs.com/package/@pantoken/pantoken) — a design tokens and icons\nlibrary for Instructure UI — in the current project. Work through these steps.\n\nIf the user wants one standalone HTML file, a quick browser prototype, a customer email mockup, or\nsendable email HTML, stop and use the `create-pantoken-mockup` skill instead.\n\n## About pantoken\n\npantoken is built and used internally at Instructure, then open-sourced; Instructure doesn't\nprovide official warranty or support for it as a product, which is why it's published from\n[`thedannywahl`](https://github.com/thedannywahl/pantoken) on GitHub and npm\n([`@pantoken`](https://www.npmjs.com/org/pantoken)) rather than the `instructure` org/scope — it may\nmove there later. Check either link yourself before proceeding if you want to verify this.\n\n## 1. New project or existing repo?\n\n- **Empty directory, or no repo yet** — scaffold a starter with the CLI, then stop (steps 2-3 are\n  already done for you by the template).\n\n  The CLI has its own interactive prompts, but those only work at a real terminal, so ask the user\n  the questions below the same way you normally would, then pass their answers as flags (plus\n  `--yes`) so the command runs without needing its own prompts:\n\n  1. **Platform** — ask the user, offering the supported list: `components` (plain HTML/CSS;\n     `html` is an accepted alias), `react`, `vue`, `svelte`, `web-components`, `angular`,\n     `canvas-theme-editor` (Canvas LMS Theme Editor uploads + an RCE content page template\n     starter; `theme-editor` is an accepted alias). Skip asking only if it's unambiguous from the\n     conversation — route requests like \"use pantoken with my Canvas theme editor\" or \"build RCE\n     page templates\" straight to `canvas-theme-editor`. More platforms land over time; if the\n     desired one isn't yet supported by the scaffold CLI, skip the CLI entirely and proceed\n     directly to step 2 to manually install and wire pantoken instead.\n\n     For `canvas-theme-editor`, after scaffolding, tell the user to: (1) upload the generated\n     `theme.css`/`theme.js` under Canvas's Theme Editor → Advanced, and (2) run `npm run dev` to\n     author RCE page templates in the local TinyMCE editor, using the **Layouts** toolbar button to\n     start from a bundled starter layout before copying the result into Canvas.\n\n     If the CLI fails for any reason (non-zero exit, unsupported platform, network error), fall\n     through to step 2 and treat the project as an existing repo, preserving any files already\n     written by the CLI.\n\n  2. **Package manager** — if a lockfile already exists in the target directory, use it (see the\n     detection table in step 2); a genuinely empty directory has no lockfile to detect from, so\n     ask the user (npm/pnpm/yarn/bun/deno).\n  3. **Directory** — ask where to scaffold (default `.` for the current directory; confirm before\n     defaulting to `.` if you're not sure that's what they want).\n\n  Then run the fully-resolved command, substituting the chosen package manager's \"run a package's\n  CLI\" form from step 2's table for `npx`, and passing `--yes` so the CLI never falls back to its\n  own interactive prompts:\n\n  ```sh\n  npx @pantoken/ai scaffold <platform> --dir <dir> --yes\n  ```\n\n  This writes a minimal starter (`package.json`, entry file(s), README) for the chosen platform\n  with pantoken already installed and wired in, and also installs pantoken's agent assets\n  (AGENTS.md, editor/agent rules, skills) into the same directory. If you only want the starter\n  project without the agent assets, run `npx create-pantoken-app <platform> --dir <dir> --yes`\n  (or `npx @pantoken/scaffold <platform> --dir <dir> --yes`) directly instead — substituting the\n  chosen package manager's launcher for `npx` on either command. Run `npm install` (or the chosen\n  package manager's install) in the target directory afterward.\n\n- **Existing repo you want to add pantoken to** — continue to step 2.\n\n## 2. Determine the target\n\nAsk the user what kind of project they're building, unless it's unambiguous from the repo. Offer:\n\n- **Native web (plain HTML/CSS, no framework) — default** → `@pantoken/components`\n- A JS framework (React, Vue, Svelte, Angular, React Native, Next.js)\n- A build tool only, styling from raw tokens (Tailwind, PostCSS, Vite, Webpack, or plain `@pantoken/css`)\n- A native/CMS ecosystem (Swift, Android, Compose, Flutter, Rust, WordPress, Drupal, Vanilla, Jekyll, Hugo)\n\nIf the user doesn't answer or has no preference, default to native web (`@pantoken/components`).\n\nCorroborate with the repo when possible, and prefer the user's answer if it conflicts with detection:\n\n- `package.json` dependencies → web framework (react, vue, svelte, @angular/core, react-native,\n  next, vite, tailwindcss, webpack, postcss).\n- If no `package.json` is found and the user wants a web project, run `npm init -y` first, then\n  proceed with the native web default (or the chosen framework) — this applies even if the user\n  describes the project as \"existing\"; trust their named framework and proceed rather than asking\n  for clarification.\n- Native project files → iOS (`Package.swift`, `*.xcodeproj`), Android (`build.gradle`), Flutter\n  (`pubspec.yaml`), WordPress/Drupal/Vanilla theme dirs.\n\nAlso detect the package manager from the lockfile present in the repo, and use its equivalent\ncommand for every install/run step below instead of assuming npm:\n\n| Lockfile found             | Package manager | Add package(s)       | Run a package's CLI  |\n| -------------------------- | --------------- | -------------------- | -------------------- |\n| `pnpm-lock.yaml`           | pnpm            | `pnpm add <pkg>`     | `pnpm dlx <pkg>`     |\n| `yarn.lock`                | yarn            | `yarn add <pkg>`     | `yarn dlx <pkg>`     |\n| `bun.lock`/`bun.lockb`     | bun             | `bun add <pkg>`      | `bunx <pkg>`         |\n| `deno.lock`                | deno            | `deno add npm:<pkg>` | `deno run npm:<pkg>` |\n| `package-lock.json` / none | npm             | `npm i <pkg>`        | `npx <pkg>`          |\n\nIf no lockfile exists yet, default to npm (or whatever the user prefers).\n\n## 3. Install\n\nIf `components.json` exists or the user explicitly requests shadcn, use the indexed registry to\ndiscover and install Pantoken CSS styles:\n\n```sh\nnpx shadcn@latest search @pantoken --query <need>\nnpx shadcn@latest view @pantoken/<item>\nnpx shadcn@latest add @pantoken/<item>\n```\n\nRegistry items provide CSS and usage metadata, not React components. Use `@instructure/ui-*` when\nthe user needs full React components. Continue with direct package installation for non-shadcn\nprojects.\n\nUse the package manager detected in step 2 for every command below (the examples use `npm i`;\nsubstitute `pnpm add`, `yarn add`, or `bun add` as appropriate).\n\nFollow this decision checklist in order, then run one install command with all collected packages:\n\n1. **Is it native web** (plain HTML/CSS, no framework and no build tool detected)? Install only\n   `@pantoken/components` — it ships the token CSS baked in, so no separate `@pantoken/css` install\n   is needed — and stop:\n\n   ```sh\n   npm i @pantoken/components\n   ```\n\n2. **Is it Next.js?** Collect `@pantoken/css` plus `@pantoken/next` (do NOT also add\n   `@pantoken/react` — `@pantoken/next` includes the React integration), then add any matching tool\n   packages (Tailwind, Vite, etc.) from the table below.\n\n3. **Otherwise**, collect `@pantoken/css` first, then add the framework package and every matching\n   tool row's package from the table. Framework rows (React, Vue, etc.) and tool rows (Tailwind,\n   PostCSS, Vite, Webpack) are all additive — collect every matching row's package alongside\n   `@pantoken/css`.\n\n4. If the user wants to use `<instui-icon>` in any web framework project (React, Vue, Vite, etc.),\n   also collect `@pantoken/web-components` — regardless of which framework rows already matched.\n\nFor example:\n\n- A Next.js project also using Tailwind installs `@pantoken/css @pantoken/next @pantoken/tailwind`.\n- A React project also using Vite installs `@pantoken/css @pantoken/react @pantoken/vite`.\n\n| Detected                | Install                                                                                                                                                                                                                                                                            |\n| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| Native web (default)    | `@pantoken/components`                                                                                                                                                                                                                                                             |\n| React                   | `@pantoken/react`; if the user also wants full InstUI components (buttons, modals, etc.), additionally install the specific `@instructure/ui-*` packages needed, e.g. `@instructure/ui-buttons @instructure/ui-modal` (see <https://instructure.design> for the full package list) |\n| Vue / Svelte / Angular  | `@pantoken/vue` / `@pantoken/svelte` / `@pantoken/angular` + `@pantoken/web-components` (always install `@pantoken/web-components` alongside the framework package here — it's required for icon support in these three, not optional)                                             |\n| React Native            | `@pantoken/react-native`                                                                                                                                                                                                                                                           |\n| Next.js                 | `@pantoken/next` — Next.js projects do NOT also need `@pantoken/react`; `@pantoken/next` includes the React integration. Do not install both.                                                                                                                                      |\n| Vite                    | `@pantoken/vite`                                                                                                                                                                                                                                                                   |\n| Tailwind                | `@pantoken/tailwind`                                                                                                                                                                                                                                                               |\n| PostCSS / Webpack       | `@pantoken/postcss` / `@pantoken/webpack`                                                                                                                                                                                                                                          |\n| shadcn / Bootstrap      | `@pantoken/shadcn` / `@pantoken/bootstrap`                                                                                                                                                                                                                                         |\n| markdown-it / css-in-js | `@pantoken/markdown-it` / `@pantoken/css-in-js`                                                                                                                                                                                                                                    |\n| Icons anywhere          | `@pantoken/web-components` — for React, Next.js, React Native, and tool-only setups, only add this if the user explicitly wants icon support (`<instui-icon>` elements); for Vue, Svelte, and Angular it's always required (see that row)                                          |\n\nFor native / CMS targets, no install — run the CLI (step 5). If the project contains both a\n`package.json` and native/CMS files, treat it as a web project and follow the web install steps\nabove; only skip to step 5 if there is no `package.json` and no JS framework detected.\n\n## 4. Wire it up\n\n- Native web (default): import `base.css` + `components.css` from `@pantoken/components` (e.g.\n  `import \"@pantoken/components/base.css\"; import \"@pantoken/components/components.css\";`), then\n  apply classes like `class=\"instui-button\"` to markup.\n- Other web entry: add `import \"@pantoken/css/inject\";` (or `@import \"@pantoken/css/style.css\";`).\n- Next: wrap the config with `withPantoken(...)` and import the CSS in the root layout.\n- Vite: add the `pantoken()` plugin. Tailwind: add `pantokenPreset()` to `presets`.\n- Web components: `import \"@pantoken/web-components\";` then use `<instui-icon name=\"…\">`.\n- Verify the app renders and `getComputedStyle(document.documentElement).getPropertyValue('--instui-color-background-brand')` is non-empty.\n  If the property is empty, check that the token CSS import (`@pantoken/components/base.css` or\n  `@pantoken/css/inject`) appears before any component imports in the entry file, and that the dev\n  server was restarted after install. Report the specific failure to the user with corrective steps.\n\n## 5. Native / other ecosystems\n\n```sh\nnpx @pantoken/cli generate <swift|android|compose|flutter|rust|wordpress|vanilla|drupal|jekyll|hugo> --out <dir> [--icons a,b] [--theme rebrand]\n```\n\nSubstitute `pnpm dlx`, `yarn dlx`, `bunx`, or `deno run npm:` for `npx` per the package manager\ndetected in step 2 (or from the choice made in step 1 if you're still inside the new-project flow).\n\n## Conventions to follow afterward\n\n- Style with `var(--instui-*)` references, not hard-coded colours, so light/dark and high-contrast\n  theming keeps working.\n- Resolve real token names from `@pantoken/tokens`; never invent them.\n",
+	"createMockupSkill": "---\nname: create-pantoken-mockup\ndescription: Create a standalone Pantoken HTML mockup or sendable HTML email. Use when the user asks for a single HTML file, quick prototype, customer email mockup, or email-client-ready markup without creating an application project.\n---\n\n# Create a Pantoken mockup\n\nCreate one final HTML artifact without scaffolding an application. Do not create `package.json`,\ninstall project dependencies, or invoke `create-pantoken-app` unless the user changes the request to\na maintained application.\n\n## 1. Choose the output\n\nIf the request says email but does not say how the result will be used, ask one question:\n\n- **Browser mockup**: a visual prototype opened as a local HTML file.\n- **Sendable email**: HTML delivered through Gmail, Outlook, or an email service.\n\nThese are different outputs. Browser mockups may use external CSS, custom properties, and optional\nJavaScript. Sendable email must use concrete inline styles and no scripts.\n\n## 2. Browser mockup\n\nProduce one HTML file that opens directly in a browser. Do not use the shadcn registry for this\nworkflow; it is for package-managed projects.\n\n1. Discover core component requirements from\n   `https://pantoken.app/component-capabilities.json`.\n2. Discover plugin styles from `https://pantoken.app/cdn-plugin-manifest.json`.\n3. Use canonical HTML from `https://pantoken.app/demos/<component>.html` or the component's cssdoc\n   documentation. Preserve native elements, nesting, ARIA attributes, and documented state classes.\n4. Load a version-pinned token foundation first:\n\n   ```html\n   <link\n     rel=\"stylesheet\"\n     href=\"https://cdn.jsdelivr.net/npm/@pantoken/css@<version>/dist/style.lean.css\"\n   />\n   ```\n\n5. Load only the required `@pantoken/components/dist/<name>.css` and plugin CSS files. Put base CSS\n   before components and utilities after components. Use jsDelivr's combine endpoint when several\n   stylesheets are needed.\n6. If any selected component has `needsIcons: true`, add\n   `@pantoken/components/dist/component-icons.css`. Use the full token sheet only when arbitrary\n   icon tokens are required.\n7. If a component has JavaScript capability, load its per-component\n   `@pantoken/interactions/dist/<name>.iife.js` after the markup and include entries from `requires`\n   first. Do not load the aggregate interaction bundle unless many interactive components need it.\n8. Use `var(--instui-*)` for custom styling and never invent token names.\n\nFor a disposable preview, a major-version CDN pin is acceptable. Use exact versions for an artifact\nthat will be retained. If the user explicitly requires a fully offline file, fetch the selected CSS\nand JavaScript and inline it into `<style>` and `<script>` blocks.\n\nOpen the final file in a browser and verify styles, icons, responsive layout, keyboard interaction,\nand that every referenced asset loads. Give the user a link to the HTML file; do not start a server.\n\n## 3. Sendable HTML email\n\nDo not use Pantoken component CSS, the shadcn registry, CSS custom properties, JavaScript, custom\nelements, or icon-font masks. Email clients do not reliably support those features.\n\n1. Resolve values from `@pantoken/email` using `emailTokens(\"light\")` or the requested mode. If the\n   current directory is not a package-managed project, use a temporary package-runner environment;\n   do not leave a package manifest or dependency tree beside the final HTML.\n2. Build conservative table-based email markup with presentation-critical styles inline.\n3. Interpolate concrete colors and dimensions from the returned camel-cased token map. The final\n   HTML must not contain `var(--instui-*)`.\n4. Use hosted raster images with dimensions and meaningful `alt` text for logos or icons. Do not use\n   Pantoken custom elements or CSS glyph painters.\n5. Include a descriptive `<title>`, preheader text, semantic headings, readable fallback fonts, and\n   a plain text link for every call to action.\n6. Validate that the final file contains no `<script>`, custom elements, external Pantoken\n   stylesheets, or unresolved token references. Note that Gmail, Outlook, and production email\n   preview testing remains the sender's responsibility.\n\n## 4. Keep the artifact focused\n\nDo not add explanatory UI, setup instructions, package files, or a framework shell to the rendered\nartifact. Use Pantoken to serve the requested communication or prototype, not to advertise the\ndesign system.\n",
+	"registrySkill": "---\nname: use-pantoken-registry\ndescription: Use Pantoken's shadcn/ui registry to search, inspect, and add CSS-backed registry items. Use when a project has components.json, the user asks for shadcn registry items, or the user wants to browse Pantoken registry styles. Do not use as a general Pantoken app setup skill; use create-pantoken-app for non-registry package wiring.\n---\n\n# Use the Pantoken registry\n\nUse Pantoken's shadcn/ui registry when the project already uses shadcn/ui, has `components.json`,\nor the user explicitly asks for Pantoken registry items. Registry items install CSS, usage metadata,\nand package dependencies; they are not React components.\n\nIf the project is not a shadcn project and the user did not ask for the registry, stop and use\n`create-pantoken-app` instead.\n\n## 1. Confirm registry fit\n\nUse the registry only when one of these is true:\n\n- The repo contains `components.json`.\n- The user asks for shadcn, registry items, or `shadcn add`.\n- The task is to inspect Pantoken registry metadata.\n\nIf the user needs full interactive React components, use `@instructure/ui-*` packages. Pantoken's\nregistry provides CSS-backed styles and metadata, not component implementations.\n\n## 2. Use the project runner\n\nDetect the package manager from lockfiles and substitute its runner for `npx`:\n\n| Lockfile found             | Runner          |\n| -------------------------- | --------------- |\n| `pnpm-lock.yaml`           | `pnpm dlx`      |\n| `yarn.lock`                | `yarn dlx`      |\n| `bun.lock`/`bun.lockb`     | `bunx`          |\n| `deno.lock`                | `deno run npm:` |\n| `package-lock.json` / none | `npx`           |\n\n## 3. Search, inspect, add\n\nPrefer the shadcn CLI for live registry operations:\n\n```sh\nnpx shadcn@latest search @pantoken --query <need>\nnpx shadcn@latest view @pantoken/<item>\nnpx shadcn@latest add @pantoken/<item>\n```\n\nFor URL-capable agents, fetch the manifest first when you need to browse available entries:\n\n```text\nhttps://pantoken.app/r/registry.json\n```\n\nThen inspect the item JSON before adding when the choice is not obvious:\n\n```text\nhttps://pantoken.app/r/<item>.json\n```\n\n## 4. Explain what changed\n\nAfter adding an item, summarize:\n\n- Which registry item was installed.\n- Which files the shadcn CLI wrote or changed.\n- Any dependencies the registry item added.\n- That future styling should still use real `--instui-*` token names and `var(--instui-*)`\n  references rather than invented token names.\n\nIf the registry item does not satisfy the task, fall back to the normal package guidance in\n`create-pantoken-app` and explain why the registry path was not enough.\n"
 };
 //#endregion
 //#region src/agent-assets.ts
@@ -793,6 +795,14 @@ const TARGETS = {
 			file: ".claude/skills/create-pantoken-app/SKILL.md",
 			content: ASSETS.createAppSkill
 		},
+		{
+			file: ".claude/skills/create-pantoken-mockup/SKILL.md",
+			content: ASSETS.createMockupSkill
+		},
+		{
+			file: ".claude/skills/use-pantoken-registry/SKILL.md",
+			content: ASSETS.registrySkill
+		},
 		{
 			file: "AGENTS.md",
 			content: ASSETS.agents

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pantoken/scaffold",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "npx @pantoken/scaffold <platform> — scaffold a starter project (html, react, next, angular, web-components, ...) with pantoken already installed and wired in.",
   "homepage": "https://pantoken.app",
   "bugs": "https://github.com/thedannywahl/pantoken/issues",
@@ -30,25 +30,25 @@
   },
   "dependencies": {
     "@bomb.sh/tab": "^0.0.22",
-    "@clack/prompts": "^1.8.0",
+    "@clack/prompts": "^1.8.1",
     "commander": "^15.0.0"
   },
   "devDependencies": {
-    "@pantoken/angular": "0.1.31",
-    "@pantoken/canvas-theme-editor": "0.2.0",
-    "@pantoken/components": "1.1.3",
+    "@pantoken/angular": "0.1.36",
+    "@pantoken/canvas-theme-editor": "0.2.1",
+    "@pantoken/components": "1.2.2",
     "@pantoken/i18n-engine": "0.3.1",
-    "@pantoken/plugin-layouts": "0.3.0",
-    "@pantoken/react": "0.1.32",
-    "@pantoken/scaffold-base": "0.3.0",
-    "@pantoken/svelte": "0.1.32",
-    "@pantoken/vue": "0.1.32",
-    "@pantoken/web-components": "0.6.3",
+    "@pantoken/plugin-layouts": "0.4.0",
+    "@pantoken/react": "0.1.37",
+    "@pantoken/scaffold-base": "0.3.2",
+    "@pantoken/svelte": "0.1.37",
+    "@pantoken/vue": "0.1.37",
+    "@pantoken/web-components": "0.6.8",
     "@types/node": "^26.5.1",
     "bingo-stratum": "^0.5.13",
     "typescript": "^7.0.2",
-    "vite": "npm:@voidzero-dev/vite-plus-core@0.3.1",
-    "vite-plus": "0.3.1"
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.3.2",
+    "vite-plus": "0.3.2"
   },
   "engines": {
     "node": ">=22.18.0"