Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/PMDevSolutions/Aureliusnpx agentmods add commands/pmdevsolutions/aurelius/build-from-canvaWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/commands/pmdevsolutions/aurelius/build-from-canva)<a href="https://agentmods.dev/commands/pmdevsolutions/aurelius/build-from-canva"><img src="https://agentmods.dev/badge/commands/pmdevsolutions/aurelius/build-from-canva/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/commands/pmdevsolutions/aurelius/build-from-canva"><img src="https://agentmods.dev/badge/commands/pmdevsolutions/aurelius/build-from-canva.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00000 | $0.02998 |
| Opus 5.5 | $0.00000 | $0.01199 |
| Sonnet 5.5 | $0.00000 | $0.00600 |
| Haiku 4.5 | $0.00000 | $0.00300 |
Grade A, and why
build-from-canva scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 1mo ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 271 lines — stays where its author put it; the contents beside it link to each section on GitHub.
/build-from-canva — Autonomous Canva-to-Working-App Pipeline
You are the master orchestrator for converting a Canva design into a fully working, tested React application. You receive a Canva URL and guide the entire process through 12 phases, using specialized skills and agents.
Key enforcement rules:
- TDD is mandatory — Phase 3 (TDD) MUST complete before Phase 4 (Build). No exceptions.
- Visual QA uses pixel diff — Phase 5 uses
scripts/visual-diff.jsfor programmatic comparison, not manual eyeballing. - E2E tests are generated — Phase 6 generates and runs Playwright E2E tests appropriate to the app type.
- App-type aware — Chrome extensions, PWAs, and web apps each get tailored test strategies.
- Token inference requires confirmation — Phase 2 extracts tokens via AI vision and MUST get user confirmation before locking.
Input
The user provides: $ARGUMENTS (a Canva design URL)
Parse the Canva URL to extract:
designIdfrom the URL path (e.g.,https://www.canva.com/design/DAGxyz.../...→DAGxyz...)
Configuration
Load .claude/pipeline.config.json at the start. This provides:
- Visual diff thresholds and iteration limits
- TDD enforcement settings
- E2E strategy per app type
- Quality gate thresholds
- Lighthouse score minimums
- Canva-specific settings (export format, scale, inference confidence threshold)
Progress Tracking
Use TodoWrite to create a master checklist. Update each item as phases complete. This enables interrupted sessions to resume.
[ ] Phase 0: Token Sync — sync-tokens.sh → check for drift (if lockfile exists)
[ ] Phase 1: Intake — canva-intake skill → build-spec.json
[ ] Phase 2: Token Inference — canva-token-inference skill → lockfile + tailwind config (requires user confirmation)
[ ] Phase 3: TDD Scaffold — tdd-from-figma skill → failing tests (RED)
[ ] Phase 4: Component Build — converter agent (per resolved renderer manifest) → tests pass (GREEN)
[ ] Phase 4.5: Storybook — generate-stories.sh → auto-generated stories
[ ] Phase 5: Visual Verification — pixel-diff loop (max N iterations, against Canva screenshots)
[ ] Phase 5.5: Dark Mode — check-dark-mode.sh → dark mode visual verification
[ ] Phase 6: E2E Tests — e2e-test-generator skill → Playwright tests
[ ] Phase 7: Cross-Browser — screenshots in Firefox/WebKit (non-blocking)
[ ] Phase 8: Quality Gate — coverage, types, build, tokens, Lighthouse
[ ] Phase 8.5: Responsive — check-responsive.sh → screenshots at 5 breakpoints
[ ] Phase 9: Report — build-report.md
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 1mo ago First seen · 271 lines · 0 tokens per session scan A 67bcec54a542
build-from-canva is a command published in the GitHub repository PMDevSolutions/Aurelius (9 stars, last pushed today), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 2,998 tokens. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-04.
Other commands, from other repositories
implement
E2E-first Test driven development — unit tests written last.
distill
Creates E2E acceptance tests in Given-When-Then format from requirements and architecture. Use when preparing executable specifications before implementation.
fix
Correction automatisee des bugs identifies par la QA Recette.
qa
Validate an application against a Gherkin user story by spawning a QA team that drives the running app.
test
Write tests before implementation using Red-Green-Refactor.
test-author
Write tests first (RED→GREEN→REFACTOR) with Vitest, Testing Library, and Playwright for a Next.js + Supabase app. Use when adding a feature, fixing a bug, or...