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