# Frontend Composition

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

- Skill: `juspay/frontend-composition` (Agent Skill)
- Install (CLI): `npx skillmds@latest add juspay/frontend-composition`
- Raw SKILL.md: https://api.skillmd.com/api/skills/juspay/frontend-composition/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: juspay (https://skillmd.com/u/juspay)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/juspay/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.