Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →jamestorrevillas/frontend-design
Use this skill when building UI components, designing frontend architecture, implementing styling systems, optimizing performance, ensuring accessibility, or creating production-grade interfaces. Trigger on keywords: frontend, component, UI, styling, React, Next.js, Angular, Tailwind, CSS, responsive, accessibility, performance, animation, design system.
Passed 21 of 22 test cases with the skill, and 19 of 22 without it.
2 fixed19 passed either way1 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
What timing duration range in milliseconds should we set for full page transition route animations?
| Checked | Without skill | With skill |
|---|---|---|
| Specifies an animation duration between 400ms and 600ms for page transitions | Missed | Passed |
The instructions your model reads when the skill loads.
Avoid distributional convergence — the tendency for AI to default to generic purple gradients, Inter font, and rounded-corner cards. Every interface should have a deliberate aesthetic based on its purpose and audience.
Before writing a single line of CSS, define:
Atoms → Button, Input, Label, Icon
Molecules → SearchBar (Input + Button), FormField (Label + Input + Error)
Organisms → Header, ProductCard, UserProfile
Templates → PageLayout, DashboardLayout
Pages → Specific instances with real data
// Extract repeated patterns into components, not custom CSS
// BAD: Duplicating classes everywhere
<div className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg">
test cases passed, vs 19 / 22 without
Published skills whose descriptions closely match this one, with their headline benchmark lift.
More skills from the same source and nearby in the registry, with their headline benchmark lift.