contextos-agents 2.0.0 → 2.1.1

package/catalog/skills/api-design/SKILL.md

@@ -0,0 +1,63 @@
+---
+name: api-design
+description: Guides stable API and interface design. Enforces Hyrum's Law awareness, contract-first development, uniform error shapes, boundary validation, and idempotency patterns.
+---
+
+# API and Interface Design
+
+Design stable, self-documenting, and robust interfaces that are hard to misuse. Good interfaces make the right thing easy and the wrong thing difficult. This applies to REST APIs, GraphQL schemas, RPC services, and internal module contracts.
+
+## Core Principles
+
+### 1. Hyrum's Law Awareness
+
+> With a sufficient number of users of an API, all observable behaviors of your system will be depended on by somebody, regardless of what you promise in the contract.
+
+Design implications:
+- **Never leak internal implementation details**: Database column names, raw ORM errors, stack traces, and internal IDs must never escape to clients.
+- **Lock down response shapes**: Undocumented extra fields or varying JSON key ordering become accidental dependencies.
+- **Design for evolution**: Additive changes are safe; removing, renaming, or changing types of fields requires a deprecation window.
+
+### 2. Contract-First Development
+
+Define the interface and data types before implementing handlers or controllers:
+1. Specify TypeScript interfaces, JSON Schemas, or OpenAPI documents.
+2. Review the contract independently of database models.
+3. Generate server stubs and client SDK types from the unified contract.
+
+### 3. Uniform Error Semantics
+
+All API error responses must adhere to a single predictable schema across the entire application:
+
+```typescript
+interface APIErrorResponse {
+  error: {
+    code: string;        // Machine-readable uppercase token (e.g., "VALIDATION_FAILED")
+    message: string;     // Clear, user-safe human-readable description
+    details?: unknown;   // Specific field errors or structured context
+  };
+}
+```
+
+Standard HTTP status mappings:
+- `400 Bad Request`: Malformed syntax or unparseable request body.
+- `401 Unauthorized`: Authentication credentials missing or invalid.
+- `403 Forbidden`: Authenticated, but lacks required permissions.
+- `404 Not Found`: Target resource does not exist.
+- `409 Conflict`: Resource state conflict (e.g., duplicate unique key).
+- `422 Unprocessable Entity`: Well-formed request failed semantic validation.
+- `429 Too Many Requests`: Rate limit exceeded.
+- `500 Internal Server Error`: Unhandled server condition (never leak stack details).
+
+### 4. Boundary Validation
+
+Trust internal services, but validate strictly at external boundaries:
+- Validate every query parameter, path variable, header, and request payload using schemas (e.g. Zod, Pydantic, TypeBox).
+- Sanitize inputs against injection attacks before passing them to services.
+- Return explicit validation errors pinpointing the exact field and issue.
+
+### 5. Idempotent State Mutations
+
+Any non-safe HTTP mutation (`POST` creating resources, charging payments, or executing transfers) should support an `Idempotency-Key` header:
+- Store operation results indexed by `Idempotency-Key` with a TTL (e.g. 24 hours).
+- Subsequent requests with the same key immediately return the cached response without re-executing side effects.

package/catalog/skills/api-design/TROUBLESHOOTING.md

@@ -0,0 +1,54 @@
+# API Design - Troubleshooting & Common Edge Cases
+
+## Common Diagnostic Scenarios
+
+### 1. Accidental Hyrum's Law Contract Leakage
+
+- **Symptom**: Frontend clients start breaking after an internal database migration or ORM upgrade, even though the documented API schema did not change.
+- **Root Cause**: The API endpoint returned raw database entity objects (`res.json(user)`) instead of projecting through an explicit DTO (Data Transfer Object). Undocumented fields, changed nullability, or reordered keys broke client assumptions.
+- **Fix Protocol**:
+  1. Never pass raw ORM instances directly to response serializers.
+  2. Map domain models through strict schema parsers or DTO mappers (`toUserDTO(user)`).
+  3. Strip internal metadata columns (`__v`, `password_hash`, internal foreign keys).
+
+---
+
+### 2. High-Concurrency Race Conditions with Idempotency Keys
+
+- **Symptom**: Two duplicate `POST /payments` requests sent concurrently with the exact same `Idempotency-Key` both execute the underlying charge twice.
+- **Root Cause**: Check-then-act race condition in the idempotency store. Reading `store.get(key)` and writing `store.set(key)` were not executed atomically.
+- **Fix Protocol**:
+  1. Use atomic reservations with state transitions: `PENDING` -> `RESOLVED`.
+  2. In Redis, execute `SET key "PENDING" NX EX 120`. If the key already exists, return `409 Conflict` or poll until `RESOLVED`.
+  3. Once the mutation succeeds, atomically update the key with the serialized response body and final HTTP status code.
+
+---
+
+### 3. Inconsistent Error Response Shapes Across Endpoints
+
+- **Symptom**: Some API routes return `{ message: "Not found" }`, others return `{ error: "Not found" }`, and uncaught server errors return `{ statusCode: 500, error: "Internal Server Error" }`.
+- **Root Cause**: Different libraries or individual route handlers constructing ad-hoc error literals without centralized error middleware.
+- **Fix Protocol**:
+  1. Implement a single global error handler middleware.
+  2. Define an `AppError` class with machine-readable error codes.
+  3. Ensure all errors format strictly as:
+     ```json
+     {
+       "error": {
+         "code": "RESOURCE_NOT_FOUND",
+         "message": "User with id 123 does not exist",
+         "details": null
+       }
+     }
+     ```
+
+---
+
+### 4. Non-Additive Breaking Changes in Schema Evolution
+
+- **Symptom**: Renaming an optional field `fullName` to `name` breaks mobile clients that have not updated yet.
+- **Root Cause**: Violating the additive evolution rule.
+- **Fix Protocol**:
+  1. Add new fields alongside existing ones: maintain both `name` and `fullName` during the deprecation window.
+  2. Mark `fullName` as deprecated in OpenAPI specs.
+  3. Monitor usage via analytics; remove the deprecated field only after traffic drops to zero and a major version bump occurs.

package/catalog/skills/api-design/VALIDATION.json

@@ -0,0 +1,11 @@
+{
+  "skill": "api-design",
+  "version": "1.0.0",
+  "checks": [
+    "Hyrum's Law awareness enforced: no raw internal errors or ORM models leaked",
+    "Contracts defined before implementation using TypeScript, JSON Schema, or OpenAPI",
+    "Uniform error response shape implemented across all endpoints",
+    "Boundary validation applied at all network and controller ingress points",
+    "Idempotency keys supported for critical state-mutating requests"
+  ]
+}

package/catalog/skills/api-design/skill.yaml

@@ -0,0 +1,14 @@
+schemaVersion: 2
+name: api-design
+description: Contract-first API and interface design standard inspired by Addy Osmani. Enforces Hyrum's Law awareness, uniform error shapes, boundary validation, and idempotency keys.
+version: 1.0.0
+category: backend
+type: instruction-only
+requires:
+  - engineering-workflow
+  - system-design
+resources:
+  - EXAMPLES.md
+  - SKILL.md
+  - TROUBLESHOOTING.md
+  - VALIDATION.json

package/catalog/skills/architecture-diagrams/SKILL.md

@@ -0,0 +1,108 @@
+---
+name: architecture-diagrams
+description: >
+  Interactive, visual architecture and sequence diagrams as code. Generates beautiful, self-contained
+  SVG/HTML diagrams with motion, clear component boundaries, and verifiable data flows.
+---
+
+# architecture-diagrams
+
+## Overview
+
+Visual architecture engineering skill inspired by [tt-a1i/archify](https://github.com/tt-a1i/archify). Replaces static ASCII art and rigid default diagrams with crisp, self-contained SVG and responsive HTML diagrams featuring modern dark-mode palettes, pulse animations for event flows, and strict C4-model component boundaries.
+
+## When to Use
+
+Activate whenever:
+
+- Designing or explaining distributed systems, microservices, or full-stack architectures.
+- Visualizing complex auth flows (OAuth2, PKCE), multi-step payment sagas, or CDC outbox data pipelines.
+- User requests an architecture diagram, flow chart, sequence diagram, or visual system design.
+
+## Rules & Patterns
+
+### 1. Diagram Types Supported
+
+1. **System Landscape / C4 Container Diagram**:
+   - Clients (Web, Mobile, Third-party) → API Gateway / CDN → Microservices / Serverless → Storage / Event Brokers.
+2. **Sequence Flow Diagram**:
+   - Step-by-step lifecycles with synchronous requests, asynchronous pub/sub events, and compensating transactions.
+3. **Data Pipeline & Event-Driven Topology**:
+   - Primary DB → Transactional Outbox → CDC (Debezium) → Kafka Topic → Consumers → Materialized Views.
+
+### 2. Aesthetic & Visual Invariants
+
+- **Dark Theme by Default**: Surface `#0B0F19`, containers `#1E293B`, borders `#334155`, text `#F8FAFC`.
+- **Semantic Component Accents**:
+  - Client / Frontend: Sky Blue (`#38BDF8`)
+  - API Gateway / Router: Indigo (`#818CF8`)
+  - Business Services: Emerald Green (`#34D399`)
+  - Databases / Storage: Amber / Orange (`#F59E0B`)
+  - Message Brokers / Event Buses: Purple (`#A855F7`)
+- **Active Data-Flow Motion**: Use subtle CSS `@keyframes` on SVG stroke dashes (`stroke-dasharray`, `stroke-dashoffset`) to show active direction of messages and data streams.
+
+---
+
+## Code Examples
+
+### Standalone Animated SVG Data-Flow Pattern
+
+```html
+<svg viewBox="0 0 800 200" xmlns="http://www.w3.org/2000/svg" class="bg-slate-950 rounded-xl p-4 w-full">
+  <defs>
+    <style>
+      .flow-line { stroke: #38BDF8; stroke-width: 2; stroke-dasharray: 6,6; animation: flow 1.5s linear infinite; }
+      @keyframes flow { to { stroke-dashoffset: -12; } }
+      .box { fill: #1E293B; stroke: #334155; stroke-width: 1.5; rx: 8; }
+      .text-title { fill: #F8FAFC; font-family: sans-serif; font-size: 14px; font-weight: 600; }
+      .text-sub { fill: #94A3B8; font-family: monospace; font-size: 11px; }
+    </style>
+  </defs>
+
+  <!-- Client Node -->
+  <rect x="30" y="70" width="160" height="60" class="box" />
+  <text x="110" y="96" text-anchor="middle" class="text-title">Next.js Client</text>
+  <text x="110" y="114" text-anchor="middle" class="text-sub">React 19 / RSC</text>
+
+  <!-- Data Flow -->
+  <line x1="190" y1="100" x2="330" y2="100" class="flow-line" />
+
+  <!-- API Gateway -->
+  <rect x="330" y="70" width="160" height="60" class="box" />
+  <text x="410" y="96" text-anchor="middle" class="text-title">API Gateway</text>
+  <text x="410" y="114" text-anchor="middle" class="text-sub">Auth & Rate Limiting</text>
+
+  <!-- Flow to Database -->
+  <line x1="490" y1="100" x2="630" y2="100" class="flow-line" />
+
+  <!-- Database -->
+  <rect x="630" y="70" width="140" height="60" class="box" />
+  <text x="700" y="96" text-anchor="middle" class="text-title">PostgreSQL</text>
+  <text x="700" y="114" text-anchor="middle" class="text-sub">Prisma / Outbox</text>
+</svg>
+```
+
+---
+
+## Validation Checklist
+
+- [ ] Diagram clearly identifies all component boundaries, ports, and protocols.
+- [ ] Visual hierarchy is unambiguous (clients on left/top, storage on right/bottom).
+- [ ] Motion/animation is purposeful and lightweight (no heavy canvas frameworks).
+- [ ] Accessible: nodes include semantic labels and readable color contrast.
+
+---
+
+## Common Mistakes
+
+- **Messy cross-overs**: Laying out 20 boxes with overlapping lines instead of grouping into clean C4 layers.
+- **Unlabeled connections**: Lines without protocol (HTTPS, gRPC, WSS) or event payload descriptions.
+- **Overwhelming detail**: Drawing internal class diagrams when the user asked for a system-level overview.
+
+---
+
+## Integration Notes
+
+- Triggers during `system-design` and `microservices` planning phases.
+- Used to generate visual architecture artifacts in Markdown walkthroughs and specs.
+- Pairs with `ui-ux-pro` for consistent aesthetic styling.

package/catalog/skills/architecture-diagrams/VALIDATION.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "rules_followed": {
+      "type": "boolean"
+    }
+  },
+  "required": [
+    "rules_followed"
+  ]
+}

package/catalog/skills/architecture-diagrams/skill.yaml

@@ -0,0 +1,9 @@
+schemaVersion: 2
+name: architecture-diagrams
+category: architecture
+type: instruction-only
+description: Interactive, visual architecture and sequence diagrams as code. Generates beautiful, self-contained SVG/HTML diagrams with motion, clear component boundaries, and verifiable data flows.
+version: 1.0.0
+resources:
+  - SKILL.md
+  - VALIDATION.json

package/catalog/skills/brutalist-design/EXAMPLES.md

@@ -0,0 +1,59 @@
+# Brutalist Design - Component & Layout Examples
+
+## Example 1: High-Contrast Neobrutalist Action Card
+
+```tsx
+import React from 'react';
+
+interface BrutalistCardProps {
+  title: string;
+  tag: string;
+  description: string;
+  onAction: () => void;
+}
+
+export function BrutalistCard({ title, tag, description, onAction }: BrutalistCardProps) {
+  return (
+    <div className="border-4 border-black bg-yellow-300 p-6 shadow-[8px_8px_0px_0px_#000000] hover:translate-x-1 hover:translate-y-1 hover:shadow-[4px_4px_0px_0px_#000000] transition-all">
+      <div className="flex items-center justify-between border-b-4 border-black pb-3">
+        <span className="bg-black text-white px-3 py-1 font-mono text-xs uppercase font-bold tracking-wider">
+          {tag}
+        </span>
+        <span className="font-mono text-xs font-bold uppercase">SEC-LOCKED</span>
+      </div>
+      <div className="mt-4">
+        <h3 className="font-mono text-xl font-black uppercase tracking-tight text-black">
+          {title}
+        </h3>
+        <p className="mt-2 font-mono text-sm leading-relaxed text-black/90">
+          {description}
+        </p>
+      </div>
+      <button
+        onClick={onAction}
+        className="mt-6 w-full border-2 border-black bg-white px-4 py-3 font-mono text-sm font-bold uppercase tracking-wider text-black shadow-[4px_4px_0px_0px_#000000] active:translate-x-0.5 active:translate-y-0.5 active:shadow-[1px_1px_0px_0px_#000000] transition-all"
+      >
+        EXECUTE ACTION ->
+      </button>
+    </div>
+  );
+}
+```
+
+---
+
+## Example 2: Terminal-Style Metric Strip
+
+```tsx
+export function BrutalistStatusStrip({ status }: { status: string }) {
+  return (
+    <div className="border-2 border-black bg-black text-white px-4 py-2 font-mono text-xs uppercase flex items-center justify-between">
+      <div className="flex items-center gap-2">
+        <span className="inline-block h-2 w-2 bg-green-400 animate-pulse" />
+        <span>SYSTEM STATUS: {status}</span>
+      </div>
+      <span className="text-neutral-400">LATENCY: 12ms</span>
+    </div>
+  );
+}
+```

package/catalog/skills/brutalist-design/SKILL.md

@@ -0,0 +1,150 @@
+---
+name: industrial-brutalist-ui
+description: Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.
+---
+
+# SKILL: Industrial Brutalism & Tactical Telemetry UI
+
+## Overview
+
+Advanced proficiency in architecting web interfaces that synthesize mid-century Swiss Typographic design, industrial manufacturing manuals, and retro-futuristic aerospace/military terminal interfaces. This discipline requires absolute mastery over rigid modular grids, extreme typographic scale contrast, purely utilitarian color palettes, and the programmatic simulation of analog degradation (halftones, CRT scanlines, bitmap dithering). The objective is to construct digital environments that project raw functionality, mechanical precision, and high data density, deliberately discarding conventional consumer UI patterns.
+
+## When to Use
+
+- When building data-heavy telemetry dashboards, analytics monitors, trading systems, or developer command centers.
+- When creating editorial portfolios, archival indexes, or technical documentation sites requiring an industrial blueprint aesthetic.
+- When explicitly prompted for "brutalist", "tactical", "terminal", "Swiss print", or "mechanical" aesthetics.
+
+## Rules & Patterns
+
+### 1. Visual Archetypes
+
+Pick ONE per project and commit to it. Do not alternate or mix both modes within the same interface.
+
+#### 1.1 Swiss Industrial Print
+
+Derived from 1960s corporate identity systems and heavy machinery blueprints.
+
+- **Characteristics:** High-contrast light modes (newsprint/off-white substrates). Reliance on monolithic, heavy sans-serif typography. Unforgiving structural grids outlined by visible dividing lines. Aggressive, asymmetric use of negative space punctuated by oversized, viewport-bleeding numerals or letterforms. Heavy use of primary red as an alert/accent color.
+
+#### 1.2 Tactical Telemetry & CRT Terminal
+
+Derived from classified military databases, legacy mainframes, and aerospace Heads-Up Displays (HUDs).
+
+- **Characteristics:** Dark mode exclusivity. High-density tabular data presentation. Absolute dominance of monospaced typography. Integration of technical framing devices (ASCII brackets, crosshairs). Application of simulated hardware limitations (phosphor glow, scanlines, low bit-depth rendering).
+
+### 2. Typographic Architecture
+
+Typography is the primary structural and decorative infrastructure. Imagery is secondary. The system demands extreme variance in scale, weight, and spacing.
+
+#### 2.1 Macro-Typography (Structural Headers)
+
+- **Classification:** Neo-Grotesque / Heavy Sans-Serif.
+- **Optimal Web Fonts:** Neue Haas Grotesk (Black), Inter (Extra Bold/Black), Archivo Black, Roboto Flex (Heavy), Monument Extended.
+- **Scale:** Deployed at massive scales using fluid typography (e.g., `clamp(4rem, 10vw, 15rem)`).
+- **Tracking (Letter-spacing):** Extremely tight, often negative (`-0.03em` to `-0.06em`), forcing glyphs to form solid architectural blocks.
+- **Leading (Line-height):** Highly compressed (`0.85` to `0.95`).
+- **Casing:** Exclusively uppercase for structural impact.
+
+#### 2.2 Micro-Typography (Data & Telemetry)
+
+- **Classification:** Monospace / Technical Sans.
+- **Optimal Web Fonts:** JetBrains Mono, IBM Plex Mono, Space Mono, VT323, Courier Prime.
+- **Scale:** Fixed and small (`10px` to `14px` / `0.7rem` to `0.875rem`).
+- **Tracking:** Generous (`0.05em` to `0.1em`) to simulate mechanical typewriter spacing or terminal matrices.
+- **Leading:** Standard to tight (`1.2` to `1.4`).
+- **Casing:** Exclusively uppercase. Used for all metadata, navigation, unit IDs, and coordinates.
+
+#### 2.3 Textural Contrast (Artistic Disruption)
+
+- **Classification:** High-Contrast Serif.
+- **Optimal Web Fonts:** Playfair Display, EB Garamond, Times New Roman.
+- **Implementation Parameters:** Used exceedingly sparingly. Must be subjected to heavy post-processing (halftone filters, 1-bit dithering) to degrade vector perfection and create textural juxtaposition against the clean sans-serifs.
+
+### 3. Color System
+
+The color architecture is uncompromising. Gradients, soft drop shadows, and modern translucency are strictly prohibited. Colors simulate physical media or primitive emissive displays.
+
+**CRITICAL: Choose ONE substrate palette per project and use it consistently. Never mix light and dark substrates within the same interface.**
+
+#### Swiss Industrial Print Light Substrate
+
+- **Background:** `#F4F4F0` or `#EAE8E3` (Matte, unbleached documentation paper).
+- **Foreground:** `#050505` to `#111111` (Carbon Ink).
+- **Accent:** `#E61919` or `#FF2A2A` (Aviation/Hazard Red). This is the ONLY accent color. Used for strike-throughs, thick structural dividing lines, or vital data highlights.
+
+#### Tactical Telemetry Dark Substrate
+
+- **Background:** `#0A0A0A` or `#121212` (Deactivated CRT. Avoid pure `#000000`).
+- **Foreground:** `#EAEAEA` (White phosphor). This is the primary text color.
+- **Accent:** `#E61919` or `#FF2A2A` (Aviation/Hazard Red). Same red, same rules.
+- **Terminal Green (`#4AF626`):** Optional. Use ONLY for a single specific UI element (e.g., one status indicator or one data readout) - never as a general text color. If it doesn't serve a clear purpose, omit it entirely.
+
+### 4. Layout and Spatial Engineering
+
+- **The Blueprint Grid:** Strict adherence to CSS Grid architectures. Elements do not float; they are anchored precisely to grid tracks and intersections.
+- **Visible Compartmentalization:** Extensive utilization of solid borders (`1px` or `2px solid`) to delineate distinct zones of information. Horizontal rules (`<hr>`) frequently span the entire container width to segregate operational units.
+- **Bimodal Density:** Layouts oscillate between extreme data density (tightly packed monospace metadata clustered together) and vast expanses of calculated negative space framing macro-typography.
+- **Geometry:** Absolute rejection of `border-radius`. All corners must be exactly 90 degrees to enforce mechanical rigidity.
+
+### 5. UI Components and Symbology
+
+- **Syntax Decoration:** Utilization of ASCII characters to frame data points (`[ DELIVERY SYSTEMS ]`, `< RE-IND >`, `>>>`, `///`).
+- **Industrial Markers:** Prominent integration of registration (`®`), copyright (`©`), and trademark (`™`) symbols functioning as structural geometric elements rather than legal text.
+- **Technical Assets:** Integration of crosshairs (`+`) at grid intersections, repeating vertical lines (barcodes), thick horizontal warning stripes, and randomized string data (`REV 2.6`, `UNIT / D-01`) to simulate active mechanical processes.
+
+### 6. Textural and Post-Processing Effects
+
+- **Halftone and 1-Bit Dithering:** Dot-matrix effects via `mix-blend-mode: multiply` overlays combined with SVG radial dot patterns.
+- **CRT Scanlines:** `repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px)` on terminal backgrounds.
+- **Mechanical Noise:** Low-opacity SVG static filter on the DOM root to introduce physical grain.
+
+### 7. Web Engineering Directives
+
+1. **Grid Determinism:** Utilize `display: grid; gap: 1px;` with contrasting parent/child background colors to generate mathematically perfect, razor-thin dividing lines without complex border declarations.
+2. **Semantic Rigidity:** Construct the DOM using precise semantic tags (`<data>`, `<samp>`, `<kbd>`, `<output>`, `<dl>`) to accurately reflect the technical nature of the telemetry.
+3. **Typography Clamping:** Implement CSS `clamp()` functions exclusively for macro-typography to ensure massive text scales aggressively while maintaining structural integrity across viewports.
+
+## Code Examples
+
+```tsx
+export function TelemetryModule({ unitId, status, metrics }: { unitId: string; status: string; metrics: { label: string; val: string }[] }) {
+  return (
+    <div className="border-2 border-black dark:border-white bg-[#F4F4F0] dark:bg-[#0A0A0A] font-mono p-4 rounded-none">
+      <div className="flex justify-between border-b border-black/30 dark:border-white/30 pb-2 mb-4 text-xs tracking-widest uppercase">
+        <span>[ UNIT // {unitId} ]</span>
+        <span className="text-[#E61919] font-bold">&lt; STATUS: {status} &gt;</span>
+      </div>
+      <div className="grid grid-cols-2 gap-px bg-black/20 dark:bg-white/20">
+        {metrics.map(m => (
+          <div key={m.label} className="bg-[#F4F4F0] dark:bg-[#0A0A0A] p-2">
+            <div className="text-[10px] text-black/60 dark:text-white/60 tracking-wider">{m.label}</div>
+            <div className="text-sm font-bold tracking-tight">{m.val}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+```
+
+## Validation Checklist
+
+- [ ] Strict rejection of `border-radius` (all corners 0px / 90 degrees).
+- [ ] Substrate consistency: 100% committed to either Swiss Light or Tactical CRT Dark.
+- [ ] Pure black (`#000000`) avoided for backgrounds.
+- [ ] Monospace typography used for all telemetry, coordinates, and metadata labels.
+- [ ] Dividing lines engineered using solid borders or 1px grid track gaps.
+- [ ] No soft gradients, standard drop shadows, or floating cards.
+
+## Common Mistakes
+
+- Mixing Swiss Industrial Print and Tactical Telemetry substrates within the same view.
+- Introducing rounded corners (`rounded-md`, `rounded-full`) or pill buttons.
+- Using generic body typefaces without tracking adjustments.
+- Applying subtle pastel colors instead of raw carbon ink, off-white, and hazard red.
+
+## Integration Notes
+
+- Complements `impeccable-design` for QA checks on contrast and typography.
+- Pairs with `web-accessibility` to guarantee high-contrast readability (AAA ratio).

package/catalog/skills/brutalist-design/VALIDATION.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "rules_followed": {
+      "type": "boolean"
+    }
+  },
+  "required": [
+    "rules_followed"
+  ]
+}

package/catalog/skills/brutalist-design/skill.yaml

@@ -0,0 +1,10 @@
+schemaVersion: 2
+name: brutalist-design
+category: design
+type: instruction-only
+description: Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics.
+version: 1.0.0
+resources:
+  - EXAMPLES.md
+  - SKILL.md
+  - VALIDATION.json

package/catalog/skills/ci-cd/EXAMPLES.md

@@ -0,0 +1,79 @@
+# CI/CD - Examples & GitHub Actions Configurations
+
+## Example 1: Production Quality Gate Workflow
+
+```yaml
+# .github/workflows/ci.yml
+name: CI Quality Gates
+
+on:
+  pull_request:
+    branches: [main]
+  push:
+    branches: [main]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+jobs:
+  quality:
+    name: Lint, Types & Security
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'npm'
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Secret Scan
+        run: npm run check:secrets
+
+      - name: Linter & Format Check
+        run: npm run lint
+
+      - name: Type Check
+        run: npx tsc --noEmit
+
+      - name: Unit Tests with Coverage
+        run: npm test -- --coverage
+
+      - name: Build Verification
+        run: npm run build
+
+      - name: Dependency Audit
+        run: npm audit --audit-level=high
+```
+
+---
+
+## Example 2: Polyglot Matrix Test Stage
+
+```yaml
+  test-matrix:
+    name: Node Test Matrix
+    needs: quality
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        node-version: ['20', '22']
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - run: npm ci
+      - run: npm test
+```

package/catalog/skills/ci-cd/SKILL.md

@@ -0,0 +1,69 @@
+---
+name: ci-cd
+description: Automates CI/CD pipeline setup. Enforces unskippable quality gates, shift-left static analysis, secret scanning, and hardened GitHub Actions workflows.
+---
+
+# CI/CD and Automation
+
+Automate quality gates so no change reaches production without passing tests, lint, type checking, security scans, and build verification.
+
+## Core Philosophy
+
+- **Shift Left**: Catch problems as early in the delivery lifecycle as possible. A defect caught during static analysis or linting takes seconds to fix; the same defect discovered in production takes hours and damages reliability.
+- **Faster is Safer**: Small, frequent, automated releases drastically lower blast radius and risk compared to infrequent bulk deployments.
+- **Unskippable Gates Invariant**: Never disable a failing rule or skip a test suite just to make a pipeline green. Fix the root cause in the code.
+
+## The Quality Gate Pipeline
+
+Every Pull Request must successfully traverse these automated stages before merge approval:
+
+```
+Pull Request Opened
+       │
+       ▼
+ 1. Secret Scanning    (prevent credential leaks before running untrusted steps)
+       │
+       ▼
+ 2. Lint & Formatting  (eslint, prettier, markdownlint)
+       │
+       ▼
+ 3. Type Checking      (tsc --noEmit, pyright, mypy)
+       │
+       ▼
+ 4. Unit Tests         (vitest, jest, pytest with coverage thresholds)
+       │
+       ▼
+ 5. Production Build   (bundling, tree-shaking, static generation)
+       │
+       ▼
+ 6. Integration Tests  (API contracts, database migrations)
+       │
+       ▼
+ 7. Security Audit     (npm audit, trivy, dependency vulnerability checks)
+       │
+       ▼
+ 8. Bundle Budget      (bundle size checks against baseline thresholds)
+       │
+       ▼
+   Merge Allowed
+```
+
+## Hardened Pipeline Standards
+
+1. **Least-Privilege Token Permissions**:
+   Explicitly declare workflow and job permissions at the top of the workflow file. Default to read-only access:
+   ```yaml
+   permissions:
+     contents: read
+   ```
+2. **Deterministic Dependency Installation**:
+   Always use frozen lockfiles (`npm ci` instead of `npm install`, `uv sync --frozen` instead of `pip install`).
+3. **Concurrency Cancellation**:
+   Automatically cancel in-progress runs when a newer commit is pushed to the same Pull Request branch:
+   ```yaml
+   concurrency:
+     group: ${{ github.workflow }}-${{ github.ref }}
+     cancel-in-progress: true
+   ```
+4. **Action Pinning**:
+   Reference trusted actions using verified release tags (e.g. `actions/checkout@v4`) or full commit SHAs.