frontend-composition

name	frontend-composition
description	Implement polished self-contained HTML interfaces with semantic structure, maintainable CSS, realistic content, and purposeful visual hierarchy.

Frontend composition

Deliver one complete HTML document with its CSS and JavaScript embedded. Use semantic landmarks and native controls before custom div-based widgets.

• Establish hierarchy through size, spacing, alignment, contrast, and density.
• Use CSS Grid for two-dimensional page structure and Flexbox for component alignment. Avoid absolute positioning for normal flow.
• Keep line lengths readable and controls comfortably clickable.
• Use icons only when their meaning is recognizable; label ambiguous actions.
• Provide realistic states and interactions. Every visible control should work or be clearly presented as static content.
• Prefer progressive enhancement: the document should retain useful structure if JavaScript fails.

For a node-scoped revision, locate the stable selector supplied by Design Studio. Preserve unrelated regions. For component scope, update all instances of the same component through a shared selector or rendering function.