Skip to content
Get packs

Frontend UI Engineering

Guides the agent to build accessible, responsive, production-quality user interfaces

Source Download skill
Repository
addyosmani/agent-skills
Stars
112,668
Licence
MIT
Files
1 file

What it does

When installed, the agent follows a set of front-end best practices when you ask it to build or change screens, pages, or components. It organises components sensibly, picks a simple state-management approach, sticks to a spacing and typography scale, aims for WCAG 2.1 AA accessibility (keyboard use, contrast, headings), and avoids common generic 'AI-looking' design patterns such as purple gradients and oversized padding.

Great for

  • Developers building or refactoring web UI who want more consistent, accessible output from an AI agent
  • Designers or product teams who want generated interfaces to follow an existing design system
  • Teams that want accessibility checks built into the agent's default workflow

Skip it if

  • Projects with no existing design system or style guide, where the agent's choices may still look generic (the skill asks for one but cannot supply it)
  • Anyone expecting automated accessibility audits: the file gives guidance, not a testing tool, so human review is still needed for WCAG compliance

Try asking

  • “Build a responsive task list component with loading, empty and error states in our React app”
  • “Refactor this settings page layout so it works on mobile and meets WCAG AA contrast”
  • “Add keyboard navigation and proper heading structure to this modal dialog”
Step-by-step guide: how to use Frontend UI EngineeringInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 original files, the MIT licence and an attribution note.

    frontend-ui-engineering.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip frontend-ui-engineering.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip frontend-ui-engineering.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Point the agent at your existing design tokens or style guide so it uses your palette and spacing rather than defaults.
  • Ask for the required UI states (loading, empty, error) explicitly so the agent includes them.
  • Review the output with a real accessibility checker or keyboard test, since the skill guides but does not verify compliance.

What's inside

  • SKILL.md

Redistributed unmodified from addyosmani/agent-skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.