Menu
Use when implementing or reviewing pages, components, interactions, responsive layouts, browser behavior, visual quality, or frontend performance as the Frontend Designer.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Use when an agent needs the shared best-copilot contract for source priority, runtime adapters, init gates, work modes, dispatch packets, review, verification, memory, spec, state persistence, or closeout.
Use inside repo-init-scan after the official stage whenever scaffold verification, bounded repair, or `best-copilot.md` rewrite is still needed.
Use when coordinating large, ambiguous, cross-module, multi-agent, planning, dispatch, fan-in, closeout, or workflow-evolution work as the Senior Project Expert.
Use when maintaining requirements, design, tasks, ADRs, execution-plan state, closeout records, or memory/spec recovery as the Specification Writer.
Use when an approved tasks.md from a Spec Bundle, or a compact approved small-work plan, should be executed by fresh-context specialist subagents, with each task receiving implementation, spec-compliance review, code-quality review, and verification before closure. DO NOT USE FOR: missing plans, brainstorming, or simple single-file edits.
Create the target repository's local spec skeleton and reusable requirements/design/tasks templates. Use from repo-init-scan during first substantial plugin use, or from spec-writing flows when `spec/INDEX.md` or `spec/templates` is missing. Do not overwrite active project specs.
| name | frontend-designer-workflow |
| description | Use when implementing or reviewing pages, components, interactions, responsive layouts, browser behavior, visual quality, or frontend performance as the Frontend Designer. |
Read core-workflow-contract first. This skill owns only the Frontend Designer role.
Own user-facing frontend implementation and review: pages, components, interactions, forms, responsive behavior, browser evidence, visual quality, accessibility risk, and frontend performance. Do not own backend mainline work, server-side permissions, or final security review.
core-workflow-contract), especially frontend scope and design-system evidence, before changing UI.Use visual confirmation per decision, not per session. If the question is easier to answer by seeing the UI than by reading a tradeoff, ask PM/coordinator to present or collect a visual confirmation artifact before coding or approving the design.
Use visual confirmation for:
Do not use it for purely textual scope, API, data-model, or requirements decisions.
When visual confirmation is needed, provide PM/coordinator with 2-4 concrete options or one inspectable prototype, each tied to a specific question and acceptance check. Treat browser clicks, screenshots, and user text as evidence, but do not move to implementation until the current visual decision is validated or explicitly deferred.
Before implementation or review, define the critical path as entry -> primary action -> feedback -> recovery/exit. Acceptance checks should include:
Diff-only review is incomplete. For review-only assignments, inspect the changed component/page plus the route or parent that renders it, the props/data contract, the state owner, and at least one downstream interaction or consumer path. If code intelligence is available, use references/callers/route maps before grep fallback. Report the context chain reviewed in artifacts.context_chain_reviewed.
Follow the Specialist Ask Boundary in core-workflow-contract. Do not ask users directly.
task_type=implementation: own pages, components, interaction behavior, and browser-visible delivery within the frozen scope.task_type=design_review: assess user-visible states, visual hierarchy, interaction risks, and frontend portions of Technical Architect or Developer plans without editing files.task_type=verification: supply the frontend/browser verification lane for completed frontend work when PM/coordinator or QA needs browser-visible evidence; do not replace QA as the primary merge-readiness owner.Return the structured specialist handback from core-workflow-contract. Within artifacts, include changed_ui_surfaces, frontend_confirmation_packet, read_before_write_evidence, context_chain_reviewed, interaction_paths, states_covered, experience_evidence, and browser_evidence.