frontend-ui-engineering

An agent skill by addyosmani, from addyosmani/agent-skills. Tags: debugging, design, visual-art, web.

What it does

Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.

Install

With the skills CLI, which installs into Claude Code, Codex, Cursor and other agents:

npx skills add addyosmani/agent-skills --skill frontend-ui-engineering

Or copy the skill folder into Claude Code's skills directory by hand (~/.claude/skills for every project, or .claude/skills inside one):

git clone --depth 1 https://github.com/addyosmani/agent-skills
cp -r agent-skills/skills/frontend-ui-engineering ~/.claude/skills/frontend-ui-engineering

Safety box score

Grade A, minimal risk: 0 of 100 risk points, rated 2026-10-19. The grade rates what the skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. How the score works.

This skill is a documentation-only frontend UI guide: it describes how to design and implement accessible, responsive interfaces, but it ships no executable code, installers, or networked tooling. The main risk is indirect: it can shape how an agent edits UI code, but it does not itself grant machine, account, or data access.

Category levels, from 0 (none) to 3 (high)
Category	Level	Why
Code & shell execution	0 (none)	No scripts, shell commands, code evaluators, or installers are included; the bundle is only `SKILL.md`.
Network access	0 (none)	The skill does not download remote content or send data anywhere; it only references a local checklist path (`../../references/accessibility-checklist.md`).
Filesystem reach	0 (none)	It contains no file-modifying or deleting commands and does not direct access outside the project tree.
Secrets & credentials	0 (none)	There is no mention of tokens, keys, passwords, `.env` files, browsers, or other credential stores.
Privilege & persistence	0 (none)	Nothing asks for sudo, global installs, services, scheduled tasks, or OS/shell configuration changes.
Instruction hijack surface	0 (none)	The text is standard UI guidance and does not instruct the agent to ignore rules, skip confirmations, or follow hidden or remote instructions.
Irreversible actions	0 (none)	It does not send messages, deploy, publish, pay, book, merge, or delete anything; it is design guidance only.
Transparency	0 (none)	No binaries, installers, minified blobs, or decoded-at-runtime code are present; the content is fully readable markdown.

Before installing

Confirm the skill bundle contains only documentation and no accompanying scripts or installers.
Open any referenced files such as `../../references/accessibility-checklist.md` before relying on them.
If you plan to use it in a real repo, try it on a throwaway branch first to see what code changes it drives.

Rated 2026-10-19 by an automated review of 1 file from the skill's repository.

Source

Repository: addyosmani/agent-skills (all skills from this repository)
Path: skills/frontend-ui-engineering/SKILL.md
Branch: main
Updated: 2026-09-19

web-design-guidelines — Review UI code for Web Interface Guidelines compliance.
browser-testing-with-devtools — Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser.
algorithmic-art — Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code.
archify — Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG.
customer-journey-map — Create an end-to-end customer journey map with stages, touchpoints, emotions, pain points, and opportunities.
frontend-design — Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one.