* 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>
1.8 KiB
1.8 KiB
| description | applyTo |
|---|---|
| Next.js + Tailwind development standards and instructions | **/*.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
- Plan component hierarchy
- Define types and interfaces
- Implement server-side logic
- Build client components
- Add proper error handling
- Implement responsive styling
- Add loading states
- Write tests