Default workflow for creating or redesigning a frontend screen, landing page, portfolio page, or responsive web section when visual direction and implementation fidelity matter.
Installs into .claude/skills of the current project.
Are you the author of Frontend Screen?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/eduardo-salvador-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.
