The two most useful skills Anthropic ships for frontend work are frontend-design (from the plugin of the same name, 17,453 stars) and webapp-testing (from the 121,347-star skills plugin). They compose into a loop that's tighter than anything you can do with either one alone: generate a good-looking component, then drive a real browser against it to verify behavior. Design-and-verify in one session.
The problem each skill solves on its own
frontend-design fixes the aesthetic problem — the default AI-generated UI is functional but forgettable. This skill pushes the output toward distinctive, intentional design. It matters because "looks like every other AI-generated landing page" is a real reason shipped products feel cheap.
webapp-testing fixes the verification problem — you can look at a component and miss that its button is dead, its form submits to nowhere, or its modal traps focus in the wrong place. Browser automation catches that. Humans do not.
Why they're better together
The gap is this: frontend-design produces beautiful code that might or might not work. webapp-testing produces good tests for code that might or might not be beautiful. Chain them, and you get both. The testing skill's output becomes feedback for the next iteration of the design skill. Two to three cycles and you have a component that looks good and works.
The workflow
- Describe the component. Not just "a pricing card" — write out the interactions, the states, the edge cases. The more concrete the brief, the less drift between design and test.
- Invoke frontend-design. Generate a first pass. Let it produce the full component including dark mode, hover states, and loading states. Don't settle for a bare shell.
- Invoke webapp-testing. Drive the browser. Test that every interactive element responds, that forms submit, that keyboard navigation works, that focus is trapped where it should be.
- Read the test failures as design feedback. If the test can't find the submit button, that's not just a test bug — it's a design bug. Fix the design.
- Repeat until green. Two or three cycles typically.
A concrete example
Pricing card with three tiers, a featured tier, monthly/annual toggle, CTA per tier. frontend-design produces a version with strong visual hierarchy — the featured tier is larger, the toggle is centered above. Run webapp-testing: the test catches that the toggle doesn't actually change the displayed prices (a common first-pass miss). Fix the state handler. Re-run: the featured CTA is focused on page load for keyboard users — not desired. Fix the autofocus. Re-run: green.
Total time: maybe 20 minutes. Output: a component that's both polished and works. Without the pairing, you either ship a polished broken component or a working ugly one.
Install commands
Both plugins are installable from the marketplace. Each skill's detail page has the exact install string — frontend-design and webapp-testing. Install both; the combined workflow is one of the highest-leverage things in the Claude Code ecosystem right now.
Extensions
Want to stretch further? Add requesting-code-review from superpowers as the third skill in the loop. Design → test → review. Three skills, one session, shipped UI.