Frontend Screen

---
name: frontend-screen
description: Default workflow for creating or redesigning a frontend screen, landing page, portfolio page, or responsive web section when visual direction and implementation fidelity matter.
---

# Frontend screen

Use this skill automatically for a requested screen, page, landing page, portfolio, responsive section, material visual redesign, or implementation from approved screenshots. Do not invoke it for a tiny style correction or logic-only change.

Follow the shared [frontend screen playbook](../../../harness/playbooks/frontend-screen.md). Load only the approved project context, assigned task, relevant rules, capability manifest, existing frontend evidence, and linked execution budget.

Treat `design-taste-frontend`, `imagegen-frontend-web`, `imagegen`, and `image-to-code` as named capabilities, not assumed installation. Record availability and degradation explicitly. With approved desktop/mobile screenshots, make `image-to-code` the primary coding skill for screenshot interpretation, proportions, components, and responsive implementation; keep `frontend-screen` responsible for desktop/mobile coverage and fidelity checks; use `imagegen` only for temporary photographs or raster assets, never code. Preserve the task write lease, existing stack, user scope, one consolidated visual approval when needed, and the normal completion/review rules. Store project-bound visual assets inside the project and record final paths in the handoff.