Provides idiomatic Next.js, React, and TypeScript patterns with Tailwind CSS best practices for modern web development.
This skill has safety concerns that you should review before use. Some patterns were detected that may pose a risk.Safety score: 60/100.
KillerSkills scans all public content for safety. Use caution before installing or executing flagged content.
This skill configures GitHub Copilot to provide context-aware assistance for Next.js projects using TypeScript and Tailwind CSS, following modern idiomatic patterns and best practices.
This skill instructs the AI agent to understand and work within a Next.js + TypeScript + Tailwind CSS stack, ensuring all code suggestions, completions, and implementations follow:
When working in this codebase:
1. **Framework Context**
- This is a Next.js project using the App Router (unless file structure indicates Pages Router)
- Assume TypeScript for all code files (.ts, .tsx)
- Use Tailwind CSS utility classes for styling instead of CSS modules or styled-components
2. **Code Patterns to Follow**
- Use functional React components with TypeScript interfaces for props
- Prefer server components by default; use `'use client'` directive only when client-side interactivity is needed
- Follow Next.js data fetching patterns: `async` components for server-side data, `useEffect`/SWR/React Query for client-side
- Use Next.js built-in optimizations: `<Image>`, `<Link>`, `<Script>` components
- Apply Tailwind utility classes directly in JSX className attributes
- Use Tailwind's responsive modifiers (`sm:`, `md:`, `lg:`) for responsive design
- Leverage TypeScript's type system: avoid `any`, use proper interfaces and types
3. **File Organization**
- Follow Next.js file-based routing conventions
- Place components in appropriate directories (e.g., `/components`, `/app`)
- Use barrel exports (index.ts) for cleaner imports when appropriate
- Keep server and client code separated
4. **Styling Guidelines**
- Use Tailwind utility classes for all styling
- Extract repeated utility combinations into component abstractions, not `@apply` directives
- Follow mobile-first responsive design approach
- Use Tailwind's configuration for custom colors, spacing, and theme extensions
5. **TypeScript Standards**
- Define explicit types for component props, function parameters, and return values
- Use type inference where it improves readability
- Leverage utility types (`Partial`, `Pick`, `Omit`) appropriately
- Use generics for reusable components and functions
When you ask the agent to:
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/nextjs-typescript-tailwind-project-assistant/raw