docs: added copilot instructions for TanStack Start with Shadcn/ui Development Guide (#23)
* docs: added copilot instructions for TanStack Start with Shadcn/ui Development Guide * Update instructions/tanstack-start-shadcn-tailwind.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * wrapped frontmatter description in single quotes per guidelines * added applyTo frontmatter property * updated README --------- Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Nick Taylor
GitHub
parent
23e3d3a51e
commit
70f112740e
@ -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. | [](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) [](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 | [](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpython.instructions.md) [](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. | [](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) [](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 | [](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) [](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.
|
||||
|
||||
|
||||
212
instructions/tanstack-start-shadcn-tailwind.md
Normal file
212
instructions/tanstack-start-shadcn-tailwind.md
Normal file
@ -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 (
|
||||
<button onClick={onClick} className={cn(buttonVariants({ variant }))}>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## 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<typeof userSchema>
|
||||
|
||||
// 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 }) => (
|
||||
<div className="text-red-600 p-4">Error: {error.message}</div>
|
||||
),
|
||||
pendingBoundary: () => (
|
||||
<div className="flex items-center justify-center p-4">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
|
||||
</div>
|
||||
),
|
||||
});
|
||||
```
|
||||
|
||||
## 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';
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>User Details</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button onClick={handleSave}>Save</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
```
|
||||
|
||||
Use Tailwind for styling with responsive design:
|
||||
|
||||
```typescript
|
||||
<div className="flex flex-col gap-4 p-6 md:flex-row md:gap-6">
|
||||
<Button className="w-full md:w-auto">Action</Button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Accessibility
|
||||
|
||||
Use semantic HTML first. Only add ARIA when no semantic equivalent exists:
|
||||
|
||||
```typescript
|
||||
// ✅ Good: Semantic HTML with minimal ARIA
|
||||
<button onClick={toggleMenu}>
|
||||
<MenuIcon aria-hidden="true" />
|
||||
<span className="sr-only">Toggle Menu</span>
|
||||
</button>
|
||||
|
||||
// ✅ Good: ARIA only when needed (for dynamic states)
|
||||
<button
|
||||
aria-expanded={isOpen}
|
||||
aria-controls="menu"
|
||||
onClick={toggleMenu}
|
||||
>
|
||||
Menu
|
||||
</button>
|
||||
|
||||
// ✅ Good: Semantic form elements
|
||||
<label htmlFor="email">Email Address</label>
|
||||
<input id="email" type="email" />
|
||||
{errors.email && (
|
||||
<p role="alert">{errors.email}</p>
|
||||
)}
|
||||
```
|
||||
|
||||
## 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
|
||||
Loading…
x
Reference in New Issue
Block a user