Power Apps Code App Scaffold
Bootstrap a Power Apps Code App with Vite, React, TypeScript, PAC CLI, and Power Apps SDK wiring for 1,500+ connectors on managed Power Platform infra.
Overview
Power Apps Code App Scaffold is an agent skill for the Build phase that creates a PAC CLI–initialized Vite React TypeScript Power Apps Code App with SDK and connector-ready configuration.
Install
npx skills add https://github.com/github/awesome-copilot --skill power-apps-code-app-scaffoldWhat is this skill?
- Scaffolds Vite + React + TypeScript with port 3000 required by the Power Apps SDK
- Installs and configures @microsoft/power-apps SDK (~0.3.1) and pac code init flow
- Produces vite.config.ts, power.config.json, PowerProvider.tsx, and compatible tsconfig.json
- Targets Microsoft Entra auth and 1,500+ Power Platform connectors in preview Code Apps model
- Follows Microsoft code-first Power Apps best practices for managed infrastructure deployment
- Dev server port 3000 required for Power Apps SDK
- @microsoft/power-apps SDK ^0.3.1
- Access to 1,500+ connectors per skill context
Adoption & trust: 8.5k installs on skills.sh; 34.6k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want a code-first web app on Power Platform preview rails but lack the correct port, SDK, and PAC metadata layout.
Who is it for?
Solo builders or small teams targeting Power Apps Code Apps preview who already have Power Platform and PAC CLI access.
Skip if: Pure static sites outside Power Platform, canvas-app-only workflows with no code repo, or teams blocked from Microsoft Entra and connector licensing.
When should I use this skill?
You are creating a new Power Apps Code App and need PAC CLI init plus Vite React TypeScript configured for the SDK.
What do I get? / Deliverables
You receive a structured Code App repo with Vite, PowerProvider, power.config.json, and documented next steps for connector and Entra integration.
- Vite + React + TypeScript project on port 3000
- power.config.json and PowerProvider.tsx integration
- Package manifest with Power Apps SDK dependencies
Recommended Skills
Journey fit
Code-first Power Platform apps are built after validation and before ship-time hardening. The skill centers on PAC CLI, power.config.json, PowerProvider, and connector SDK integration—not SEO, analytics, or production monitoring.
How it compares
Skill package for Microsoft’s Code Apps scaffold—not a generic create-react-app or standalone MCP connector server.
Common Questions / FAQ
Who is power-apps-code-app-scaffold for?
Developers building Power Apps Code Apps who need React, TypeScript, and PAC CLI setup aligned with Microsoft’s preview documentation.
When should I use power-apps-code-app-scaffold?
Use it in Build when moving from validated scope to an implementable Code App repo before connector testing and solution export.
Is power-apps-code-app-scaffold safe to install?
It guides PAC CLI and npm installs against Microsoft packages; check Prism Security Audits and verify preview-platform policies in your tenant before running init commands.
SKILL.md
READMESKILL.md - Power Apps Code App Scaffold
# Power Apps Code Apps Project Scaffolding You are an expert Power Platform developer who specializes in creating Power Apps Code Apps. Your task is to scaffold a complete Power Apps Code App project following Microsoft's best practices and current preview capabilities. ## Context Power Apps Code Apps (preview) allow developers to build custom web applications using code-first approaches while integrating with Power Platform capabilities. These apps can access 1,500+ connectors, use Microsoft Entra authentication, and run on managed Power Platform infrastructure. ## Task Create a complete Power Apps Code App project structure with the following components: ### 1. Project Initialization - Set up a Vite + React + TypeScript project configured for Code Apps - Configure the project to run on port 3000 (required by Power Apps SDK) - Install and configure the Power Apps SDK (@microsoft/power-apps ^0.3.1) - Initialize the project with PAC CLI (pac code init) ### 2. Essential Configuration Files - **vite.config.ts**: Configure for Power Apps Code Apps requirements - **power.config.json**: Generated by PAC CLI for Power Platform metadata - **PowerProvider.tsx**: React provider component for Power Platform initialization - **tsconfig.json**: TypeScript configuration compatible with Power Apps SDK - **package.json**: Scripts for development and deployment ### 3. Project Structure Create a well-organized folder structure: ``` src/ ├── components/ # Reusable UI components ├── services/ # Generated connector services (created by PAC CLI) ├── models/ # Generated TypeScript models (created by PAC CLI) ├── hooks/ # Custom React hooks for Power Platform integration ├── utils/ # Utility functions ├── types/ # TypeScript type definitions ├── PowerProvider.tsx # Power Platform initialization component └── main.tsx # Application entry point ``` ### 4. Development Scripts Setup Configure package.json scripts based on official Microsoft samples: - `dev`: "concurrently \"vite\" \"pac code run\"" for parallel execution - `build`: "tsc -b && vite build" for TypeScript compilation and Vite build - `preview`: "vite preview" for production preview - `lint`: "eslint ." for code quality ### 5. Sample Implementation Include a basic sample that demonstrates: - Power Platform authentication and initialization using PowerProvider component - Connection to at least one supported connector (Office 365 Users recommended) - TypeScript usage with generated models and services - Error handling and loading states with try/catch patterns - Responsive UI using Fluent UI React components (following official samples) - Proper PowerProvider implementation with useEffect and async initialization #### Advanced Patterns to Consider (Optional) - **Multi-environment configuration**: Environment-specific settings for dev/test/prod - **Offline-first architecture**: Service worker and local storage for offline functionality - **Accessibility features**: ARIA attributes, keyboard navigation, screen reader support - **Internationalization setup**: Basic i18n structure for multi-language support - **Theme system foundation**: Light/dark mode toggle implementation - **Responsive design patterns**: Mobile-first approach with breakpoint system - **Animation framework integration**: Framer Motion for smooth transitions ### 6. Documentation Create comprehensive README.md with: - Prerequisites and setup instructions - Authentication and environment configuration - Connector setup and data source configuration - Local development and deployment processes - Troubleshooting common issues ## Implementation Guidelines ### Prerequisites to Mention - Visual Studio Code with Power Platform Tools extension - Node.js (LTS version - v18.x or v2