Frontend Composition

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.