Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add commands/pmdevsolutions/aurelius/build-from-canvagit clone --depth 1 https://github.com/PMDevSolutions/AureliusWrote 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.svg" alt="Measured on agentmods" 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 | $0.00000 | $0.01499 |
| Sonnet 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 today.
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.
- today First seen · 271 lines · 0 tokens per session scan A 67bcec54a542
build-from-canva is a command published in the GitHub repository PMDevSolutions/Aurelius (8 stars, last pushed 20d ago), 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.
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.
accessibility-audit
Full WCAG AA accessibility audit on an HTML file — contrast ratios, keyboard navigation, semantic HTML, ARIA usage, touch targets, and label associations.
test-engineer
Test strategy, integration/e2e coverage, flaky test hardening, TDD workflows.
figma-start
디자이너가 개발자의 원본 PR 위에서 검수를 시작할 때 호출하는 커맨드입니다. PR 링크 하나만 주면 프로젝트 클론부터 합니다 — 검수할 프로젝트를 미리 받아둘 필요가 없습니다. 브랜치 생성·체크아웃 후 빌드해서 기기에 올려 화면까지 띄워줍니다 — 실행할 기기·에뮬레이터가 없으면 검수에 맞는 걸 설치해서 만듭니다. 그 브랜치의 커밋 이력 패널도 개발툴에 띄워줍니다 — 지금까지 반영한 검수 내용을 검수 내내 옆에 두고 볼 수 있습니다. 커밋·푸시는 하지 않습니다. 디자이너가 화면을 먼저 확인한 뒤, 필요하면 /figma-apply로 피그마 변경을 반영합니다.