Tailwind CSS Next.js Guide .cursorrules prompt file
About .cursorrules prompt file
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.