nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file-cursorrules
Apply for nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file. --- description: Best practices for using Tailwind CSS in Next.js 15 and React 19 applications, including responsive design, custom configurations, and performance optimization. globs: app/**/*
Best use case
nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file-cursorrules is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Apply for nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file. --- description: Best practices for using Tailwind CSS in Next.js 15 and React 19 applications, including responsive design, custom configurations, and performance optimization. globs: app/**/*
Teams using nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file-cursorrules should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file-cursorrules/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file-cursorrules Compares
| Feature / Agent | nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file-cursorrules | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Apply for nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file. --- description: Best practices for using Tailwind CSS in Next.js 15 and React 19 applications, including responsive design, custom configurations, and performance optimization. globs: app/**/*
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file --- description: Best practices for using Tailwind CSS in Next.js 15 and React 19 applications, including responsive design, custom configurations, and performance optimization. globs: app/**/* --- - Use Tailwind's utility-first approach for consistent styling. - Leverage Tailwind's responsive prefixes (`sm:`, `md:`, `lg:`, `xl:`, `2xl:`) for mobile-first responsive design. - Use `@apply` directive sparingly; prefer utility classes directly in HTML/JSX. - Create custom components with `@layer components` for repeated patterns. - Use Tailwind's built-in design tokens for spacing, colors, and typography. - Implement dark mode using Tailwind's `dark:` variant. - Use `group` and `peer` variants for interactive states. - Create custom utilities with `@layer utilities` for project-specific needs. - Use `theme()` function to reference Tailwind's design tokens in custom CSS. - Avoid arbitrary values (`w-[532px]`) when possible; define custom values in `tailwind.config.js`. - Use `container` class for responsive containers with max-width constraints. - Implement proper focus styles for accessibility using `focus:` and `focus-within:` variants. - Use `sr-only` for screen reader-only content. - Optimize for production by purging unused styles with `NODE_ENV=production`. - Use plugins like `@tailwindcss/typography` for rich text content. - Configure `content` paths properly in `tailwind.config.js` for purging. - Extend themes rather than overriding default values when possible. - Use `preflight` to reset browser default styles.
Related Skills
vue-3-nuxt-3-development-cursorrules-prompt-file-cursorrules
Apply for vue-3-nuxt-3-development-cursorrules-prompt-file. --- description: Applies to Vue 3 and Nuxt 3 projects, enforcing best practices for frontend development including TypeScript, TailwindCSS, and Composition API. globs: **/*.{vue,ts,js,jsx,tsx}
tailwind-css-nextjs-guide-cursorrules-prompt-file-cursorrules
Apply for tailwind-css-nextjs-guide-cursorrules-prompt-file. Prompt Generation Rules: - Analyze the component requirements thoroughly - Include specific DaisyUI component suggestions
shadcn-tailwind
React component library skill for shadcn/ui + Tailwind CSS. Use for React/Next.js/Vite projects needing accessible UI components (dialogs, forms, tables, navigation), Radix UI primitives, Tailwind utility styling, theming, and dark mode. NOT for Angular projects - see frontend-angular-* skills. Triggers on "shadcn", "radix ui", "react components", "tailwind components". For design decisions (styles, palettes, fonts), use ui-ux-pro-max instead.
html-tailwind-css-and-javascript-expert-rule
Sets the AI to act as an expert in HTML, Tailwind CSS, and vanilla JavaScript, focusing on clarity and readability for all HTML, JS, and CSS files.
angular-typescript-cursorrules-prompt-file-cursorrules
Apply for angular-typescript-cursorrules-prompt-file. --- description: General rules for Angular components, focusing on code quality, performance, and maintainability. globs: **/*.component.ts
typescript-nestjs-best-practices-cursorrules-promp-cursorrules
Apply for typescript-nestjs-best-practices-cursorrules-promp. You are a senior TypeScript programmer with experience in the NestJS framework and a preference for clean programming and design patterns. Generate code, corrections, and refactorings that comply with
tailwind
How to work effectively with Tailwind CSS, always use when styling frontend features
tailwind-ssr
TailwindCSS v4 and SSR expert. Use when configuring TailwindCSS, implementing SSR strategies, optimizing critical CSS, or solving styling performance issues.
tailwind-setup
Configure Tailwind CSS and shadcn/ui for React frontends with Django backends, including dark mode support and theme tokens. This skill should be used when setting up a new React project or adding Tailwind to an existing one.
tailwind-patterns
Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture.
tailwind-ecommerce
Use when building ecommerce interfaces, product pages, shopping carts, checkout flows, order management, or store navigation with Tailwind CSS. Covers product cards, product lists, product detail pages, category filters, shopping cart, checkout forms, order summaries, order history, pricing displays, promo sections, reviews, ratings, store navigation, category previews, inventory badges, wishlist buttons, compare features.
tailwind-css
Tailwind CSS configuration, custom plugins, design systems, theming, and component patterns for modern web applications.