contextos-agents 1.7.0 → 2.0.0-beta.3

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

@@ -1,250 +0,0 @@
----
-name: impeccable-design
-description: >
-  Visual design quality skill based on pbakaus/impeccable. 46 deterministic anti-pattern rules that prevent AI design slop. Bans overused fonts, pure black/gray, nested cards, bounce animations, and all generic AI-generated design clichés.
----
-# 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.
-
-
-<!-- Source: EXAMPLES.md -->
-
-# 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);
-}
-```
-
-<!-- Source: TROUBLESHOOTING.md -->
-
-# 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/gemini/skills/interview-me/SKILL.md

@@ -1,96 +0,0 @@
----
-name: interview-me
-description: >
-  Interactive requirements elicitation skill. Interrogates ambiguous, complex, or high-blast-radius tasks one focused question at a time before any plan or code is written.
----
-# 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/gemini/skills/microservices/SKILL.md

@@ -1,227 +0,0 @@
----
-name: Microservices
-description: >
-  ContextOS skill for Microservices
----
-# 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.
-
-
-<!-- Source: EXAMPLES.md -->
-
-# 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.
-```
-
-<!-- Source: TROUBLESHOOTING.md -->
-
-# 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/gemini/skills/minimalist-design/SKILL.md

@@ -1,114 +0,0 @@
----
-name: minimalist-design
-description: >
-  Clean editorial-style interfaces with warm monochrome palettes and flat bento grids.
----
-# 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.
-