Omh Frontend

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 wants a disposable wireframe or mocked interaction to settle one interaction question before planning; use decision-prototype.
• 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, apple-design, design-quality-gate, award-bar-score, frontend, accessibility-audit, visual-qa, content-operator, +6 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 or terminal (TUI) 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`, `in the frontend`, `on the frontend`, `to the frontend`, `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`, `smooth scroll`, `smooth scrolling`, `scroll animation`, `scroll animations`, `parallax scroll`, `parallax hero`, `parallax effect`, `chart styling`, `chart theming`, `chart colors`, `dashboard charts`, `style the charts`, `theme the charts`, `tooltip`, `footer design`, `better footer`, `site footer`, `website footer`, `neobrutalism`, `neobrutalism style`, `neobrutalist`, `neo brutalism`, `neo-brutalism`, `logo marquee`, `marquee animation`, `scrolling marquee`, `split text animation`, `split-text animation`, `shadcn`, `component registry`, `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`, `tui design`, `terminal ui design`, `tui layout`, `フロントエンド`, `ランディングページ`, `レスポンシブ対応`, `デザインシステム`, `画面のUI実装`, `スムーススクロール`, `スクロールアニメーション`, `パララックス`, `チャートのスタイル`, `チャートスタイル`, `フッターデザイン`, `ネオブルータリズム`, `ロゴマーキー`, `프론트엔드`, `웹 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.
• Hold the named bar: what a senior product designer at a top-tier product company (the Linear/Stripe/Supabase class) would sign off on — technically clean but flat output fails it. Load references/taste-foundations.md, name one primary taste direction, and reject the anti-slop patterns it lists.
• Name the model's own default aesthetic before inheriting it — the editorial prior of cream grounds, serif display faces, and muted terracotta accents suits editorial, portfolio, and hospitality briefs and is a failure mode on dashboards, developer tools, fintech, and data-dense UIs. Treat a generic negation ("don't make it look AI", "make it minimal") as unactionable: an override counts only when it carries concrete tokens, a hex palette and a typeface stack recorded in DESIGN.md. Run the review prompts in references/taste-foundations.md over framework blue, glass and gradient surfaces, default UI typefaces, bounce easing, blanket shadows, eyebrow/title/description stuffing, uniform column grids, and CJK body under the 14px Korean floor.
• When the target surface is a terminal UI (TUI), load references/tui-craft.md and hold the same bar there: default widgets are scaffolding, not finished UI; borders spent sparingly with spacing and a muted-color ladder doing the hierarchy; one named terminal aesthetic; verification rendered at 80x24 and 120x40 minimum with the pasted output as the screenshot-equivalent.
• Use references and domain fit to avoid generic AI-looking frontend output; when the user supplies a visual reference, load references/reference-token-extraction.md and extract tokens into the contract instead of eyeballing.
• Prepare a concrete design-system contract before implementation handoff: load references/design-system-contract.md and write DESIGN.md before the first component — no component code before the contract exists.
• Query the local design reference data before fixing tokens: omh design data --kind palette|font|ux --context <product context> returns curated palettes, font stacks with CJK notes, and UX guidelines offline. Those rows inform DESIGN.md; the contract, not the query, still gates the code.
• Scroll-driven motion is a decision with a bill: load references/scroll-motion-libraries.md, take the native path (CSS scroll-behavior, scroll-driven animations, IntersectionObserver, scroll-snap) unless one interpolated scroll position feeds several consumers, and when a library is chosen (Lenis is the reviewed record) name its reduced-motion branch, anchors, nested scroll, teardown, and INP budget in the contract.
• Copied component source is the project's to fix: before adopting from a shadcn-style registry, load references/component-registry-adoption.md (license, dependencies, reduced motion, ARIA, keyboard/touch, token mapping, one hero effect per view). Theme charts through tokens, not config literals: load references/chart-styling.md.
• 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.
• State performance as a budget, not an adjective: load references/web-vitals-budgets.md, name one metric with its published bar (LCP, INP, CLS), the device and network class it is judged on, the route and load shape, and the baseline captured under that same profile - before the change. A budget chosen after seeing the result describes what happened instead of gating it.
• Attribute before optimizing: name the LCP element and its dominant phase, the interaction that produced the worst INP and where the time went, or the node that shifted and what moved above it. A list of optimizations with no attribution is folklore, and a change that improved a different element than the one attributed did not fix the metric.
• Keep field and lab apart: a p75 claim needs field data, a lab audit is a diagnostic sample on one device profile, and a lab pass is never a statement about real users.
• After implementation lands on a web surface, load references/screenshot-loop.md and require the screenshot iteration loop live-environment-first: capture the running UI at 1440/768/375px, compare against the supplied target or DESIGN.md, list every difference triaged Blocker/High/Medium/Nit with its capture attached, fix, and recapture until the difference list is empty.
• 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.