Copilot Instruction: Nextjs Tailwind
Copilot Instruction: Nextjs Tailwind is a verified IDE_RULE blueprint on Promptally in Cross-Agent Directives optimized for leading AI models. Copilot_Instruction specification for Copilot Instruction: Nextjs Tailwind. Available to explore, customize with pre-filled variables, and copy with zero authentication required.
Created by @promptallyTechnical Specifications
| Specification | Value |
|---|---|
| Artifact type | IDE RULE (Cross-Agent Directives) |
| Compatible engines | Universal / Model Agnostic |
| Input variables | None (pre-filled) |
| Approximate tokens | 465 |
| Source file | AGENTS.md |
| Access tier | Free public (MIT) |
Pre-Filled Template
--- 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
How to use this ide rule
- Review the pre-filled example and source files above.
- Copy the template or download
AGENTS.md, then use it in your model, IDE, or workflow tool. - Compare your result with the sample output when one is provided.
Frequently Asked Questions
How do I use Copilot Instruction: Nextjs Tailwind?
Open the ide rule on Promptally, review the pre-filled example, then copy the template or download AGENTS.md and paste it into your model, IDE or workflow tool. Copilot Instruction: Nextjs Tailwind is a static blueprint with no dynamic variables. Copy it and use it as-is.
Is Copilot Instruction: Nextjs Tailwind free?
Yes. Copilot Instruction: Nextjs Tailwind is free to view, copy and download on Promptally without creating an account. It is published under the MIT license.
What variables does Copilot Instruction: Nextjs Tailwind need?
Copilot Instruction: Nextjs Tailwind is a static blueprint with no dynamic variables. Copy it and use it as-is.