Tailwind CSS Next.js Guide .cursorrules prompt file

Author: brolag

What you can build

Component Library Website - A website offering a collection of reusable, modular components styled with TailwindCSS and DaisyUI, featuring strict TypeScript integration and detailed documentation. Each component includes specific styling classes, TypeScript interfaces, responsive design guidelines, state management hooks, and accessibility features.Next.js Boilerplate Generator - A tool that generates a Next.js project with pre-configured dynamic routing, data fetching methods (getServerSideProps, getStaticProps), incremental static regeneration, optimized images via next/image, and strict TypeScript setup. It includes TailwindCSS and DaisyUI integration for styling and Biome for code formatting and linting.Blockchain DApp Starter Kit - A starter kit for developing decentralized applications using StarkNet and Cairo. It centralizes blockchain connections, includes robust error handling, and provides transaction management hooks with comprehensive documentation. Features modular architecture with TypeScript, TailwindCSS, and DaisyUI for UI components.TailwindCSS Design Token Manager - A web app for managing and customizing design tokens in tailwind.config.js, enabling users to create consistent styles across components. It provides a visual interface for defining responsive variants and customizing DaisyUI components while ensuring integration with Next.js and strict TypeScript usage.Automated Testing Framework for React Components - A tool designed to run automated tests (unit, integration, e2e) specifically for React components styled with TailwindCSS and DaisyUI. Includes TypeScript support for prop validation and structure organization, ensuring comprehensive test coverage through meaningful tests.SEO Optimization Toolkit for Next.js - A plugin or tool that helps Next.js developers optimize their applications for SEO. It offers insights on dynamic data fetching, static properties, responsive images, and progressive enhancements with TailwindCSS/DaisyUI styling implications.AI-Powered Code Review Assistant - A service that provides intelligent code review suggestions, focusing on Next.js, TypeScript, TailwindCSS, Biome rules, and DaisyUI components. It ensures adherence to development best practices, including prop validation, state management, and responsive design.Continuous Deployment Integration with Biome - A CI/CD service that integrates Biome's code formatting, linting, and pre-commit checks into your deployment pipeline. It ensures code quality and style consistency for projects using TypeScript, Next.js, and TailwindCSS/DaisyUI.Interactive TailwindCSS/DaisyUI Sandbox - An online tool where developers can experiment with TailwindCSS utility classes and DaisyUI components in real-time. It provides live previews, responsive design checks, and export options for component code, with TypeScript typing suggestions.Performance Optimization Analyzer for Next.js Projects - A diagnostic tool that analyzes Next.js applications for performance bottlenecks. It provides insights on optimizing image handling with next/image, using dynamic routes efficiently, and utilizing ISR, with detailed reports on TailwindCSS styling optimizations.

Benefits

Enforces strict TypeScript usage with advanced features and runtime checks, emphasizing strongly-typed interfaces over 'any' for robust and maintainable code.Encourages the adoption of Biome for consistent code formatting and linting across the project, integrating with a CI/CD pipeline for automated checks.Promotes modularity and separation of concerns within Next.js and TailwindCSS frameworks, leveraging DaisyUI for efficient component development and performance optimization.

Synopsis

Developers building a Next.js web application with Tailwind CSS and DaisyUI components, using TypeScript and Starknet for blockchain interactions, will benefit from this prompt for creating modular, responsive, and optimized components.

Overview of .cursorrules prompt

The .cursorrules file provides comprehensive guidelines and best practices for developers working with React, TypeScript, Next.js, TailwindCSS, DaisyUI, and Starknet React. It outlines rules for prompt generation, general component creation, and development processes. It emphasizes reusability, modularity, and consistent coding standards. Specific rules include using TailwindCSS and DaisyUI for styling, employing TypeScript's advanced features, leveraging Next.js capabilities, and managing blockchain connections with Starknet React. It also stresses code quality through Biome for formatting and linting, and encourages thorough testing and documentation. The file serves as a structured approach to ensure efficient, maintainable, and high-quality code production.

.cursorrules Content

Prompt Generation Rules:- Analyze the component requirements thoroughly- Include specific DaisyUI component suggestions- Specify desired Tailwind CSS classes for styling- Mention any required TypeScript types or interfaces- Include instructions for responsive design- Suggest appropriate Next.js features if applicable- Specify any necessary state management or hooks- Include accessibility considerations- Mention any required icons or assets- Suggest error handling and loading states- Include instructions for animations or transitions if needed- Specify any required API integrations or data fetching- Mention performance optimization techniques if applicable- Include instructions for testing the component- Suggest documentation requirements for the componentGeneral Component Creation Guidelines:- Prioritize reusability and modularity- Ensure consistent naming conventions- Follow React best practices and patterns- Implement proper prop validation- Consider internationalization requirements- Optimize for SEO when applicable- Ensure compatibility with different browsers and devicesGeneral Rules:- Enable strict TypeScript (strict: true in tsconfig.json)- Avoid 'any', prefer 'unknown' with runtime checks- Explicitly type function inputs and outputs- Use advanced TypeScript features (type guards, mapped types, conditional types)- Organize project structure: components, pages, hooks, utils, styles, contracts, services- Separate concerns: presentational components, business logic, side effects- Use Biome for code formatting and linting- Configure Biome as a pre-commit hookNext.js Rules:- Use dynamic routes with bracket notation ([id].tsx)- Validate and sanitize route parameters- Prefer flat, descriptive routes- Use getServerSideProps for dynamic data, getStaticProps/getStaticPaths for static- Implement Incremental Static Regeneration (ISR) where appropriate- Use next/image for optimized images- Configure image layout, priority, sizes, and srcSet attributesTypeScript Rules:- Enable all strict mode options in tsconfig.json- Explicitly type all variables, parameters, and return values- Use utility types, mapped types, and conditional types- Prefer 'interface' for extendable object shapes- Use 'type' for unions, intersections, and primitive compositions- Document complex types with JSDoc- Avoid ambiguous union types, use discriminated unions when necessaryTailwindCSS and DaisyUI Rules:- Use TailwindCSS utility classes for styling- Avoid custom CSS unless absolutely necessary- Maintain consistent order of utility classes- Use Tailwind's responsive variants for adaptive designs- Leverage DaisyUI components for rapid development- Customize DaisyUI components only when necessary- Define and use design tokens in tailwind.config.jsStarknet React Rules:- Centralize blockchain connection management- Implement automatic reconnection and error handling- Use React hooks for transaction status management- Provide clear UI feedback for blockchain interactions- Implement comprehensive error handling for blockchain operationsCairo Rules:- Design modular and maintainable contract structures- Optimize for gas efficiency- Minimize state changes and storage access- Document all contracts and functions thoroughly- Explain complex logic and implementation choicesDevelopment Process:- Conduct thorough code reviews via Pull Requests- Include clear PR descriptions with context and screenshots- Implement comprehensive automated testing (unit, integration, e2e)- Prioritize meaningful tests over high coverage numbers- Use Conventional Commits for commit messages (feat:, fix:, docs:, chore:)- Make small, incremental commits for easier review and debuggingBiome Rules:- Use Biome for code formatting and linting- Configure Biome as a pre-commit hook- Follow Biome's recommended rules- Customize Biome configuration in biome.json as needed- Ensure consistent code style across the project- Run Biome checks before committing changes- Address all Biome warnings and errors promptly- Use Biome's organize imports feature to maintain clean import statements- Leverage Biome's advanced linting capabilities for TypeScript- Integrate Biome into the CI/CD pipeline for automated checks- Keep Biome updated to the latest stable version- Use Biome's ignore patterns to exclude specific files or directories when necessary