6fb794bc79
* Delete outdated development instructions for Next.js + Tailwind and Python; add comprehensive guidelines for PostgreSQL DBA, Angular, ASP.NET REST APIs, Azure Functions with TypeScript, Bicep, Blazor, CMake with vcpkg, C#, .NET MAUI, GenAIScript, Terraform for Azure, localization, and markdown standards. * Update documentation and prompts for consistency and clarity - Standardized description formatting in various markdown files to use single quotes. - Added error handling utility in update-readme.js for safer file operations. - Improved title extraction logic in update-readme.js to handle frontmatter more robustly. - Updated chat modes section in README to reflect new emoji and sorted chat mode links. - Cleaned up various instruction files for better readability and consistency. - Ensured all markdown files end with a newline for better compatibility with version control. * Remove standardize-frontmatter.js script * Add usage instructions for creating and switching chat modes in README.md * Update README.md generation script to enhance instructions and usage details for custom chat modes * Update README.md and update-readme.js for improved instruction clarity and consistency * Refactor README.md links and update readme script for improved clarity and consistency in instructions * Update README.md and update-readme.js for improved instruction clarity and consistency * Changing from a patch to regen approach for the readme * Bit more cleanup for how to show things in the readme * Adding missing description * Another missing description --------- Co-authored-by: Aaron Powell <me@aaron-powell.com>
73 lines
1.8 KiB
Markdown
73 lines
1.8 KiB
Markdown
---
|
|
description: 'Next.js + Tailwind development standards and instructions'
|
|
applyTo: '**/*.tsx, **/*.ts, **/*.jsx, **/*.js, **/*.css'
|
|
---
|
|
|
|
# Next.js + Tailwind Development Instructions
|
|
|
|
Instructions for high-quality Next.js applications with Tailwind CSS styling and TypeScript.
|
|
|
|
## Project Context
|
|
|
|
- Latest Next.js (App Router)
|
|
- TypeScript for type safety
|
|
- Tailwind CSS for styling
|
|
|
|
## Development Standards
|
|
|
|
### Architecture
|
|
- App Router with server and client components
|
|
- Group routes by feature/domain
|
|
- Implement proper error boundaries
|
|
- Use React Server Components by default
|
|
- Leverage static optimization where possible
|
|
|
|
### TypeScript
|
|
- Strict mode enabled
|
|
- Clear type definitions
|
|
- Proper error handling with type guards
|
|
- Zod for runtime type validation
|
|
|
|
### Styling
|
|
- Tailwind CSS with consistent color palette
|
|
- Responsive design patterns
|
|
- Dark mode support
|
|
- Follow container queries best practices
|
|
- Maintain semantic HTML structure
|
|
|
|
### State Management
|
|
- React Server Components for server state
|
|
- React hooks for client state
|
|
- Proper loading and error states
|
|
- Optimistic updates where appropriate
|
|
|
|
### Data Fetching
|
|
- Server Components for direct database queries
|
|
- React Suspense for loading states
|
|
- Proper error handling and retry logic
|
|
- Cache invalidation strategies
|
|
|
|
### Security
|
|
- Input validation and sanitization
|
|
- Proper authentication checks
|
|
- CSRF protection
|
|
- Rate limiting implementation
|
|
- Secure API route handling
|
|
|
|
### Performance
|
|
- Image optimization with next/image
|
|
- Font optimization with next/font
|
|
- Route prefetching
|
|
- Proper code splitting
|
|
- Bundle size optimization
|
|
|
|
## Implementation Process
|
|
1. Plan component hierarchy
|
|
2. Define types and interfaces
|
|
3. Implement server-side logic
|
|
4. Build client components
|
|
5. Add proper error handling
|
|
6. Implement responsive styling
|
|
7. Add loading states
|
|
8. Write tests
|