contextos-agents 1.5.0

package/.agents/generated/claude/skills/impeccable-design/SKILL.md

@@ -0,0 +1,241 @@
+# impeccable-design
+
+## Overview
+
+Hard QA design review checklist consisting of 50 deterministic rules covering typography (T1-T10), color systems (C1-C12), layout constraints (L1-L11), component contracts (K1-K11), and micro-animations (A1-A8).
+
+## When to Use
+
+Activate during the REVIEW phase of all frontend tasks as a strict visual and functional QA gate before marking UI work complete.
+
+## Rules & Patterns
+
+Based on [pbakaus/impeccable](https://github.com/pbakaus/impeccable) — deterministic detector rules for AI-generated frontend design.
+
+## Core Principle
+
+> Every model is trained on the same SaaS templates. Skip this guidance and you get the same handful of tells on every project. Impeccable eliminates them.
+
+## Role in the Pipeline
+
+> **This skill acts as a QA-designer at the `/review` phase.** `ui-ux-pro` is the planning guideline; `impeccable-design` is the hard checklist that runs before merge.
+
+---
+
+## Anti-Pattern Rules
+
+### Typography (Rules T1–T10)
+
+| Rule | Anti-Pattern | Correct Approach |
+| ------ | ------------- | ----------------- |
+| T1 | Using Inter for all text | Use Inter for UI body, pair with a distinct display font for headings OR with `JetBrains Mono` for technical/number accents (premium SaaS pattern) |
+| T2 | Using Arial or Helvetica | Use a curated Google Font pairing |
+| T3 | All text same weight | Use weight contrast: 700 headings, 400 body, 500 labels |
+| T4 | Line height = 1 (tight) | Body: 1.6–1.8, Headings: 1.1–1.3 |
+| T5 | No letter-spacing on caps | Uppercase labels: `letter-spacing: 0.08em` (Tailwind: `tracking-widest`) |
+| T6 | Text too wide | Max line length: 60–75 characters — use `max-w-prose` or `max-w-[65ch]` |
+| T7 | Monospace only for code | Use `tabular-nums` Tailwind class for number tables and data grids |
+| T8 | Random font sizing | Use a consistent modular scale (1.25× or 1.333×) — use Tailwind's `text-*` scale |
+| T9 | Body text too small | Minimum `text-sm` (14px) for body, never smaller than 12px |
+| T10 | Bold everywhere | Bold is for emphasis. Diluted if overused. |
+
+**Tailwind typography utilities:**
+
+- `text-balance` — for headlines (prevents orphan words)
+- `text-pretty` — for body paragraphs (smart line-breaks)
+- `tabular-nums` — for numerical data tables
+
+### Color (Rules C1–C12)
+
+| Rule | Anti-Pattern | Correct Approach |
+| ------ | ------------- | ----------------- |
+| C1 | Pure black `#000` | Tint toward brand: `hsl(240, 10%, 4%)` |
+| C2 | Pure white `#fff` for surfaces | Near-white with warmth: `hsl(40, 30%, 97%)` |
+| C3 | Gray on colored background | Check contrast — likely fails WCAG. Use white/dark |
+| C4 | Purple → Blue gradient | Clichéd AI palette. Use brand-derived gradients |
+| C5 | Neon primary colors | Neon = accent only, never primary surface or text |
+| C6 | Too many colors | 3 colors max: primary, neutral, semantic (success/error) |
+| C7 | All links same blue `#0000EE` | Style links with brand color, preserve underline |
+| C8 | Disabled state = gray only | Disabled: `opacity-40` + `cursor-not-allowed` |
+| C9 | Success always green, Error always red | Check brand conflicts. Use accessible variants |
+| C10 | Dark mode = inverted light mode | Dark mode needs separate palette — use `@layer base { .dark { ... } }` |
+| C11 | No hover state change | Hover: shift lightness 8–12%, add `transition-colors duration-150` |
+| C12 | Brand color on dark surface loses identity | Adjust saturation/lightness for dark bg context |
+
+### Layout & Spacing (Rules L1–L11)
+
+| Rule | Anti-Pattern | Correct Approach |
+| ------ | ------------- | ----------------- |
+| L1 | Cards inside cards | One level of card depth maximum |
+| L2 | Icon tile above every heading | Use icons inline, in context, not decoratively above text |
+| L3 | Centered long paragraphs | `text-center` max 2 lines only. Use `text-pretty` + left-align for body |
+| L4 | Inconsistent spacing | Use Tailwind spacing utilities only. **Never arbitrary values** like `gap-[17px]` |
+| L5 | Zero whitespace between sections | Sections need `py-16` to `py-24` breathing room |
+| L6 | Content touching edges | Always `px-4` minimum on mobile |
+| L7 | Same visual weight everywhere | Use hierarchy: primary > secondary > tertiary zones |
+| L8 | Grid breaks on tablet | Test at 768px. Use 4-col on tablet, 12-col on desktop |
+| L9 | Full-width everything | Max content width: `max-w-7xl` centered |
+| L10 | Missing grid alignment | Use CSS Grid or Tailwind `grid` — not absolute positioning |
+| L11 | Arbitrary high z-indexes | **NEVER** use `z-[999]` or `z-50` manually. Rely on DOM order + Radix/shadcn Portals which already handle modal elevation correctly |
+| L12 | Default Rhythm | Break the 'Hero → 3 Features → CTA' structure. Build structurally diverse pages tailored to the content. |
+| L13 | Symmetric card grids everywhere | Use asymmetric layouts (e.g., bento boxes, masonry, alternating left/right) to reduce the AI-generated feel. |
+
+### Components (Rules K1–K11)
+
+| Rule | Anti-Pattern | Correct Approach |
+| ------ | ------------- | ----------------- |
+| K1 | Two filled buttons side-by-side | `<Button variant="default">` + `<Button variant="outline">` or `variant="ghost"` |
+| K2 | Button without loading state | Always add spinner + `disabled` during async actions |
+| K3 | Modal without backdrop blur | shadcn `<Dialog>` handles this. Don't override with plain divs |
+| K4 | Empty states left blank | **Always** design empty states: illustration + helpful message + primary CTA |
+| K5 | No skeleton screens | Use `<Skeleton>` from shadcn for content areas, not just spinners |
+| K6 | Tooltip on click (not hover) | Tooltips on hover, modals on click — use shadcn `<Tooltip>` + `<Dialog>` |
+| K7 | Dropdown without keyboard nav | Use shadcn `<DropdownMenu>` — keyboard nav is built-in |
+| K8 | Table without row hover | shadcn `<TableRow>` handles hover state automatically. Do **not** override it |
+| K9 | Building complex UI from scratch | **Check shadcn/ui first**. If the component exists, generate the CLI command: `npx shadcn@latest add dialog`. Never manually rewrite what shadcn already provides |
+| K10 | Native `<select>` or `<input type="date">` in premium UI | Native form controls cannot be styled consistently across Chrome/Safari/Firefox. Use `shadcn <Select>` and `shadcn <DatePicker>` for cross-browser consistency |
+| K11 | Form without error state styling | Every input must have error state: red border + error message below |
+
+### Animation (Rules A1–A8)
+
+| Rule | Anti-Pattern | Correct Approach |
+| ------ | ------------- | ----------------- |
+| A1 | CSS bounce/elastic/spring easing | CSS spring animations are forbidden. **Exception**: If using Framer Motion, highly damped springs are encouraged: `{ type: "spring", stiffness: 400, damping: 30 }` for modals and popovers — this creates a premium, physical feel like Vercel/Linear |
+| A2 | Animations that take > 400ms | Micro: 100–150ms, Components: 200–300ms, Pages: 300–400ms |
+| A3 | Animations everywhere | Animate max 2–3 elements simultaneously |
+| A4 | Same animation for enter and exit | Enter: ease-out (decelerate), Exit: ease-in (accelerate) |
+| A5 | Animating expensive properties | Only animate `transform` and `opacity` — never `height`, `width`, `top` |
+| A6 | No animation on mobile | Respect `prefers-reduced-motion: reduce` — wrap in `@media` or use `useReducedMotion()` |
+| A7 | Scroll-triggered animations that block | Don't block content visibility for scroll reveals |
+| A8 | Hover animations on touch devices | Wrap hover effects in `@media (hover: hover)` |
+
+### Images & Icons (Rules I1–I8)
+
+| Rule | Anti-Pattern | Correct Approach |
+| ------ | ------------- | ----------------- |
+| I1 | Decorative icons on every list item | Icons add meaning, not decoration. Use selectively. |
+| I2 | Mix of icon styles | Pick one icon set (e.g., Lucide for shadcn). Stick with it. |
+| I3 | Low-contrast icons | Icons need ≥ 3:1 contrast ratio |
+| I4 | Images without aspect-ratio | Always set `aspect-video` or `aspect-square` to prevent layout shifts |
+| I5 | No image loading state | Use `<Skeleton>` placeholder or blur hash |
+| I6 | SVG icons inline without aria | Add `aria-hidden="true"` or `aria-label` |
+| I7 | Stock photo generic humans | Use illustrations, abstract art, or genuine brand photography |
+| I8 | Unoptimized images | WebP/AVIF, properly sized, `loading="lazy"` below fold |
+
+---
+
+## Design Initialization Checklist
+
+Start every new design with:
+
+```markdown
+## Design Context
+
+**Surface type**: [brand/marketing OR product/app]
+**Target audience**: [who are they? what do they value?]
+**Brand tone**: [professional/playful/bold/minimal/technical]
+**Anti-references**: [designs this should NOT look like]
+**Primary font**: [chosen font + why + Framer Motion / shadcn pairing]
+**Color palette**: [3 semantic colors + HSL values for light AND dark]
+**Component library**: [shadcn/ui | radix | custom]
+**Animation library**: [CSS only | Framer Motion | GSAP]
+```
+
+---
+
+## Design Review Audits
+
+### Quick Audit (before PR)
+
+- Typography: Is there clear visual hierarchy? Are fonts intentional? Is Inter paired properly?
+- Color: Any pure black/white? Contrast failures? Too many colors? Dark mode?
+- Spacing: Consistent Tailwind scale? No arbitrary values? Enough whitespace?
+- Animation: Any CSS bounce/elastic? Too slow (>400ms)? Too many simultaneous?
+- Components: Any native `<select>` or `<input type="date">` that should be shadcn?
+- Z-index: Any hardcoded `z-[999]` or `z-50`?
+
+### Full Audit (before release)
+
+- Accessibility: Run axe DevTools or Lighthouse — target 90+ score
+- Responsiveness: Test at 375px, 768px, 1280px, 1440px
+- Dark mode: Does the full palette hold up? No inverted-only shortcuts?
+- Empty states: Does every list/table have a designed empty state?
+- Edge cases: Loading states, error states, long text overflow, RTL
+
+---
+
+## Premium Design Markers
+
+These details separate premium from mediocre:
+
+1. **Consistent border radius** — pick one and use it everywhere (`rounded-md` = 6px, `rounded-lg` = 8px)
+2. **Intentional drop shadows** — darker near surface, lighter for floating elements
+3. **Micro-copy quality** — button labels are verbs: "Save changes" not "Submit"
+4. **Focus ring styling** — `focus-visible:ring-2 focus-visible:ring-primary` matching brand
+5. **Smooth color transitions** — `transition-colors duration-150` on all interactive elements
+6. **Optical alignment** — icon + text optically centered, not mathematically (`items-center gap-1.5`)
+
+
+## Code Examples
+
+See `EXAMPLES.md` for detailed code examples.
+
+## Validation Checklist
+
+What to verify during the review phase before completing the task.
+
+## Common Mistakes
+
+Anti-patterns and things to explicitly avoid. See `TROUBLESHOOTING.md`.
+
+## Integration Notes
+
+How this skill interacts with other skills.
+
+
+# impeccable-design Examples — Anti-patterns vs ContextOS Standard
+
+## Example 1: Dark Mode Surfaces & Elevation
+
+### Anti-pattern: Pure Black with Flat Cards
+
+```css
+/* BAD: Pure #000000 background with harsh pure white borders and flat cards */
+body { background-color: #000000; color: #ffffff; }
+.card { background-color: #111111; border: 1px solid #ffffff; }
+```
+
+### Best practice: ContextOS Standard (Atmospheric Depth & Tinted Surfaces)
+
+```css
+/* GOOD: Tinted dark background with layered elevation surfaces and subtle border */
+body {
+  background-color: #0B0D13; /* Tinted with subtle deep blue */
+  color: #E2E8F0;
+}
+.surface-1 {
+  background-color: #111522;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
+}
+```
+
+# impeccable-design Troubleshooting & Common Mistakes
+
+## 1. Nested Border Radius Mismatch
+
+- **Symptom**: Corners of an inner element poke out or look visually awkward inside a container.
+- **Root Cause**: Using the same border-radius on both outer container and inner child.
+- **Fix**: Inner radius formula: r_inner = max(0, r_outer - padding).
+
+## 2. Animation Performance Stutter
+
+- **Symptom**: Janky animations and dropped frames during transitions.
+- **Root Cause**: Animating layout properties (width, height, top, margin).
+- **Fix**: Animate only composited GPU-accelerated properties: transform and opacity.
+
+## 3. Cluttered Visual Density
+
+- **Symptom**: Interface feels overwhelming, cramped, and cheap.
+- **Root Cause**: Cramming too many borders, dividers, badges, and icons into one view.
+- **Fix**: Replace borders with generous whitespace; let alignment and typography hierarchy define grouping.

package/.agents/generated/claude/skills/interview-me/SKILL.md

@@ -0,0 +1,90 @@
+# interview-me
+
+## Overview
+
+Structured requirements interrogation framework inspired by [addyosmani/agent-skills](https://github.com/addyosmani/agent-skills). Prevents wasted cycles by transforming vague user intents into crisp, unambiguous architectural constraints through single-question progressive interview loops.
+
+## When to Use
+
+Activate whenever:
+
+- User task has underspecified requirements, open UX decisions, or multiple viable architectural trade-offs.
+- A high-blast-radius change (database migrations, auth refactor, API contract change) is requested.
+- Explicitly triggered via `/spec`, `/interview`, or "ask me questions first".
+
+## Rules & Patterns
+
+### 1. The One-Question-At-A-Time Rule
+
+**Never overwhelm the user with a 10-point interrogation form.**
+
+- Ask **exactly ONE focused question** per turn (or at most two tightly-coupled binary options).
+- Provide the recommended option first with clear rationale: `"(Recommended) Option A because..."`.
+- Always allow write-in or clarification.
+
+### 2. The 4 Interrogation Dimensions
+
+Interrogate in this strict priority order:
+
+1. **Business Outcome & Invariants**:
+   - What core problem does this solve?
+   - What behavior is strictly forbidden?
+2. **Scope Boundaries (In vs Out)**:
+   - What must be delivered in this atomic slice?
+   - What is explicitly deferred to later?
+3. **Technical Constraints**:
+   - Versions, libraries, database engines, backwards compatibility requirements.
+4. **Edge Cases & Failure Modes**:
+   - What happens on network disconnect, empty response, or unauthorized token?
+
+### 3. Progressive Synthesis
+
+After each user answer:
+
+- Acknowledge the decision and update the mental model.
+- If more critical decisions remain, ask the next question.
+- Once 2–4 key questions are resolved, synthesize the formal Feature Spec and transition to `engineering-workflow` (`[PHASE: Plan]`).
+
+---
+
+## Code Examples
+
+### Interactive Interview Turn Example
+
+```markdown
+**Question 1 of 3 (Authentication Strategy)**
+
+Before implementing the API authentication layer, we need to align on session storage:
+
+1. **(Recommended) HTTP-only Secure Cookies with Refresh Tokens**:
+   - *Why*: Immune to XSS token theft, standard for web dashboards.
+2. **Bearer Token in Authorization Header**:
+   - *Why*: Ideal if this API will also be consumed by mobile apps or third-party CLI tools.
+
+Which model fits your architecture best?
+```
+
+---
+
+## Validation Checklist
+
+- [ ] Question addresses an actual ambiguity (never ask about obvious defaults).
+- [ ] Exactly one question (or two tightly coupled choices) asked.
+- [ ] Recommendation provided with clear engineering justification.
+- [ ] User response incorporated into the final spec before coding.
+
+---
+
+## Common Mistakes
+
+- **Asking obvious questions**: Asking "Do you want error handling?" instead of making a sensible senior default.
+- **Interrogation bombardment**: Dumping a list of 8 open-ended questions in a single wall of text.
+- **Ignoring user answers**: Asking a question, receiving an answer, and then implementing something else.
+
+---
+
+## Integration Notes
+
+- Runs at the start of `engineering-workflow` Phase 1 (`/spec`).
+- Interacts with `gstack-roles` (`[ROLE: Product Manager]` or `[ROLE: Architect]`).
+- Hands off to `ponytail-mindset` once scope is defined.

package/.agents/generated/claude/skills/microservices/SKILL.md

@@ -0,0 +1,218 @@
+# Microservices
+
+## Overview
+
+Distributed systems architecture standard. Enforces bounded context isolation, asynchronous event-driven messaging (Kafka, RabbitMQ), Saga distributed transactions, API gateways, and outbox patterns.
+
+## When to Use
+
+Activate when decomposing monoliths into independent services, designing inter-service communications, or building scalable distributed systems.
+
+## Rules & Patterns
+<!-- Source: microservices.md -->
+
+## Microservices — Architecture Guide
+
+## When to Use Microservices
+
+**Use when:**
+
+- Team > 10 engineers working on the same product
+- Independent deployment of components is critical
+- Different components have different scaling needs
+- Different components need different tech stacks
+
+**Don't use when:**
+
+- Small team (< 5 engineers)
+- MVP or prototype
+- No operational expertise (monitoring, tracing, deployment)
+- Tight coupling between components
+
+## Core Principles
+
+### 1. Single Responsibility
+
+Each service does ONE thing well.
+
+### 2. Own Your Data
+
+Each service has its own database. No shared databases.
+
+### 3. API Contracts
+
+Services communicate through well-defined APIs. Internal implementation is hidden.
+
+### 4. Autonomous Deployment
+
+Each service can be deployed independently.
+
+## Communication Patterns
+
+### Synchronous (REST/gRPC)
+
+- **When**: Request needs immediate response
+- **Tools**: REST (HTTP), gRPC (high-performance)
+- **Risk**: Cascading failures, latency accumulation
+
+### Asynchronous (Events/Messages)
+
+- **When**: Eventual consistency is acceptable
+- **Tools**: Kafka, RabbitMQ, Redis Streams, AWS SQS
+- **Benefit**: Loose coupling, resilience
+
+### Saga Pattern (Distributed Transactions)
+
+```
+Order Service → Payment Service → Inventory Service → Shipping Service
+      ↓ (failure)
+Compensating transactions reverse each step
+```
+
+1. **Choreography (Event-Driven)**: Each service emits events, downstream services listen and react. Best for simple flows (≤ 3 steps) where a central coordinator adds unnecessary coupling.
+2. **Orchestration (State Machine)**: A dedicated Saga Orchestrator controls the flow and explicitly triggers compensating transactions on failure (e.g., `RefundPayment`, `ReleaseInventoryReservation`). Mandatory for complex multi-step workflows.
+
+### Dead Letter Queues (DLQ) & Poison Pill Handling
+
+- **Never retry infinitely**: Set max retries (e.g. 3) with exponential backoff and jitter.
+- After max retries, route failed messages to a **Dead Letter Queue (DLQ)** with error metadata.
+- Provide alerting on DLQ depth and an admin CLI/script to replay DLQ messages.
+
+## CQRS (Command Query Responsibility Segregation)
+
+Separate read and write models:
+
+```
+Command (Write) → Write Model → Event Store → Projections → Read Model → Query (Read)
+```
+
+**When**: Read patterns differ significantly from write patterns.
+
+## Event Sourcing
+
+Store events, not state:
+
+```
+UserCreated → EmailUpdated → RoleChanged → PasswordReset
+```
+
+Current state = replay all events. Full audit trail.
+
+## Service Boundaries
+
+### Bounded Contexts (from DDD)
+
+- Identify domain boundaries
+- Each service maps to a bounded context
+- Shared language within the context, translation at boundaries
+
+### Anti-Corruption Layer
+
+When integrating with legacy or external systems, create an adapter that translates between models.
+
+## Operational Concerns
+
+### Observability (The Three Pillars)
+
+1. **Logs** — structured JSON, correlated by request ID
+2. **Metrics** — latency, error rate, throughput (RED)
+3. **Traces** — distributed tracing across services (Jaeger, Zipkin)
+
+### Resilience
+
+- **Circuit Breaker** — stop calling failing services
+- **Retry with Backoff** — exponential backoff + jitter
+- **Timeout** — every call has a timeout
+- **Bulkhead** — isolate failures
+
+### Deployment
+
+- **Containers** — Docker for consistency
+- **Orchestration** — Kubernetes for production
+- **CI/CD** — independent pipelines per service
+- **Blue-Green / Canary** — safe rollouts
+
+## Anti-Patterns
+
+- [FAIL] Distributed monolith — services that can't deploy independently
+- [FAIL] Shared database — defeats the purpose
+- [FAIL] Synchronous chains — A calls B calls C calls D
+- [FAIL] No versioning — breaking API changes
+- [FAIL] Premature microservices — start with a modular monolith
+
+
+## Code Examples
+
+See `EXAMPLES.md` for detailed code examples.
+
+## Validation Checklist
+
+What to verify during the review phase before completing the task.
+
+## Common Mistakes
+
+Anti-patterns and things to explicitly avoid. See `TROUBLESHOOTING.md`.
+
+## Integration Notes
+
+How this skill interacts with other skills.
+
+
+# microservices Examples — Anti-patterns vs ContextOS Standard
+
+## Example 1: Inter-service Communication
+
+### Anti-pattern: Synchronous HTTP Call Chains (The Distributed Monolith)
+
+```text
+User -> OrderService (HTTP) -> InventoryService (HTTP) -> PaymentService (HTTP) -> EmailService (HTTP)
+Problem: High latency, 99.9% availability compounding to 96% overall availability, cascading failure.
+```
+
+### Best practice: ContextOS Standard (Asynchronous Event Choreography)
+
+```text
+User -> OrderService (creates order with status 'PENDING')
+OrderService publishes 'OrderPlaced' event to Event Broker (Kafka/RabbitMQ)
+  ├── InventoryService consumes 'OrderPlaced' -> Reserves stock
+  ├── PaymentService consumes 'OrderPlaced' -> Charges customer
+  └── NotificationService consumes 'PaymentProcessed' -> Sends confirmation email
+```
+
+---
+
+## Example 2: Database Architecture
+
+### Anti-pattern: Shared Database Across Multiple Microservices
+
+```text
+BAD: OrderService and UserService both directly read and write to the same 'users' table.
+Schema migrations in UserService immediately break OrderService.
+```
+
+### Best practice: ContextOS Standard (Database-per-Service)
+
+```text
+GOOD: UserService owns user data. OrderService maintains a local read-model (denormalized user info)
+synchronized via 'UserUpdated' events. Each service can migrate and scale independently.
+```
+
+# microservices Troubleshooting & Common Mistakes
+
+## 1. Missing Consumer Idempotency
+
+- **Symptom**: Users charged twice or duplicate records created when events are re-delivered.
+- **Root Cause**: Message brokers guarantee at-least-once delivery; network retries re-send events.
+- **Fix**: Store processed message/event IDs in a deduplication table with unique constraint.
+
+## 2. Circular Service Dependencies
+
+- **Symptom**: Service A cannot boot or operate without Service B, and Service B depends on Service A.
+- **Root Cause**: Improper domain boundaries and coupled synchronous dependencies.
+- **Fix**: Invert dependency using domain events or introduce a composite BFF/Orchestrator.
+
+## 3. Distributed Tracing Blindness
+
+- **Symptom**: Impossible to diagnose which downstream microservice caused a 500 error or latency spike.
+- **Root Cause**: HTTP headers and event messages do not propagate correlation IDs.
+- **Fix**: Propagate X-Correlation-ID / traceparent across all HTTP requests and event headers.

package/.agents/generated/claude/skills/minimalist-design/SKILL.md

@@ -0,0 +1,108 @@
+# Protocol: Premium Utilitarian Minimalism UI Architect
+
+## Overview
+
+An advanced frontend engineering directive for generating highly refined, ultra-minimalist, "document-style" web interfaces analogous to top-tier workspace platforms. This protocol strictly enforces a high-contrast warm monochrome palette, bespoke typographic hierarchies, meticulous structural macro-whitespace, bento-grid layouts, and an ultra-flat component architecture with deliberate muted pastel accents. It actively rejects standard generic SaaS design trends.
+
+## When to Use
+
+- When designing clean, editorial, or Notion-like document interfaces, workspaces, or notes apps.
+- When creating minimalist SaaS dashboards, personal essays, portfolios, or agency landing pages.
+- When asked for a "clean", "minimalist", "warm monochrome", or "flat bento-box" layout.
+
+## Rules & Patterns
+
+### 1. Absolute Negative Constraints (Banned Elements)
+
+The AI must strictly avoid the following generic web development defaults:
+
+- DO NOT use the "Inter", "Roboto", or "Open Sans" typefaces.
+- DO NOT use generic, thin-line icon libraries like "Lucide", "Feather", or standard "Heroicons".
+- DO NOT use Tailwind's default heavy drop shadows (e.g., `shadow-md`, `shadow-lg`, `shadow-xl`). Shadows must be practically non-existent or heavily customized to be ultra-diffuse and low opacity (< 0.05).
+- DO NOT use primary colored backgrounds for large elements or sections (e.g., no bright blue, green, or red hero sections).
+- DO NOT use gradients, neon colors, or 3D glassmorphism (beyond subtle navbar blurs).
+- DO NOT use `rounded-full` (pill shapes) for large containers, cards, or primary buttons.
+- DO NOT use emojis anywhere in code, markup, text content, headings, or alt text. Replace with proper icons or clean SVG primitives.
+- DO NOT use generic placeholder names like "John Doe", "Acme Corp", or "Lorem Ipsum". Use realistic, contextual content.
+- DO NOT use AI copywriting clichés: "Elevate", "Seamless", "Unleash", "Next-Gen", "Game-changer", "Delve". Write plain, specific language.
+
+### 2. Typographic Architecture
+
+The interface must rely on extreme typographic contrast and premium font selection to establish an editorial feel.
+
+- **Primary Sans-Serif (Body, UI, Buttons):** Use clean, geometric, or system-native fonts with character (`'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'Switzer', sans-serif`).
+- **Editorial Serif (Hero Headings & Quotes):** (`'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif`). Apply tight tracking (`-0.02em` to `-0.04em`) and tight line-height (`1.1`).
+- **Monospace (Code, Keystrokes, Meta-data):** (`'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace`).
+- **Text Colors:** Body text must never be absolute black (`#000000`). Use off-black/charcoal (`#111111` or `#2F3437`) with a generous line-height of `1.6` for legibility. Secondary text should be muted gray (`#787774`).
+
+### 3. Color Palette (Warm Monochrome + Spot Pastels)
+
+Color is a scarce resource, utilized only for semantic meaning or subtle accents.
+
+- **Canvas / Background:** Pure White `#FFFFFF` or Warm Bone/Off-White `#F7F6F3` / `#FBFBFA`.
+- **Primary Surface (Cards):** `#FFFFFF` or `#F9F9F8`.
+- **Structural Borders / Dividers:** Ultra-light gray `#EAEAEA` or `rgba(0,0,0,0.06)`.
+- **Accent Colors:** Exclusively use highly desaturated, washed-out pastels for tags, inline code backgrounds, or subtle icon backgrounds:
+  - Pale Red: `#FDEBEC` (Text: `#9F2F2D`)
+  - Pale Blue: `#E1F3FE` (Text: `#1F6C9F`)
+  - Pale Green: `#EDF3EC` (Text: `#346538`)
+  - Pale Yellow: `#FBF3DB` (Text: `#956400`)
+
+### 4. Component Specifications
+
+- **Bento Box Feature Grids:** Asymmetrical CSS Grid layouts. Cards have `border: 1px solid #EAEAEA`, crisp border-radius (`8px` to `12px` max), and generous internal padding (`24px` to `40px`).
+- **Primary Call-To-Action (Buttons):** Solid `#111111`, text `#FFFFFF`, radius `4px` to `6px`, no box-shadow. Micro-scale `transform: scale(0.98)` on active.
+- **Tags & Status Badges:** Pill-shaped (`rounded-full`), small typography (`text-xs`), uppercase with wide tracking (`0.05em`), pastel background.
+- **Accordions (FAQ):** Separated by `border-bottom: 1px solid #EAEAEA` without card boxes. Crisp `+` / `-` toggle icons.
+- **Keystroke Micro-UIs:** `<kbd className="border border-[#EAEAEA] rounded bg-[#F7F6F3] font-mono px-1.5 py-0.5 text-xs">`.
+
+### 5. Iconography & Imagery
+
+- **System Icons:** Phosphor Icons (Bold/Fill) or Radix UI Icons for crisp, technical strokes.
+- **Photography:** Desaturated images with warm tint and subtle grain overlay (`opacity: 0.04`).
+- **Depth:** Subtle ambient gradients (`radial-gradient` with warm tones at `opacity: 0.03`) or minimal geometric line patterns.
+
+### 6. Subtle Motion & Micro-Animations
+
+- **Scroll Entry:** Fade-in + `translateY(12px)` over 600ms via `IntersectionObserver`.
+- **Hover States:** Subtle card lift with ultra-diffuse shadow (`0 2px 8px rgba(0,0,0,0.04)`).
+- **Staggered Reveals:** Cascading delay (`calc(var(--index) * 80ms)`).
+
+## Code Examples
+
+```tsx
+export function BentoFeatureCard({ title, description, badge, tagColor = "blue" }: { title: string; description: string; badge: string; tagColor?: string }) {
+  return (
+    <div className="bg-[#FFFFFF] border border-[#EAEAEA] rounded-xl p-8 hover:shadow-[0_2px_8px_rgba(0,0,0,0.04)] transition-all duration-200">
+      <div className="flex items-center justify-between mb-4">
+        <span className="text-xs uppercase tracking-wider font-mono font-medium px-2.5 py-0.5 rounded-full bg-[#E1F3FE] text-[#1F6C9F]">
+          {badge}
+        </span>
+      </div>
+      <h3 className="font-serif text-2xl tracking-tight text-[#111111] mb-2">{title}</h3>
+      <p className="text-sm text-[#787774] leading-relaxed">{description}</p>
+    </div>
+  );
+}
+```
+
+## Validation Checklist
+
+- [ ] Macro-whitespace established with generous vertical section padding (`py-24` to `py-32`).
+- [ ] No pure black (`#000000`) for text or backgrounds.
+- [ ] Borders use crisp `1px solid #EAEAEA` or `rgba(0,0,0,0.06)`.
+- [ ] No generic AI buzzwords or emojis used in copy.
+- [ ] Typography uses editorial serif headers paired with clean sans-serif body.
+- [ ] Card corners constrained to crisp 8px-12px radius; no pill containers.
+
+## Common Mistakes
+
+- Using heavy saturated primary colors for hero backgrounds.
+- Adding default Tailwind drop-shadows (`shadow-lg`).
+- Cluttering interfaces with emojis instead of clean SVG icons.
+- Using default Inter or Roboto fonts without editorial contrast.
+
+## Integration Notes
+
+- Complements `ui-ux-pro` for color tokens and accessibility.
+- Integrates with `impeccable-design` for QA and anti-pattern enforcement.