About SkillArena

SkillArena gives every UI skill the same set of original product briefs and shows what a model produces with and without the skill, so you can compare before installing anything.

How a skill is “installed”

  • Generation calls the model API directly — no local agent, no tools.
  • Baseline: the system prompt contains only the shared generic instructions below.
  • With a skill: the system prompt is the generic instructions followed by the skill’s full SKILL.md. If SKILL.md explicitly points to files under references/, those are appended in order.
  • Every skill is pinned to a specific git commit, shown on its page. Skills that depend on running scripts are skipped.
You are building a single web page from a product brief.
Return ONE complete, self-contained HTML file (inline CSS and JS).
You may load web fonts or icons from public CDNs. Do not load any other external resources.
Use placeholder content that fits the brief. Do not use real company logos or real people's photos.
Output only the HTML, starting with <!DOCTYPE html>. No explanation.

Generation

  • Model: claude-opus-5-5, default sampling settings.
  • The user message is the brief text, verbatim. Each skill × brief pair is generated 3 times.
  • The HTML from <!DOCTYPE html> to </html> is saved unchanged. Truncated or malformed output is marked “Generation failed”.

Screenshots

  • Chromium via Playwright, page opened from a local file; we wait for network idle (max 15 s) plus 1 s for animations.
  • Desktop 1440×900, full page (cut at 8000 px), and mobile 390×844 — all at 2× pixel density.

The “SkillArena itself” brief

One brief asks for this site’s own home page. It is written and run exactly like the others: same model, same generic instructions, the brief text sent word for word, three runs per skill. It is there because it is a fair test of how each skill handles a tool-like product page, and because it’s fun to see.

The site you are reading was not chosen by ranking these results. If we ever adopt one as the basis for this site’s design, we will say which one, and it should not be read as that skill “winning”.

Results vary

Model output is random. The same skill and brief can look quite different from one run to the next, which is why every pair has 3 runs. Judge a skill by its runs together, not by a single screenshot.

FAQ

What is a UI skill?
A UI skill is a SKILL.md file of instructions, sometimes with reference files, that an AI coding agent such as Claude Code loads to change how it designs and builds interfaces. Skills are usually shared as GitHub repositories.
How does SkillArena compare UI skills?
Every skill gets the same 5 product briefs, the same model (claude-opus-5-5) and the same generic instructions. The only thing that changes is the skill added to the system prompt. A control group with no skill is run the same way, and every skill × brief pair is generated 3 times.
Is SkillArena a ranking of the best UI skill?
No. SkillArena shows what each skill produces so you can judge for yourself. Model output varies between runs, so compare a skill’s runs together rather than a single screenshot.
Which model generated the pages?
All pages were generated by claude-opus-5-5 with default sampling settings.
How do I install a skill I like?
Each skill page has an Install section with the commands from the author’s README, and a manual install of the exact commit that was tested.
Can I compare skills on my own product brief?
Not yet. You can request early access on the Try page; nothing is generated or charged for now. Request early access →
Why are some popular skills missing?
Skills whose SKILL.md tells the agent to run bundled scripts are skipped, because a single model call cannot reproduce them. Skills without an open license are not included either.

Disclaimer

  • Every page here was generated by SkillArena using the listed skill. It does not represent official output from the skill’s author.
  • We do not republish skill contents. We show only the name, author, a short description, a repository link, the commit and the license.
  • All briefs are original and fictional. Names, numbers and testimonials in the generated pages are placeholders.
  • “Open live page” runs the generated HTML in a sandboxed iframe that cannot access this site.
  • Privacy: we count page views and a few clicks (install copy, outbound links, form sends) ourselves, without cookies or third-party scripts. IP addresses are not stored; visitors are counted with a hash that changes daily. Nothing is sent if your browser has Do Not Track or Global Privacy Control turned on.