FixNow

Safely modify the Drizzle schema and create a migration for FixNow Postgres. Validates the change against docs/database-schema.md, runs drizzle-kit generate then migrate, and updates the schema doc. Use when user says "thêm field X vào users", "đổi enum status", "add Review table", "tạo migration".

Bootstrap the FixNow Next.js project from scratch — install Next.js, Tailwind, Drizzle ORM, NextAuth, shadcn/ui, and set up the base folder structure. Use this skill ONCE when starting a fresh project, or to verify all base dependencies are present. Triggers when user says "khởi tạo dự án", "init FixNow", "scaffold project", "setup base".

Run a responsive QA pass on a FixNow page or component across desktop, tablet, and mobile Chrome viewports. Verifies no horizontal scroll, touch targets, Vietnamese diacritics, layout shifts, and Lighthouse mobile score. Use when user says "kiem tra responsive", "test trang X", "check tren mobile/tablet", "qa giao dien".

Scaffold a Next.js App Router API route (route.ts) for FixNow with zod validation, auth check via NextAuth, Drizzle ORM access, and proper error handling. Use when user says "tạo API endpoint X", "scaffold POST /api/appointments", "thêm route handler GET /api/parts".

Scaffold a new Next.js App Router page following FixNow conventions — correct route group, Server vs Client component split, layout integration, mobile-first Tailwind. Use when user says "tạo trang X", "scaffold page /pricing", "thêm route /track".

Manage db/seed.ts for FixNow with realistic Vietnamese fixture data for services, parts, admin user, and sample appointments using Drizzle. Use when user says "seed data", "tạo dữ liệu mẫu", "reset demo data", "thêm linh kiện vào DB".

Add or update shadcn/ui components for FixNow by running the official shadcn CLI. Never copy component source from the shadcn-ui/ui repo by hand. Use this when the user says "them component button", "cai shadcn select", "shadcn table", "init shadcn", or whenever a required component is missing from components/ui/.

UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples.