diff --git a/README.md b/README.md index 4a32bf0b9..0de898ff6 100644 --- a/README.md +++ b/README.md @@ -41,6 +41,7 @@ Team and project-specific instructions to enhance GitHub Copilot's behavior for | [Performance Optimization Best Practices](instructions/performance-optimization.instructions.md) | The most comprehensive, practical, and engineer-authored performance optimization instructions for all languages, frameworks, and stacks. Covers frontend, backend, and database best practices with actionable guidance, scenario-based checklists, troubleshooting, and pro tips. | [![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fperformance-optimization.instructions.md) [![Install in VS Code](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fperformance-optimization.instructions.md) | | [Python Coding Conventions](instructions/python.instructions.md) | Python coding conventions and guidelines | [![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpython.instructions.md) [![Install in VS Code](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpython.instructions.md) | | [Secure Coding and OWASP Guidelines](instructions/security-and-owasp.instructions.md) | Comprehensive secure coding instructions for all languages and frameworks, based on OWASP Top 10 and industry best practices. | [![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fsecurity-and-owasp.instructions.md) [![Install in VS Code](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fsecurity-and-owasp.instructions.md) | +| [TanStack Start with Shadcn/ui Development Guide](instructions/tanstack-start-shadcn-tailwind.md) | Guidelines for building TanStack Start applications | [![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftanstack-start-shadcn-tailwind.md) [![Install in VS Code](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftanstack-start-shadcn-tailwind.md) | > 💡 **Usage**: Copy these instructions to your `.github/copilot-instructions.md` file or create task-specific `.github/.instructions.md` files in your workspace's `.github/instructions` folder. diff --git a/instructions/tanstack-start-shadcn-tailwind.md b/instructions/tanstack-start-shadcn-tailwind.md new file mode 100644 index 000000000..c5a939ca0 --- /dev/null +++ b/instructions/tanstack-start-shadcn-tailwind.md @@ -0,0 +1,212 @@ +--- +description: 'Guidelines for building TanStack Start applications' +applyTo: '**/*.ts, **/*.tsx, **/*.js, **/*.jsx, **/*.css, **/*.scss, **/*.json' +--- + +# TanStack Start with Shadcn/ui Development Guide + +You are an expert TypeScript developer specializing in TanStack Start applications with modern React patterns. + +## Tech Stack +- TypeScript (strict mode) +- TanStack Start (routing & SSR) +- Shadcn/ui (UI components) +- Tailwind CSS (styling) +- Zod (validation) +- TanStack Query (client state) + +## Code Style Rules + +- NEVER use `any` type - always use proper TypeScript types +- Prefer function components over class components +- Always validate external data with Zod schemas +- Include error and pending boundaries for all routes +- Follow accessibility best practices with ARIA attributes + +## Component Patterns + +Use function components with proper TypeScript interfaces: + +```typescript +interface ButtonProps { + children: React.ReactNode; + onClick: () => void; + variant?: 'primary' | 'secondary'; +} + +export default function Button({ children, onClick, variant = 'primary' }: ButtonProps) { + return ( + + ); +} +``` + +## Data Fetching + +Use Route Loaders for: +- Initial page data required for rendering +- SSR requirements +- SEO-critical data + +Use React Query for: +- Frequently updating data +- Optional/secondary data +- Client mutations with optimistic updates + +```typescript +// Route Loader +export const Route = createFileRoute('/users')({ + loader: async () => { + const users = await fetchUsers() + return { users: userListSchema.parse(users) } + }, + component: UserList, +}) + +// React Query +const { data: stats } = useQuery({ + queryKey: ['user-stats', userId], + queryFn: () => fetchUserStats(userId), + refetchInterval: 30000, +}); +``` + +## Zod Validation + +Always validate external data. Define schemas in `src/lib/schemas.ts`: + +```typescript +export const userSchema = z.object({ + id: z.string(), + name: z.string().min(1).max(100), + email: z.string().email().optional(), + role: z.enum(['admin', 'user']).default('user'), +}) + +export type User = z.infer + +// Safe parsing +const result = userSchema.safeParse(data) +if (!result.success) { + console.error('Validation failed:', result.error.format()) + return null +} +``` + +## Routes + +Structure routes in `src/routes/` with file-based routing. Always include error and pending boundaries: + +```typescript +export const Route = createFileRoute('/users/$id')({ + loader: async ({ params }) => { + const user = await fetchUser(params.id); + return { user: userSchema.parse(user) }; + }, + component: UserDetail, + errorBoundary: ({ error }) => ( +
Error: {error.message}
+ ), + pendingBoundary: () => ( +
+
+
+ ), +}); +``` + +## UI Components + +Always prefer Shadcn/ui components over custom ones: + +```typescript +import { Button } from '@/components/ui/button'; +import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; + + + + User Details + + + + + +``` + +Use Tailwind for styling with responsive design: + +```typescript +
+ +
+``` + +## Accessibility + +Use semantic HTML first. Only add ARIA when no semantic equivalent exists: + +```typescript +// ✅ Good: Semantic HTML with minimal ARIA + + +// ✅ Good: ARIA only when needed (for dynamic states) + + +// ✅ Good: Semantic form elements + + +{errors.email && ( +

{errors.email}

+)} +``` + +## File Organization + +``` +src/ +├── components/ui/ # Shadcn/ui components +├── lib/schemas.ts # Zod schemas +├── routes/ # File-based routes +└── routes/api/ # Server routes (.ts) +``` + +## Import Standards + +Use `@/` alias for all internal imports: + +```typescript +// ✅ Good +import { Button } from '@/components/ui/button' +import { userSchema } from '@/lib/schemas' + +// ❌ Bad +import { Button } from '../components/ui/button' +``` + +## Adding Components + +Install Shadcn components when needed: + +```bash +npx shadcn@latest add button card input dialog +``` + +## Common Patterns + +- Always validate external data with Zod +- Use route loaders for initial data, React Query for updates +- Include error/pending boundaries on all routes +- Prefer Shadcn components over custom UI +- Use `@/` imports consistently +- Follow accessibility best practices