Frontend UI engineering

Component structure, state placement, accessibility and the rendering costs that only show up on a real device.

Installation

$ npx skills add addyosmani/agent-skills

The CLI's unit is the repository, so this installs everything in addyosmani/agent-skills, not frontend-ui-engineering alone. It writes into whichever agent directories it finds — Claude Code, Codex, Cursor, Copilot, Windsurf, Zed.

Summary

Component structure, state placement, accessibility and the rendering costs that only show up on a real device.

  • Reach for it when building UI that has to survive contact with slow networks and assistive technology.
  • Sits in Implement — writing the change: framework-specific conventions, and the discipline that keeps a long agent run on the rails.
  • Assumes web, react.
  • Published by Addy Osmani. Well regarded, but not the vendor of the thing it covers.
  • Installing pulls the whole addyosmani/agent-skills repository: this catalogue lists 19 other entries from it, and the repo may hold more.

Where it sits in delivery

ImplementWriting the change: framework-specific conventions, and the discipline that keeps a long agent run on the rails.Everything in Build

The skill itself

The full text lives with its publisher and changes when they change it. Read it there rather than here — a mirrored copy of somebody else's procedure goes stale silently, and this page would have no way of telling you.

Related

More in Implement