Build Frontend Skill

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

What This Skill Does

• Runs npm run build in src/client/ui/

• Validates TypeScript compilation via tsc type checking

• Bundles React application with Vite

• Captures and parses build errors

• Reports errors with file and line number references

• 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

• Prepare: Ensure you are in the repository root directory

• Invoke: Run the frontend build helper script from the repository root: dotnet .github/skills/build-frontend/build-frontend.cs

• Parse Output: Monitor stdout for success message and stderr for errors

• 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

• 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