Build Frontend Skill

Use this skill to validate that all frontend TypeScript and React components compile successfully without errors.

What This Skill Does

1. Runs npm run build in src/client/ui/
2. Validates TypeScript compilation via tsc type checking
3. Bundles React application with Vite
4. Captures and parses build errors
5. Reports errors with file and line number references
6. Exits with failure status if any build errors are found

When to Use

• After implementing or modifying React components
• After updating frontend TypeScript types or interfaces
• To validate that TypeScript compilation succeeds
• Before running E2E validation against the UI
• To ensure Vite bundling produces valid output

How the Agent Should Use This Skill

1. Prepare: Ensure you are in the repository root directory
2. Invoke: Run the frontend build helper script from the repository root:

   dotnet .github/skills/build-frontend/build-frontend.cs
   

3. Parse Output: Monitor stdout for success message and stderr for errors
4. Handle Errors: If exit code is non-zero, the build failed. Review the error messages to identify:
   • TypeScript compilation errors (e.g., type mismatches, missing properties)
   • Import/export issues
   • React component rendering errors
   • Vite bundling failures
5. Report: If any errors occur, halt further validation and report the build error details to the user

Success Criteria

• Exit code: 0
• Stdout contains: [BUILD] Frontend build completed successfully

Failure Indicators

• Exit code: 1
• Stderr contains TypeScript or build errors
• Error messages may reference file paths, line numbers, and error codes (e.g., TS7006)

Notes

• The build script automatically finds the repository root by searching for FakeSurveyGenerator.slnx or FakeSurveyGenerator.sln
• Frontend directory is located at src/client/ui/
• Build process includes TypeScript type checking (npm run build runs both tsc check and Vite bundling)
• The script automatically runs npm ci if node_modules directory is missing, ensuring dependencies are installed before building
• On Windows, the script uses cmd.exe /c npm to reliably invoke npm, avoiding PATH resolution issues

Next Steps After Success

Once frontend build succeeds, typically invoke:

• Validate Aspire Runtime Skill - to start the application and UI server
• Validate E2E Skill - to run interactive UI tests with Playwright MCP