Tanstack-Start-Shadcn-Tailwind
Tanstack-Start-Shadcn-Tailwind是一款design方向的AI技能，核心价值是Guidelines for building TanStack Start applications，可用于解决开发者在design领域的实际问题，帮助用户提升效率、自动化重复任务或优化工作流。
Guidelines for building TanStack Start applications
mkdir -p ./skills/tanstack-start-shadcn-tailwind && curl -sfL https://raw.githubusercontent.com/github/awesome-copilot/main/skills/tanstack-start-shadcn-tailwind/SKILL.md -o ./skills/tanstack-start-shadcn-tailwind/SKILL.mdRun in terminal / PowerShell. Requires curl (Unix) or PowerShell 5+ (Windows).
Skill Content
# 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:
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
// 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`:
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:
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:
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:
<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:
// ✅ 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">{error🎯 Best For
- UI designers
- Product designers
- Claude users
- GitHub Copilot users
- Designers
💡 Use Cases
- Generating component mockups
- Creating design system tokens
- Design system documentation
- Component specification creation
📖 How to Use This Skill
- 1
Install the Skill
Copy the install command from the Terminal tab and run it. The SKILL.md file downloads to your local skills directory.
- 2
Load into Your AI Assistant
Open Claude or GitHub Copilot and reference the skill. Paste the SKILL.md content or use the system prompt tab.
- 3
Apply Tanstack-Start-Shadcn-Tailwind to Your Work
Provide context for your task — paste source material, describe your audience, or share existing work to guide the AI.
- 4
Review and Refine
Edit the AI output for accuracy, tone, and completeness. Add human insight where the AI lacks context.
❓ Frequently Asked Questions
Does this work with Figma?
Some design skills integrate with Figma plugins. Check the Works With section for supported tools.
Does Tanstack-Start-Shadcn-Tailwind generate production-ready design specs?
It generates detailed specifications that developers can use directly. Review and adjust for your specific design system.
How do I install Tanstack-Start-Shadcn-Tailwind?
Copy the install command from the Terminal tab and run it. The skill downloads to ./skills/tanstack-start-shadcn-tailwind/SKILL.md, ready to use.
Can I customize this skill for my team?
Absolutely. Edit the SKILL.md file to add team-specific instructions, examples, or workflows.
⚠️ Common Mistakes to Avoid
Skipping usability testing
AI-generated designs should be validated with real users before development.
Not reading the full skill
Skills contain important context and edge cases beyond the quick start.