# Update Preflight

> Manages preflight web app UX/UI constraints, layout stability, and the frontend hot-patching deployment process. Use when modifying HTML, CSS, or JS in the apps/workstations/preflight-web/ directory.

- Skill: `googlecloudplatform/update-preflight` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add googlecloudplatform/update-preflight`
- Raw SKILL.md: https://api.skillmd.com/api/skills/googlecloudplatform/update-preflight/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: Apache-2.0
- Author: GoogleCloudPlatform (https://skillmd.com/u/googlecloudplatform)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/googlecloudplatform/update-preflight

---


# Update Cloud Workstations Frontend

This skill manages the updates to the preflight web UI and ensures adherence to the repository's UX/UI standards.

## UX/UI Standards

When modifying the frontend, you MUST strictly adhere to the authoritative UX/UI standards:
👉 **[Authoritative UX/UI Standards](../../docs/design.md)**

## Frontend Hot-patching Workflow

When modifying the preflight page or other web assets in the `apps/workstations/preflight-web/` directory, use the following hot-patch script to provide immediate feedback on the live instance:

1.  **Execute**: Run `./scripts/test_and_hotpatch.sh` from the skill directory.
2.  **What it does**: This script automatically runs the frontend test suite via Vitest (`npm test`). If successful, it builds the frontend assets via Vite (`npm run build`) and syncs the `apps/workstations/preflight-web/dist/` directory to `/var/www/html/` on your active workstation.
3.  **Validate**: Refresh the browser and verify changes immediately on the live instance before concluding the task.