Cursor Designer Core

Core Rules

Stack

Follow the project stack from docs/ARCHITECTURE.md or detection (see cursor-designer-arch / router). Vue greenfield = Nuxt + Nuxt UI. React = Next + chosen kit.

Project Structure

• /docs/CHANGELOG.md — unified history log
• /docs/ARCHITECTURE.md — system overview (includes Stack)
• /docs/HANDOVER.md — issues & pre-handover checklist
• /mocks/ — mock data for all sections (JSON or TS)

Naming Conventions

Shared

• Components: PascalCase, verbose names (UserProfileCard, not Card)
• Page/route files: thin wrappers — business logic in sections/widgets

Vue

• Composables: useXxx.ts
• Stores (Pinia): xxxStore.ts

React

• Hooks: useXxx.ts
• Client utilities in lib/ or hooks/; prefer Server Components unless interactivity needs "use client"

Scope Boundaries

Designer DOES

• Layout sections, pages, components
• Animations and micro-interactions per design
• Responsive behavior
• Typography and colors via tokens
• Mock data and API call structure
• Isolating business logic into composables/hooks/stores

Designer DOES NOT

• Auth, payment logic, security headers, API middleware
• Database schema, server routes (except mock-endpoints)
• CI/CD, Docker, deployment configs
• Bundle-level performance optimizations (code splitting, lazy loading) unless explicitly requested
• Complex data processing algorithms

If a task exceeds scope — create a CHANGELOG.md entry with tag [DEV] and leave a placeholder.

Review Rules (self-check before finishing)

• No hardcoded colors, spacing, or typography values
• No duplicated logic or components
• No giant components (>300 lines is a warning signal)
• No broken architecture boundaries
• No random utility clutter
• Existing system patterns are reused
• Responsive behavior works across breakpoints
• Code is maintainable and readable
• UI primitives come from the chosen kit only (Vue: Nuxt UI)