feat(root): add translator skill and refresh agent guides

- add translator skill with translation rubric and anti-AI guidance
- restructure tf-infra guidance into reusable resource documents
- refresh frontend and dev-workflow skill references
- mark orchestrator helper scripts as executable

Co-Authored-By: First Fluke <our.first.fluke@gmail.com>

Author: gracefullight

.agents/skills/_version.json

@@ -1,3 +1,3 @@
 {
-  "version": "2.9.0"
+  "version": "2.11.3"
 }

.agents/skills/dev-workflow/SKILL.md

@@ -3,15 +3,9 @@ name: dev-workflow
 description: Use when setting up or optimizing developer workflows in a monorepo, managing mise tasks, git hooks, CI/CD pipelines, database migrations, or release automation. Invoke for development environment setup, build automation, testing workflows, and release coordination.
 ---
 
-# Dev Workflow
+# Dev Workflow - Monorepo Task Automation Specialist
 
-Dev workflow specialist for monorepo task automation and developer productivity.
-
-## Role Definition
-
-You are a senior DevOps engineer with 7+ years of experience in monorepo tooling and task automation. You specialize in mise (formerly rtx) task runner, parallel execution strategies, and multi-language development workflows. You excel at orchestrating complex build pipelines, managing cross-app dependencies, and optimizing development workflows for teams working with diverse technology stacks in a unified codebase.
-
-## When to Use This Skill
+## When to use
 
 - Running development servers for monorepo with multiple applications
 - Executing lint, format, typecheck across multiple apps in parallel
@@ -24,15 +18,39 @@ You are a senior DevOps engineer with 7+ years of experience in monorepo tooling
 - Troubleshooting mise task failures or configuration issues
 - Optimizing CI/CD pipelines with mise
 
-## Core Workflow
-
-1. **Analyze Task Requirements** - Identify which apps are affected and task dependencies
-2. **Check mise Configuration** - Verify mise.toml structure and available tasks
-3. **Determine Execution Strategy** - Decide between parallel vs sequential task execution
-4. **Run Prerequisites** - Install runtimes, dependencies if needed
-5. **Execute Tasks** - Run mise tasks with proper error handling
-6. **Verify Results** - Check output, logs, and generated artifacts
-7. **Report Status** - Summarize success/failure with actionable next steps
+## When NOT to use
+
+- Database schema design or query tuning -> use DB Agent
+- Backend API implementation -> use Backend Agent
+- Frontend UI implementation -> use Frontend Agent
+- Mobile development -> use Mobile Agent
+
+## Core Rules
+
+1. Always use `mise run` tasks instead of direct package manager commands
+2. Run `mise install` after pulling changes that might update runtime versions
+3. Use parallel tasks (`mise run lint`, `mise run test`) for independent operations
+4. Run lint/test only on apps with changed files (`lint:changed`, `test:changed`)
+5. Validate commit messages with commitlint before committing
+6. Run pre-commit validation pipeline for staged files only
+7. Configure CI to skip unchanged apps for faster builds
+8. Check `mise tasks --all` to discover available tasks before running
+9. Verify task output and exit codes for CI/CD integration
+10. Document task dependencies in mise.toml comments
+11. Use consistent task naming conventions across apps
+12. Enable mise in CI/CD pipelines for reproducible builds
+13. Pin runtime versions in mise.toml for consistency
+14. Test tasks locally before committing CI/CD changes
+15. Never use direct package manager commands when mise tasks exist
+16. Never modify mise.toml without understanding task dependencies
+17. Never skip `mise install` after toolchain version updates
+18. Never run dev servers without checking port availability first
+19. Never commit without running validation on affected apps
+20. Never ignore task failures - always investigate root cause
+21. Never hardcode secrets in mise.toml files
+22. Never assume task availability - always verify with `mise tasks`
+23. Never run destructive tasks (clean, reset) without confirmation
+24. Never skip reading task definitions before running unfamiliar tasks
 
 ## Technical Guidelines
 
@@ -164,36 +182,6 @@ API_URL=http://localhost:8000
 PUBLIC_API_URL=http://localhost:8000
 ```
 
-## Constraints
-
-### MUST DO
-- Always use `mise run` tasks instead of direct package manager commands
-- Run `mise install` after pulling changes that might update runtime versions
-- Use parallel tasks (`mise run lint`, `mise run test`) for independent operations
-- Run lint/test only on apps with changed files (`lint:changed`, `test:changed`)
-- Validate commit messages with commitlint before committing
-- Run pre-commit validation pipeline for staged files only
-- Configure CI to skip unchanged apps for faster builds
-- Check `mise tasks --all` to discover available tasks before running
-- Verify task output and exit codes for CI/CD integration
-- Document task dependencies in mise.toml comments
-- Use consistent task naming conventions across apps
-- Enable mise in CI/CD pipelines for reproducible builds
-- Pin runtime versions in mise.toml for consistency
-- Test tasks locally before committing CI/CD changes
-
-### MUST NOT DO
-- Never use direct package manager commands when mise tasks exist
-- Never modify mise.toml without understanding task dependencies
-- Never skip `mise install` after toolchain version updates
-- Never run dev servers without checking port availability first
-- Never commit without running validation on affected apps
-- Never ignore task failures - always investigate root cause
-- Never hardcode secrets in mise.toml files
-- Never assume task availability - always verify with `mise tasks`
-- Never run destructive tasks (clean, reset) without confirmation
-- Never skip reading task definitions before running unfamiliar tasks
-
 ## Output Templates
 
 When setting up development environment:
@@ -226,6 +214,17 @@ When troubleshooting:
 | Permission denied | Check file permissions, try with proper user |
 | Missing dependencies | Run `mise run install` or app-specific install |
 
+## How to Execute
+
+Follow the core workflow step by step:
+1. **Analyze Task Requirements** - Identify which apps are affected and task dependencies
+2. **Check mise Configuration** - Verify mise.toml structure and available tasks
+3. **Determine Execution Strategy** - Decide between parallel vs sequential task execution
+4. **Run Prerequisites** - Install runtimes, dependencies if needed
+5. **Execute Tasks** - Run mise tasks with proper error handling
+6. **Verify Results** - Check output, logs, and generated artifacts
+7. **Report Status** - Summarize success/failure with actionable next steps
+
 ## Execution Protocol (CLI Mode)
 
 See `../_shared/execution-protocols/` for vendor-specific protocols.

.agents/skills/frontend-agent/SKILL.md

@@ -23,6 +23,8 @@ description: Frontend specialist for React, Next.js, TypeScript with FSD-lite ar
 3. **Rendering Strategy**: Default to Server Components for performance. Use Client Components only for interactivity and API integration.
 4. **Accessibility**: Semantic HTML, ARIA labels, keyboard navigation, and screen reader compatibility are mandatory.
 5. **Tool First**: Check for existing solutions and tools before coding.
+6. **Proxy over Middleware**: Next.js 16+ uses `proxy.ts` for request proxying. Do NOT use `middleware.ts` for proxy/rewrite logic — use `proxy.ts` instead.
+7. **No Prop Drilling**: Avoid passing props beyond 3 levels. Use Jotai atoms instead. Avoid React Context — prefer Jotai.
 
 ## 1. Tooling & Performance
 
@@ -63,10 +65,11 @@ src/features/[feature]/
 | Styling | `TailwindCSS v4` + `shadcn/ui` |
 | Hooks | `ahooks` (Pre-made hooks preferred) |
 | Utils | `es-toolkit` (First choice) |
-| State (URL) | `jotai-location` |
+| State (URL) | `nuqs` |
 | State (Server) | `TanStack Query` |
 | State (Client) | `Jotai` (Minimize use) |
 | Forms | `@tanstack/react-form` + `zod` |
+| Auth | `better-auth` |
 
 ## 4. Standards
 

.agents/skills/frontend-agent/resources/examples.md

@@ -11,16 +11,16 @@
 ### Implementation
 - Components: TodoList, TodoItem, AddTodoForm
 - Routes: /todos (page)
-- State: TanStack Query for server state, local state for form
+- State: TanStack Query for server state, Jotai for client state
 
 ### Files Created/Modified
 - src/types/todo.ts (NEW) - Todo interface
 - src/lib/api/todos.ts (NEW) - API client with TanStack Query hooks
-- src/components/todo/TodoItem.tsx (NEW) - Single todo display
-- src/components/todo/AddTodoForm.tsx (NEW) - Form with validation
-- src/components/todo/TodoList.tsx (NEW) - List container
+- src/components/todo/todo-item.tsx (NEW) - Single todo display
+- src/components/todo/add-todo-form.tsx (NEW) - Form with validation
+- src/components/todo/todo-list.tsx (NEW) - List container
 - src/app/todos/page.tsx (NEW) - Page component
-- tests/components/TodoList.test.tsx (NEW)
+- tests/components/todo-list.test.tsx (NEW)
 
 ### Testing
 - Unit tests: 5 passing
@@ -37,17 +37,17 @@
 ## Task: Profile Edit Form
 
 ### Implementation
-- Components: ProfileForm (React Hook Form + Zod)
+- Components: ProfileForm (TanStack Form + Zod)
 - Validation: name (required, 2-50 chars), email (valid format), bio (optional, max 500)
 - API: PATCH /api/users/me via TanStack Query mutation
 - UX: optimistic update, error toast, success redirect
 
 ### Files Created
 - src/types/user.ts
 - src/lib/api/users.ts
-- src/components/profile/ProfileForm.tsx
+- src/components/profile/profile-form.tsx
 - src/app/profile/edit/page.tsx
-- tests/components/ProfileForm.test.tsx
+- tests/components/profile-form.test.tsx
 ```
 
 ## Example 3: Responsive Dashboard
@@ -70,8 +70,8 @@
 - [x] Color contrast 4.5:1 on all text
 
 ### Files Created
-- src/components/dashboard/StatCard.tsx
-- src/components/dashboard/StatsGrid.tsx
-- src/components/dashboard/ActivityChart.tsx
+- src/components/dashboard/stat-card.tsx
+- src/components/dashboard/stats-grid.tsx
+- src/components/dashboard/activity-chart.tsx
 - src/app/dashboard/page.tsx
 ```

.agents/skills/frontend-agent/resources/execution-protocol.md

@@ -23,7 +23,7 @@ Follow these steps in order (adjust depth by difficulty).
 ## Step 2: Plan
 - Decide on component structure (which are new, which extend existing)
 - Define props interfaces with TypeScript
-- Plan state management approach (local state, Context, Zustand)
+- Plan state management approach (Jotai for client, nuqs for URL, TanStack Query for server)
 - Identify API integration points (TanStack Query hooks)
 - Plan responsive breakpoints and accessibility requirements
 

.agents/skills/frontend-agent/resources/snippets.md

@@ -76,68 +76,90 @@ export function useCreateTodo() {
 
 ---
 
-## Form with React Hook Form + Zod
+## Form with TanStack Form + Zod
 
 ```tsx
 "use client";
 
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "@tanstack/react-form";
+import { zodValidator } from "@tanstack/zod-form-adapter";
 import { z } from "zod";
 
 const schema = z.object({
   email: z.string().email("Invalid email"),
   password: z.string().min(8, "At least 8 characters"),
 });
 
-type FormData = z.infer<typeof schema>;
-
-export function LoginForm({ onSubmit }: { onSubmit: (data: FormData) => void }) {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-  } = useForm<FormData>({ resolver: zodResolver(schema) });
+export function LoginForm({ onSubmit }: { onSubmit: (data: z.infer<typeof schema>) => void }) {
+  const form = useForm({
+    defaultValues: { email: "", password: "" },
+    validatorAdapter: zodValidator(),
+    validators: { onChange: schema },
+    onSubmit: async ({ value }) => onSubmit(value),
+  });
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
-      <div>
-        <label htmlFor="email" className="text-sm font-medium">
-          Email
-        </label>
-        <input
-          id="email"
-          type="email"
-          {...register("email")}
-          className="mt-1 w-full rounded-md border px-3 py-2"
-          aria-invalid={!!errors.email}
-        />
-        {errors.email && (
-          <p className="mt-1 text-sm text-destructive">{errors.email.message}</p>
+    <form
+      onSubmit={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        form.handleSubmit();
+      }}
+      className="space-y-4"
+    >
+      <form.Field name="email">
+        {(field) => (
+          <div>
+            <label htmlFor="email" className="text-sm font-medium">
+              Email
+            </label>
+            <input
+              id="email"
+              type="email"
+              value={field.state.value}
+              onChange={(e) => field.handleChange(e.target.value)}
+              onBlur={field.handleBlur}
+              className="mt-1 w-full rounded-md border px-3 py-2"
+              aria-invalid={field.state.meta.errors.length > 0}
+            />
+            {field.state.meta.errors.length > 0 && (
+              <p className="mt-1 text-sm text-destructive">{field.state.meta.errors[0]}</p>
+            )}
+          </div>
+        )}
+      </form.Field>
+      <form.Field name="password">
+        {(field) => (
+          <div>
+            <label htmlFor="password" className="text-sm font-medium">
+              Password
+            </label>
+            <input
+              id="password"
+              type="password"
+              value={field.state.value}
+              onChange={(e) => field.handleChange(e.target.value)}
+              onBlur={field.handleBlur}
+              className="mt-1 w-full rounded-md border px-3 py-2"
+              aria-invalid={field.state.meta.errors.length > 0}
+            />
+            {field.state.meta.errors.length > 0 && (
+              <p className="mt-1 text-sm text-destructive">{field.state.meta.errors[0]}</p>
+            )}
+          </div>
         )}
-      </div>
-      <div>
-        <label htmlFor="password" className="text-sm font-medium">
-          Password
-        </label>
-        <input
-          id="password"
-          type="password"
-          {...register("password")}
-          className="mt-1 w-full rounded-md border px-3 py-2"
-          aria-invalid={!!errors.password}
-        />
-        {errors.password && (
-          <p className="mt-1 text-sm text-destructive">{errors.password.message}</p>
+      </form.Field>
+      <form.Subscribe selector={(state) => [state.canSubmit, state.isSubmitting]}>
+        {([canSubmit, isSubmitting]) => (
+          <button
+            type="submit"
+            disabled={!canSubmit}
+            className="w-full rounded-md bg-primary px-4 py-2 text-primary-foreground disabled:opacity-50"
+          >
+            {isSubmitting ? "Signing in..." : "Sign in"}
+          </button>
         )}
-      </div>
-      <button
-        type="submit"
-        disabled={isSubmitting}
-        className="w-full rounded-md bg-primary px-4 py-2 text-primary-foreground disabled:opacity-50"
-      >
-        {isSubmitting ? "Signing in..." : "Sign in"}
-      </button>
+      </form.Subscribe>
     </form>
   );
 }

.agents/skills/frontend-agent/resources/tailwind-rules.md

@@ -265,34 +265,21 @@ Only use when absolutely necessary:
 
 ## Custom Utilities
 
-Add to `tailwind.config.js`:
-
-```js
-module.exports = {
-  theme: {
-    extend: {
-      spacing: {
-        '18': '4.5rem', // Custom spacing
-      },
-      colors: {
-        brand: {
-          50: '#...',
-          // ...
-          900: '#...',
-        },
-      },
-    },
-  },
-};
-```
+Add to `app/globals.css` using CSS `@theme`:
 
-## Performance
+```css
+@import "tailwindcss";
 
-### Purging
-Tailwind auto-purges unused classes in production.
+@theme {
+  --spacing-18: 4.5rem;
+  --color-brand-50: #...;
+  --color-brand-900: #...;
+}
+```
+
+> **Note**: Tailwind v4 uses CSS-based configuration. `tailwind.config.js` is deprecated.
 
-### JIT Mode
-Enabled by default in Tailwind 3+.
+## Performance
 
 ### Avoid @apply
 Prefer utility classes in JSX over `@apply` in CSS: