canvas-code-mapper

name

canvas-code-mapper

description

Maps React, TypeScript, CSS, and Power Apps code app source to Canvas apps and Power Fx concepts with beginner-friendly inline comments and optional HTML reports. Use when the user asks to explain code through Canvas apps, Power Fx, Power Apps architecture, variables, collections, delegation, named formulas, Navigate, UpdateContext, Set, Patch, Filter, LookUp, React, TypeScript, TSX, CSS, code app concepts, or invokes /canvas-code-mapper.

Canvas Code Mapper

Quick Start

When this skill runs:

1. Inspect the project with rg --files.
2. Identify app source files, preferring src/ and then nearby behavior files such as routing, providers, services, hooks, generated models/services, styles, and tests.
3. Add exhaustive beginner-friendly inline comments to relevant .ts, .tsx, .js, .jsx, .css, and .scss files.
4. Explain what each meaningful block does, why it exists, and how it maps to Canvas apps, Power Fx, or Power Apps architecture.
5. Always offer to create or update output/canvas-code-map-report.html unless the user already asked for the report.

Use REFERENCE.md for the concept map and EXAMPLES.md for comment/report examples.

Commenting Workflow

• Preserve runtime behavior exactly.
• Comment meaningful code blocks, functions, hooks, components, branches, derived values, service calls, state updates, CSS sections, and generated-code boundaries.
• Keep comments stupid simple: short, direct, and tied to nearby code.
• Explain both "what this does" and "why this choice was made."
• Include Canvas equivalents where helpful, for example:
  • Canvas apps equivalent: this is like a formula on a control property.
  • Canvas apps equivalent: this behaves like UpdateContext because it only affects this component/screen area.
  • Canvas apps equivalent: this cache is closer to a collection or named formula than a simple variable.
• Mark approximations clearly. Do not pretend React, TypeScript, and Canvas apps are one-to-one.
• Avoid line-by-line import comments unless an import reveals important architecture.
• Avoid editing generated files unless the user explicitly asks; prefer a short top-of-file note or report-only explanation for generated code.
• Use the existing comment style in each file.

HTML Report Workflow

If the user accepts or requests the report, create or update output/canvas-code-map-report.html.

The report must be a self-contained static HTML file with responsive CSS and no external runtime dependency unless requested. Include:

• Title and short codebase overview.
• Visual architecture map of app shell, routing, providers, pages, components, services, generated Dataverse client, types, styles, and tests.
• React/TypeScript to Canvas Apps concept map.
• Power Fx equivalents for formulas, state updates, filtering, navigation, persistence, and caching.
• Important files with plain-language explanations and paths.
• Delegation and data behavior notes.
• Beginner summary.
• Microsoft Learn reference links used for the mapping.

Required Microsoft Learn References

• Power Fx formulas in canvas apps: https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/working-with-formulas
• Canvas app formula reference: https://learn.microsoft.com/en-us/power-platform/power-fx/formula-reference-canvas-apps
• Variables in Power Fx: https://learn.microsoft.com/en-us/power-platform/power-fx/variables
• Canvas app variables: https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/working-with-variables
• Delegation overview: https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/delegation-overview
• App object, OnStart, StartScreen, and named formulas: https://learn.microsoft.com/en-us/power-platform/power-fx/reference/object-app
• Power Apps code optimization: https://learn.microsoft.com/en-us/power-apps/guidance/coding-guidelines/code-optimization