Create Site
Scaffold a new Angular-based Power Apps code app site with production and development build targets ready to customize.
Overview
Create Site is an agent skill for the Build phase that scaffolds a new Angular-based Power Apps code app site with production and development build configurations.
Install
npx skills add https://github.com/microsoft/power-platform-skills --skill create-siteWhat is this skill?
- Generates Angular CLI-style project config with __SITE_SLUG__ placeholders for rename-on-create
- Preconfigures production and development build/serve configurations
- Sets initial bundle and per-component style budgets for early perf guardrails
- Outputs to dist/__SITE_SLUG__ with standard browser entry (main.ts) and public assets
- Pairs with Power Platform code-app workflow before add-datasource and feature work
- Production bundle budgets: 500kB warning / 1MB error initial; 4kB/8kB component styles
Adoption & trust: 75 installs on skills.sh; 349 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want a Power Apps code app but lack a consistent Angular project skeleton with the right output paths and build budgets.
Who is it for?
Solo builders starting a fresh Power Apps code app who want the agent to materialize the Angular app shell before integration work.
Skip if: Teams that only need to attach an existing repo to Power Platform or who are not using the code-app + Angular path.
When should I use this skill?
Starting a new Power Apps code app site that needs an Angular application scaffold with __SITE_SLUG__ placeholders.
What do I get? / Deliverables
You get a rename-ready site project (__SITE_SLUG__) with build and serve targets so you can add data sources and features on a standard structure.
- Angular project config and app entry layout for the new site
- Production and development build/serve configuration blocks
Recommended Skills
Journey fit
Site creation is the first concrete build step after you commit to a Power Apps code app—before data sources and business logic. The skill emits an Angular application shell (index, main, styles, budgets), which is frontend project structure rather than connector or ops work.
How it compares
Use as a Power Platform site scaffold generator, not as a Next.js or generic monorepo bootstrap skill.
Common Questions / FAQ
Who is create-site for?
Indie and solo builders on Microsoft Power Platform who use agent-assisted workflows to stand up new code app sites before wiring data and UI.
When should I use create-site?
During Build when you have a site name/slug in mind and need the Angular application config and folder conventions created before add-datasource or component work.
Is create-site safe to install?
Review the Security Audits panel on this Prism page and inspect what file writes the skill performs in your repo before running it on production codebases.
Workflow Chain
Then invoke: add datasource
SKILL.md
READMESKILL.md - Create Site
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "__SITE_SLUG__": { "projectType": "application", "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:application", "options": { "outputPath": "dist/__SITE_SLUG__", "index": "src/index.html", "browser": "src/main.ts", "tsConfig": "tsconfig.app.json", "assets": [ { "glob": "**/*", "input": "public" } ], "styles": ["src/styles.css"] }, "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kB", "maximumError": "1MB" }, { "type": "anyComponentStyle", "maximumWarning": "4kB", "maximumError": "8kB" } ], "outputHashing": "all" }, "development": { "optimization": false, "extractLicenses": false, "sourceMap": true } }, "defaultConfiguration": "production" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { "buildTarget": "__SITE_SLUG__:build:production" }, "development": { "buildTarget": "__SITE_SLUG__:build:development" } }, "defaultConfiguration": "development" } } } } } # Dependencies node_modules # Build output dist tmp out-tsc # Angular .angular/cache # TypeScript *.tsbuildinfo # Environment variables .env .env.local .env*.local # Logs *.log npm-debug.log* yarn-debug.log* pnpm-debug.log* # Testing coverage # Editor .vscode/* !.vscode/settings.json !.vscode/tasks.json !.vscode/launch.json !.vscode/extensions.json .idea *.suo *.ntvs* *.njsproj *.sln *.sw? # Miscellaneous .sass-cache testem.log .playwright-mcp/ # OS .DS_Store Thumbs.db { "name": "__SITE_SLUG__", "private": true, "version": "0.0.0", "scripts": { "dev": "ng serve", "build": "ng build", "watch": "ng build --watch" }, "dependencies": { "@angular/animations": "^19.1.0", "@angular/common": "^19.1.0", "@angular/compiler": "^19.1.0", "@angular/core": "^19.1.0", "@angular/forms": "^19.1.0", "@angular/platform-browser": "^19.1.0", "@angular/platform-browser-dynamic": "^19.1.0", "@angular/router": "^19.1.0", "rxjs": "~7.8.0", "tslib": "^2.6.0", "zone.js": "~0.15.0" }, "devDependencies": { "@angular-devkit/build-angular": "^19.1.0", "@angular/cli": "^19.1.0", "@angular/compiler-cli": "^19.1.0", "typescript": "~5.7.0" } } { "$schema": "https://www.schemastore.org/powerpages.config.json", "siteName": "__SITE_NAME__", "compiledPath": "dist/__SITE_SLUG__/browser", "defaultLandingPage": "index.html" } import { Component } from '@angular/core' import { LayoutComponent } from './components/layout.component' import { RouterOutlet } from '@angular/router' @Component({ selector: 'app-root', standalone: true, imports: [LayoutComponent, RouterOutlet], template: ` <app-layout> <router-outlet /> </app-layout> `, }) export class AppComponent {} import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core' import { provideRouter } from '@angular/router' import { routes } from './app.routes' export const appConfig: ApplicationConfig = { providers: [ provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), ], } import { Routes } from '@angular/router' import { HomeComponent } from './pages/home.component' import { AboutComponent } from './pages/about.component' export const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'about', component: Ab