菜单
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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Model-Driven Apps Development. Use when: building Model-Driven Apps, forms, views, business rules, site map, command bar customization, custom pages, embedded Canvas Apps, subgrids, role-based form switching, generative pages.
WCAG 2.2 AA compliance, accessibility patterns, UX design for Power Platform. Use when: building accessible components, reviewing WCAG compliance, designing loading/empty/error states, responsive design, form accessibility, keyboard navigation, screen reader support, color contrast, focus management.
Dataverse Web API reference. Use when: CRUD operations, OData queries, FetchXML, bulk operations, batch requests, metadata operations, Custom APIs, file/image columns, change tracking, solution management via API, schema creation, programmatic builds.
PCF (Power Apps Component Framework) control development. Use when: building PCF controls, ReactControl, dataset controls, manifest patterns, Fluent UI v9 integration, Canvas App deployment, debugging PCF.
Dataverse C# Plugin development. Use when: writing plugins, IPlugin interface, execution pipeline, entity images, shared variables, unit testing with FakeXrmEasy, plugin registration, ITracingService, sandbox limitations.
Power Platform Critic and Quality Reviewer (Razor). Use when: reviewing architecture, reviewing code, code review, accessibility audit, WCAG compliance check, UX review, ALM review, Dataverse schema review, Power Automate review, Canvas App review, security review. Provides severity-rated findings (S1-S4). Trigger when user says "review this", "check this code", "audit", "is this architecture solid", or after any significant implementation is complete.
| 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. |
Trigger when building, debugging, or reviewing Code Apps — React + TypeScript + Vite applications running inside Power Apps.
| 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 |
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.
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:
window.fetch directly instead of generated services (bypasses auth and connectors)Intl.NumberFormat with hardcoded currency codes (user's currency comes from usersettings)$select)$expand on large lookup tables (resolve on-demand instead)React.useEffect for data fetching instead of TanStack Querydataverse-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