Ship React components with confidence

Frontend dev on autopilot. Generate accessible components, review UI patterns, and ship production-ready React faster than your designer can say "can we adjust the padding?"

TL;DR

This kit turns Claude into your frontend co-pilot. React + TypeScript patterns, shadcn/ui + Tailwind styling, accessibility baked in, and UI/UX design intelligence that actually understands what "make it pop" means.

React & TypeScript shadcn/ui + Tailwind WCAG 2.2 Compliant 4 Skills Included

What's in the box

frontend-expert

Your personal frontend architect. Knows React patterns, TypeScript best practices, and can debate the merits of controlled vs uncontrolled components at 3 AM.

Slash Commands

/ui-review Audit your components for accessibility, performance, and best practices
/component-gen Generate production-ready components from descriptions

Skills (4 total)

ui-ux-pro-max - 50 styles, 21 palettes, 50 font pairings. Makes design decisions before you ask.
frontend-development - React/TypeScript patterns, Suspense, lazy loading, MUI v7, TanStack Router.
ui-styling - shadcn/ui components, Tailwind utilities, dark mode, responsive layouts.
frontend-design-pro - Jaw-dropping interfaces with real photos from Unsplash/Pexels. Zero AI slop.

prettier-format

Auto-formats your code on save. Never argue about semicolons again.

Try these prompts

Component Generation


"Create a responsive pricing card component with three tiers. Include hover animations, a featured badge, and make it keyboard navigable."

Gets you a production-ready component with TypeScript types, Tailwind classes, and ARIA attributes.

UI Review


"Review my dashboard layout for accessibility issues and mobile responsiveness."

Audits color contrast, focus states, screen reader support, and responsive breakpoints.

Responsive Design


"Convert this desktop navbar into a mobile-friendly hamburger menu with slide-out drawer."

Handles breakpoints, touch interactions, and animates like a native app.

Accessibility Audit


"Make this form WCAG 2.2 AA compliant. I need proper labels, error handling, and keyboard navigation."

WCAG 2.2 compliant without reading specs. Focus management, ARIA live regions, the works.

Design System Integration


"Add a glassmorphism effect to this hero section with a bento grid layout. Use the ocean palette."

Knows 50 design styles, 21 color palettes, and 50 font pairings. Picks the right one every time.

Why this matters

Frontend development is 70% reading docs, 20% fixing CSS, and 10% actual logic. This kit flips the script.

Instead of Googling "how to make shadcn dialog accessible" for the fifth time, you get components that work. Instead of manually testing color contrast ratios, accessibility is baked in. Instead of debating whether to use useEffect or useSuspenseQuery, the patterns are already decided.

This is frontend development without the friction. Just describe what you want, and ship it.

Ready to ship faster?

Install the Frontend Development Stack and turn Claude into your personal frontend co-pilot.

View Full Kit

Install in one command

npx vibery kit install frontend-dev-stack

Includes: 1 agent, 2 commands, 4 skills, 1 hook. Works with existing projects.