메뉴
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.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
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.