Skill
Frontend design
Pushes UI work toward a deliberate visual direction, typography, and choices that do not look like a default template.
Home / Use cases / Build a UI and look at it
Use case · Club note
Build a UI and look at it
Design and React skills for the decisions, then a browser tool when someone needs to see the page running.
- Type
- Use case
- Author
- AgentSkillClub
- License
- CC0-1.0
- Status
- Club note
- Listed
- 2026-11-07
Before you use it. A club note is a reading order, not a product. Follow the license and the caution on each tool it links to.
Original AgentSkillClub write-up, released CC0-1.0. It is not an upstream project. Every tool it names is a separate open-source item in this catalog and keeps its own license.
When this is the job
An agent is about to invent a screen, review one, or prove that a click works.
Decisions, then a browser
- Frontend design (Anthropic) is about visual direction so the page does not collapse into a generic template.
- Web design guidelines (Vercel) reviews accessibility, focus, forms, and similar interface rules.
- React best practices (Vercel) applies when the stack is React or Next.js and the question is performance.
- Web app testing is Anthropic's Playwright skill for local apps. Playwright MCP is Microsoft's server. The Playwright README notes that some coding agents do better with the Playwright CLI, because it spends fewer tokens than a standing MCP session.
- Chrome DevTools is the official Chrome server for a live browser. It can see the profile it attaches to.
Use one browser tool. Two of them fighting over the same page is how sessions get confused.
Tools in this note
Skill
Web design guidelines
Reviews UI code against web interface guidelines for accessibility, forms, focus, and performance.
Skill
React best practices
React and Next.js performance rules from Vercel Engineering, used when writing, reviewing, or refactoring React code.
Skill
Web app testing
Drives a local web app with Playwright to check behavior, capture screenshots, and read browser logs.
MCP server
Playwright
Microsoft's Playwright MCP server. The model drives a browser through the accessibility tree instead of a screenshot-only loop.
MCP server
Chrome DevTools
Official Chrome DevTools MCP server and CLI so a coding agent can inspect and drive a live Chrome browser.
Questions
What license covers Build a UI and look at it?
The catalog records this as CC0-1.0. Original AgentSkillClub write-up, released CC0-1.0. It is not an upstream project. Every tool it names is a separate open-source item in this catalog and keeps its own license.
Is a raw file mirrored here?
The note itself is original text on this site, released CC0. It does not mirror the tools it mentions.
What should I check first?
A club note is a reading order, not a product. Follow the license and the caution on each tool it links to.