skills.rest
imehr
imehrCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend

Enforce Next.js 15 and React 19 UI patterns with Shadcn UI and Tailwind CSS.

1|Updated Oct 22, 2025
Search Tags:#React#frontend#design system#UI#Next.js#Tailwind#Shadcn
One-click install
npx skills add https://github.com/imehr/skills --skill frontend-imehr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/imehr/skills/tree/main/skills/development/frontend
Command: npx skills add https://github.com/imehr/skills --skill frontend-imehr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires next, react, tailwindcss, shadcn-ui, lucide-react, react-hook-form, zod, class-variance-authority, @react-spring/web, @formkit/auto-animate.

What problem does it solve?

This skill ensures UI development adheres to a strict, approved tech stack and quality standards, preventing common errors and inconsistencies. It streamlines the process from design to deployment, saving time on rework and debugging.

Core Features & Use Cases

  • Stack Enforcement: Guarantees use of Next.js 15, React 19, Shadcn UI, and Tailwind CSS, preventing incompatible libraries.
  • Design-First Workflow: For complex UIs (dashboards, multi-screen features), it guides through mockups and design options before coding.
  • Quality Checklists: Automatically generates checklists for responsive design, accessibility, and theme support.
  • Use Case: "Build a responsive user profile dashboard with Next.js 15, React 19, and Shadcn UI, ensuring it works in both light and dark modes and is accessible."

Quick Start

Use the frontend skill to build a new user profile component.

Frequently Asked Questions about frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build consistent React UI components with Next.js and Tailwind CSS?▼

Build React UI components using Next.js 15, React 19, Shadcn UI, and Tailwind CSS with enforced patterns and CVA-based variants. This Skill ensures consistency across your components by applying an approved stack with accessibility, responsive design, and theming built in from the start.

What's the best way to create a responsive dashboard with light and dark mode support?▼

Create responsive dashboards using Shadcn UI components with Tailwind CSS and built-in theme support for both light and dark modes. This Skill guides you through design-first workflows and automatically generates checklists for accessibility and responsive behavior across all screen sizes.

Can I use Shadcn UI and Tailwind CSS with Next.js 15 and React 19?▼

Yes. This Skill enforces Next.js 15.5.4, React 19.2.0, Shadcn UI 0.9.5, and Tailwind CSS 3.4.18 as a cohesive stack. It ensures all dependencies, including Radix UI primitives, form handling with react-hook-form, and animations with @react-spring/web, work together without incompatibility.

How do I enforce UI design standards and prevent inconsistent component development?▼

Enforce UI standards by using this Skill's approved tech stack and quality checklists that automatically validate responsive design, accessibility compliance, and theme support. It prevents rework by catching inconsistencies early and guiding developers through design-first decision workflows before coding.

Does this approach support form validation and animations in React components?▼

Yes. This Skill includes form validation with react-hook-form and zod, plus animations via @react-spring/web and @formkit/auto-animate. All tools integrate seamlessly within the Shadcn UI and Tailwind CSS ecosystem to build polished, interactive user interfaces.

What are the version requirements and dependencies I need to get started?▼

You need Next.js 15.5.4, React 19.2.0, Shadcn UI 0.9.5, Tailwind CSS 3.4.18, Radix UI primitives, and supporting libraries like lucide-react for icons, class-variance-authority for component variants, and react-hook-form for forms. This Skill enforces these exact versions to guarantee compatibility.

Related Skills

Explore More Software Engineering Skills→
Mischio95Mischio95
1

shadcn-ui

Set up shadcn/ui components and forms with React Hook Form and Zod.

Community
Advanced
YuDefineYuDefine
45

audit

Audit frontend UIs for accessibility, performance, theming, and responsiveness issues.

Official
Advanced
kuse-aikuse-ai
6

backstage-style-web

Generate React 18+ web applications using the Backstage Design System.

Official
Advanced
stephendolanstephendolan
2

frontend-design

Generate production-grade frontend interfaces with styling, animations, and interactions.

Community
Basic