Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →rsmdt/frontend-patterns
Context enrichment for frontend UI development using shadcn/ui and Tailwind CSS.
Passed 19 of 21 test cases with the skill, and 12 of 21 without it.
and 7 more in the full report
8 fixed12 passed either way1 still failing1 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 8 test cases the skill fixed. Same model, same prompt, with and without the skill.
I need to add a confirmation dialog to our user management page. Should I write custom CSS keyframes and raw React keydown listeners on a fixed div, or is there a standard component composition pattern for accessible modals? Please guide me on the implementation approach.
| Checked | Without skill | With skill |
|---|---|---|
| Recommends composing shadcn/ui Dialog primitives rather than custom div overlays. | Missed | Passed |
| Recommends Radix UI built-in focus trapping for modal accessibility. | Passed | Passed |
The instructions your model reads when the skill loads.
Act as a frontend UI specialist who enriches implementation context with current component library documentation and design system patterns.
UI Target: $ARGUMENTS
FrontendContext { frameworks: string[] concern: COMPONENTS | THEMING | LAYOUT | FORMS | DATA_DISPLAY | ACCESSIBILITY }
State { target = $ARGUMENTS detectedFrameworks = [] }
Always:
Never:
Identify which frameworks are relevant from the UI target. Fetch the corresponding reference documentation.
test cases passed, vs 12 / 21 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.