constellai 0.3.0

package/skills/design/imagecraft-playbook/SKILL.md

@@ -0,0 +1,48 @@
+---
+name: imagecraft-playbook
+description: |
+  Use this skill when Codex needs compose and edit images using OpenAI's Image API for project assets — UI mockups, icons, illustrations, social cards, and visual references. Recast from the original imagegen/SKILL.md material as the imagecraft-playbook procedure.
+---
+
+# Imagecraft Playbook
+
+## Role
+
+Use this skill when Codex needs compose and edit images using OpenAI's Image API for project assets — UI mockups, icons, illustrations, social cards, and visual references. Recast from the original imagegen/SKILL.md material as the imagecraft-playbook procedure.
+
+## Source Trace
+
+- Original Markdown: `imagegen/SKILL.md`
+- Reformulated skill name: `imagecraft-playbook`
+- Upstream reference: https://github.com/openai/skills
+- Source category: `image-generation`
+
+## Operating Guidance
+
+Follow the rewritten material below as the working procedure. Keep code blocks, commands, file paths, URLs, dimensions, and API names exact when applying the skill.
+
+> Adapted from OpenAI's skills repository.
+
+## Purpose
+
+Compose and edit images using OpenAI's Image API for project assets — UI mockups, icons, illustrations, social cards, and visual references.
+
+## Origin
+
+- Upstream: https://github.com/openai/skills
+- Category: `image-generation`
+
+## Procedure
+
+This catalogue entry advertises the skill in Open Design so the agent
+discovers it during planning. To execute the full upstream workflow with
+its original assets, scripts, and references, install the upstream
+bundle into your active agent's skills directory:
+
+```bash
+# Inspect the upstream README for exact paths
+open https://github.com/openai/skills
+```
+
+Then request this skill by name (`imagegen`) or with
+one of the trigger phrases listed in this skill's frontmatter.

package/skills/design/imagen-playbook/SKILL.md

@@ -0,0 +1,48 @@
+---
+name: imagen-playbook
+description: |
+  Use this skill when Codex needs compose images using Google Gemini's image generation API for UI mockups, icons, illustrations, and visual assets. Recast from the original imagen/SKILL.md material as the imagen-playbook procedure.
+---
+
+# Imagen Playbook
+
+## Role
+
+Use this skill when Codex needs compose images using Google Gemini's image generation API for UI mockups, icons, illustrations, and visual assets. Recast from the original imagen/SKILL.md material as the imagen-playbook procedure.
+
+## Source Trace
+
+- Original Markdown: `imagen/SKILL.md`
+- Reformulated skill name: `imagen-playbook`
+- Upstream reference: https://github.com/sanjay3290/imagen
+- Source category: `image-generation`
+
+## Operating Guidance
+
+Follow the rewritten material below as the working procedure. Keep code blocks, commands, file paths, URLs, dimensions, and API names exact when applying the skill.
+
+> Adapted from @sanjay3290.
+
+## Purpose
+
+Compose images using Google Gemini's image generation API for UI mockups, icons, illustrations, and visual assets.
+
+## Origin
+
+- Upstream: https://github.com/sanjay3290/imagen
+- Category: `image-generation`
+
+## Procedure
+
+This catalogue entry advertises the skill in Open Design so the agent
+discovers it during planning. To execute the full upstream workflow with
+its original assets, scripts, and references, install the upstream
+bundle into your active agent's skills directory:
+
+```bash
+# Inspect the upstream README for exact paths
+open https://github.com/sanjay3290/imagen
+```
+
+Then request this skill by name (`imagen`) or with
+one of the trigger phrases listed in this skill's frontmatter.

package/skills/design/immersive/DESIGN.md

@@ -0,0 +1,55 @@
+---
+name: Immersive
+colors:
+  primary: "#00592B"
+  secondary: "#0023D1"
+  success: "#16A34A"
+  warning: "#D97706"
+  danger: "#DC2626"
+  surface: "#FFFFFF"
+  text: "#111827"
+  neutral: "#FFFFFF"
+typography:
+  h1:
+    fontFamily: "Oswald"
+    fontSize: 2rem
+  body-md:
+    fontFamily: "Oswald"
+    fontSize: 1rem
+  label-caps:
+    fontFamily: "JetBrains Mono"
+    fontSize: 0.75rem
+  sourceScale: "12/14/16/20/24/32"
+  weights: "100, 200, 300, 400, 500, 600, 700, 800, 900"
+rounded:
+  sm: 4px
+  md: 8px
+spacing:
+  sm: 4px
+  md: 8px
+  sourceScale: "4/8/12/16/24/32"
+---
+
+## Overview
+
+Exhibit-style interface that blends storytelling and game-like interaction on a continuous deep-green canvas.
+
+## Style Foundations
+
+- **Visual style:** modern, clean, high-contrast
+- **Typography scale:** 12/14/16/20/24/32
+- **Typography fonts:** primary=Oswald, display=Oswald, mono=JetBrains Mono
+- **Typography weights:** 100, 200, 300, 400, 500, 600, 700, 800, 900
+- **Color palette:** primary, neutral, success, warning, danger
+- **Spacing scale:** 4/8/12/16/24/32
+
+## Colors
+
+- **Primary (#00592B):** Token from style foundations.
+- **Secondary (#0023D1):** Token from style foundations.
+- **Success (#16A34A):** Token from style foundations.
+- **Warning (#D97706):** Token from style foundations.
+- **Danger (#DC2626):** Token from style foundations.
+- **Surface (#FFFFFF):** Token from style foundations.
+- **Text (#111827):** Token from style foundations.
+- **Neutral (#FFFFFF):** Derived from the surface token for official format compatibility.

package/skills/design/immersive/SKILL.md

@@ -0,0 +1,81 @@
+---
+name: "immersive"
+description: "An immersive, interactive, exhibit-style interface that blends storytelling, animation, and gamified elements to create a playful, experience-driven journey. The entire app sits on a single continuous brand-colored canvas (deep green)"
+metadata:
+  author: typeui.sh
+---
+
+<!-- TYPEUI_SH_MANAGED_START -->
+# Immersive Design System Skill (Cursor)
+
+## Mission
+You are an expert design-system guideline author for Immersive.
+Create practical, implementation-ready guidance that can be directly used by engineers and designers.
+
+## Brand
+An immersive, interactive, exhibit-style interface that blends storytelling, animation, and gamified elements to create a playful, experience-driven journey. The entire app sits on a single continuous brand-colored canvas (deep green) — there is no alternation between section backgrounds. Crisp white cards with thick black borders, hard offset block shadows, and oversized condensed display typography (Oswald) punch off that canvas. Buttons are skewed white blocks with hard black shadows that grow on hover, like posters or arcade signs reacting to the player. Decorative geometric blocks in brand-tertiary (cobalt blue) and brand-quaternary (hot pink) layer behind cards to add depth without breaking the brand-color continuity. The result feels less like browsing a website and more like exploring a digital exhibit.
+
+## Style Foundations
+- Visual style: modern, clean, high-contrast
+- Typography scale: 12/14/16/20/24/32 | Fonts: primary=Oswald, sans-serif, display=Oswald, sans-serif, mono=JetBrains Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900
+- Color palette: primary, neutral, success, warning, danger | Tokens: primary=#00592B, secondary=#0023D1, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#FFFFFF, text=#111827
+- Spacing scale: 4/8/12/16/24/32
+
+## Accessibility
+WCAG 2.2 AA, keyboard-first interactions, visible focus states
+
+## Writing Tone
+concise, confident, helpful
+
+## Rules: Do
+- prefer semantic tokens over raw values
+- preserve visual hierarchy
+- keep interaction states explicit
+
+## Rules: Don't
+- avoid low contrast text
+- avoid inconsistent spacing rhythm
+- avoid ambiguous labels
+
+## Expected Behavior
+- Follow the foundations first, then component consistency.
+- When uncertain, prioritize accessibility and clarity over novelty.
+- Provide concrete defaults and explain trade-offs when alternatives are possible.
+- Keep guidance opinionated, concise, and implementation-focused.
+
+## Guideline Authoring Workflow
+1. Restate the design intent in one sentence before proposing rules.
+2. Define tokens and foundational constraints before component-level guidance.
+3. Specify component anatomy, states, variants, and interaction behavior.
+4. Include accessibility acceptance criteria and content-writing expectations.
+5. Add anti-patterns and migration notes for existing inconsistent UI.
+6. End with a QA checklist that can be executed in code review.
+
+## Required Output Structure
+When generating design-system guidance, use this structure:
+- Context and goals
+- Design tokens and foundations
+- Component-level rules (anatomy, variants, states, responsive behavior)
+- Accessibility requirements and testable acceptance criteria
+- Content and tone standards with examples
+- Anti-patterns and prohibited implementations
+- QA checklist
+
+## Component Rule Expectations
+- Define required states: default, hover, focus-visible, active, disabled, loading, error (as relevant).
+- Describe interaction behavior for keyboard, pointer, and touch.
+- State spacing, typography, and color-token usage explicitly.
+- Include responsive behavior and edge cases (long labels, empty states, overflow).
+
+## Quality Gates
+- No rule should depend on ambiguous adjectives alone; anchor each rule to a token, threshold, or example.
+- Every accessibility statement must be testable in implementation.
+- Prefer system consistency over one-off local optimizations.
+- Flag conflicts between aesthetics and accessibility, then prioritize accessibility.
+
+## Example Constraint Language
+- Use "must" for non-negotiable rules and "should" for recommendations.
+- Pair every do-rule with at least one concrete don't-example.
+- If introducing a new pattern, include migration guidance for existing components.
+
+<!-- TYPEUI_SH_MANAGED_END -->

package/skills/design/impeccable/DESIGN.md

@@ -0,0 +1,55 @@
+---
+name: Impeccable
+colors:
+  primary: "#CC8800"
+  secondary: "#C55221"
+  success: "#16A34A"
+  warning: "#D97706"
+  danger: "#DC2626"
+  surface: "#FFFFFF"
+  text: "#111827"
+  neutral: "#FFFFFF"
+typography:
+  h1:
+    fontFamily: "Chakra Petch"
+    fontSize: 2rem
+  body-md:
+    fontFamily: "Chakra Petch"
+    fontSize: 1rem
+  label-caps:
+    fontFamily: "JetBrains Mono"
+    fontSize: 0.75rem
+  sourceScale: "12/14/16/20/24/32"
+  weights: "100, 200, 300, 400, 500, 600, 700, 800, 900"
+rounded:
+  sm: 4px
+  md: 8px
+spacing:
+  sm: 4px
+  md: 8px
+  sourceScale: "4/8/12/16/24/32"
+---
+
+## Overview
+
+Graphic editorial-poster aesthetic with warm cream and burnt-orange rhythm plus a sharp amber accent.
+
+## Style Foundations
+
+- **Visual style:** modern, clean, high-contrast
+- **Typography scale:** 12/14/16/20/24/32
+- **Typography fonts:** primary=Chakra Petch, display=Chakra Petch, mono=JetBrains Mono
+- **Typography weights:** 100, 200, 300, 400, 500, 600, 700, 800, 900
+- **Color palette:** primary, neutral, success, warning, danger
+- **Spacing scale:** 4/8/12/16/24/32
+
+## Colors
+
+- **Primary (#CC8800):** Token from style foundations.
+- **Secondary (#C55221):** Token from style foundations.
+- **Success (#16A34A):** Token from style foundations.
+- **Warning (#D97706):** Token from style foundations.
+- **Danger (#DC2626):** Token from style foundations.
+- **Surface (#FFFFFF):** Token from style foundations.
+- **Text (#111827):** Token from style foundations.
+- **Neutral (#FFFFFF):** Derived from the surface token for official format compatibility.

package/skills/design/impeccable/SKILL.md

@@ -0,0 +1,81 @@
+---
+name: "impeccable"
+description: "A modern, graphic, editorial-poster aesthetic — warm and confident — built on alternating cream and burnt orange sections, an amber brand color."
+metadata:
+  author: typeui.sh
+---
+
+<!-- TYPEUI_SH_MANAGED_START -->
+# Impeccable Design System Skill (Universal)
+
+## Mission
+You are an expert design-system guideline author for Impeccable.
+Create practical, implementation-ready guidance that can be directly used by engineers and designers.
+
+## Brand
+A modern, graphic, editorial-poster aesthetic — warm and confident — built on alternating cream and burnt orange sections, an amber brand color.
+
+## Style Foundations
+- Visual style: modern, clean, high-contrast
+- Typography scale: 12/14/16/20/24/32 | Fonts: primary=Chakra Petch, display=Chakra Petch, mono=JetBrains Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900
+- Color palette: primary, neutral, success, warning, danger | Tokens: primary=#CC8800, secondary=#C55221, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#FFFFFF, text=#111827
+- Spacing scale: 4/8/12/16/24/32
+
+## Accessibility
+WCAG 2.2 AA, keyboard-first interactions, visible focus states
+
+## Writing Tone
+concise, confident, helpful
+
+## Rules: Do
+- prefer semantic tokens over raw values
+- preserve visual hierarchy
+- keep interaction states explicit
+
+## Rules: Don't
+- avoid low contrast text
+- avoid inconsistent spacing rhythm
+- avoid ambiguous labels
+
+## Expected Behavior
+- Follow the foundations first, then component consistency.
+- When uncertain, prioritize accessibility and clarity over novelty.
+- Provide concrete defaults and explain trade-offs when alternatives are possible.
+- Keep guidance opinionated, concise, and implementation-focused.
+
+## Guideline Authoring Workflow
+1. Restate the design intent in one sentence before proposing rules.
+2. Define tokens and foundational constraints before component-level guidance.
+3. Specify component anatomy, states, variants, and interaction behavior.
+4. Include accessibility acceptance criteria and content-writing expectations.
+5. Add anti-patterns and migration notes for existing inconsistent UI.
+6. End with a QA checklist that can be executed in code review.
+
+## Required Output Structure
+When generating design-system guidance, use this structure:
+- Context and goals
+- Design tokens and foundations
+- Component-level rules (anatomy, variants, states, responsive behavior)
+- Accessibility requirements and testable acceptance criteria
+- Content and tone standards with examples
+- Anti-patterns and prohibited implementations
+- QA checklist
+
+## Component Rule Expectations
+- Define required states: default, hover, focus-visible, active, disabled, loading, error (as relevant).
+- Describe interaction behavior for keyboard, pointer, and touch.
+- State spacing, typography, and color-token usage explicitly.
+- Include responsive behavior and edge cases (long labels, empty states, overflow).
+
+## Quality Gates
+- No rule should depend on ambiguous adjectives alone; anchor each rule to a token, threshold, or example.
+- Every accessibility statement must be testable in implementation.
+- Prefer system consistency over one-off local optimizations.
+- Flag conflicts between aesthetics and accessibility, then prioritize accessibility.
+
+## Example Constraint Language
+- Use "must" for non-negotiable rules and "should" for recommendations.
+- Pair every do-rule with at least one concrete don't-example.
+- If introducing a new pattern, include migration guidance for existing components.
+
+<!-- TYPEUI_SH_MANAGED_END -->

package/skills/design/improve-prompt-playbook/SKILL.md

@@ -0,0 +1,48 @@
+---
+name: improve-prompt-playbook
+description: |
+  Use this skill when Codex needs improve prompts with design specs and UI/UX vocabulary. Helpful for design-to-code workflows and clarifying requests for visual output. Recast from the original enhance-prompt/SKILL.md material as the improve-prompt-playbook procedure.
+---
+
+# Improve Prompt Playbook
+
+## Role
+
+Use this skill when Codex needs improve prompts with design specs and UI/UX vocabulary. Helpful for design-to-code workflows and clarifying requests for visual output. Recast from the original enhance-prompt/SKILL.md material as the improve-prompt-playbook procedure.
+
+## Source Trace
+
+- Original Markdown: `enhance-prompt/SKILL.md`
+- Reformulated skill name: `improve-prompt-playbook`
+- Upstream reference: https://github.com/google-labs-code/skills
+- Source category: `design-systems`
+
+## Operating Guidance
+
+Follow the rewritten material below as the working procedure. Keep code blocks, commands, file paths, URLs, dimensions, and API names exact when applying the skill.
+
+> Adapted from Google Labs (Stitch).
+
+## Purpose
+
+Improve prompts with design specs and UI/UX vocabulary. Helpful for design-to-code workflows and clarifying requests for visual output.
+
+## Origin
+
+- Upstream: https://github.com/google-labs-code/skills
+- Category: `design-systems`
+
+## Procedure
+
+This catalogue entry advertises the skill in Open Design so the agent
+discovers it during planning. To execute the full upstream workflow with
+its original assets, scripts, and references, install the upstream
+bundle into your active agent's skills directory:
+
+```bash
+# Inspect the upstream README for exact paths
+open https://github.com/google-labs-code/skills
+```
+
+Then request this skill by name (`enhance-prompt`) or with
+one of the trigger phrases listed in this skill's frontmatter.

package/skills/design/industrial-raw-ui-playbook/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Leonxlnx
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/skills/design/industrial-raw-ui-playbook/SKILL.md

@@ -0,0 +1,108 @@
+---
+name: industrial-raw-ui-playbook
+description: |
+  Use this skill when Codex needs 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. Recast from the original brutalist-skill/SKILL.md material as the industrial-raw-ui-playbook procedure.
+---
+
+# Industrial Raw UI Playbook
+
+## Role
+
+Use this skill when Codex needs 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. Recast from the original brutalist-skill/SKILL.md material as the industrial-raw-ui-playbook procedure.
+
+## Source Trace
+
+- Original Markdown: `brutalist-skill/SKILL.md`
+- Reformulated skill name: `industrial-raw-ui-playbook`
+- Upstream reference: https://github.com/Leonxlnx/taste-skill
+- Source category: `creative-direction`
+
+## Operating Guidance
+
+Follow the rewritten material below as the working procedure. Keep code blocks, commands, file paths, URLs, dimensions, and API names exact when applying the skill.
+
+## Skill Meta
+**Name:** Industrial Brutalism & Tactical Telemetry Interface Engineering
+**Description:** 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.
+
+## Visual Archetypes
+The design system operates by merging two distinct but highly compatible visual paradigms. **Pick ONE per project and commit to it. Avoid alternate or mix both modes within the same interface.**
+
+### 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.
+
+### 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).
+
+## Typographic Architecture
+Typography is the primary structural and decorative infrastructure. Imagery is secondary. The system demands extreme variance in scale, weight, and spacing.
+
+### 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.
+*   **Implementation Parameters:**
+    *   **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 Micro-Typography (Data & Telemetry)
+*   **Classification:** Monospace / Technical Sans.
+*   **Optimal Web Fonts:** JetBrains Mono, IBM Plex Mono, Space Mono, VT323, Courier Prime.
+*   **Implementation Parameters:**
+    *   **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.
+
+### 3 Textural Contrast (Artistic Disruption)
+*   **Classification:** High-Contrast Serif.
+*   **Optimal Web Fonts:** Playfair Display, EB Garamond, Times New Roman.
+*   **Implementation Parameters:** Used exceedingly sparingly. Needs to be subjected to heavy post-processing (halftone filters, 1-bit dithering) to degrade vector perfection and produce textural juxtaposition against the clean sans-serifs.
+
+## 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. Do not ever mix light and dark substrates within the same interface.**
+
+### If Swiss Industrial Print (Light):
+*   **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.
+
+### If Tactical Telemetry (Dark):
+*   **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.
+
+## Layout and Spatial Engineering
+The layout needs to appear mathematically engineered. It rejects conventional web padding in favor of visible compartmentalization.
+
+*   **The Blueprint Grid:** Strict adherence to CSS Grid architectures. Elements avoid 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 needs to be exactly 90 degrees to enforce mechanical rigidity.
+
+## UI Components and Symbology
+Standard web UI conventions are replaced with utilitarian, industrial graphic elements.
+
+*   **Syntax Decoration:** Utilization of ASCII characters to frame data points.
+    *   *Framing:* `[ DELIVERY SYSTEMS ]`, `< RE-IND >`
+    *   *Directional:* `>>>`, `///`, `\\\\`
+*   **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 (e.g., `REV 2.6`, `UNIT / D-01`) to simulate active mechanical processes.
+
+## Textural and Post-Processing Effects
+To prevent the design from appearing purely digital, simulated analog degradation is engineered into the frontend via CSS and SVG filters.
+
+*   **Halftone and 1-Bit Dithering:** Transforming continuous-tone images or large serif typography into dot-matrix patterns. Achieved via pre-processing or CSS `mix-blend-mode: multiply` overlays combined with SVG radial dot patterns.
+*   **CRT Scanlines:** For terminal interfaces, applying a `repeating-linear-gradient` to the background to simulate horizontal electron beam sweeps (e.g., `repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px)`).
+*   **Mechanical Noise:** A global, low-opacity SVG static/noise filter applied to the DOM root to introduce a unified physical grain across both dark and light modes.
+
+## Web Engineering Directives
+1.  **Grid Determinism:** Utilize `display: grid; gap: 1px;` with contrasting parent/child background colors to compose 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.

package/skills/design/interface-builder-playbook/SKILL.md

@@ -0,0 +1,48 @@
+---
+name: interface-builder-playbook
+description: |
+  Use this skill when Codex needs full-stack frontend with cinematic animations, AI-generated media via MiniMax API, and generative art. Helpful for hero pages and showcase sites. Recast from the original frontend-dev/SKILL.md material as the interface-builder-playbook procedure.
+---
+
+# Interface Builder Playbook
+
+## Role
+
+Use this skill when Codex needs full-stack frontend with cinematic animations, AI-generated media via MiniMax API, and generative art. Helpful for hero pages and showcase sites. Recast from the original frontend-dev/SKILL.md material as the interface-builder-playbook procedure.
+
+## Source Trace
+
+- Original Markdown: `frontend-dev/SKILL.md`
+- Reformulated skill name: `interface-builder-playbook`
+- Upstream reference: https://github.com/MiniMax-AI/skills
+- Source category: `web-artifacts`
+
+## Operating Guidance
+
+Follow the rewritten material below as the working procedure. Keep code blocks, commands, file paths, URLs, dimensions, and API names exact when applying the skill.
+
+> Adapted from the MiniMax AI team.
+
+## Purpose
+
+Full-stack frontend with cinematic animations, AI-generated media via MiniMax API, and generative art. Helpful for hero pages and showcase sites.
+
+## Origin
+
+- Upstream: https://github.com/MiniMax-AI/skills
+- Category: `web-artifacts`
+
+## Procedure
+
+This catalogue entry advertises the skill in Open Design so the agent
+discovers it during planning. To execute the full upstream workflow with
+its original assets, scripts, and references, install the upstream
+bundle into your active agent's skills directory:
+
+```bash
+# Inspect the upstream README for exact paths
+open https://github.com/MiniMax-AI/skills
+```
+
+Then request this skill by name (`frontend-dev`) or with
+one of the trigger phrases listed in this skill's frontmatter.