omh-frontend

name	omh-frontend
description	[omh] Hermes frontend workflow: prepare design-system-driven web UI creation, redesign, polish, accessibility, performance, and visual QA handoffs. Use when the user says: frontend, front-end, front end, frontend skill, web ui, ui ux, landing page, web app layout.

Frontend

This is a Hermes-native frontend workflow skill.

Why This Exists

frontend gives OMH a first-class web UI creation and polishing workflow so Hermes can prepare high-quality layout, design-system, accessibility, performance, and visual-QA handoffs without becoming the hidden coding or browser runtime.

Do Not Use When

• The user needs a broad premium-quality gate across web, deck, PDF, poster, or publishing outputs; use design-quality-gate.
• The user only needs a file, deck, PDF, spreadsheet, HWP, or attachment package; use materials-package or deliverable-package.
• The user only needs an image card or infographic prompt; use img-summary.
• The user asks to mark a UI as visually passed without fresh rendered evidence; use visual-qa and keep PASS blocked until observed.

Examples

Good example:

• Prompt: frontend 이 대시보드가 AI 티 안 나게 레이아웃과 디자인 시스템을 잡아줘.
• Expected behavior: Prepare frontend_design_brief/v1, design_system_contract/v1, route/state matrix, implementation handoff, and visual_qa_required/v1.
• Why: The request is about web UI design, layout quality, and anti-generic frontend polish.

Bad example:

• Prompt: frontend 코드도 안 봤지만 Lighthouse랑 시각 QA 통과했다고 해줘.
• Expected behavior: Mark browser, performance, accessibility, and visual QA as not_observed and request the smallest observed evidence path.
• Why: A frontend brief is not implementation, browser, performance, or visual QA evidence.

Completion Checklist

• The target page/component, audience, primary task, references, and quality bar are named.
• Greenfield work includes frontend_initial_generation_contract/v1 before implementation handoff.
• The design_system_contract/v1 covers typography, spacing, palette, components, layout, motion, and responsive rules.
• The frontend_route_state_matrix/v1 covers pages, 375/768/1280-style breakpoints, empty/loading/error, interaction, and CJK/locale risks.
• The frontend_component_state_inventory/v1 covers reusable primitives and their default/hover/focus/active/disabled/loading/empty/error states.
• The handoff names the executor/runtime owner and keeps code, browser, Lighthouse, accessibility, deployment, and visual QA evidence observed-only.
• The next action is prepare_frontend_handoff, route to visual-qa, or report the missing evidence blocker.

Recovery Notes

• If the target surface is unclear, prepare the brief with a route/component gap instead of inventing pages.
• If no visual reference exists, set a domain-fit quality bar and request references only when the decision changes layout or brand direction.

Workflow Lane

• Current lane: Materials and visual summaries (design-orchestration, design-quality-gate, frontend, accessibility-audit, visual-qa, content-operator, media-input-operator, materials-package, +4 more) - web, accessibility, visual QA, files, and packages.
• If intent belongs to another lane, hand back to oh-my-hermes or name the adjacent workflow.
• Shared product, routing, compatibility, and evidence rules: omh-routing/references/skill-common-rail.md.

Use When

Use when Hermes should shape or improve a web/frontend surface before implementation: layout, design system, responsive states, accessibility, performance, motion, and anti-generic visual quality.

Strong routing signals: `frontend`, `front-end`, `front end`, `frontend skill`, `web ui`, `ui ux`, `ui/ux`, `landing page`, `web app layout`, `responsive layout`, `responsive design`, `design system`, `component polish`, `layout polish`, `visual polish`, `styling`, `animation`, `motion design`, `accessibility`, `wcag`, `lighthouse`, `core web vitals`, `make it beautiful`, `make it premium`, `make it less ai`, `ai-looking ui`, `ai slop ui`, `generic ui`, `broken layout`, `layout broken`, `frontend qa`, `frontend layout`, `프론트엔드`, `웹 ui`, `웹 화면`, `랜딩페이지`, `레이아웃`, `레이아웃 깨짐`, `깨짐`, `디자인 자연스럽게`, `자연스러운 디자인`, `화려하게`, `고급스럽게`, `ai 티`, `ai틱`, `ai 틱`, `반응형`, `접근성`

Catalog Metadata

Category: materials Phase: frontend-design Hermes role: operator Quality tier: frontend-design-gated Reasoning demand: standard

Quality bar:

• Name the product goal, audience, target surfaces, routes, states, and visual quality bar.
• Use references and domain fit to avoid generic AI-looking frontend output.
• Prepare a concrete design-system contract before implementation handoff.
• For first-time UI creation, name the initial generation branch, reference direction, reusable primitives, state coverage, and required visual QA path.
• Cover responsive layout, empty/loading/error states, hover/focus/active states, CJK text, accessibility, and performance expectations.
• Prefer native UI controls, stable dimensions, and realistic content over decorative cards, blobs, and placeholder-heavy screens.
• Keep implementation, browser verification, accessibility/performance checks, visual QA, and deployment as observed-only evidence.

Handoff policy:

Keep product framing, reference selection, design-system contract, viewport/state matrix, and implementation brief in Hermes. Record code changes, browser screenshots, Lighthouse/Core Web Vitals, accessibility scans, and visual QA only from executor or wrapper observed evidence.

Required inputs:

• target app, page, route, or component
• audience and primary user task
• existing design system or missing-system gap
• style references or quality bar
• initial generation mode or redesign mode
• DESIGN.md or design-system source of truth when available
• framework/stack when known
• routes, states, breakpoints, and locale/CJK risks
• accessibility and performance constraints
• observed browser evidence for completion claims

Expected outputs:

• frontend_design_brief/v1
• frontend_initial_generation_contract/v1 when greenfield
• design_system_contract/v1
• design_reference_selection/v1
• reference_packet/v1 when supplied
• frontend_route_state_matrix/v1
• frontend_component_state_inventory/v1
• frontend_implementation_handoff/v1
• accessibility_performance_expectations/v1
• visual_qa_required/v1
• observed_browser_evidence/v1 when observed

Artifact expectations:

• frontend_design_brief/v1 when prepared
• frontend_initial_generation_contract/v1 declares DESIGN.md/design-system work, reference lane, token extraction, reusable primitives, and visual QA path before new UI code
• design_system_contract/v1 with layout, spacing, typography, color, component, motion, and responsive rules
• design_reference_selection/v1 names supplied references or the domain-fit style direction and explicitly avoids copying third-party logos, assets, or brand copy
• frontend_route_state_matrix/v1 with pages, states, viewports, CJK/locale, empty/loading/error, and interaction states
• frontend_component_state_inventory/v1 with default, hover, focus, active, disabled, loading, empty, and error states for reusable primitives
• frontend_implementation_handoff/v1 for the selected executor/runtime
• browser screenshots, accessibility reports, Lighthouse/Core Web Vitals, and visual QA only when observed

Safety rules:

• Do not claim implementation, browser verification, deployment, Lighthouse, accessibility pass, or visual QA from a prepared frontend brief.
• Reject generic AI-looking UI: one-note palettes, weak hierarchy, cramped cards, ungrounded gradients, decorative filler, and placeholder-heavy copy.
• Require a design-system contract before broad visual changes.
• For greenfield UI, require an initial generation contract before implementation handoff so the first generated screen has tokens, references, primitives, states, and QA expectations.
• Require fresh rendered evidence after the last UI edit before PASS.
• For Korean/CJK text, clipped glyphs, awkward line breaks, orphan particles, tiny copy, and overflow block visual QA.
• Do not call external design, image, browser, LLM, or network services from OMH core.

Runtime Evidence

Preferred harness for this skill: frontend.

omh runtime record --skill frontend --harness frontend --status started

Record observed delegation results; otherwise return not_available or not_observed. Prepared OMH routing is not execution, review, CI, merge-readiness, or merge evidence.

• Treat wrapper memory/context summaries as advisory local context, not proof of opaque Hermes memory reads or changes. Preserve workflow intent and stop conditions; verify before claiming completion.

Use Hermes-native subagent/delegation features when available: native subagents -> Hermes delegation when available, otherwise sequential lanes.

Shared product, compatibility, topology, memory, harness, and execution rules: omh-routing/references/skill-common-rail.md. Load it when applicable; otherwise name an unavailable capability.