awesome-copilot/instructions/nextjs-tailwind.instructions.md
James Montemagno 6fb794bc79
Update development instructions and guidelines (#29)
* 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>
2025-07-03 11:18:52 +10:00

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

  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