molyanov-ai-dev: Skill for Claude Code

Layout Writing

Deliver a layout that matches its exact source where one exists, fills only genuinely unspecified decisions from project evidence, and works at relevant widths in the existing codebase.

Scope and Source

1. Read repository guidance, the affected component and styles, tokens, fonts, images, nearby components, and the relevant run or build command.
2. Classify the scope:
   • selected area — verify the changed element, component, or section with its nearest context;
   • whole page — build an ordered inventory of every major visual block from source metadata, node IDs, a DOM outline, or complete source-image segments, then verify every item.
3. With an exact source, apply reproduce.md — source acquisition, native-size evidence, and comparison. Without an exact source, apply design-decisions.md — project-first decisions for unspecified values. For a partial source, apply each reference only to the area it governs.
4. Ask only for blockers that project or source evidence cannot resolve: the relevant frame when a Figma link names only a file, substitution of a required missing font or asset, or expansion beyond the requested scope.

Before editing a non-trivial layout whose intended appearance is not defined by an approved user-spec, an exact visual source, or a user-approved plan, briefly describe in simple user-facing language how the result will look and behave at relevant screen sizes and why it fits the existing project style, then wait for approval.

Treat a new requirement, state, edge case, or improvement discovered during implementation or review as a proposal, not authorization. If it changes the agreed presentation, behavior, scope, approach, or material complexity, explain it and get the user's decision first. Correct autonomously only a local mismatch in agreed normal presentation. Treat a rare or source-undefined viewport, content state, or interaction state as a user decision even when its correction looks local.