tribunal-kit 9.2.3 → 9.2.5

package/skills/authentication-best-practices/SKILL.md

@@ -1,157 +1,157 @@
----
-name: authentication-best-practices
-description: "Use when Authentication and Authorization mastery. Best practices for OAuth2, OpenID Connect, JWT (JSON Web Tokens), session management, password hashing, MFA (Multi-Factor Authentication), RBAC/ABAC, SSO, and secure credential storage. Use when auditing or implementing login flows, identity systems, or access control."
-version: 5.0.0
-last-updated: 2026-09-13
-skills:
-  - backend-security-expert
-  - api-security-auditor
-  - vulnerability-scanner
-tools: Read, Grep, Glob, Bash, Edit, Write
-scripts-binding:
-  - .agent/scripts/lint_runner.js
-  - .agent/scripts/verify_all.js
----
-
-# Authentication & Authorization — Identity Mastery
-
----
-
-## 🛠️ Technical Architecture & Reference Recipes
-
----
-
----
-
-## Passwords & Hashing
-
-```typescript
-// ❌ BAD: md5, sha1, sha256 (too fast, vulnerable to brute force/rainbow tables)
-const hash = crypto.createHash('sha256').update(password).digest('hex');
-
-// ✅ GOOD: Argon2 (memory-hard, ASIC resistant) or bcrypt
-import * as argon2 from 'argon2';
-
-async function hashPassword(password: string): Promise<string> {
-  // Argon2 hashes include the salt inherently in the resulting string
-  return await argon2.hash(password, {
-    type: argon2.argon2id, // recommended variant
-    memoryCost: 2 ** 16, // 64 MB
-    timeCost: 3, // iterations
-    parallelism: 1, // threads
-  });
-}
-
-async function verifyPassword(hash: string, password: string): Promise<boolean> {
-  return await argon2.verify(hash, password);
-}
-```
-
-### Password Policies
-
-- **Length over complexity**: Require minimum 12 characters. Stop requiring arbitrary symbols (e.g., `!@#`).
-- **Check against breaches**: Use HaveIBeenPwned API or similar to reject compromised passwords during signup.
-- **Never expire passwords arbitrarily**: Only force resets if there is evidence of a breach.
-
----
-
-## Session Management vs. JWT
-
-### 1. Stateful Sessions (Cookies)
-
-**Best for**: Monolithic web apps, SSR apps (Next.js, Remix).
-
-- Server stores session ID mapped to user data in Redis/DB.
-- Client stores session ID in an `HttpOnly`, `Secure`, `SameSite=Lax/Strict` cookie.
-- **Pros**: Immediate revocation, server-side truth, invisible to XSS.
-- **Cons**: Requires DB lookup per request.
-
-### 2. Stateless JWT (JSON Web Tokens)
-
-**Best for**: Distributed APIs, Microservices, Native mobile apps.
-
-- Server signs a token containing user claims.
-- Client passes it in `Authorization: Bearer <token>` header.
-- **Pros**: No DB lookup needed, easy cross-origin sharing.
-- **Cons**: Cannot be easily revoked before expiration.
-
-### The JWT "Refresh Token" Pattern
-
-```typescript
-// Scenario: API authentication
-// 1. Access Token (Short-lived: 15 mins)
-const accessToken = jwt.sign({ userId: user.id }, JWT_SECRET, {
-  expiresIn: '15m',
-  algorithm: 'HS256', // ALWAYS explicitly specify
-});
-// 2. Refresh Token (Long-lived: 7 days, opaque string in DB)
-const refreshToken = crypto.randomBytes(40).toString('hex');
-await db.refreshTokens.create({ token: refreshToken, userId: user.id, expires: addDays(7) });
-
-// Client flow:
-// - Access token kept in memory (JS variable) to prevent XSS theft.
-// - Refresh token kept in HttpOnly cookie.
-// - When Access Token expires, endpoint reads cookie, validates DB, issues new Access Token.
-```
-
----
-
-## OAuth2 & OIDC (OpenID Connect)
-
-```
-Roles:
-1. Resource Owner (User)
-2. Client (Your App)
-3. Authorization Server (Google/GitHub/Auth0)
-4. Resource Server (API)
-
-Flow (Authorization Code + PKCE):
-1. User clicks "Login with Google".
-2. App generates `code_verifier` and `code_challenge`.
-3. App redirects user to Google with `code_challenge`.
-4. User logs in, Google redirects back to App with an authorization `code`.
-5. App sends `code` + `code_verifier` to Google backend.
-6. Google returns `id_token` (OIDC identity) and `access_token` (OAuth permissions).
-
-// ❌ HALLUCINATION TRAP: Implicit Flow is deprecated.
-// Never use Implicit Flow (response_type=token) where the token is returned in the URL hash.
-// Always use Authorization Code Flow with PKCE, even for Single Page Apps (SPAs).
-```
-
----
-
-## Multi-Factor Authentication (MFA)
-
-- **SMS**: Deprecated by NIST due to SIM swapping vulnerabilities. (Better than nothing, but avoid as primary MFA).
-- **TOTP (Authenticator Apps)**: Standard implementations use HMAC-SHA1. Keep the secret key heavily encrypted at rest.
-- **WebAuthn / Passkeys**: The modern gold standard. Replaces passwords entirely using hardware enclaves (FaceID, TouchID, YubiKey).
-
----
-
-## Authorization Models
-
-### RBAC (Role-Based Access Control)
-
-- Users have Roles (`admin`, `editor`, `viewer`).
-- Roles have Permissions (`create:post`, `delete:user`).
-
-```typescript
-// ✅ Check permissions, not roles directly (more flexible)
-if (!user.permissions.includes('delete:user')) {
-  throw new ForbiddenError();
-}
-```
-
-### ABAC (Attribute-Based Access Control)
-
-- Access based on context (e.g., "User can edit Document if Document.department == User.department").
-
-```typescript
-// Example Policy
-function canEditPost(user: User, post: Post): boolean {
-  if (user.role === 'admin') return true;
-  if (post.authorId === user.id) return true;
-  if (post.status === 'draft' && user.department === 'content') return true;
-  return false;
-}
-```
+---
+name: authentication-best-practices
+description: "Use when Authentication and Authorization mastery. Best practices for OAuth2, OpenID Connect, JWT (JSON Web Tokens), session management, password hashing, MFA (Multi-Factor Authentication), RBAC/ABAC, SSO, and secure credential storage. Use when auditing or implementing login flows, identity systems, or access control."
+version: 5.0.0
+last-updated: 2026-09-13
+skills:
+  - backend-security-expert
+  - api-security-auditor
+  - vulnerability-scanner
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
+---
+
+# Authentication & Authorization — Identity Mastery
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+---
+
+---
+
+## Passwords & Hashing
+
+```typescript
+// ❌ BAD: md5, sha1, sha256 (too fast, vulnerable to brute force/rainbow tables)
+const hash = crypto.createHash('sha256').update(password).digest('hex');
+
+// ✅ GOOD: Argon2 (memory-hard, ASIC resistant) or bcrypt
+import * as argon2 from 'argon2';
+
+async function hashPassword(password: string): Promise<string> {
+  // Argon2 hashes include the salt inherently in the resulting string
+  return await argon2.hash(password, {
+    type: argon2.argon2id, // recommended variant
+    memoryCost: 2 ** 16, // 64 MB
+    timeCost: 3, // iterations
+    parallelism: 1, // threads
+  });
+}
+
+async function verifyPassword(hash: string, password: string): Promise<boolean> {
+  return await argon2.verify(hash, password);
+}
+```
+
+### Password Policies
+
+- **Length over complexity**: Require minimum 12 characters. Stop requiring arbitrary symbols (e.g., `!@#`).
+- **Check against breaches**: Use HaveIBeenPwned API or similar to reject compromised passwords during signup.
+- **Never expire passwords arbitrarily**: Only force resets if there is evidence of a breach.
+
+---
+
+## Session Management vs. JWT
+
+### 1. Stateful Sessions (Cookies)
+
+**Best for**: Monolithic web apps, SSR apps (Next.js, Remix).
+
+- Server stores session ID mapped to user data in Redis/DB.
+- Client stores session ID in an `HttpOnly`, `Secure`, `SameSite=Lax/Strict` cookie.
+- **Pros**: Immediate revocation, server-side truth, invisible to XSS.
+- **Cons**: Requires DB lookup per request.
+
+### 2. Stateless JWT (JSON Web Tokens)
+
+**Best for**: Distributed APIs, Microservices, Native mobile apps.
+
+- Server signs a token containing user claims.
+- Client passes it in `Authorization: Bearer <token>` header.
+- **Pros**: No DB lookup needed, easy cross-origin sharing.
+- **Cons**: Cannot be easily revoked before expiration.
+
+### The JWT "Refresh Token" Pattern
+
+```typescript
+// Scenario: API authentication
+// 1. Access Token (Short-lived: 15 mins)
+const accessToken = jwt.sign({ userId: user.id }, JWT_SECRET, {
+  expiresIn: '15m',
+  algorithm: 'HS256', // ALWAYS explicitly specify
+});
+// 2. Refresh Token (Long-lived: 7 days, opaque string in DB)
+const refreshToken = crypto.randomBytes(40).toString('hex');
+await db.refreshTokens.create({ token: refreshToken, userId: user.id, expires: addDays(7) });
+
+// Client flow:
+// - Access token kept in memory (JS variable) to prevent XSS theft.
+// - Refresh token kept in HttpOnly cookie.
+// - When Access Token expires, endpoint reads cookie, validates DB, issues new Access Token.
+```
+
+---
+
+## OAuth2 & OIDC (OpenID Connect)
+
+```
+Roles:
+1. Resource Owner (User)
+2. Client (Your App)
+3. Authorization Server (Google/GitHub/Auth0)
+4. Resource Server (API)
+
+Flow (Authorization Code + PKCE):
+1. User clicks "Login with Google".
+2. App generates `code_verifier` and `code_challenge`.
+3. App redirects user to Google with `code_challenge`.
+4. User logs in, Google redirects back to App with an authorization `code`.
+5. App sends `code` + `code_verifier` to Google backend.
+6. Google returns `id_token` (OIDC identity) and `access_token` (OAuth permissions).
+
+// ❌ HALLUCINATION TRAP: Implicit Flow is deprecated.
+// Never use Implicit Flow (response_type=token) where the token is returned in the URL hash.
+// Always use Authorization Code Flow with PKCE, even for Single Page Apps (SPAs).
+```
+
+---
+
+## Multi-Factor Authentication (MFA)
+
+- **SMS**: Deprecated by NIST due to SIM swapping vulnerabilities. (Better than nothing, but avoid as primary MFA).
+- **TOTP (Authenticator Apps)**: Standard implementations use HMAC-SHA1. Keep the secret key heavily encrypted at rest.
+- **WebAuthn / Passkeys**: The modern gold standard. Replaces passwords entirely using hardware enclaves (FaceID, TouchID, YubiKey).
+
+---
+
+## Authorization Models
+
+### RBAC (Role-Based Access Control)
+
+- Users have Roles (`admin`, `editor`, `viewer`).
+- Roles have Permissions (`create:post`, `delete:user`).
+
+```typescript
+// ✅ Check permissions, not roles directly (more flexible)
+if (!user.permissions.includes('delete:user')) {
+  throw new ForbiddenError();
+}
+```
+
+### ABAC (Attribute-Based Access Control)
+
+- Access based on context (e.g., "User can edit Document if Document.department == User.department").
+
+```typescript
+// Example Policy
+function canEditPost(user: User, post: Post): boolean {
+  if (user.role === 'admin') return true;
+  if (post.authorId === user.id) return true;
+  if (post.status === 'draft' && user.department === 'content') return true;
+  return false;
+}
+```

package/skills/autonomous-execution/SKILL.md

@@ -0,0 +1,76 @@
+---
+description: Use when executing subagent tasks autonomously. Defines the scratchpad structure and ReAct loops.
+version: 3.0.0
+---
+
+# Autonomous Execution (Bounded Jev-style Loop)
+
+$ARGUMENTS
+
+---
+
+## 1. Scratchpad Memory Rule
+
+You MUST initialize and maintain your state in `task-<N>-scratchpad.md`.
+Do not try to remember complex API signatures in your context window. Write them down in the scratchpad.
+
+### Scratchpad Structure:
+
+```markdown
+# Scratchpad - Task <N>
+
+## 1. Goal
+
+[Briefly state the goal derived from the task brief]
+
+## 2. Execution Plan
+
+- [ ] Step 1
+- [ ] Step 2
+
+## 3. Current Context
+
+- `some_file.js`: Exports `functionA(a, b)`
+- API: Requires `Bearer` token
+
+## 4. Attempt Log
+
+- Attempt 1: Failed test `x is undefined`. Fix: Update `y`.
+```
+
+Whenever you discover something new or fail a test, UPDATE the scratchpad before taking your next action.
+
+## 2. Dynamic Discovery (No Guessing)
+
+Do NOT assume file structures or API endpoints.
+
+- Use `list_dir` or `grep_search` to find the files you need to modify.
+- Use `view_file` to read the exact lines of code you are changing.
+- Verify every import against `package.json`.
+
+## 3. The ReAct Loop (Thought -> Action -> Observation)
+
+You are in a continuous loop. Do not stop until the task is complete.
+
+1. **Thought:** "I need to find the SDD controller."
+2. **Action:** Call `grep_search` for "SDD controller".
+3. **Observation:** See results.
+4. **Thought:** "I found it in `sdd.js`. I will read it."
+5. **Action:** Call `view_file` on `sdd.js`.
+
+## 4. TDD Self-Correction
+
+1. Write tests.
+2. Run tests via `run_command` (e.g., `npm run test` or `cargo test`).
+3. If they fail, READ the error output.
+4. Document the failure in your scratchpad.
+5. Fix the code.
+6. Loop until tests pass (GREEN).
+
+## 5. Circuit Breaker
+
+If you fail the same test 3 times, or if you reach 10 total iterations, STOP and report the failure in your final output. Do NOT loop infinitely.
+
+## 6. Zero Commits
+
+You are an implementer. You only modify files. The SDD Controller will generate the `.diff` and commit the files after the Tribunal Wave approves your work. DO NOT run `git commit`.

package/skills/backend-security-expert/SKILL.md

@@ -1,73 +1,73 @@
----
-name: backend-security-expert
-description: "Use when Backend security auditing for modern server-side architectures. Focuses on Next.js Server Actions, Node.js/Edge APIs, JWT & Session architectures, ORM injection (Prisma/Drizzle), and RBAC implementation."
-version: 5.0.0
-last-updated: 2026-09-13
-skills:
-  - frontend-security-expert
-  - api-security-auditor
-  - vulnerability-scanner
-tools: Read, Grep, Glob, Bash, Edit, Write
-scripts-binding:
-  - .agent/scripts/lint_runner.js
-  - .agent/scripts/verify_all.js
----
-
-# Backend Security Expert — Modern Server Architectures
-
----
-
-## 🛠️ Technical Architecture & Reference Recipes
-
----
-
-## 2026 Backend Security & Cryptography Invariants
-
-1. **Timing-Safe Equality**:
-   ```ts
-   import { timingSafeEqual } from 'node:crypto';
-   function verifySecret(provided: string, expected: string): boolean {
-     const bufA = Buffer.from(provided);
-     const bufB = Buffer.from(expected);
-     if (bufA.length !== bufB.length) return false;
-     return timingSafeEqual(bufA, bufB);
-   }
-   ```
-2. **SSRF Guardrails on Webhooks**: Never allow user-submitted URLs to hit AWS/GCP metadata services (`169.254.169.254`) or loopback (`localhost`). Validate IP address after DNS resolution before connecting.
-3. **Mass Assignment Prevention**: Never pass `req.body` directly into database inserts. Explicitly pick allowed attributes via Zod schemas (`schema.parse(req.body)`).
-4. **JWT Verification Security**: Always specify `algorithms: ['HS256']` explicitly to prevent the notorious `alg: "none"` vulnerability.
-
-## Hallucination Traps (Read First)
-
-- ❌ Recommending session tokens without algorithm enforcement → ✅ Always verify JWT algorithms (`alg: "HS256"`)
-- ❌ String equality `token === expectedToken` → ✅ Use `crypto.timingSafeEqual` to prevent timing attacks
-- ❌ Treating ORMs as automatically injection-proof → ✅ Prisma and Drizzle are vulnerable if raw SQL is dynamically interpolated
-- ❌ Assuming Next.js Server Actions are private internal functions → ✅ Server Actions are public HTTP endpoints
-- ❌ Fetching user-supplied URLs without private IP filtering → ✅ Block RFC 1918 and link-local ranges to prevent SSRF
-
----
-
-## 1. Next.js Server Actions & Edge APIs
-
-Server Actions create implicit API endpoints. They must be treated like raw REST routes.
-
-- **Authentication**: Validate the session ID/token at the very top of _every_ Server Action.
-- **Input Validation**: Parse all inputs using Zod. Do not trust TypeScript types, as they do not exist at runtime.
-- **Rate Limiting**: Apply `@upstash/ratelimit` or similar to prevent brute force and abuse on public-facing actions.
-
-## 2. Authentication & Authorization (RBAC)
-
-- **Role-Based Access**: Check if the authenticated user has permission to perform the specific action, not just if they are logged in.
-- **IDOR Prevention**: Always verify that the resource being modified belongs to the user requesting the modification (e.g., `WHERE userId = session.userId`).
-- **Secrets Management**: Never hardcode API keys. Ensure they are loaded from `.env` and fail loudly if missing.
-
-## 3. Database & ORM Security
-
-- **NoSQL/ORM Injection**: Avoid passing raw JSON or objects directly into query constraints (e.g., MongoDB `$where` or Prisma raw queries).
-- **Mass Assignment**: Never destructure user input directly into a database create/update call. Explicitly pick the fields allowed to be updated.
-- **Query Depth**: For GraphQL backends, always implement depth limiting and cost analysis to prevent query-based DDoS.
-
-## 4. Headers & Server Hardening
-
-- **CORS**: Never use wildcard `Access-Control-Allow-Origin: *` for authenticated routes.
-- **Security Headers**: Ensure Helmet (or equivalent Next.js headers config) is active for HSTS, X-Frame-Options, and Content-Type-Options.
+---
+name: backend-security-expert
+description: "Use when Backend security auditing for modern server-side architectures. Focuses on Next.js Server Actions, Node.js/Edge APIs, JWT & Session architectures, ORM injection (Prisma/Drizzle), and RBAC implementation."
+version: 5.0.0
+last-updated: 2026-09-13
+skills:
+  - frontend-security-expert
+  - api-security-auditor
+  - vulnerability-scanner
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
+---
+
+# Backend Security Expert — Modern Server Architectures
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+---
+
+## 2026 Backend Security & Cryptography Invariants
+
+1. **Timing-Safe Equality**:
+   ```ts
+   import { timingSafeEqual } from 'node:crypto';
+   function verifySecret(provided: string, expected: string): boolean {
+     const bufA = Buffer.from(provided);
+     const bufB = Buffer.from(expected);
+     if (bufA.length !== bufB.length) return false;
+     return timingSafeEqual(bufA, bufB);
+   }
+   ```
+2. **SSRF Guardrails on Webhooks**: Never allow user-submitted URLs to hit AWS/GCP metadata services (`169.254.169.254`) or loopback (`localhost`). Validate IP address after DNS resolution before connecting.
+3. **Mass Assignment Prevention**: Never pass `req.body` directly into database inserts. Explicitly pick allowed attributes via Zod schemas (`schema.parse(req.body)`).
+4. **JWT Verification Security**: Always specify `algorithms: ['HS256']` explicitly to prevent the notorious `alg: "none"` vulnerability.
+
+## Hallucination Traps (Read First)
+
+- ❌ Recommending session tokens without algorithm enforcement → ✅ Always verify JWT algorithms (`alg: "HS256"`)
+- ❌ String equality `token === expectedToken` → ✅ Use `crypto.timingSafeEqual` to prevent timing attacks
+- ❌ Treating ORMs as automatically injection-proof → ✅ Prisma and Drizzle are vulnerable if raw SQL is dynamically interpolated
+- ❌ Assuming Next.js Server Actions are private internal functions → ✅ Server Actions are public HTTP endpoints
+- ❌ Fetching user-supplied URLs without private IP filtering → ✅ Block RFC 1918 and link-local ranges to prevent SSRF
+
+---
+
+## 1. Next.js Server Actions & Edge APIs
+
+Server Actions create implicit API endpoints. They must be treated like raw REST routes.
+
+- **Authentication**: Validate the session ID/token at the very top of _every_ Server Action.
+- **Input Validation**: Parse all inputs using Zod. Do not trust TypeScript types, as they do not exist at runtime.
+- **Rate Limiting**: Apply `@upstash/ratelimit` or similar to prevent brute force and abuse on public-facing actions.
+
+## 2. Authentication & Authorization (RBAC)
+
+- **Role-Based Access**: Check if the authenticated user has permission to perform the specific action, not just if they are logged in.
+- **IDOR Prevention**: Always verify that the resource being modified belongs to the user requesting the modification (e.g., `WHERE userId = session.userId`).
+- **Secrets Management**: Never hardcode API keys. Ensure they are loaded from `.env` and fail loudly if missing.
+
+## 3. Database & ORM Security
+
+- **NoSQL/ORM Injection**: Avoid passing raw JSON or objects directly into query constraints (e.g., MongoDB `$where` or Prisma raw queries).
+- **Mass Assignment**: Never destructure user input directly into a database create/update call. Explicitly pick the fields allowed to be updated.
+- **Query Depth**: For GraphQL backends, always implement depth limiting and cost analysis to prevent query-based DDoS.
+
+## 4. Headers & Server Hardening
+
+- **CORS**: Never use wildcard `Access-Control-Allow-Origin: *` for authenticated routes.
+- **Security Headers**: Ensure Helmet (or equivalent Next.js headers config) is active for HSTS, X-Frame-Options, and Content-Type-Options.

package/skills/baseline-ui/SKILL.md

@@ -1,55 +1,55 @@
----
-name: baseline-ui
-description: "Use when Quickly deslop UI code by fixing spacing, hierarchy, typography, contrast, and small layout issues. Use when the interface needs a fast cleanup or polish pass."
-version: 5.0.0
-last-updated: 2026-09-13
-skills:
-  - better-ui
-  - frontend-design
-  - better-colors
-tools: Read, Grep, Glob, Bash, Edit, Write
-scripts-binding:
-  - .agent/scripts/lint_runner.js
-  - .agent/scripts/verify_all.js
----
-
-# Baseline UI — Fast Deslopping & Hierarchy Cleanup
-
----
-
-## 🛠️ Technical Architecture & Reference Recipes
-
----
-
----
-
-## 1. Stack & System Constraints
-
-- **Tailwind CSS Defaults**: MUST use Tailwind CSS default utilities unless custom values already exist or are explicitly requested.
-- **Animation Primitives**: MUST use `motion/react` (formerly `framer-motion`) when JavaScript animation is required.
-- **Utility Class Merging**: MUST use `cn` utility (`clsx` + `tailwind-merge`) for dynamic class logic.
-- **Accessible Component Primitives**: MUST use established accessible primitives (`Base UI`, `React Aria`, `Radix`) for anything with keyboard or focus behavior. Prefer `Base UI` for new unstyled primitives.
-- **Destructive Actions**: MUST use an `AlertDialog` for destructive or irreversible actions.
-- **Loading States**: SHOULD use structural skeletons for loading states instead of plain spinners.
-
----
-
-## 2. The 5-Step UI Deslop Protocol
-
-1. **Fix Spacing Violations**: Replace hardcoded arbitrary margins/paddings (`margin-top: 13px`, `padding: 7px 11px`) with an 8px grid system (`4px`, `8px`, `12px`, `16px`, `24px`, `32px`, `48px`).
-2. **Establish Typographic Hierarchy**: Max 3 font sizes per component context. Headings bold/semibold with tight letter-spacing (`-0.025em`) and `text-wrap: balance`. Body text regular with `1.5` line height.
-3. **Elevate Contrast Ratios**: Eliminate low-contrast gray-on-gray text. Ensure text meets minimum WCAG AA 4.5:1 ratio against background.
-4. **Clean Up Borders & Dividers**: Replace harsh 100% opaque black/white borders with subtle 8%-12% opacity borders (`border-color: rgba(255,255,255,0.08)` or `var(--border)`).
-5. **Enforce Container Alignment & Active Feedback**: Align text left with action buttons, group related controls with flex gaps, and add instant press feedback (`scale(0.97)`) on all interactive targets.
-
----
-
-## Anti-Slop Table
-
-| Slop Pattern                        | Baseline Fix                                    | Rationale                                   |
-| ----------------------------------- | ----------------------------------------------- | ------------------------------------------- |
-| `color: #888` on dark background    | `color: var(--text-muted)` (min 4.5:1 ratio)    | Improves readability and WCAG compliance    |
-| `padding: 15px 23px`                | `padding: 16px 24px`                            | Aligns to 8px structural grid               |
-| `border: 1px solid black`           | `border: 1px solid rgba(0,0,0,0.1)`             | Removes harsh, distracting lines            |
-| Mixed font sizes (13px, 14px, 15px) | Standardized scale (12px, 14px, 16px)           | Establishes clear visual hierarchy          |
-| Plain text buttons without states   | Rounded button with hover/active press feedback | Indicates clickability and tactile response |
+---
+name: baseline-ui
+description: "Use when Quickly deslop UI code by fixing spacing, hierarchy, typography, contrast, and small layout issues. Use when the interface needs a fast cleanup or polish pass."
+version: 5.0.0
+last-updated: 2026-09-13
+skills:
+  - better-ui
+  - frontend-design
+  - better-colors
+tools: Read, Grep, Glob, Bash, Edit, Write
+scripts-binding:
+  - .agent/scripts/lint_runner.js
+  - .agent/scripts/verify_all.js
+---
+
+# Baseline UI — Fast Deslopping & Hierarchy Cleanup
+
+---
+
+## 🛠️ Technical Architecture & Reference Recipes
+
+---
+
+---
+
+## 1. Stack & System Constraints
+
+- **Tailwind CSS Defaults**: MUST use Tailwind CSS default utilities unless custom values already exist or are explicitly requested.
+- **Animation Primitives**: MUST use `motion/react` (formerly `framer-motion`) when JavaScript animation is required.
+- **Utility Class Merging**: MUST use `cn` utility (`clsx` + `tailwind-merge`) for dynamic class logic.
+- **Accessible Component Primitives**: MUST use established accessible primitives (`Base UI`, `React Aria`, `Radix`) for anything with keyboard or focus behavior. Prefer `Base UI` for new unstyled primitives.
+- **Destructive Actions**: MUST use an `AlertDialog` for destructive or irreversible actions.
+- **Loading States**: SHOULD use structural skeletons for loading states instead of plain spinners.
+
+---
+
+## 2. The 5-Step UI Deslop Protocol
+
+1. **Fix Spacing Violations**: Replace hardcoded arbitrary margins/paddings (`margin-top: 13px`, `padding: 7px 11px`) with an 8px grid system (`4px`, `8px`, `12px`, `16px`, `24px`, `32px`, `48px`).
+2. **Establish Typographic Hierarchy**: Max 3 font sizes per component context. Headings bold/semibold with tight letter-spacing (`-0.025em`) and `text-wrap: balance`. Body text regular with `1.5` line height.
+3. **Elevate Contrast Ratios**: Eliminate low-contrast gray-on-gray text. Ensure text meets minimum WCAG AA 4.5:1 ratio against background.
+4. **Clean Up Borders & Dividers**: Replace harsh 100% opaque black/white borders with subtle 8%-12% opacity borders (`border-color: rgba(255,255,255,0.08)` or `var(--border)`).
+5. **Enforce Container Alignment & Active Feedback**: Align text left with action buttons, group related controls with flex gaps, and add instant press feedback (`scale(0.97)`) on all interactive targets.
+
+---
+
+## Anti-Slop Table
+
+| Slop Pattern                        | Baseline Fix                                    | Rationale                                   |
+| ----------------------------------- | ----------------------------------------------- | ------------------------------------------- |
+| `color: #888` on dark background    | `color: var(--text-muted)` (min 4.5:1 ratio)    | Improves readability and WCAG compliance    |
+| `padding: 15px 23px`                | `padding: 16px 24px`                            | Aligns to 8px structural grid               |
+| `border: 1px solid black`           | `border: 1px solid rgba(0,0,0,0.1)`             | Removes harsh, distracting lines            |
+| Mixed font sizes (13px, 14px, 15px) | Standardized scale (12px, 14px, 16px)           | Establishes clear visual hierarchy          |
+| Plain text buttons without states   | Rounded button with hover/active press feedback | Indicates clickability and tactile response |