메뉴
Create UI smoke, e2e, interaction, validation, API synchronization, and visual regression tests before frontend changes. Use for screens, flows, forms, dashboards, and UI regressions.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Define UI design specs, route contracts, visual states, accessibility expectations, and UI/API synchronization before frontend implementation. Use for new screens, redesigns, visual QA, or UI contract updates.
Automatically synchronize documentation with code changes across all project phases. Detects file changes, categorizes update types, auto-generates API docs, changelog entries, implementation handoffs, and validates cross-reference integrity. Use after any phase implementation.
Initialize and operate a project planning harness for Codex. Use this skill when the user types /init, asks to create a new project, add a feature, fix a bug, plan work, generate tests first, update docs, track phases, review changes, audit a repository, or manage architecture decisions.
Create premium frontend web designs and usable first-screen experiences for new websites, web apps, dashboards, tools, and landing pages. Use when Codex is asked to design or build a new frontend UI, create a fresh page or app experience, choose a visual direction for a new product surface, or turn a product brief into implementation-ready React, Next.js, Tailwind, CSS, or HTML.
Create decision-complete plans for Codex harness work, including tests, fixtures, contracts, memory updates, verification, and recovery. Use for new features, refactors, bug fixes, audits, or multi-phase autonomous work.
Prepare Codex harness package releases with version checks, package dry-runs, npm publish readiness, release notes, verification evidence, and rollback notes. Use before publishing or tagging releases.
| name | genesis-ui-ux-test |
| description | Create UI smoke, e2e, interaction, validation, API synchronization, and visual regression tests before frontend changes. Use for screens, flows, forms, dashboards, and UI regressions. |
Make UI quality measurable through Playwright and fixture-backed tests.
Use before implementing or upgrading UI routes, states, interactions, or visual behavior.
Do not use for non-UI changes.
Route, role, viewport, API fixture, user actions, expected UI states, and visual references.
Playwright test plan, fixtures, visual regression expectations, and API sync assertions.
Load, interaction, validation, API synchronization, and visual regression tests.
Create route fixtures under playwright/fixtures/.
Update contracts/ui/ for every changed screen state.
Update .codebase/UI_ROUTES.md and TEST_MATRIX.md.
Read UI route map and fixture first; inspect only the route and components under test.
The UI has automated coverage for key workflows and visual states.
Testing only page load, skipping mobile, and ignoring API synchronization.
If visual tests are flaky, stabilize fixtures and selectors before changing assertions.
