Tailwind CSS CSS Next.js Guide

1Prompt Generation Rules:
2 
3- Analyze the component requirements thoroughly
4- Include specific DaisyUI component suggestions
5- Specify desired Tailwind CSS classes for styling
6- Mention any required TypeScript types or interfaces
7- Include instructions for responsive design
8- Suggest appropriate Next.js features if applicable
9- Specify any necessary state management or hooks
10- Include accessibility considerations
11- Mention any required icons or assets
12- Suggest error handling and loading states
13- Include instructions for animations or transitions if needed
14- Specify any required API integrations or data fetching
15- Mention performance optimization techniques if applicable
16- Include instructions for testing the component
17- Suggest documentation requirements for the component
18 
19General Component Creation Guidelines:
20 
21- Prioritize reusability and modularity
22- Ensure consistent naming conventions
23- Follow React best practices and patterns
24- Implement proper prop validation
25- Consider internationalization requirements
26- Optimize for SEO when applicable
27- Ensure compatibility with different browsers and devices
28 
29General Rules:
30 
31- Enable strict TypeScript (strict: true in tsconfig.json)
32- Avoid 'any', prefer 'unknown' with runtime checks
33- Explicitly type function inputs and outputs
34- Use advanced TypeScript features (type guards, mapped types, conditional types)
35- Organize project structure: components, pages, hooks, utils, styles, contracts, services
36- Separate concerns: presentational components, business logic, side effects
37- Use Biome for code formatting and linting
38- Configure Biome as a pre-commit hook
39 
40Next.js Rules:
41 
42- Use dynamic routes with bracket notation ([id].tsx)
43- Validate and sanitize route parameters
44- Prefer flat, descriptive routes
45- Use getServerSideProps for dynamic data, getStaticProps/getStaticPaths for static
46- Implement Incremental Static Regeneration (ISR) where appropriate
47- Use next/image for optimized images
48- Configure image layout, priority, sizes, and srcSet attributes
49 
50TypeScript Rules:
51 
52- Enable all strict mode options in tsconfig.json
53- Explicitly type all variables, parameters, and return values
54- Use utility types, mapped types, and conditional types
55- Prefer 'interface' for extendable object shapes
56- Use 'type' for unions, intersections, and primitive compositions
57- Document complex types with JSDoc
58- Avoid ambiguous union types, use discriminated unions when necessary
59 
60TailwindCSS and DaisyUI Rules:
61 
62- Use TailwindCSS utility classes for styling
63- Avoid custom CSS unless absolutely necessary
64- Maintain consistent order of utility classes
65- Use Tailwind's responsive variants for adaptive designs
66- Leverage DaisyUI components for rapid development
67- Customize DaisyUI components only when necessary
68- Define and use design tokens in tailwind.config.js
69 
70Starknet React Rules:
71 
72- Centralize blockchain connection management
73- Implement automatic reconnection and error handling
74- Use React hooks for transaction status management
75- Provide clear UI feedback for blockchain interactions
76- Implement comprehensive error handling for blockchain operations
77 
78Cairo Rules:
79 
80- Design modular and maintainable contract structures
81- Optimize for gas efficiency
82- Minimize state changes and storage access
83- Document all contracts and functions thoroughly
84- Explain complex logic and implementation choices
85 
86Development Process:
87 
88- Conduct thorough code reviews via Pull Requests
89- Include clear PR descriptions with context and screenshots
90- Implement comprehensive automated testing (unit, integration, e2e)
91- Prioritize meaningful tests over high coverage numbers
92- Use Conventional Commits for commit messages (feat:, fix:, docs:, chore:)
93- Make small, incremental commits for easier review and debugging
94 
95Biome Rules:
96 
97- Use Biome for code formatting and linting
98- Configure Biome as a pre-commit hook
99- Follow Biome's recommended rules
100- Customize Biome configuration in biome.json as needed
101- Ensure consistent code style across the project
102- Run Biome checks before committing changes
103- Address all Biome warnings and errors promptly
104- Use Biome's organize imports feature to maintain clean import statements
105- Leverage Biome's advanced linting capabilities for TypeScript
106- Integrate Biome into the CI/CD pipeline for automated checks
107- Keep Biome updated to the latest stable version
108- Use Biome's ignore patterns to exclude specific files or directories when necessary
109 
110