home / skills / duong / dotfiles / canva-dev

canva-dev skill

safe

This skill helps you develop Canva Apps SDK projects by guiding you through documentation, UI kit usage, CLI commands, and design reviews.

npx playbooks add skill duong/dotfiles --skill canva-dev

Review the files below or copy the command above to add this skill to your agents.

Files (2)

SKILL.md

844 B

---
name: canva-dev
description: Develops Canva Apps SDK apps - read documentation, UI kit components, design guidelines, CLI commands. Use when building or developing Canva apps.
---

# Canva Apps SDK Development

Build apps on Canva using the Apps SDK.

## Capabilities

- **Documentation**: Read SDK docs, Connect API docs, design guidelines
- **UI Kit**: Browse App UI Kit components, patterns, and props
- **CLI**: Read Canva CLI documentation for app creation and preview
- **Migration**: Get migration instructions for updating apps
- **Design Review**: Instructions for reviewing app designs

## When to Use

Load this skill when asked to:
- Build or develop a Canva app
- Look up Canva Apps SDK documentation
- Use Canva App UI Kit components
- Run Canva CLI commands
- Migrate or update existing Canva apps
- Review Canva app designs

Overview

This skill helps developers build and maintain apps using the Canva Apps SDK. It aggregates SDK and Connect API documentation, UI Kit components, CLI commands, migration steps, and design-review guidance to speed development and ensure consistency. Use it to find concrete instructions for coding, testing, and shipping Canva apps.

How this skill works

The skill inspects the Canva Apps SDK documentation, UI Kit component catalogs, and CLI reference to extract actionable tasks and command examples. It summarizes design guidelines and migration notes, and provides step-by-step instructions for creating, previewing, and updating apps. Responses focus on code-level actions, configuration, and recommended UI patterns.

When to use it

When starting a new Canva app and you need SDK setup and CLI commands.
When implementing UI Kit components or following Canva design patterns.
When running or troubleshooting the Canva CLI to preview apps.
When migrating an existing app to a newer SDK version.
When performing a design review to meet Canva platform guidelines.

Best practices

Follow the UI Kit component props and responsive patterns to ensure consistent behavior.
Use the CLI for iterative development: create, preview, and test locally before publishing.
Keep Connect API credentials and scopes minimal and secure; rotate keys as needed.
Read migration notes before upgrading SDK versions and run tests after each change.
Validate accessibility and responsive layouts as part of design reviews.

Example use cases

Create a new Canva app scaffold, install dependencies, and run the preview command.
Map a UI Kit component to your app state and implement its props for dynamic content.
Resolve a failing CLI preview by checking configuration and environment variables.
Follow migration instructions to update deprecated SDK APIs to the current release.
Audit an app UI against Canva design guidelines and produce a prioritized fix list.

FAQ

Can this skill show CLI commands to preview an app?

Yes. It provides the canonical Canva CLI commands and common flags used to create, preview, and test apps locally.

Will it generate complete app code for me?

It provides code patterns, component usage examples, and configuration steps, but you should integrate and test generated snippets within your project.