Menu
Designs or builds a page, screen, or component system following the project's strict visual and technical rules. Use when designing a page or screen, building a component system, or reviewing frontend polish and hierarchy.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Evaluates and enforces layered middleware architecture for authentication, authorization, and usage enforcement on API routes. Use when building request middleware, enforcing plans or feature access, or attaching request context to downstream handlers.
Selects Cloudflare infrastructure services and LLM providers for a feature set based on dependency chains, storage needs, and settled policy. Use when assigning services (D1, KV, R2, Durable Objects, Queues, Workflows, Workers AI, Hyperdrive), evaluating whether a feature needs Workflows or Durable Objects, choosing between LLM providers, or confirming a build follows the Workers-first topology.
Audits request handling pipelines for explicit data flow, visible transformations, and traceability through logs. Use when designing request handling pipelines, reviewing code for debuggability, tracing production issues, or evaluating whether a new developer could follow the flow.
Audits stateful logic and error handling to verify single sources of truth, boundary-layer error handling, and explicit recovery paths. Use when designing APIs or workflows, refactoring stateful logic, or reviewing retries, fallback behavior, or recovery flows.
Traces feature implementation from UI through handlers, middleware, and storage to identify broken wiring, dead paths, and coverage gaps. Use when reviewing implementation completeness, validating frontend-to-backend wiring, or checking route/handler/middleware/storage consistency.
Audits authentication, authorization, and input validation boundaries to verify trust is established once at entry and not re-checked ad hoc throughout business logic. Use when building or reviewing auth, designing middleware, handling user/webhook/third-party input, or performing security-oriented review.
| name | build-ui |
| description | Designs or builds a page, screen, or component system following the project's strict visual and technical rules. Use when designing a page or screen, building a component system, or reviewing frontend polish and hierarchy. |
Primary roles: designer, engineer
Produces frontend UI — pages, screens, or component systems — that follow the project's strict visual direction, technology constraints, and interaction patterns. Evaluates existing UI against these rules and flags violations.
confirm() dialogs..css files, vanilla JS (ES6+) in separate .js files. Flag any framework, library, or preprocessor usage.Primary navigation (feature-focused):
Secondary navigation (account/meta):
100px tall. App name left-aligned, vertically centered. User email right-aligned with 15px top margin and dropdown arrow.
All colors carry the brand hue at varying saturation and lightness:
| Variable | Role | Lightness |
|---|---|---|
--brand | Primary brand color | — |
--brand-accent | Very light accent | ~95% |
--brand-alt | Lighter accent | ~80-85% |
--brand-alt-accent | Darker, richer accent | ~40-45% |
--contrast | Almost black with brand tint | ~10-15% |
--contrast-accent | Light grey with brand tint | ~85-90% |
--base | Pure white (#FFFFFF) | 100% |
--base-accent | Medium grey with brand tint | ~45-50% |
--tint | Almost white with subtle brand tint | ~97-99% |
--border-base | Light border with brand tint | — |
--border-contrast | Darker border with brand tint | — |
Usage: --brand for primary buttons/links, --contrast for headings/body text, --base for backgrounds, --tint for subtle section backgrounds, --border-base for table/card borders.
Buttons: Subtle rounded corners (4-6px). Primary = --brand background + white text. Secondary = white background + --brand text + --brand border.
Form inputs: Clear borders (--border-base), --brand color focus state, comfortable padding (10-12px).
Tables: Clean rows with --border-base lines, optional alternating rows with --tint background.
| Scenario | Pattern |
|---|---|
| Small actions | Inline expandable sections (not modals) |
| Large forms | Navigate to dedicated page |
| Destructive actions | Inline "Are you sure?" with Yes/No buttons |
| Loading states | Simple text ("Loading...") or CSS-only spinner |
| Confirmation dialogs | Never use confirm() — always inline |
.css files (no preprocessors, no frameworks)..js files (no frameworks, no libraries).styles.css, add page-specific CSS only when needed.When reviewing existing UI, check each item:
Produce one of the following depending on scope:
styles.css structure.