How do I install the Build Frontend skill?

Run npx skillmds@latest add tomevault-io/build-frontend in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Build Frontend safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Build Frontend?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Build Frontend free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Build Frontend?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Build Frontend by tomevault-io — Agent Skill

Name: Build Frontend
Author: tomevault-io

Build Frontend

Builds the Fake Survey Generator React frontend with Vite and TypeScript. Use this skill when frontend code changes need to be compiled and validated for TypeScript errors. This skill orchestrates the npm build command and reports build errors.

tomevault-io c5f8200 2 files · 3.6 KB Updated Sep 17, 2026

File contents

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

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: build-frontenddescription: Builds the Fake Survey Generator React frontend with Vite and TypeScript. Use this skill when frontend code changes need to be compiled and validated for TypeScript errors. This skill orchestrates the npm build command and reports build errors.---# Build Frontend SkillUse this skill to validate that all frontend TypeScript and React components compile successfully without errors.## What This Skill Does1. Runs `npm run build` in `src/client/ui/`2. Validates TypeScript compilation via `tsc` type checking3. Bundles React application with Vite4. Captures and parses build errors5. Reports errors with file and line number references6. 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 Skill1. **Prepare**: Ensure you are in the repository root directory2. **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 errors4. **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 failures5. **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 SuccessOnce 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---> Converted and distributed by [TomeVault](https://tomevault.io/claim/marcelmichau) — claim your Tome and manage your conversions.

Frequently asked questions