Frontend UI Engineering
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.
These results were generated by SkillArena using this skill. They do not represent official output from the skill’s author.
- Author
- addyosmani
- Repository
- github.com/addyosmani/agent-skills
- Tested source
- skills/frontend-ui-engineering · SKILL.md
- Commit
- 301b02b
- License
- MIT
- Model
- claude-opus-5-5
- Generated
- 2026-11-07
Install
skills.sh CLI
npx skills add addyosmani/agent-skills --skill frontend-ui-engineeringClaude Code plugin marketplace
/plugin marketplace add addyosmani/agent-skills
/plugin install agent-skills@addy-agent-skillsInstalls all of the author’s agent skills. Run these inside Claude Code.
Exact tested version (manual)
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/addyosmani/agent-skills "$tmp"
git -C "$tmp" checkout 301b02b12bff98e4688e6984af6556802322bbde -- skills/frontend-ui-engineering
mkdir -p ~/.claude/skills
cp -R "$tmp/skills/frontend-ui-engineering" ~/.claude/skills/frontend-ui-engineering
rm -rf "$tmp"Copies the skill folder at commit 301b02b — the exact files used for the results on this page — into ~/.claude/skills/frontend-ui-engineering. For a single project, use .claude/skills/ inside it instead.
The methods from the author install the latest version, which may differ from the commit tested here. Skills run with your coding agent’s permissions; review a skill before installing it.
SaaS landing page
Compare with baselineBrief · sent to the model word for wordTempo is a shared calendar tool for small teams of 5 to 50 people. Its main selling point is "automatically finds a time when everyone is free." Build a marketing landing page: a hero with a headline and a primary button, three core features, a testimonials section (using names that are obviously placeholders), a three-tier pricing table (Free / $9 / $19 per person per month), and a footer.
Analytics dashboard
Compare with baselineBrief · sent to the model word for wordAn operations dashboard for the owner of a coffee chain with 4 locations. Show three metric cards: today's revenue, number of orders, and average order value; a line chart of revenue over the last 30 days; a bar chart comparing sales across locations; a table of the top 5 best-selling items; and a date range picker. Use hard-coded sample data.
Mobile app screen
Compare with baselineBrief · sent to the model word for wordThe "My Plants" home screen of a plant care app, designed for a phone screen. At the top, a greeting and how many plants need watering today; a list of plant cards, each with the plant's name, species, next watering time, and a "Watered" button; a bottom navigation bar with 4 tabs; and an "Add plant" floating action button in the bottom-right corner.
Sign-up form
Compare with baselineBrief · sent to the model word for wordA registration page for an online coding summer camp. On the left, an introduction to the camp and three highlights; on the right, a registration form: parent's name, email, child's grade (dropdown), areas of interest (multiple choice: games, robotics, web), session dates (single choice from three sessions), and a submit button. Include form validation messages and a success state after submitting.
SkillArena itself
Compare with baselineBrief · sent to the model word for wordSkillArena is a website that compares UI skills for AI coding agents. Build its home page: a header with the logo and navigation (Matrix, Compare, About, Waitlist); a hero that explains that every page on the site was generated from the same product brief with a different skill; a matrix where rows are skills (the first row is a "no skill" control group) and columns are four briefs, each cell showing a screenshot thumbnail (use placeholder boxes); and a waitlist form with email and a role choice. Use placeholder skill names.
