Expert guidance for building modern full-stack applications with TanStack Start, Convex real-time backend, Three.js, and shadcn/ui in a Nx monorepo.
This skill provides expert guidance for working with a modern full-stack monorepo template built on TanStack Start, Convex, Three.js, and Nx. It enforces strict code conventions, proper testing practices, and efficient Convex backend patterns.
The codebase is a Bun-powered Nx monorepo with:
**Tech Stack**: TanStack Start/Query/Router, Convex, Clerk, shadcn/ui, Tailwind CSS v4, Three.js, Framer Motion, Cloudflare Workers, Terraform
Before starting ANY work:
1. **Read `.agent/rules.md`** - Contains MANDATORY project-specific rules that OVERRIDE all default behavior
2. **Check `.agent/docs/*-learnings.md`** - Review workspace-specific insights and established patterns
3. **Use TodoWrite** - Track all multi-step tasks with the todo system
4. **Update learnings** - Document new insights in `.agent/docs/` after completing tasks
**Critical**: shadcn/ui components can ONLY be imported in `apps/web/` directory (only workspace with `components.json`). NEVER attempt shadcn imports elsewhere.
```typescript
// From web app
import { api } from '@template/convex';
import type { User } from '@template/types';
import { utilityFunction } from '@template/utils';
import { Button } from '@/components/ui/button'; // ONLY in apps/web/
// From backend
import { query, mutation } from './_generated/server';
import { v } from 'convex/values';
```
```bash
bun run dev # Start full dev environment
bun run dev:frontend # Frontend only
bun run dev:backend # Backend only
bun run build # Build all projects
bun run test # Run all tests
bun run quality # Type check + lint + format check
bun run quality:fix # Fix quality issues
bun nx show projects # List projects
bun nx <task> <project> # Run task for specific project
bun nx run-many --target=<task> # Run task for all projects
```
```typescript
// GOOD - using index (fast)
const items = await ctx.db
.query('items')
.withIndex('by_user', (q) => q.eq('userId', userId))
.collect();
// AVOID - using filter (slow)
const items = await ctx.db
.query('items')
.filter((q) => q.eq(q.field('userId'), userId))
.collect();
```
Run `bun run quality` before submitting PRs to ensure:
When working on features:
1. Check `.agent/rules.md` for overriding rules
2. Review relevant `.agent/docs/*-learnings.md` files
3. Use TodoWrite to track multi-step tasks
4. Follow kebab-case file naming strictly
5. Use lowercase for all UI text
6. Import shadcn/ui only in `apps/web/`
7. Prefer Convex indexes over filters
8. Write tests for new functionality
9. Run `bun run quality` before completion
10. Update `.agent/docs/` with new learnings
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/tanstack-start-convex-full-stack-development/raw