| name | code-apps |
| description | Power Apps Code Apps Development (React + TypeScript + Vite). Use when: building Code Apps, three-layer architecture, PAC CLI workflow, Zustand state management, TanStack Query, shadcn/ui components, router basename, provider stack, form patterns, Dataverse integration from React. |
Skill: Power Apps Code Apps Development
When to Use
Trigger when building, debugging, or reviewing Code Apps — React + TypeScript + Vite applications running inside Power Apps.
Tech Stack Reference
| Layer | Technology | Notes |
|---|
| Language | TypeScript (strict mode) | Primary language for all code |
| UI Framework | React 18/19 | Functional components only |
| Build Tool | Vite + @microsoft/power-apps plugin | Dev server + Power Apps integration |
| Styling | Tailwind CSS + shadcn/ui | Starter template default |
| Styling (alt) | Fluent UI v9 (@fluentui/react-components) | Microsoft-branded enterprise apps — see fluent-ui.md |
| Client State | Zustand | Cross-component state |
| Server State | TanStack Query v5 | Caching, background refresh, mutations |
| Routing | React Router v6 | With basename normalization |
| Tables | TanStack Table | Sorting, filtering, pagination |
| Charts | Recharts | Data visualization |
| Notifications | Sonner | Toast notifications |
| Testing | Playwright | E2E testing |
| CLI | PAC CLI + @microsoft/power-apps npm | Scaffolding, data sources, deployment |
Three-Layer Architecture
Layer 1: Presentation (components/) — Props in, callbacks out. ZERO service imports.
Layer 2: Business Logic (hooks/) — TanStack Query + Zustand. ONLY layer calling services.
Layer 3: Data Access (generated/) — PAC CLI auto-generated. NEVER manually edit.
⚠️ REQUIRED: Load Sub-Files Before Implementation
SKILL.md is a summary only — it is NOT sufficient for implementation.
The detailed content (complete payloads, XML templates, working examples, edge-case handling) lives in sub-files in the same directory as this SKILL.md. Before writing any code, you MUST use read_file on the sub-files relevant to your task:
- Architecture & Critical Patterns — Three-layer pattern, project structure, auth model, env var access, router basename, provider stack, lookup handling
- CLI Workflow — npm CLI (preview, becoming primary), PAC CLI commands, connector discovery (Wave 1 2026), agent.md, scaffold, init, data sources, build, deploy
- State Management — Zustand stores for client state, TanStack Query for server state, caching patterns
- Form Patterns — Create/edit hook pattern, component pattern, page composition, validation
- Power Automate Integration — Triggering flows via Custom API or Dataverse record trigger
- Fluent UI V9 — FluentProvider setup, theme customization (BrandVariants, dark/light mode), design tokens, makeStyles patterns, component patterns (forms, DataGrid, Dialog, layout), responsive design with Fluent
- Performance & Localization — Performance checklist, error handling, language detection, translation dictionary, RTL layout, date/currency formatting
Anti-Patterns
- Importing generated services directly in components (violates three-layer rule)
- Embedding secrets in Code App source (published code is publicly accessible)
- Skipping router basename normalization (breaks navigation in Power Apps host)
- Using
window.fetch directly instead of generated services (bypasses auth and connectors)
- Hardcoding display text in JSX instead of using translation dictionary
- Using
Intl.NumberFormat with hardcoded currency codes (user's currency comes from usersettings)
- Fetching all columns from Dataverse (always use
$select)
- Eager
$expand on large lookup tables (resolve on-demand instead)
- Manual auto-numbering in plugins when Dataverse auto-number columns exist
- Not handling loading, error, and empty states in presentation components
- Using
React.useEffect for data fetching instead of TanStack Query
- Storing server state in Zustand (use TanStack Query for anything from an API)
Related Skills
dataverse-web-api — Code Apps consume Dataverse via generated services built on Web APIdataverse — Schema design that Code App queries targettesting — Code App testing with Vitest/Jest + Playwrightpower-automate — Integration patterns for triggering flows from Code Appsaccessibility-ux — WCAG 2.2 AA compliance for Code App components
