菜单
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 职业分类
| 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.
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.
