Not in the top 1,000 by GitHub stars

ToluVictor/canvas-apps-tools

AI skills for Power Apps Canvas Apps - Generate paste-ready Power Apps Canvas App YAML from screenshots, mockups, or text descriptions

Claude Code Engineering

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

`skills/canvas-apps-ui-gen/SKILL.md`

Week of Nov 2, 2026 · +0 / −0 lines

Before Instructions only → After Instructions only

b371d02f3db3 → b371d02f3db3

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Instructions only

First observation → b371d02f3db3

No earlier version was observed for comparison.

Compare on GitHub

View on GitHub Add to my skills

Verified commit b371d02f3db33eecc08c8961ea574f82414567aa

Version-pinned installation · Claude Code

git clone --filter=blob:none --no-checkout https://github.com/ToluVictor/canvas-apps-tools.git .hotskills/toluvictor-canvas-apps-tools && git -C .hotskills/toluvictor-canvas-apps-tools checkout --detach b371d02f3db33eecc08c8961ea574f82414567aa
# Copy each selected skill directory from .hotskills/toluvictor-canvas-apps-tools into .claude/skills/<skill-name>/

149GitHub stars

0stars in 7 days

1skill in this repository

0commits in 30 days

Heat

0.4

Star growth, last 7 daysNot available
Star growth, last 24 hoursNot available
Rank movement, last 7 daysNot available
Commits, last 30 daysNot available
Accounts asking about it through MCP, last 7 daysNot available
Hot votes this weekNot available

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

30-day change not yet available: not enough history.

Individual skills in this repository

canvas-apps-ui-gen skills/canvas-apps-ui-gen

How it works

canvas-apps-ui-gen

When your agent uses it

Generates paste-ready Power Apps Canvas App YAML. Invoke when the user wants to replicate a UI mockup, improve an existing Canvas app screen, or build a new screen from a text description. Also invoke when the user asks to "improve", "redesign", or "generate YAML" for a Canvas app screen.

What it loads into context

Frontmatter

99 tokens

Always available to the agent

SKILL.md

6,124 tokens

When the skill is activated

Reference documents

67,826 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

PHASE 1 — MODE DETECTION
PHASE 2 — LOAD THE IMAGE
PHASE 3 — COMBINED ANALYSIS AND QUESTIONS
PHASE 4 — MULTI-AGENT YAML GENERATION
SELF-GROWING TEMPLATES
PROTECTED FILE CHANGES
CRITICAL RULES (ALWAYS APPLY)

Files

../../.claude-plugin/marketplace.jsonasset572 bytes
../../.claude-plugin/plugin.jsonasset201 bytes
SKILL.mdcore25,949 bytes
SKILL.mdcore25,949 bytes
SKILL.mdcore25,949 bytes
SKILL.mdcore25,949 bytes
SKILL.mdcore25,949 bytes
agents/assembly-agent.mddoc15,733 bytes
agents/controls-agent.mddoc11,946 bytes
agents/layout-sizing-agent.mddoc20,205 bytes
agents/qa-agent.mddoc8,514 bytes
agents/styling-agent.mddoc10,813 bytes
reference/canvas-apps-limitations.mddoc16,500 bytes
reference/controls-index.mddoc8,386 bytes
reference/controls-reference.mddoc46,764 bytes
reference/design-spec-formats.mddoc9,153 bytes
reference/pa-yaml-rules.mddoc98,023 bytes
reference/sizing-reference.mddoc17,132 bytes
templates/card-template-1.yamlasset9,755 bytes
templates/card-template-2.yamlasset12,592 bytes
templates/card-template-3.yamlasset12,344 bytes
templates/custom-button.yamlasset9,106 bytes
templates/data-table.yamlasset17,698 bytes
templates/form-template-1.yamlasset17,099 bytes
templates/kpi-cards.yamlasset10,266 bytes
templates/screen-table-template-1.yamlasset35,702 bytes
templates/sidebar-collapsible.yamlasset23,084 bytes
templates/tab-bar.yamlasset5,145 bytes
templates/table-template-1.yamlasset27,913 bytes

Read SKILL.md


You are an expert Power Apps Canvas App developer and orchestrator. When this skill is invoked, follow the process below exactly.

---

## PHASE 1 — MODE DETECTION

At invocation, determine whether an image is available:

**Image available** (`$ARGUMENTS` contains a file path, OR an image is pasted/dragged into the conversation):
- Load the image now (follow Phase 2 exactly)
- Proceed directly to Phase 3 — do **NOT** ask the mode question
- Mode (Replicate vs Improve) will be determined as part of Phase 3

**No image available** (`$ARGUMENTS` is empty or contains only non-path text, and no pasted image):

View the complete source on GitHub

Skills included

canvas-apps-ui-gen

Repository facts

License: MIT
Created: Mar 19, 2026
Last pushed: Apr 22, 2026
Forks: 28
Open issues: 0
Project activity: Slowing

Before you install

Instructions only

Automated signals, not a guarantee

Checked Nov 6, 2026

Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.

Show 4 notes

skills/canvas-apps-ui-gen/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
skills/canvas-apps-ui-gen/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
skills/canvas-apps-ui-gen/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
skills/canvas-apps-ui-gen/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed

No broad tool permissions
No dangerous shell commands
117 network referencesin 13 files: canvas-apps-ui-gen/templates/sidebar-collapsible.yaml:117 canvas-apps-ui-gen/templates/card-template-2.yaml:32 canvas-apps-ui-gen/templates/card-template-3.yaml:31 and 10 more
No hidden or obfuscated text
No instruction overrides
No executable scripts
No access to secrets
No requests to vote in Hot

Show all 117 signals by file

`skills/canvas-apps-ui-gen/agents/controls-agent.md`

Network accessline 131

Image: |-      ="data:image/svg+xml;utf8, " & EncodeUrl(          "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='[PATH]'/></svg>"

Network accessline 132

="data:image/svg+xml;utf8, " & EncodeUrl(          "<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='[PATH]'/></svg>"      )

Network accessline 133

"<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='[PATH]'/></svg>"

`skills/canvas-apps-ui-gen/agents/styling-agent.md`

Network accessline 73

Image: |-     ="data:image/svg+xml;utf8, " & EncodeUrl(         "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='" &

Network accessline 74

="data:image/svg+xml;utf8, " & EncodeUrl(         "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='" &         If([active condition], "[activeColor]", "[defaultColor]") &

Network accessline 75

"<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='" &

Network accessline 174

Image: |-     ="data:image/svg+xml;utf8, " & EncodeUrl(         "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='" &

Network accessline 175

="data:image/svg+xml;utf8, " & EncodeUrl(         "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='" &         If(CurrentMenuID = ThisItem.MenuID, "RGBA(234,88,12,1)", "RGBA(107,114,128,1)") &

Network accessline 176

"<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='" &

`skills/canvas-apps-ui-gen/reference/controls-index.md`

Network accessline 118

Base URL: `https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/controls/`

`skills/canvas-apps-ui-gen/reference/pa-yaml-rules.md`

Network accessline 19

- Text strings like `"Goal: 5"` or `"Item #3"` - String interpolation like `$"Goal: {value}"` - SVG strings containing `xmlns='http://...'`

Network accessline 20

- String interpolation like `$"Goal: {value}"` - SVG strings containing `xmlns='http://...'` - Any expression with URLs

Network accessline 21

- SVG strings containing `xmlns='http://...'`

Network accessline 1385

="data:image/svg+xml;utf8, " & EncodeUrl(                   Substitute(                       "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'>

Network accessline 1386

Substitute(                       "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'>                 <path d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1

Network accessline 1387

"<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'>

Network accessline 1461

="data:image/svg+xml;utf8, " & EncodeUrl(       Substitute(           "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'>

Network accessline 1462

Substitute(           "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'>     <path d='...'/>

Network accessline 1463

"<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'>

Network accessline 1491

> **SVG rule:** SVG strings containing `xmlns='http://...'` always use `|-` multiline format because of the colon in the URL (see Colon/Hash Rule above).

`skills/canvas-apps-ui-gen/templates/card-template-1.yaml`

Network accessline 30

CardName: "Total Lease Costs",                       Icon: "                       <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-cash' viewBox='0 0 16 16'>

Network accessline 31

Icon: "                       <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-cash' viewBox='0 0 16 16'>                 <path d='M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4'/>

Network accessline 32

<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-cash' viewBox='0 0 16 16'>

Network accessline 42

CardName: "Total Active Leases",                       Icon: "                       <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-person-fill' viewBox='0 0 16 16'>

Network accessline 43

Icon: "                       <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-person-fill' viewBox='0 0 16 16'>                 <path d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0

Network accessline 44

<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-person-fill' viewBox='0 0 16 16'>

Network accessline 53

CardName: "Most Leased Make",                       Icon: "                       <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-car-front-fill' viewBox='0 0 16 16'>

Network accessline 54

Icon: "                       <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-car-front-fill' viewBox='0 0 16 16'>                 <path d='M2.52 3.515A2.5 2.5 0 0 1 4.82 2h6.362c1 0 1.904.596

Network accessline 55

<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-car-front-fill' viewBox='0 0 16 16'>

Network accessline 64

CardName: "Total Lease Deposits",                       Icon: "                       <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-wallet-fill' viewBox='0 0 16 16'>

Network accessline 65

Icon: "                       <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-wallet-fill' viewBox='0 0 16 16'>                 <path d='M1.5 2A1.5 1.5 0 0 0 0 3.5v2h6a.5.5 0 0 1 .5.5c0 .253.0

Network accessline 66

<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-wallet-fill' viewBox='0 0 16 16'>

`skills/canvas-apps-ui-gen/templates/card-template-2.yaml`

Network accessline 32

Color: RGBA(191, 168, 255,1),                       Icon: "                       <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-grid-fill' viewBox='0 0 16 16'>

Network accessline 33

Icon: "                       <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-grid-fill' viewBox='0 0 16 16'>                 <path d='M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.

Network accessline 34

<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-grid-fill' viewBox='0 0 16 16'>

Network accessline 43

ID: "02",                       Color: RGBA(254, 230, 194,1),                       Icon: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M8 16c3.314 0 6-2 6-5.5 0-1.5-.5-4-2.

Network accessline 44

Color: RGBA(254, 230, 194,1),                       Icon: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M8 16c3.314 0 6-2 6-5.5 0-1.5-.5-4-2.5-6 .25 1.5-1.25 2-1.25 2C11 4 9

Network accessline 45

Icon: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M8 16c3.314 0 6-2 6-5.5 0-1.5-.5-4-2.5-6 .25 1.5-1.25 2-1.25 2C11 4 9 .5 6 0c.357 2 .5 4-2 6-1.25 1-2 2.729-2 4.5C2 14 4.

Network accessline 51

ID: "03",                       Color: RGBA(237, 250, 84,1),                       Icon: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M11.251.068a.5.5 0 0 1 .227.58L9.677 6

Network accessline 52

Color: RGBA(237, 250, 84,1),                       Icon: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5

Network accessline 53

Icon: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.8

Network accessline 59

ID: "04",                       Color: RGBA(82, 222, 229,1),                       Icon: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-person-fill' viewBox='0 0 16 16'><path d='M3 14s-1 0-1

Network accessline 60

Color: RGBA(82, 222, 229,1),                       Icon: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-person-fill' viewBox='0 0 16 16'><path d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a

Network accessline 61

Icon: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-person-fill' viewBox='0 0 16 16'><path d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6'/></svg>",

Network accessline 151

="data:image/svg+xml;utf8, "&EncodeUrl(                                           Substitute(                                               "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arr

Network accessline 152

Substitute(                                               "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-right-short' viewBox='0 0 16 16'>                                         <path

Network accessline 153

"<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-right-short' viewBox='0 0 16 16'>

`skills/canvas-apps-ui-gen/templates/card-template-3.yaml`

Network accessline 31

ID: "01",                       Color: RGBA(191, 168, 255,1),                       Icon: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-grid-fill' viewBox='0 0 16 16'><path d='M1 2.5A1.5 1.

Network accessline 32

Color: RGBA(191, 168, 255,1),                       Icon: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-grid-fill' viewBox='0 0 16 16'><path d='M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7

Network accessline 33

Icon: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-grid-fill' viewBox='0 0 16 16'><path d='M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5zm8

Network accessline 39

ID: "02",                       Color: RGBA(254, 230, 194,1),                       Icon: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M8 16c3.314 0 6-2 6-5.5 0-1.5-.5-4-2.

Network accessline 40

Color: RGBA(254, 230, 194,1),                       Icon: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M8 16c3.314 0 6-2 6-5.5 0-1.5-.5-4-2.5-6 .25 1.5-1.25 2-1.25 2C11 4 9

Network accessline 41

Icon: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M8 16c3.314 0 6-2 6-5.5 0-1.5-.5-4-2.5-6 .25 1.5-1.25 2-1.25 2C11 4 9 .5 6 0c.357 2 .5 4-2 6-1.25 1-2 2.729-2 4.5C2 14 4.

Network accessline 47

ID: "03",                       Color: RGBA(237, 250, 84,1),                       Icon: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M11.251.068a.5.5 0 0 1 .227.58L9.677 6

Network accessline 48

Color: RGBA(237, 250, 84,1),                       Icon: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5

Network accessline 49

Icon: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.8

Network accessline 55

ID: "04",                       Color: RGBA(82, 222, 229,1),                       Icon: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-person-fill' viewBox='0 0 16 16'><path d='M3 14s-1 0-1

Network accessline 56

Color: RGBA(82, 222, 229,1),                       Icon: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-person-fill' viewBox='0 0 16 16'><path d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a

Network accessline 57

Icon: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-person-fill' viewBox='0 0 16 16'><path d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6'/></svg>",

Network accessline 146

="data:image/svg+xml;utf8, "&EncodeUrl(                                           Substitute(                                               "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arr

Network accessline 147

Substitute(                                               "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-right-short' viewBox='0 0 16 16'>                                         <path

Network accessline 148

"<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-right-short' viewBox='0 0 16 16'>

`skills/canvas-apps-ui-gen/templates/custom-button.yaml`

Network accessline 56

="data:image/svg+xml;utf8, " & EncodeUrl(                   Substitute(                       "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'>

Network accessline 57

Substitute(                       "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'>                 <path d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1

Network accessline 58

"<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'>

Network accessline 131

="data:image/svg+xml;utf8, " & EncodeUrl(                   Substitute(                       "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'>

Network accessline 132

Substitute(                       "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'>                 <path fill-rule='evenodd' d='M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-

Network accessline 133

"<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'>

Network accessline 192

="data:image/svg+xml;utf8, " & EncodeUrl(                   Substitute(                       "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'>

Network accessline 193

Substitute(                       "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'>                 <path fill-rule='evenodd' d='M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-

Network accessline 194

"<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'>

`skills/canvas-apps-ui-gen/templates/data-table.yaml`

Network accessline 244

="data:image/svg+xml;utf8, " & EncodeUrl(                                           Substitute(                                               "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 1

Network accessline 245

Substitute(                                               "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'>                                         <path d='M12.146.146a.5.5 0 0 1 .708

Network accessline 246

"<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'>

Network accessline 304

="data:image/svg+xml;utf8, " & EncodeUrl(                                           Substitute(                                               "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 1

Network accessline 305

Substitute(                                               "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'>                                         <path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5

Network accessline 306

"<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'>

`skills/canvas-apps-ui-gen/templates/kpi-cards.yaml`

Network accessline 94

="data:image/svg+xml;utf8, " & EncodeUrl(                               Substitute(                                   "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'>

Network accessline 95

Substitute(                                   "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'>                             <path d='M0 0h1v15h15v1H0zm14.817 3.113a.5.5 0 0 1 .07.704l-4

Network accessline 96

"<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'>

`skills/canvas-apps-ui-gen/templates/screen-table-template-1.yaml`

Network accessline 110

="data:image/svg+xml;utf8, "&EncodeUrl(                                           Substitute(                                               "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arr

Network accessline 111

Substitute(                                               "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-right-short' viewBox='0 0 16 16'>                                         <path

Network accessline 112

"<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-right-short' viewBox='0 0 16 16'>

Network accessline 342

)                                                 Height: =30                                                 Image: "=\"data:image/svg+xml;utf8, \"&EncodeUrl(\r\n    Substitute(\r\n        Switch(\r\n            Text(ThisItem.'Task Categor

Network accessline 343

Height: =30                                                 Image: "=\"data:image/svg+xml;utf8, \"&EncodeUrl(\r\n    Substitute(\r\n        Switch(\r\n            Text(ThisItem.'Task Category'),\r\n\r\n            \"General Safety\",\r\n

Network accessline 344

Image: "=\"data:image/svg+xml;utf8, \"&EncodeUrl(\r\n    Substitute(\r\n        Switch(\r\n            Text(ThisItem.'Task Category'),\r\n\r\n            \"General Safety\",\r\n            \"\r\n                <svg xmlns='http://www.w3.org

Network accessline 500

="data:image/svg+xml;utf8, "&EncodeUrl(                                                             Substitute(                                                                 "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'

Network accessline 501

Substitute(                                                                 "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-right-short' viewBox='0 0 16 16'>

Network accessline 502

"<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-right-short' viewBox='0 0 16 16'>

`skills/canvas-apps-ui-gen/templates/sidebar-collapsible.yaml`

Network accessline 117

="data:image/svg+xml;utf8, " & EncodeUrl(                                     Substitute(                                         "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-list' viewBox

Network accessline 118

Substitute(                                         "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-list' viewBox='0 0 16 16'>                                   <path fill-rule='evenodd' d='M

Network accessline 119

"<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-list' viewBox='0 0 16 16'>

Network accessline 161

=Table(                         {                             MenuIcon_Selected: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0

Network accessline 162

{                             MenuIcon_Selected: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.

Network accessline 163

MenuIcon_Selected: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0

Network accessline 164

MenuIcon: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5

Network accessline 168

},                         {                             MenuIcon_Selected: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V

Network accessline 169

{                             MenuIcon_Selected: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13

Network accessline 170

MenuIcon_Selected: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6zM2 3a.5.5 0

Network accessline 171

MenuIcon: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5

Network accessline 175

},                         {                             MenuIcon_Selected: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1

Network accessline 176

{                             MenuIcon_Selected: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6'/></sv

Network accessline 177

MenuIcon_Selected: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6'/></svg>",

Network accessline 178

MenuIcon: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-

Network accessline 182

},                         {                             MenuIcon_Selected: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464

Network accessline 183

{                             MenuIcon_Selected: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31

Network accessline 184

MenuIcon_Selected: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.9

Network accessline 185

MenuIcon: "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.4

`skills/canvas-apps-ui-gen/templates/table-template-1.yaml`

Network accessline 106

="data:image/svg+xml;utf8, "&EncodeUrl(                                     Substitute(                                         "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-right-sho

Network accessline 107

Substitute(                                         "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-right-short' viewBox='0 0 16 16'>                                   <path fill-rule='

Network accessline 108

"<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-right-short' viewBox='0 0 16 16'>

Network accessline 312

="data:image/svg+xml;utf8, " & EncodeUrl(                                                 Substitute(                                                     "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' vi

Network accessline 313

Substitute(                                                     "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><circle cx='8' cy='8' r='8'/></svg>",

Network accessline 314

"<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><circle cx='8' cy='8' r='8'/></svg>",

Network accessline 463

="data:image/svg+xml;utf8, "&EncodeUrl(                                                       Substitute(                                                           "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='curren

Network accessline 464

Substitute(                                                           "<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-right-short' viewBox='0 0 16 16'>

Network accessline 465

"<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-right-short' viewBox='0 0 16 16'>

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

Some files could not be read; the facts below still hold.

Signal confidence: 20 facts

Network access in code of documentationcanvas-apps-ui-gen/agents/controls-agent.md:131Low confidence
Network access in code of documentationcanvas-apps-ui-gen/agents/controls-agent.md:132Low confidence
Network access in code of documentationcanvas-apps-ui-gen/agents/controls-agent.md:133Low confidence
Network access in code of documentationcanvas-apps-ui-gen/agents/styling-agent.md:73Low confidence
Network access in code of documentationcanvas-apps-ui-gen/agents/styling-agent.md:74Low confidence
Network access in code of documentationcanvas-apps-ui-gen/agents/styling-agent.md:75Low confidence
Network access in code of documentationcanvas-apps-ui-gen/agents/styling-agent.md:174Low confidence
Network access in code of documentationcanvas-apps-ui-gen/agents/styling-agent.md:175Low confidence
Network access in code of documentationcanvas-apps-ui-gen/agents/styling-agent.md:176Low confidence
Network access in prose of documentationcanvas-apps-ui-gen/reference/controls-index.md:118Low confidence
Network access in prose of documentationcanvas-apps-ui-gen/reference/pa-yaml-rules.md:19Low confidence
Network access in prose of documentationcanvas-apps-ui-gen/reference/pa-yaml-rules.md:20Low confidence
Network access in prose of documentationcanvas-apps-ui-gen/reference/pa-yaml-rules.md:21Low confidence
Network access in code of documentationcanvas-apps-ui-gen/reference/pa-yaml-rules.md:1385Low confidence
Network access in code of documentationcanvas-apps-ui-gen/reference/pa-yaml-rules.md:1386Low confidence
Network access in code of documentationcanvas-apps-ui-gen/reference/pa-yaml-rules.md:1387Low confidence
Network access in code of documentationcanvas-apps-ui-gen/reference/pa-yaml-rules.md:1461Low confidence
Network access in code of documentationcanvas-apps-ui-gen/reference/pa-yaml-rules.md:1462Low confidence
Network access in code of documentationcanvas-apps-ui-gen/reference/pa-yaml-rules.md:1463Low confidence
Network access in prose of documentationcanvas-apps-ui-gen/reference/pa-yaml-rules.md:1491Low confidence

Works with

Agent compatibility, from the files in this repository
Agent	Status	Evidence	Install to
Claude Code	Native	Manifest .claude-plugin/marketplace.json	`.claude/skills/<skill-name>/`
Codex	Compatible	Standard SKILL.md skills/canvas-apps-ui-gen/SKILL.md	`.agents/skills/<skill-name>/`
Cursor	Compatible	Standard SKILL.md skills/canvas-apps-ui-gen/SKILL.md	`.cursor/skills/<skill-name>/`
Gemini CLI	Compatible	Standard SKILL.md skills/canvas-apps-ui-gen/SKILL.md	`.gemini/skills/<skill-name>/`
GitHub Copilot	Compatible	Standard SKILL.md skills/canvas-apps-ui-gen/SKILL.md	`.github/skills/<skill-name>/`
OpenCode	Compatible	Standard SKILL.md skills/canvas-apps-ui-gen/SKILL.md	`.opencode/skills/<skill-name>/`

Native The repository ships a manifest, folder or frontmatter field for this agent.
Compatible A standard SKILL.md that this agent can read.
Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

ToluVictor/canvas-apps-tools

History

skills/canvas-apps-ui-gen/SKILL.md

Share this page

Heat

Stars over time

Individual skills in this repository

How it works

canvas-apps-ui-gen

Frontmatter

SKILL.md

Reference documents

The playbook

Files

Skills included

Repository facts

Before you install

skills/canvas-apps-ui-gen/agents/controls-agent.md

skills/canvas-apps-ui-gen/agents/styling-agent.md

skills/canvas-apps-ui-gen/reference/controls-index.md

skills/canvas-apps-ui-gen/reference/pa-yaml-rules.md

skills/canvas-apps-ui-gen/templates/card-template-1.yaml

skills/canvas-apps-ui-gen/templates/card-template-2.yaml

skills/canvas-apps-ui-gen/templates/card-template-3.yaml

skills/canvas-apps-ui-gen/templates/custom-button.yaml

skills/canvas-apps-ui-gen/templates/data-table.yaml

skills/canvas-apps-ui-gen/templates/kpi-cards.yaml

skills/canvas-apps-ui-gen/templates/screen-table-template-1.yaml

skills/canvas-apps-ui-gen/templates/sidebar-collapsible.yaml

skills/canvas-apps-ui-gen/templates/table-template-1.yaml

How the signals fit together

Works with

You might also use

microsoft/power-platform-skills

wondelai/skills

kharmanskyi/open-steps

rohitg00/pro-workflow

bitwize-music-studio/claude-ai-music-skills

oliver-kriska/claude-elixir-phoenix

`skills/canvas-apps-ui-gen/SKILL.md`

`skills/canvas-apps-ui-gen/agents/controls-agent.md`

`skills/canvas-apps-ui-gen/agents/styling-agent.md`

`skills/canvas-apps-ui-gen/reference/controls-index.md`

`skills/canvas-apps-ui-gen/reference/pa-yaml-rules.md`

`skills/canvas-apps-ui-gen/templates/card-template-1.yaml`

`skills/canvas-apps-ui-gen/templates/card-template-2.yaml`

`skills/canvas-apps-ui-gen/templates/card-template-3.yaml`

`skills/canvas-apps-ui-gen/templates/custom-button.yaml`

`skills/canvas-apps-ui-gen/templates/data-table.yaml`

`skills/canvas-apps-ui-gen/templates/kpi-cards.yaml`

`skills/canvas-apps-ui-gen/templates/screen-table-template-1.yaml`

`skills/canvas-apps-ui-gen/templates/sidebar-collapsible.yaml`

`skills/canvas-apps-ui-gen/templates/table-template-1.yaml`