create-nala 3.1.1 → 3.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nala",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "description": "Scaffolding CLI tool for Nala Admin Dashboard Template",
   "author": "candrasp",
   "license": "MIT",

package/template/.agents/skills/nala-project/SKILL.md

@@ -18,19 +18,20 @@ You are an expert frontend engineer building features for this **Nala Admin Dash
 ## 🏗️ Project Structure
 
 ```
-src/
 ├── components/
 │   ├── AppLogo.vue              ← Auto-imported brand logo component
+│   ├── BrandIcon.vue            ← Auto-imported 24+ brand & social SVG icons
 │   ├── EmptyState.vue           ← Auto-imported zero-data empty state component
 │   ├── PageHeader.vue           ← Auto-imported standard page top header
 │   ├── layout/                  ← AdminLayout sub-components (Navbar, Sidebar, etc.)
-│   └── ui/                      ← 45 Reka UI primitives (all auto-imported)
+│   └── ui/                      ← 46 Reka UI primitives (all auto-imported)
 ├── composables/
 │   ├── useFormatter.ts          ← Auto-imported: currency, date, number, relative time formatting
 │   └── useThemeConfig.ts        ← Auto-imported: layout mode, border radius, accent color
 ├── layouts/
 │   ├── AdminLayout.vue          ← Main dashboard shell (sidebar + navbar + content slot)
-│   └── AuthLayout.vue           ← Centered auth card layout
+│   ├── AuthLayout.vue           ← Centered auth card layout
+│   └── AuthSplitLayout.vue      ← Split-screen side-banner auth layout
 ├── lib/
 │   ├── axios.ts                 ← Pre-configured Axios instance with interceptors
 │   ├── formatters.ts            ← Core formatter functions (used by useFormatter)
@@ -49,7 +50,7 @@ src/
 └── views/
     ├── _starter/
     │   └── BlankView.vue        ← Scaffolding starting point for new pages
-    ├── auth/                    ← Full auth suite (Login, Register, Forgot/Reset Password, OTP, etc.)
+    ├── auth/                    ← Full enterprise auth suite (Login, Register, 2FA, SSO, Magic Link, etc.)
     ├── dashboard/
     │   └── IndexView.vue        ← Minimal dashboard with KPI stat cards (your starting point)
     └── errors/                  ← 404, 500, 403, Maintenance, Coming Soon pages
@@ -79,18 +80,21 @@ src/
 
 ## 🛑 Strict Guardrails (MUST FOLLOW)
 
-1. **Composition API Only:** Never use Options API — always use `<script setup lang="ts">`.
-2. **Strict TypeScript:** No `any` type — define explicit TypeScript interfaces for all props, emits, and API payloads.
-3. **English Standard:** All user-facing UI text, form labels, placeholders, error messages, toast notifications, and in-code comments **MUST be in English**.
-4. **No Build Commands:** NEVER run `pnpm build` or `npm run build` autonomously. Build only on explicit user request.
-5. **No Automatic Tests:** NEVER run `vitest`, `pnpm test`, or `pnpm test:run` autonomously.
-6. **No Git Operations:** NEVER run `git add`, `git commit`, or `git push` autonomously.
-7. **No New Packages Without Confirmation:** Always ask in chat before running `pnpm add`.
-8. **No Scoped CSS:** Use Tailwind utility classes. Do not write `<style scoped>`.
-9. **Dialog Accessibility:** Every `DialogContent` MUST include `DialogTitle` and `DialogDescription` (use `sr-only` if visually hidden) to comply with Reka UI ARIA standards.
-10. **Tailwind CSS v4 Strict Syntax Compliance:**
+1. **Direct & Fluff-Free Responses (Token Efficiency):** Never use conversational filler, pleasantries, apologies, or verbose preambles. Deliver concise, direct, and actionable technical deliverables to conserve tokens.
+2. **Surgical & Focused Edits:** Only modify files directly related to the user's explicit request. Do not arbitrarily refactor untouched files.
+3. **Composition API Only:** Never use Options API — always use `<script setup lang="ts">`.
+4. **Strict TypeScript:** No `any` type — define explicit TypeScript interfaces for all props, emits, and API payloads.
+5. **English Standard:** All user-facing UI text, form labels, placeholders, error messages, toast notifications, and in-code comments **MUST be in English**.
+6. **No Build Commands:** NEVER run `pnpm build` or `npm run build` autonomously. Build only on explicit user request.
+7. **No Automatic Tests:** NEVER run `vitest`, `pnpm test`, or `pnpm test:run` autonomously.
+8. **No Git Operations:** NEVER run `git add`, `git commit`, or `git push` autonomously.
+9. **No New Packages Without Confirmation:** Always ask in chat before running `pnpm add` or `npm install`.
+10. **Semantic Color & Token System:** NEVER use arbitrary palette classes like `text-gray-500` or `bg-blue-600`. ALWAYS use semantic tokens: `bg-background`, `bg-card`, `bg-primary`, `text-foreground`, `text-muted-foreground`, `border-border`.
+11. **No Scoped CSS:** Use Tailwind utility classes. Do not write `<style scoped>`.
+12. **Dialog Accessibility:** Every `DialogContent` MUST include `DialogTitle` and `DialogDescription` (use `sr-only` if visually hidden) to comply with Reka UI ARIA standards.
+13. **Tailwind CSS v4 Strict Syntax Compliance:**
     - **Gradients:** ALWAYS use `bg-linear-to-r`, `bg-linear-to-b`, `bg-linear-to-tr` (NEVER `bg-gradient-to-*`).
-    - **Sizing:** NEVER use arbitrary brackets like `max-w-[170px]`, `w-[300px]`, `p-[1px]`. Use Tailwind v4 scale (`max-w-44`, `w-75`, `p-px`).
+    - **Sizing:** NEVER use arbitrary brackets like `max-w-[170px]`, `w-[300px]`, `p-[1px]`. Use Tailwind v4 scale (`max-w-44`, `w-75`, `p-px`, `size-4` / `size-3.5` for icons).
     - **Shadows:** Use `shadow-2xs`, `shadow-xs`, `shadow-sm`, `shadow-md`, `shadow-lg`.
     - **Viewport:** Use `min-h-dvh` / `h-dvh` instead of `min-h-screen` / `h-screen`.
     - **Opacity:** Use integer percentage (`bg-primary/50`) NOT decimal (`bg-primary/0.5`).
@@ -108,7 +112,7 @@ src/
 | **VueUse** (`useColorMode`, `useLocalStorage`, `useDebounceFn`, etc.) | ✅ **AUTOMATIC** | Use directly: `const mode = useColorMode()` |
 | **Pinia** (`defineStore`, `storeToRefs`) | ✅ **AUTOMATIC** | Use directly: `defineStore(...)` |
 | **All UI Components** (`Button`, `Card`, `Dialog`, `Input`, `InputGroup`, `Table`, `Tabs`, etc.) | ✅ **AUTOMATIC** | Use directly in template: `<Card>`, `<Button>`, `<InputGroup>` |
-| **Shared Components** (`PageHeader`, `EmptyState`, `AppLogo`) | ✅ **AUTOMATIC** | Use directly: `<PageHeader>`, `<EmptyState>` |
+| **Shared Components** (`PageHeader`, `EmptyState`, `AppLogo`, `BrandIcon`) | ✅ **AUTOMATIC** | Use directly: `<PageHeader>`, `<EmptyState>`, `<BrandIcon>` |
 | **Custom Composables** (`useFormatter`, `useThemeConfig`) | ✅ **AUTOMATIC** | Use directly: `const fmt = useFormatter()` |
 | **Lucide Icons** (`Plus`, `Search`, `Trash2`, etc.) | ⚠️ **MANUAL IMPORT** | `import { Plus, Search } from '@lucide/vue'` |
 | **Toast Notifications** (`toast`) | ⚠️ **MANUAL IMPORT** | `import { toast } from '@/components/ui/sonner'` |
@@ -129,7 +133,7 @@ Always use `<PageHeader>` at the top of every view — never build a custom head
 >
   <template #actions>
     <Button size="sm" class="gap-1.5" @click="isDialogOpen = true">
-      <Plus class="h-3.5 w-3.5" />
+      <Plus class="size-3.5" />
       Add Product
     </Button>
   </template>
@@ -161,7 +165,7 @@ Never write manual `absolute` positioning for input icons:
 <!-- Search icon input -->
 <InputGroup>
   <InputIcon side="left">
-    <Search class="h-3.5 w-3.5" />
+    <Search class="size-3.5" />
   </InputIcon>
   <Input v-model="searchQuery" placeholder="Search..." class="pl-8 h-8 text-xs" />
 </InputGroup>
@@ -186,13 +190,13 @@ Never write manual `absolute` positioning for input icons:
     <CardContent class="p-5 space-y-2">
       <div class="flex items-center justify-between">
         <span class="text-xs font-medium text-muted-foreground">{{ stat.title }}</span>
-        <component :is="stat.icon" class="h-4 w-4 text-primary" />
+        <component :is="stat.icon" class="size-4 text-primary" />
       </div>
       <div class="text-2xl font-bold tracking-tight">{{ stat.value }}</div>
       <p class="text-xs text-muted-foreground flex items-center gap-1">
         <span class="font-semibold inline-flex items-center gap-0.5"
           :class="stat.positive ? 'text-emerald-500' : 'text-rose-500'">
-          <component :is="stat.positive ? ArrowUpRight : ArrowDownRight" class="h-3.5 w-3.5" />
+          <component :is="stat.positive ? ArrowUpRight : ArrowDownRight" class="size-3.5" />
           {{ stat.change }}
         </span>
         <span>{{ stat.changeLabel }}</span>

package/template/AGENTS.md

@@ -2,21 +2,95 @@
 
 > This document defines the strict architectural standards and rules for AI coding assistants (Antigravity, Cursor, Claude Code, GitHub Copilot, Roo Code, Windsurf) working on this **Nala** application.
 
+Behavioral guidelines to reduce common LLM coding mistakes. Merge with project-specific instructions as needed.
+
+**Tradeoff:** These guidelines bias toward caution over speed. For trivial tasks, use judgment.
+
+## 1. Think Before Coding
+
+**Don't assume. Don't hide confusion. Surface tradeoffs.**
+
+Before implementing:
+
+- State your assumptions explicitly. If uncertain, ask.
+- If multiple interpretations exist, present them - don't pick silently.
+- If a simpler approach exists, say so. Push back when warranted.
+- If something is unclear, stop. Name what's confusing. Ask.
+
+## 2. Simplicity First
+
+**Minimum code that solves the problem. Nothing speculative.**
+
+- No features beyond what was asked.
+- No abstractions for single-use code.
+- No "flexibility" or "configurability" that wasn't requested.
+- No error handling for impossible scenarios.
+- If you write 200 lines and it could be 50, rewrite it.
+
+Ask yourself: "Would a senior engineer say this is overcomplicated?" If yes, simplify.
+
+## 3. Surgical Changes
+
+**Touch only what you must. Clean up only your own mess.**
+
+When editing existing code:
+
+- Don't "improve" adjacent code, comments, or formatting.
+- Don't refactor things that aren't broken.
+- Match existing style, even if you'd do it differently.
+- If you notice unrelated dead code, mention it - don't delete it.
+
+When your changes create orphans:
+
+- Remove imports/variables/functions that YOUR changes made unused.
+- Don't remove pre-existing dead code unless asked.
+
+The test: Every changed line should trace directly to the user's request.
+
+## 4. Goal-Driven Execution
+
+**Define success criteria. Loop until verified.**
+
+Transform tasks into verifiable goals:
+
+- "Add validation" → "Write tests for invalid inputs, then make them pass"
+- "Fix the bug" → "Write a test that reproduces it, then make it pass"
+- "Refactor X" → "Ensure tests pass before and after"
+
+For multi-step tasks, state a brief plan:
+
+```
+1. [Step] → verify: [check]
+2. [Step] → verify: [check]
+3. [Step] → verify: [check]
+```
+
+Strong success criteria let you loop independently. Weak criteria ("make it work") require constant clarification.
+
+---
+
+**These guidelines are working if:** fewer unnecessary changes in diffs, fewer rewrites due to overcomplication, and clarifying questions come before implementation rather than after mistakes.
+
 ---
 
 ## 🛑 Strict Rules (MUST FOLLOW)
 
-1. **Strict Composition API:** ALWAYS use `<script setup lang="ts">`. NEVER use the Options API.
-2. **Strict TypeScript Hygiene:** NEVER use `any`. Always define explicit TypeScript interfaces for props, emits, and API payloads.
-3. **English Standard:** All user-facing UI text, form labels, error messages, toast notifications, and in-code comments (JSDoc/inline notes) MUST be written in **English**.
-4. **Tailwind CSS v4 Compliance:**
+1. **Direct & Fluff-Free Responses (Token Efficiency):** Do not use conversational filler, pleasantries, apologies, or verbose preambles. Deliver direct, concise, and technically focused answers and code diffs to conserve tokens.
+2. **Surgical & Focused Edits:** Only modify files directly related to the developer's explicit request. Do not arbitrarily refactor untouched files.
+3. **Strict Composition API:** ALWAYS use `<script setup lang="ts">`. NEVER use the Options API.
+4. **Strict TypeScript Hygiene:** NEVER use `any`. Always define explicit TypeScript interfaces for props, emits, and API payloads.
+5. **English Standard:** All user-facing UI text, form labels, error messages, toast notifications, and in-code comments (JSDoc/inline notes) MUST be written in **English**.
+6. **Auto-Import Awareness:** Do NOT manually import Vue reactivity (`ref`, `computed`, `watch`, `onMounted`), Vue Router (`useRouter`, `useRoute`), Pinia (`defineStore`), or UI Primitives (`Button`, `Card`, `Dialog`, etc.) — they are auto-imported. Only explicitly import Lucide icons, `toast` (`@/components/ui/sonner`), `apiClient`, and `zod`.
+7. **Semantic Color & Token System:** NEVER use arbitrary palette classes like `text-gray-500` or `bg-blue-600`. ALWAYS use semantic tokens: `bg-background`, `bg-card`, `bg-primary`, `text-foreground`, `text-muted-foreground`, `border-border`.
+8. **Tailwind CSS v4 Compliance:**
    - **Gradients:** ALWAYS use `bg-linear-to-r`, `bg-linear-to-b`, `bg-linear-to-tr` (NEVER use legacy v3 `bg-gradient-to-*`).
-   - **Sizing Scale:** NEVER write arbitrary bracket sizing like `max-w-[170px]`, `w-[300px]`, or `p-[1px]`. ALWAYS use Tailwind v4 scale (`max-w-44`, `max-w-28`, `w-75`, `max-h-75`, `p-px`).
+   - **Sizing Scale:** NEVER write arbitrary bracket sizing like `max-w-[170px]`, `w-[300px]`, or `p-[1px]`. ALWAYS use Tailwind v4 scale (`max-w-44`, `max-w-28`, `w-75`, `max-h-75`, `p-px`, `size-4` / `size-5` for icons).
    - **Shadows:** Use `shadow-2xs`, `shadow-xs`, `shadow-sm`, `shadow-md`, `shadow-lg`.
-5. **No Scoped Styles:** Use Tailwind CSS utility classes instead of `<style scoped>`.
-6. **Package Installation:** NEVER install new npm packages autonomously. Always ask the developer for confirmation before running `pnpm add` or `npm install`.
-7. **Dialog Accessibility:** Every `DialogContent` MUST include `DialogTitle` and `DialogDescription` (use `sr-only` if visually hidden) to comply with Reka UI ARIA standards.
-8. **No Automatic Builds / Tests:** Do not run `pnpm build` or `pnpm test` autonomously after code generation unless explicitly instructed.
+9. **No Scoped Styles:** Use Tailwind CSS utility classes instead of `<style scoped>`.
+10. **Package Installation:** NEVER install new npm packages autonomously. Always ask the developer for confirmation before running `pnpm add` or `npm install`.
+11. **Dialog Accessibility:** Every `DialogContent` MUST include `DialogTitle` and `DialogDescription` (use `sr-only` if visually hidden) to comply with Reka UI ARIA standards.
+12. **No Automatic Builds / Tests:** Do not run `pnpm build`, `npm run build`, `vitest`, or `pnpm test` autonomously after code generation unless explicitly instructed.
+13. **No Unauthorized Git Operations:** NEVER run `git add`, `git commit`, or `git push` autonomously. Git commands are strictly executed only upon explicit user instruction.
 
 ---
 
@@ -31,6 +105,7 @@ The following modules are auto-imported via `unplugin-auto-import` and `unplugin
 | VueUse (`useColorMode`, `useLocalStorage`, etc.) | ✅ Yes | Use directly: `const mode = useColorMode()` |
 | Pinia (`defineStore`, `storeToRefs`) | ✅ Yes | Use directly: `defineStore(...)` |
 | UI Components (`Button`, `Card`, `Dialog`, `Input`, `Table`, etc.) | ✅ Yes | Use directly in template: `<Button>`, `<Card>` |
+| Shared Components (`PageHeader`, `EmptyState`, `AppLogo`, `BrandIcon`) | ✅ Yes | Use directly in template: `<PageHeader>`, `<BrandIcon name="google" />` |
 | Lucide Icons (`Plus`, `Search`, `Trash2`, etc.) | ⚠️ **No** | `import { Plus, Search } from '@lucide/vue'` |
 | Toast Notifications (`toast`) | ⚠️ **No** | `import { toast } from '@/components/ui/sonner'` |
 | API Client (`apiClient`) | ⚠️ **No** | `import { apiClient } from '@/lib/axios'` |
@@ -40,10 +115,35 @@ The following modules are auto-imported via `unplugin-auto-import` and `unplugin
 
 ## 📦 UI Primitives Catalog (`src/components/ui/`)
 
-All 45 primitive components in `src/components/ui/` are globally registered and ready to use:
-- `Button`, `Badge`, `Avatar`, `Breadcrumb`, `Card`, `Checkbox`, `Dialog`, `DropdownMenu`
-- `Form` (`FormField`, `FormItem`, `FormLabel`, `FormControl`, `FormMessage`)
-- `Input`, `InputGroup`, `InputIcon`, `InputAddon`, `PinInput`, `Textarea`, `Select`, `Switch`
-- `Table`, `Tabs`, `Sheet`, `Popover`, `Progress`, `Skeleton`, `Slider`, `Tooltip`, `Toaster`
+All 46 primitive components in `src/components/ui/` are globally registered and ready to use:
+- `Accordion`, `Alert`, `AlertDialog`, `Avatar`, `Badge`, `Breadcrumb`, `Button`, `Calendar`
+- `Card`, `Chart`, `Checkbox`, `Collapsible`, `Command`, `ContextMenu`, `DatePicker`, `Dialog`
+- `DropdownMenu`, `Editor` (`RichTextEditor`), `Form` (`FormField`, `FormItem`, `FormLabel`, `FormControl`, `FormMessage`)
+- `HoverCard`, `Input`, `Kbd`, `Label`, `LoadingBar`, `Pagination`, `PinInput`, `Popover`, `Progress`
+- `RadioGroup`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `Sidebar`, `Skeleton`, `Slider`
+- `Sonner` (`toast`), `Stepper`, `Switch`, `Table`, `Tabs`, `Textarea`, `Timeline`, `Toggle`, `ToggleGroup`, `Tooltip`
+
+---
+
+## 🚀 Standard Development Workflow (New Features & Scaffolding)
+
+When building new features or views in this application:
+
+1. **New Views & Pages:**
+   - Create new views under `src/views/<feature>/<Feature>View.vue`.
+   - Use `src/views/_starter/BlankView.vue` as the canonical starting point.
+   - Always start pages with `<PageHeader title="..." description="..." />`.
+   - Use `<EmptyState />` inside table or card bodies when data is empty.
+2. **Routing Integration:**
+   - Register routes in `src/router/index.ts` under the appropriate layout:
+     - Authenticated dashboard views ➔ child of `AdminLayout` (`/`).
+     - Public / auth views ➔ child of `AuthLayout` or `AuthSplitLayout` (`/auth/*`).
+3. **Navigation Links:**
+   - Add menu items into `src/components/layout/AppSidebar.vue` inside the relevant navigation section.
+4. **Service & State Management:**
+   - Place typed API methods in `src/services/<feature>.service.ts` using `apiClient` (`@/lib/axios`).
+   - Create Pinia Setup Stores in `src/stores/<feature>.ts` (`defineStore('name', () => { ... })`).
+
+---
 
 For deep blueprints on adding new features and services, see [`.agents/skills/nala-project/SKILL.md`](./.agents/skills/nala-project/SKILL.md).

package/template/CLAUDE.md

@@ -1,27 +1,97 @@
 # CLAUDE.md — Nala Application AI Guardrails
 
-This file defines the strict, high-priority guardrails and behavioral constraints for AI agents working on this **Nala** application.
+Behavioral guidelines to reduce common LLM coding mistakes. Merge with project-specific instructions as needed.
+
+**Tradeoff:** These guidelines bias toward caution over speed. For trivial tasks, use judgment.
+
+## 1. Think Before Coding
+
+**Don't assume. Don't hide confusion. Surface tradeoffs.**
+
+Before implementing:
+
+- State your assumptions explicitly. If uncertain, ask.
+- If multiple interpretations exist, present them - don't pick silently.
+- If a simpler approach exists, say so. Push back when warranted.
+- If something is unclear, stop. Name what's confusing. Ask.
+
+## 2. Simplicity First
+
+**Minimum code that solves the problem. Nothing speculative.**
+
+- No features beyond what was asked.
+- No abstractions for single-use code.
+- No "flexibility" or "configurability" that wasn't requested.
+- No error handling for impossible scenarios.
+- If you write 200 lines and it could be 50, rewrite it.
+
+Ask yourself: "Would a senior engineer say this is overcomplicated?" If yes, simplify.
+
+## 3. Surgical Changes
+
+**Touch only what you must. Clean up only your own mess.**
+
+When editing existing code:
+
+- Don't "improve" adjacent code, comments, or formatting.
+- Don't refactor things that aren't broken.
+- Match existing style, even if you'd do it differently.
+- If you notice unrelated dead code, mention it - don't delete it.
+
+When your changes create orphans:
+
+- Remove imports/variables/functions that YOUR changes made unused.
+- Don't remove pre-existing dead code unless asked.
+
+The test: Every changed line should trace directly to the user's request.
+
+## 4. Goal-Driven Execution
+
+**Define success criteria. Loop until verified.**
+
+Transform tasks into verifiable goals:
+
+- "Add validation" → "Write tests for invalid inputs, then make them pass"
+- "Fix the bug" → "Write a test that reproduces it, then make it pass"
+- "Refactor X" → "Ensure tests pass before and after"
+
+For multi-step tasks, state a brief plan:
+
+```
+1. [Step] → verify: [check]
+2. [Step] → verify: [check]
+3. [Step] → verify: [check]
+```
+
+Strong success criteria let you loop independently. Weak criteria ("make it work") require constant clarification.
+
+---
+
+**These guidelines are working if:** fewer unnecessary changes in diffs, fewer rewrites due to overcomplication, and clarifying questions come before implementation rather than after mistakes.
 
 ---
 
 ## 🛑 Strict Rules (Enforced on Every Invocation)
 
-1. **No Automatic Build:** NEVER run `pnpm build` or `npm run build` after writing or modifying code. Transpilation/build checks are only performed when explicitly requested by the user.
-2. **No Automatic Unit Tests:** NEVER run `vitest`, `pnpm test`, `pnpm test:run`, or `npm test` autonomously after writing or modifying code. Unit tests are strictly executed only upon explicit user instruction.
-3. **No Unauthorized Git Operations:** NEVER run `git add`, `git commit`, or `git push` autonomously. Git commands are strictly executed only upon explicit user instruction.
-4. **English Standard (UI & Code Comments):** All user-facing UI text, form labels, validation/error messages, toast notifications, and in-code comments (JSDoc/inline notes in `.vue` and `.ts` files) MUST be written in **English**.
-5. **Strict Vue 3 & TypeScript Hygiene:** Always use Composition API `<script setup lang="ts">`. Never use Options API. Never use `any` type — define explicit TypeScript interfaces for all props, emits, and API payloads.
-6. **Tailwind CSS v4 Standard & Syntax Compliance:**
-   - **Gradients:** ALWAYS use `bg-linear-to-r`, `bg-linear-to-b`, `bg-linear-to-tr` (NEVER use legacy v3 `bg-gradient-to-*`).
-   - **Sizing Scale:** NEVER write arbitrary bracket sizing like `max-w-[170px]`, `w-[300px]`, or `p-[1px]`. ALWAYS use Tailwind v4 scale (`max-w-44`, `max-w-28`, `w-75`, `max-h-75`, `p-px`).
+1. **Direct & Fluff-Free Responses (Token Efficiency):** Never use conversational filler, pleasantries, apologies, or verbose preambles. Deliver concise, direct, and actionable technical deliverables to conserve tokens.
+2. **Surgical & Focused Edits:** Only modify files directly related to the user's explicit request. Do not arbitrarily refactor untouched files.
+3. **No Automatic Build / Tests:** NEVER run `pnpm build`, `npm run build`, `vitest`, or `pnpm test` autonomously.
+4. **No Unauthorized Git Operations:** NEVER run `git add`, `git commit`, or `git push` autonomously.
+5. **English Standard (UI & Code Comments):** All UI strings, form labels, validation/error messages, toasts, and in-code comments MUST be in **English**.
+6. **Strict Vue 3 & TypeScript Hygiene:** Always use Composition API `<script setup lang="ts">`. Never use Options API or `any`. Define strict TypeScript interfaces for all props, emits, and API payloads.
+7. **Auto-Import Awareness:** Do NOT manually import Vue reactivity (`ref`, `computed`, `watch`, `onMounted`), Vue Router (`useRouter`, `useRoute`), Pinia (`defineStore`), or UI Primitives (`Button`, `Card`, `Dialog`, etc.) — they are auto-imported. Only explicitly import Lucide icons, `toast` (`@/components/ui/sonner`), `apiClient`, and `zod`.
+8. **Semantic Color & Token System:** NEVER use arbitrary palette classes like `text-gray-500` or `bg-blue-600`. ALWAYS use semantic tokens: `bg-background`, `bg-card`, `bg-primary`, `text-foreground`, `text-muted-foreground`, `border-border`.
+9. **Tailwind CSS v4 Standard:**
+   - **Gradients:** ALWAYS use `bg-linear-to-r`, `bg-linear-to-b`, `bg-linear-to-tr` (NEVER `bg-gradient-to-*`).
+   - **Sizing Scale:** NEVER write arbitrary bracket sizes (`w-[300px]`, `p-[1px]`). Use v4 tokens (`max-w-44`, `w-75`, `p-px`, `size-4` / `size-5` for icons).
    - **Shadows:** Use `shadow-2xs`, `shadow-xs`, `shadow-sm`, `shadow-md`, `shadow-lg`.
-7. **Package Installation Confirmation:** NEVER install new npm packages autonomously. Always ask the user directly in chat for approval before running `pnpm add` or `npm install`.
-8. **No Scoped Styles:** Use Tailwind CSS utility classes instead of `<style scoped>`.
-9. **Dialog / Modal Accessibility Standard:** Every `DialogContent` MUST include `DialogTitle` and `DialogDescription` (use `sr-only` if visually hidden) to comply with Reka UI ARIA standards.
+   - **No Scoped Styles:** Use Tailwind CSS utility classes instead of `<style scoped>`.
+10. **Package Installation Confirmation:** NEVER install npm packages autonomously without prior user confirmation in chat.
+11. **Dialog / Modal Accessibility Standard:** Every `DialogContent` MUST include `DialogTitle` and `DialogDescription` (use `sr-only` if visually hidden) to comply with Reka UI ARIA standards.
 
 ---
 
 ## 📚 Deep Technical Blueprints & Component Catalog
 
-For the complete 45 Reka UI Primitives, Shared Components (`PageHeader`, `EmptyState`, `AppLogo`), Auto-Import Matrix, Axios Service Layer, Pinia Store patterns, and end-to-end CRUD scaffolding blueprints, refer to the **`nala-project` skill** located at:
+For the complete 45+ Reka UI Primitives, Shared Components (`PageHeader`, `EmptyState`, `AppLogo`), Auto-Import Matrix, Axios Service Layer, Pinia Store patterns, and end-to-end CRUD scaffolding blueprints, refer to the **`nala-project` skill** located at:
 👉 [`.agents/skills/nala-project/SKILL.md`](.agents/skills/nala-project/SKILL.md)

package/template/GEMINI.md

@@ -1,27 +1,97 @@
 # GEMINI.md — Nala Application AI Guardrails
 
-This file defines the strict, high-priority guardrails and behavioral constraints for AI agents working on this **Nala** application.
+Behavioral guidelines to reduce common LLM coding mistakes. Merge with project-specific instructions as needed.
+
+**Tradeoff:** These guidelines bias toward caution over speed. For trivial tasks, use judgment.
+
+## 1. Think Before Coding
+
+**Don't assume. Don't hide confusion. Surface tradeoffs.**
+
+Before implementing:
+
+- State your assumptions explicitly. If uncertain, ask.
+- If multiple interpretations exist, present them - don't pick silently.
+- If a simpler approach exists, say so. Push back when warranted.
+- If something is unclear, stop. Name what's confusing. Ask.
+
+## 2. Simplicity First
+
+**Minimum code that solves the problem. Nothing speculative.**
+
+- No features beyond what was asked.
+- No abstractions for single-use code.
+- No "flexibility" or "configurability" that wasn't requested.
+- No error handling for impossible scenarios.
+- If you write 200 lines and it could be 50, rewrite it.
+
+Ask yourself: "Would a senior engineer say this is overcomplicated?" If yes, simplify.
+
+## 3. Surgical Changes
+
+**Touch only what you must. Clean up only your own mess.**
+
+When editing existing code:
+
+- Don't "improve" adjacent code, comments, or formatting.
+- Don't refactor things that aren't broken.
+- Match existing style, even if you'd do it differently.
+- If you notice unrelated dead code, mention it - don't delete it.
+
+When your changes create orphans:
+
+- Remove imports/variables/functions that YOUR changes made unused.
+- Don't remove pre-existing dead code unless asked.
+
+The test: Every changed line should trace directly to the user's request.
+
+## 4. Goal-Driven Execution
+
+**Define success criteria. Loop until verified.**
+
+Transform tasks into verifiable goals:
+
+- "Add validation" → "Write tests for invalid inputs, then make them pass"
+- "Fix the bug" → "Write a test that reproduces it, then make it pass"
+- "Refactor X" → "Ensure tests pass before and after"
+
+For multi-step tasks, state a brief plan:
+
+```
+1. [Step] → verify: [check]
+2. [Step] → verify: [check]
+3. [Step] → verify: [check]
+```
+
+Strong success criteria let you loop independently. Weak criteria ("make it work") require constant clarification.
+
+---
+
+**These guidelines are working if:** fewer unnecessary changes in diffs, fewer rewrites due to overcomplication, and clarifying questions come before implementation rather than after mistakes.
 
 ---
 
 ## 🛑 Strict Rules (Enforced on Every Invocation)
 
-1. **No Automatic Build:** NEVER run `pnpm build` or `npm run build` after writing or modifying code. Transpilation/build checks are only performed when explicitly requested by the user.
-2. **No Automatic Unit Tests:** NEVER run `vitest`, `pnpm test`, `pnpm test:run`, or `npm test` autonomously after writing or modifying code. Unit tests are strictly executed only upon explicit user instruction.
-3. **No Unauthorized Git Operations:** NEVER run `git add`, `git commit`, or `git push` autonomously. Git commands are strictly executed only upon explicit user instruction.
-4. **English Standard (UI & Code Comments):** All user-facing UI text, form labels, validation/error messages, toast notifications, and in-code comments (JSDoc/inline notes in `.vue` and `.ts` files) MUST be written in **English**.
-5. **Strict Vue 3 & TypeScript Hygiene:** Always use Composition API `<script setup lang="ts">`. Never use Options API. Never use `any` type — define explicit TypeScript interfaces for all props, emits, and API payloads.
-6. **Tailwind CSS v4 Standard & Syntax Compliance:**
-   - **Gradients:** ALWAYS use `bg-linear-to-r`, `bg-linear-to-b`, `bg-linear-to-tr` (NEVER use legacy v3 `bg-gradient-to-*`).
-   - **Sizing Scale:** NEVER write arbitrary bracket sizing like `max-w-[170px]`, `w-[300px]`, or `p-[1px]`. ALWAYS use Tailwind v4 scale (`max-w-44`, `max-w-28`, `w-75`, `max-h-75`, `p-px`).
+1. **Direct & Fluff-Free Responses (Token Efficiency):** Never use conversational filler, pleasantries, apologies, or verbose preambles. Deliver concise, direct, and actionable technical deliverables to conserve tokens.
+2. **Surgical & Focused Edits:** Only modify files directly related to the user's explicit request. Do not arbitrarily refactor untouched files.
+3. **No Automatic Build / Tests:** NEVER run `pnpm build`, `npm run build`, `vitest`, or `pnpm test` autonomously.
+4. **No Unauthorized Git Operations:** NEVER run `git add`, `git commit`, or `git push` autonomously.
+5. **English Standard (UI & Code Comments):** All UI strings, form labels, validation/error messages, toasts, and in-code comments MUST be in **English**.
+6. **Strict Vue 3 & TypeScript Hygiene:** Always use Composition API `<script setup lang="ts">`. Never use Options API or `any`. Define strict TypeScript interfaces for all props, emits, and API payloads.
+7. **Auto-Import Awareness:** Do NOT manually import Vue reactivity (`ref`, `computed`, `watch`, `onMounted`), Vue Router (`useRouter`, `useRoute`), Pinia (`defineStore`), or UI Primitives (`Button`, `Card`, `Dialog`, etc.) — they are auto-imported. Only explicitly import Lucide icons, `toast` (`@/components/ui/sonner`), `apiClient`, and `zod`.
+8. **Semantic Color & Token System:** NEVER use arbitrary palette classes like `text-gray-500` or `bg-blue-600`. ALWAYS use semantic tokens: `bg-background`, `bg-card`, `bg-primary`, `text-foreground`, `text-muted-foreground`, `border-border`.
+9. **Tailwind CSS v4 Standard:**
+   - **Gradients:** ALWAYS use `bg-linear-to-r`, `bg-linear-to-b`, `bg-linear-to-tr` (NEVER `bg-gradient-to-*`).
+   - **Sizing Scale:** NEVER write arbitrary bracket sizes (`w-[300px]`, `p-[1px]`). Use v4 tokens (`max-w-44`, `w-75`, `p-px`, `size-4` / `size-5` for icons).
    - **Shadows:** Use `shadow-2xs`, `shadow-xs`, `shadow-sm`, `shadow-md`, `shadow-lg`.
-7. **Package Installation Confirmation:** NEVER install new npm packages autonomously. Always ask the user directly in chat for approval before running `pnpm add` or `npm install`.
-8. **No Scoped Styles:** Use Tailwind CSS utility classes instead of `<style scoped>`.
-9. **Dialog / Modal Accessibility Standard:** Every `DialogContent` MUST include `DialogTitle` and `DialogDescription` (use `sr-only` if visually hidden) to comply with Reka UI ARIA standards.
+   - **No Scoped Styles:** Use Tailwind CSS utility classes instead of `<style scoped>`.
+10. **Package Installation Confirmation:** NEVER install npm packages autonomously without prior user confirmation in chat.
+11. **Dialog / Modal Accessibility Standard:** Every `DialogContent` MUST include `DialogTitle` and `DialogDescription` (use `sr-only` if visually hidden) to comply with Reka UI ARIA standards.
 
 ---
 
 ## 📚 Deep Technical Blueprints & Component Catalog
 
-For the complete 45 Reka UI Primitives, Shared Components (`PageHeader`, `EmptyState`, `AppLogo`), Auto-Import Matrix, Axios Service Layer, Pinia Store patterns, and end-to-end CRUD scaffolding blueprints, refer to the **`nala-project` skill** located at:
+For the complete 45+ Reka UI Primitives, Shared Components (`PageHeader`, `EmptyState`, `AppLogo`), Auto-Import Matrix, Axios Service Layer, Pinia Store patterns, and end-to-end CRUD scaffolding blueprints, refer to the **`nala-project` skill** located at:
 👉 [`.agents/skills/nala-project/SKILL.md`](.agents/skills/nala-project/SKILL.md)

package/template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "NALA_APP_SLUG",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "description": "Production-ready admin dashboard built with Vue 3, Vite, TypeScript, and Tailwind CSS v4.",
   "private": true,
   "type": "module",