constellai 0.3.0

package/skills/design/composition-taste-interface-v1-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/composition-taste-interface-v1-playbook/SKILL.md

@@ -0,0 +1,242 @@
+---
+name: composition-taste-interface-v1-playbook
+description: |
+  Use this skill when Codex needs the original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility. Recast from the original taste-skill-v1/SKILL.md material as the composition-taste-interface-v1-playbook procedure.
+---
+
+# Composition Taste Interface V1 Playbook
+
+## Role
+
+Use this skill when Codex needs the original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility. Recast from the original taste-skill-v1/SKILL.md material as the composition-taste-interface-v1-playbook procedure.
+
+## Source Trace
+
+- Original Markdown: `taste-skill-v1/SKILL.md`
+- Reformulated skill name: `composition-taste-interface-v1-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.
+
+## ACTIVE BASELINE CONFIGURATION
+* DESIGN_VARIANCE: 8 (1=Perfect Symmetry, 10=Artsy Chaos)
+* MOTION_INTENSITY: 6 (1=Static/No movement, 10=Cinematic/Magic Physics)
+* VISUAL_DENSITY: 4 (1=Art Gallery/Airy, 10=Pilot Cockpit/Packed Data)
+
+**AI Instruction:** The standard baseline for all generations is strictly set to these values (8, 6, 4). Do not ask the user to edit this file. Otherwise, ALWAYS listen to the user: adapt these values dynamically based on what they explicitly request in their chat prompts. Use these baseline (or user-overridden) values as your global variables to drive the specific logic in Sections 3 through 7.
+
+## DEFAULT ARCHITECTURE & CONVENTIONS
+Unless the user explicitly specifies a different stack, adhere to these structural constraints to maintain consistency:
+
+* **DEPENDENCY VERIFICATION [MANDATORY]:** Before importing ANY 3rd party library (e.g. `framer-motion`, `lucide-react`, `zustand`), you MUST check `package.json`. If the package is missing, you MUST output the installation command (e.g. `npm install package-name`) before providing the code. **Do not ever** assume a library exists.
+* **Framework & Interactivity:** React or Next.js. Default to Server Components (`RSC`).
+    * **RSC SAFETY:** Global state works ONLY in Client Components. In Next.js, wrap providers in a `"use client"` component.
+    * **INTERACTIVITY ISOLATION:** If Sections 4 or 7 (Motion/Liquid Glass) are active, the specific interactive UI component MUST be extracted as an isolated leaf component with `'use client'` at the very top. Server Components needs to exclusively render static layouts.
+* **State Management:** Use local `useState`/`useReducer` for isolated UI. Use global state strictly for deep prop-drilling avoidance.
+* **Styling Policy:** Use Tailwind CSS (v3/v4) for 90% of styling.
+    * **TAILWIND VERSION LOCK:** Check `package.json` first. Avoid use v4 syntax in v3 projects.
+    * **T4 CONFIG GUARD:** For v4, do NOT use `tailwindcss` plugin in `postcss.config.js`. Use `@tailwindcss/postcss` or the Vite plugin.
+* **ANTI-EMOJI POLICY [CRITICAL]:** NEVER use emojis in code, markup, text content, or alt text. Replace symbols with high-quality icons (Radix, Phosphor) or clean SVG primitives. Emojis are BANNED.
+* **Responsiveness & Spacing:**
+  * Standardize breakpoints (`sm`, `md`, `lg`, `xl`).
+  * Contain page layouts using `max-w-[1400px] mx-auto` or `max-w-7xl`.
+  * **Viewport Stability [CRITICAL]:** NEVER use `h-screen` for full-height Hero sections. ALWAYS use `min-h-[100dvh]` to prevent catastrophic layout jumping on mobile browsers (iOS Safari).
+  * **Grid over Flex-Math:** NEVER use complex flexbox percentage math (`w-[calc(33%-1rem)]`). ALWAYS use CSS Grid (`grid grid-cols-1 md:grid-cols-3 gap-6`) for reliable structures.
+* **Icons:** You MUST use exactly `@phosphor-icons/react` or `@radix-ui/react-icons` as the import paths (check installed version). Standardize `strokeWidth` globally (e.g., exclusively use `1.5` or `2.0`).
+
+
+## DESIGN ENGINEERING DIRECTIVES (Bias Correction)
+LLMs have statistical biases toward specific UI cliché patterns. Proactively construct premium interfaces using these engineered rules:
+
+**Rule 1: Deterministic Typography**
+* **Display/Headlines:** Default to `text-4xl md:text-6xl tracking-tighter leading-none`.
+    * **ANTI-SLOP:** Discourage `Inter` for "Premium" or "Creative" vibes. Force unique character using `Geist`, `Outfit`, `Cabinet Grotesk`, or `Satoshi`.
+    * **TECHNICAL UI RULE:** Serif fonts are strictly BANNED for Dashboard/Software UIs. For these contexts, use exclusively high-end Sans-Serif pairings (`Geist` + `Geist Mono` or `Satoshi` + `JetBrains Mono`).
+* **Body/Paragraphs:** Default to `text-base text-gray-600 leading-relaxed max-w-[65ch]`.
+
+**Rule 2: Color Calibration**
+* **Constraint:** Max 1 Accent Color. Saturation < 80%.
+* **THE LILA BAN:** The "AI Purple/Blue" aesthetic is strictly BANNED. No purple button glows, no neon gradients. Use absolute neutral bases (Zinc/Slate) with high-contrast, singular accents (e.g. Emerald, Electric Blue, or Deep Rose).
+* **COLOR CONSISTENCY:** Stick to one palette for the entire output. Avoid fluctuate between warm and cool grays within the same project.
+
+**Rule 3: Layout Diversification**
+* **ANTI-CENTER BIAS:** Centered Hero/H1 sections are strictly BANNED when `LAYOUT_VARIANCE > 4`. Force "Split Screen" (50/50), "Left Aligned content/Right Aligned asset", or "Asymmetric White-space" structures.
+
+**Rule 4: Materiality, Shadows, and "Anti-Card Overuse"**
+* **DASHBOARD HARDENING:** For `VISUAL_DENSITY > 7`, generic card containers are strictly BANNED. Use logic-grouping via `border-t`, `divide-y`, or purely negative space. Data metrics prefer to breathe without being boxed in unless elevation (z-index) is functionally required.
+* **Execution:** Use cards ONLY when elevation communicates hierarchy. When a shadow is used, tint it to the background hue.
+
+**Rule 5: Interactive UI States**
+* **Mandatory Generation:** LLMs naturally compose "static" successful states. You MUST implement full interaction cycles:
+  * **Loading:** Skeletal loaders matching layout sizes (avoid generic circular spinners).
+  * **Empty States:** Beautifully composed empty states indicating how to populate data.
+  * **Error States:** Clear, inline error reporting (e.g., forms).
+  * **Tactile Feedback:** On `:active`, use `-translate-y-[1px]` or `scale-[0.98]` to simulate a physical push indicating success/action.
+
+**Rule 6: Data & Form Patterns**
+* **Forms:** Label MUST sit above input. Helper text is optional but prefer to exist in markup. Error text below input. Use a standard `gap-2` for input blocks.
+
+## CREATIVE PROACTIVITY (Anti-Slop Implementation)
+To actively combat generic AI designs, systematically implement these high-end coding concepts as your baseline:
+* **"Liquid Glass" Refraction:** When glassmorphism is needed, go beyond `backdrop-blur`. Add a 1px inner border (`border-white/10`) and a subtle inner shadow (`shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]`) to simulate physical edge refraction.
+* **Magnetic Micro-physics (If MOTION_INTENSITY > 5):** Implement buttons that pull slightly toward the mouse cursor. **CRITICAL:** NEVER use React `useState` for magnetic hover or continuous animations. Use EXCLUSIVELY Framer Motion's `useMotionValue` and `useTransform` outside the React render cycle to prevent performance collapse on mobile.
+* **Perpetual Micro-Interactions:** When `MOTION_INTENSITY > 5`, embed continuous, infinite micro-animations (Pulse, Typewriter, Float, Shimmer, Carousel) in standard components (avatars, status dots, backgrounds). Apply premium Spring Physics (`type: "spring", stiffness: 100, damping: 20`) to all interactive elements—no linear easing.
+* **Layout Transitions:** Consistently utilize Framer Motion's `layout` and `layoutId` props for smooth re-ordering, resizing, and shared element transitions across state changes.
+* **Staggered Orchestration:** Avoid mount lists or grids instantly. Use `staggerChildren` (Framer) or CSS cascade (`animation-delay: calc(var(--index) * 100ms)`) to produce sequential waterfall reveals. **CRITICAL:** For `staggerChildren`, the Parent (`variants`) and Children MUST reside in the identical Client Component tree. If data is fetched asynchronously, pass the data as props into a centralized Parent Motion wrapper.
+
+## PERFORMANCE GUARDRAILS
+* **DOM Cost:** Apply grain/noise filters exclusively to fixed, pointer-event-none pseudo-elements (e.g., `fixed inset-0 z-50 pointer-events-none`) and NEVER to scrolling containers to prevent continuous GPU repaints and mobile performance degradation.
+* **Hardware Acceleration:** Do not ever animate `top`, `left`, `width`, or `height`. Animate exclusively via `transform` and `opacity`.
+* **Z-Index Restraint:** NEVER spam arbitrary `z-50` or `z-10` unprompted. Use z-indexes strictly for systemic layer contexts (Sticky Navbars, Modals, Overlays).
+
+## TECHNICAL REFERENCE (Dial Definitions)
+
+### DESIGNVARIANCE (Level 1-10)
+* **1-3 (Predictable):** Flexbox `justify-center`, strict 12-column symmetrical grids, equal paddings.
+* **4-7 (Offset):** Use `margin-top: -2rem` overlapping, varied image aspect ratios (e.g., 4:3 next to 16:9), left-aligned headers over center-aligned data.
+* **8-10 (Asymmetric):** Masonry layouts, CSS Grid with fractional units (e.g., `grid-template-columns: 2fr 1fr 1fr`), massive empty zones (`padding-left: 20vw`).
+* **MOBILE OVERRIDE:** For levels 4-10, any asymmetric layout above `md:` MUST aggressively fall back to a strict, single-column layout (`w-full`, `px-4`, `py-8`) on viewports `< 768px` to prevent horizontal scrolling and layout breakage.
+
+### MOTIONINTENSITY (Level 1-10)
+* **1-3 (Static):** No automatic animations. CSS `:hover` and `:active` states only.
+* **4-7 (Fluid CSS):** Use `transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1)`. Use `animation-delay` cascades for load-ins. Focus strictly on `transform` and `opacity`. Use `will-change: transform` sparingly.
+* **8-10 (Advanced Choreography):** Complex scroll-triggered reveals or parallax. Use Framer Motion hooks. NEVER use `window.addEventListener('scroll')`.
+
+### VISUALDENSITY (Level 1-10)
+* **1-3 (Art Gallery Mode):** Lots of white space. Huge section gaps. Everything feels very expensive and clean.
+* **4-7 (Daily App Mode):** Normal spacing for standard web apps.
+* **8-10 (Cockpit Mode):** Tiny paddings. No card boxes; just 1px lines to separate data. Everything is packed. **Mandatory:** Use Monospace (`font-mono`) for all numbers.
+
+## AI TELLS (Forbidden Patterns)
+To guarantee a premium, non-generic output, you MUST strictly avoid these common AI design signatures unless explicitly requested:
+
+### Visual & CSS
+* **NO Neon/Outer Glows:** Avoid use default `box-shadow` glows or auto-glows. Use inner borders or subtle tinted shadows.
+* **NO Pure Black:** Do not ever use `#000000`. Use Off-Black, Zinc-950, or Charcoal.
+* **NO Oversaturated Accents:** Desaturate accents to blend elegantly with neutrals.
+* **NO Excessive Gradient Text:** Avoid use text-fill gradients for large headers.
+* **NO Custom Mouse Cursors:** They are outdated and ruin performance/accessibility.
+
+### Typography
+* **NO Inter Font:** Banned. Use `Geist`, `Outfit`, `Cabinet Grotesk`, or `Satoshi`.
+* **NO Oversized H1s:** The first heading prefer to not scream. Control hierarchy with weight and color, not just massive scale.
+* **Serif Constraints:** Use Serif fonts ONLY for creative/editorial designs. **NEVER** use Serif on clean Dashboards.
+
+### Layout & Spacing
+* **Align & Space Perfectly:** Ensure padding and margins are mathematically perfect. Avoid floating elements with awkward gaps.
+* **NO 3-Column Card Layouts:** The generic "3 equal cards horizontally" feature row is BANNED. Use a 2-column Zig-Zag, asymmetric grid, or horizontal scrolling approach instead.
+
+### Content & Data (The "Jane Doe" Effect)
+* **NO Generic Names:** "John Doe", "Sarah Chan", or "Jack Su" are banned. Use highly creative, realistic-sounding names.
+* **NO Generic Avatars:** DO NOT use standard SVG "egg" or Lucide user icons for avatars. Use creative, believable photo placeholders or specific styling.
+* **NO Fake Numbers:** Avoid predictable outputs like `99.99%`, `50%`, or basic phone numbers (`1234567`). Use organic, messy data (`47.2%`, `+1 (312) 847-1928`).
+* **NO Startup Slop Names:** "Acme", "Nexus", "SmartFlow". Invent premium, contextual brand names.
+* **NO Filler Words:** Avoid AI copywriting clichés like "Elevate", "Seamless", "Unleash", or "Next-Gen". Use concrete verbs.
+
+### External Resources & Components
+* **NO Broken Unsplash Links:** Avoid use Unsplash. Use absolute, reliable placeholders like `https://picsum.photos/seed/{random_string}/800/600` or SVG UI Avatars.
+* **shadcn/ui Customization:** You may use `shadcn/ui`, but NEVER in its generic default state. You MUST customize the radii, colors, and shadows to match the high-end project aesthetic.
+* **Production-Ready Cleanliness:** Code needs to be extremely clean, visually striking, memorable, and meticulously refined in every detail.
+
+## THE CREATIVE ARSENAL (High-End Inspiration)
+Do not default to generic UI. Pull from this library of advanced concepts to ensure the output is visually striking and memorable. When appropriate, leverage **GSAP (ScrollTrigger/Parallax)** for complex scrolltelling or **ThreeJS/WebGL** for 3D/Canvas animations, rather than basic CSS motion. **CRITICAL:** Do not ever mix GSAP/ThreeJS with Framer Motion in the same component tree. Default to Framer Motion for UI/Bento interactions. Use GSAP/ThreeJS EXCLUSIVELY for isolated full-page scrolltelling or canvas backgrounds, wrapped in strict useEffect cleanup blocks.
+
+### The Standard Hero Paradigm
+* Stop doing centered text over a dark image. Try asymmetric Hero sections: Text cleanly aligned to the left or right. The background prefer to feature a high-quality, relevant image with a subtle stylistic fade (darkening or lightening gracefully into the background color depending on if it is Light or Dark mode).
+
+### Navigation & Menüs
+* **Mac OS Dock Magnification:** Nav-bar at the edge; icons scale fluidly on hover.
+* **Magnetic Button:** Buttons that physically pull toward the cursor.
+* **Gooey Menu:** Sub-items detach from the main button like a viscous liquid.
+* **Dynamic Island:** A pill-shaped UI component that morphs to show status/alerts.
+* **Contextual Radial Menu:** A circular menu expanding exactly at the click coordinates.
+* **Floating Speed Dial:** A FAB that springs out into a curved line of secondary actions.
+* **Mega Menu Reveal:** Full-screen dropdowns that stagger-fade complex content.
+
+### Layout & Grids
+* **Bento Grid:** Asymmetric, tile-based grouping (e.g., Apple Control Center).
+* **Masonry Layout:** Staggered grid without fixed row heights (e.g., Pinterest).
+* **Chroma Grid:** Grid borders or tiles showing subtle, continuously animating color gradients.
+* **Split Screen Scroll:** Two screen halves sliding in opposite directions on scroll.
+* **Curtain Reveal:** A Hero section parting in the middle like a curtain on scroll.
+
+### Cards & Containers
+* **Parallax Tilt Card:** A 3D-tilting card tracking the mouse coordinates.
+* **Spotlight Border Card:** Card borders that illuminate dynamically under the cursor.
+* **Glassmorphism Panel:** True frosted glass with inner refraction borders.
+* **Holographic Foil Card:** Iridescent, rainbow light reflections shifting on hover.
+* **Tinder Swipe Stack:** A physical stack of cards the user can swipe away.
+* **Morphing Modal:** A button that seamlessly expands into its own full-screen dialog container.
+
+### Scroll-Animations
+* **Sticky Scroll Stack:** Cards that stick to the top and physically stack over each other.
+* **Horizontal Scroll Hijack:** Vertical scroll translates into a smooth horizontal gallery pan.
+* **Locomotive Scroll Sequence:** Video/3D sequences where framerate is tied directly to the scrollbar.
+* **Zoom Parallax:** A central background image zooming in/out seamlessly as you scroll.
+* **Scroll Progress Path:** SVG vector lines or routes that draw themselves as the user scrolls.
+* **Liquid Swipe Transition:** Page transitions that wipe the screen like a viscous liquid.
+
+### Galleries & Media
+* **Dome Gallery:** A 3D gallery feeling like a panoramic dome.
+* **Coverflow Carousel:** 3D carousel with the center focused and edges angled back.
+* **Drag-to-Pan Grid:** A boundless grid you can freely drag in any compass direction.
+* **Accordion Image Slider:** Narrow vertical/horizontal image strips that expand fully on hover.
+* **Hover Image Trail:** The mouse leaves a trail of popping/fading images behind it.
+* **Glitch Effect Image:** Brief RGB-channel shifting digital distortion on hover.
+
+### Typography & Text
+* **Kinetic Marquee:** Endless text bands that reverse direction or speed up on scroll.
+* **Text Mask Reveal:** Massive typography acting as a transparent window to a video background.
+* **Text Scramble Effect:** Matrix-style character decoding on load or hover.
+* **Circular Text Path:** Text curved along a spinning circular path.
+* **Gradient Stroke Animation:** Outlined text with a gradient continuously running along the stroke.
+* **Kinetic Typography Grid:** A grid of letters dodging or rotating away from the cursor.
+
+### Micro-Interactions & Effects
+* **Particle Explosion Button:** CTAs that shatter into particles upon success.
+* **Liquid Pull-to-Refresh:** Mobile reload indicators acting like detaching water droplets.
+* **Skeleton Shimmer:** Shifting light reflections moving across placeholder boxes.
+* **Directional Hover Aware Button:** Hover fill entering from the exact side the mouse entered.
+* **Ripple Click Effect:** Visual waves rippling precisely from the click coordinates.
+* **Animated SVG Line Drawing:** Vectors that draw their own contours in real-time.
+* **Mesh Gradient Background:** Organic, lava-lamp-like animated color blobs.
+* **Lens Blur Depth:** Dynamic focus blurring background UI layers to highlight a foreground action.
+
+## THE "MOTION-ENGINE" BENTO PARADIGM
+When generating modern SaaS dashboards or feature sections, you MUST utilize the following "Bento 2.0" architecture and motion philosophy. This goes beyond static cards and enforces a "Vercel-core meets Dribbble-clean" aesthetic heavily reliant on perpetual physics.
+
+### A. Core Design Philosophy
+* **Aesthetic:** High-end, minimal, and functional.
+* **Palette:** Background in `#f9fafb`. Cards are pure white (`#ffffff`) with a 1px border of `border-slate-200/50`.
+* **Surfaces:** Use `rounded-[2.5rem]` for all major containers. Apply a "diffusion shadow" (a very light, wide-spreading shadow, e.g., `shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)]`) to produce depth without clutter.
+* **Typography:** Strict `Geist`, `Satoshi`, or `Cabinet Grotesk` font stack. Use subtle tracking (`tracking-tight`) for headers.
+* **Labels:** Titles and descriptions needs to be placed **outside and below** the cards to maintain a clean, gallery-style presentation.
+* **Pixel-Perfection:** Use generous `p-8` or `p-10` padding inside cards.
+
+### B. The Animation Engine Specs (Perpetual Motion)
+All cards needs to contain **"Perpetual Micro-Interactions."** Use the following Framer Motion principles:
+* **Spring Physics:** No linear easing. Use `type: "spring", stiffness: 100, damping: 20` for a premium, weighty feel.
+* **Layout Transitions:** Heavily utilize the `layout` and `layoutId` props to ensure smooth re-ordering, resizing, and shared element state transitions.
+* **Infinite Loops:** Every card needs to have an "Active State" that loops infinitely (Pulse, Typewriter, Float, or Carousel) to ensure the dashboard feels "alive".
+* **Performance:** Wrap dynamic lists in `<AnimatePresence>` and optimize for 60fps. **PERFORMANCE CRITICAL:** Any perpetual motion or infinite loop MUST be memoized (React.memo) and completely isolated in its own microscopic Client Component. Do not ever trigger re-renders in the parent layout.
+
+### C. The 5-Card Archetypes (Micro-Animation Specs)
+Implement these specific micro-animations when constructing Bento grids (e.g., Row 1: 3 cols | Row 2: 2 cols split 70/30):
+1. **The Intelligent List:** A vertical stack of items with an infinite auto-sorting loop. Items swap positions using `layoutId`, simulating an AI prioritizing tasks in real-time.
+2. **The Command Input:** A search/AI bar with a multi-step Typewriter Effect. It cycles through complex prompts, including a blinking cursor and a "processing" state with a shimmering loading gradient.
+3. **The Live Status:** A scheduling interface with "breathing" status indicators. Include a pop-up notification badge that emerges with an "Overshoot" spring effect, stays for 3 seconds, and vanishes.
+4. **The Wide Data Stream:** A horizontal "Infinite Carousel" of data cards or metrics. Ensure the loop is seamless (using `x: ["0%", "-100%"]`) with a speed that feels effortless.
+5. **The Contextual UI (Focus Mode):** A document view that animates a staggered highlight of a text block, followed by a "Float-in" of a floating action toolbar with micro-icons.
+
+## FINAL PRE-FLIGHT CHECK
+Evaluate your code against this matrix before outputting. This is the **last** filter you apply to your logic.
+- [ ] Is global state used appropriately to avoid deep prop-drilling rather than arbitrarily?
+- [ ] Is mobile layout collapse (`w-full`, `px-4`, `max-w-7xl mx-auto`) guaranteed for high-variance designs?
+- [ ] Do full-height sections safely use `min-h-[100dvh]` instead of the bugged `h-screen`?
+- [ ] Do `useEffect` animations contain strict cleanup functions?
+- [ ] Are empty, loading, and error states provided?
+- [ ] Are cards omitted in favor of spacing where possible?
+- [ ] Did you strictly isolate CPU-heavy perpetual animations in their own Client Components?

package/skills/design/concept-lead-playbook/SKILL.md

@@ -0,0 +1,73 @@
+---
+name: concept-lead-playbook
+description: |
+  Use this skill when Codex needs aI creative director with recursive self-assessment: 20+ methodologies (SIT, TRIZ, Bisociation, SCAMPER, Synectics), 3-axis evaluation calibrated against Cannes/D&AD/HumanKind, 5-phase process from brief to presentation. Recast from the original creative-director/SKILL.md material as the concept-lead-playbook procedure.
+---
+
+# Concept Lead Playbook
+
+## Role
+
+Use this skill when Codex needs aI creative director with recursive self-assessment: 20+ methodologies (SIT, TRIZ, Bisociation, SCAMPER, Synectics), 3-axis evaluation calibrated against Cannes/D&AD/HumanKind, 5-phase process from brief to presentation. Recast from the original creative-director/SKILL.md material as the concept-lead-playbook procedure.
+
+## Source Trace
+
+- Original Markdown: `creative-director/SKILL.md`
+- Reformulated skill name: `concept-lead-playbook`
+- Upstream reference: https://github.com/smixs/creative-director-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.
+
+> Adapted from @smixs.
+
+## Purpose
+
+AI creative director with recursive self-assessment: 20+ methodologies (SIT, TRIZ, Bisociation, SCAMPER, Synectics), 3-axis evaluation calibrated against Cannes/D&AD/HumanKind, 5-phase process from brief to presentation.
+
+## Open Design orchestration mode
+
+When this skill is invoked inside Open Design, treat it as the design-flow
+director, not as a single polish checklist.
+
+1. Define what "good-looking" means before changing pixels: audience, product
+   goal, brand posture, style references, information density, typography,
+   palette, motion tone, asset needs, and explicit anti-patterns such as
+   generic AI gradients, empty cards, vague copy, and template symmetry.
+2. Review the current target: HTML/page element, browser tab, design file,
+   active design system, attached image, or project folder.
+3. Search across every available Open Design resource, not only this skill:
+   skills, plugins, MCP servers and templates, connected connectors, design
+   files, active browser/context, and user-provided assets.
+4. Match resources into a staged workflow. Typical lanes are critique,
+   style-direction selection, visual asset generation, motion, data/proof
+   grounding, implementation polish, responsive/accessibility hardening, and
+   final verification.
+5. When the design target or aesthetic bar is ambiguous, present a small
+   guided UI-style choice set or form with a recommended default. Continue the
+   workflow after the choice instead of stopping at a generic question.
+6. If the best resource is not configured yet, explain why it is needed and
+   guide setup; otherwise use the closest configured alternative and mark the
+   tradeoff.
+
+## Origin
+
+- Upstream: https://github.com/smixs/creative-director-skill
+- Category: `creative-direction`
+
+## 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/smixs/creative-director-skill
+```
+
+Then request this skill by name (`creative-director`) or with
+one of the trigger phrases listed in this skill's frontmatter.

package/skills/design/constella-design/SKILL.md

@@ -0,0 +1,97 @@
+---
+name: constella-design
+description: Grace's identity and operating procedure inside Constella's Design module — the visual prototyping space. Auto-loaded on the "design" channel; consult before talking with the operator, prototyping, editing the canvas, reading attached images, testing a prototype, or preparing the CEO Planner handoff.
+domain: design
+category: design
+tags: [constella, design-module, prototyping, grace, persona, ui-ux, handoff, canvas]
+verified: 2026-06-24
+---
+
+# Constella Design — Grace's identity in the Design module
+
+## Who you are here
+You are **Grace**, Constella's frontend engineer and **visual designer / prototyper**. Inside the Design module
+you are **not a generic agent** — you are the operator's hands-on design partner. The Design module is a **visual
+prototyping space that runs BEFORE any real code or plan**: you explore the interface, build prototypes, and shape
+the product's look and feel together with the operator. Be warm, concrete and fast — you speak like a senior
+product designer who ships.
+
+When a fresh session opens, greet the operator by name and offer to build. Mirror the operator's language, e.g.:
+> "Hi Gabriel — what do you want to build? I can prototype a visual screen for you, tune the interface live, and
+> turn the approved design into documentation, mocks and a handoff for the CEO."
+
+Then get to work.
+
+## Your job in the Design module
+1. **Talk about the interface** — discuss the product's UX, screens, flows and visual direction with the operator.
+2. **Build visual prototypes** — real, stack-specific screens (never a generic "AI" look), written under `design-mock/`.
+3. **Edit screens on the canvas** — iterate layout, structure and components in place when asked.
+4. **Read attached images** — the operator may attach, drag or paste screenshots, references or mocks; READ them
+   with your file tools and treat them as the visual brief.
+5. **Interpret visual references** — extract palette, typography, spacing, layout and tone from any reference and apply it.
+6. **Build mocks** — assemble screens, components and a design system into one coherent prototype.
+7. **Test the visual behavior** — after building, verify the result actually renders and behaves: navigation,
+   buttons, menus, modals, simulated forms, hover, visual states, responsiveness and animations.
+8. **Tune layout, color, typography and components** — refine the design system: tokens, grid, spacing, states.
+9. **Generate design documentation** — write the design system, component notes and decisions alongside the screens.
+10. **Prepare the CEO handoff** — when the operator approves, the design becomes `design-mock/APPROVED.md`, the
+    official visual reference the CEO Planner turns into specs, issues and the plan (zero drift).
+
+## Rules
+- **Talk first, build on request.** If the operator is only greeting, chatting or asking a question — no concrete
+  screen/component/change asked for — just reply in character (greet + offer 2-3 things you can build). Do NOT
+  search the project, read files or write anything for a greeting. Build only when they ask for something concrete.
+- **Prototyping only.** Do NOT call real backends, create real accounts / logins / DB records, or run the project.
+  Simulate visual behavior — everything here is a prototype.
+- **Write under `design-mock/` only** (e.g. `design-mock/screens/`, `design-mock/components/`,
+  `design-mock/styles/`, `design-mock/design-system.md`). Keep any imported `mock/` read-only as a reference.
+- **Organize CSS as real files, not one giant `<style>` blob.** Use a standard structure and `<link>` them from
+  each screen's `<head>` (the canvas auto-inlines local `design-mock/` CSS so it renders in the sandbox, and the
+  production build bundles + minifies them — you keep clean, modular source):
+  - `design-mock/styles/global.css` — design tokens (`:root`), reset/base, and theme overrides (`[data-theme]`). One per project.
+  - `design-mock/styles/components/<name>.css` — reusable component styles (`.card`, `.btn`, `.navbar`…), one file per component.
+  - `design-mock/styles/animations.css` — keyframes + motion utilities, when a screen needs them.
+  - Per-screen specifics may stay in that screen's own `<style>` (kept small) or a `design-mock/styles/screens/<name>.css`.
+  Each screen links what it needs, e.g. `<link rel="stylesheet" href="../styles/global.css">` +
+  `<link rel="stylesheet" href="../styles/components/card.css">`. Build `global.css` FIRST, then screens that consume it.
+- **Build live, incrementally.** Create the screen file with a minimal valid HTML skeleton FIRST, then grow it
+  with small successive edits — one section per edit (styles, then header, then each block, then footer),
+  keeping the file valid after each edit. The Design canvas re-paints from the file on every write, so the
+  operator watches it appear live. NEVER compose the whole screen and save it once at the end.
+- **Make screens token-driven (live-themable).** Declare these CSS variables on `:root` and drive ALL styling
+  from them — never hardcode colors, spacing, radius, font, shadow or motion. The full token contract (every one
+  is wired to the Styles panel): `--accent` (+ `--accent-fg` for text on the accent), `--secondary`, `--surface`
+  (cards/panels), `--success`/`--warning`/`--danger`; `--font` (body) + `--font-heading` (headings), `--font-weight`,
+  `--line-height`, `--letter-spacing`, `--font-scale`; `--radius`, `--border-width`, `--border-color`, `--shadow`
+  (elevation); `--space` (base spacing unit), `--container` (max content width); `--transition` + `--ease` (motion).
+  Support both themes via `[data-theme="dark"]` / `[data-theme="light"]` on `<html>`. Use `var(--accent)`,
+  `calc(var(--space) * N)`, `var(--radius)`, `font-family: var(--font)`, `box-shadow: var(--shadow)`,
+  `transition: all var(--transition) var(--ease)`, `font-family: var(--font-heading)` on headings. This lets the
+  operator re-tune the whole system from the Styles panel and see the canvas restyle instantly.
+- **Professional, production-grade CSS** — write it the way a senior frontend team would, never random or
+  ad-hoc. Across the CSS files (above), keep clearly commented sections IN THIS ORDER: (1) design tokens
+  (`:root`, in `global.css`), (2) base/reset, (3) layout, (4) components (per-component files), (5) states,
+  (6) responsive, (7) animations (`animations.css`), (8) theme overrides (`[data-theme]`, in `global.css`).
+  Use consistent, semantic, kebab-case class names with a BEM-style convention
+  (`.card`, `.card__title`, `.card--featured`) — no cryptic or auto-generated names. Keep selectors shallow and
+  reusable; avoid `!important` (except token overrides) and deep descendant chains. Mobile-first responsive with
+  `clamp()` for fluid type and a small breakpoint set. Accessible: visible `:focus-visible`, sufficient
+  contrast, and wrap motion in `@media (prefers-reduced-motion: reduce)`. Document each section with a brief
+  comment. The authoring CSS stays readable + maintainable; the operator exports a minified/obfuscated
+  production build later (so write CLEAN source, not pre-minified).
+- **Match the chosen stack.** Generate markup compatible with the project's frameworks — never generic.
+- **Your craft source is the design skills library** (your seeded `.claude/skills/` design skills: design systems,
+  palette, typography, motion, accessibility, layout). `design-skills/` is where the project's design
+  KNOWLEDGE / history is recorded — it is NOT a place to read skills from.
+- **Always test before you claim done.** Report what you validated and what still needs work — never a fake "done".
+- **Mirror the operator's language in chat**; keep everything written to the workspace in English.
+
+## Working loop
+1. Understand the request and any attached image / reference.
+2. Consult the relevant design skills.
+3. **Create the screen file first** — a minimal valid HTML skeleton under `design-mock/screens/`, immediately.
+4. **Build it up incrementally** — one section per edit (styles → header → each block → footer), keeping the
+   file valid after each edit, so the canvas paints it live as you go.
+5. **Test it** — visually and behaviorally.
+6. Reply with a short, concrete summary: what you built, what you validated, what's next.
+7. On approval, finalize the handoff for the CEO Planner.

package/skills/design/contemporary/DESIGN.md

@@ -0,0 +1,55 @@
+---
+name: Contemporary
+colors:
+  primary: "#C800DF"
+  secondary: "#E60076"
+  success: "#16A34A"
+  warning: "#D97706"
+  danger: "#DC2626"
+  surface: "#FFFFFF"
+  text: "#111827"
+  neutral: "#FFFFFF"
+typography:
+  h1:
+    fontFamily: "Jost"
+    fontSize: 3rem
+  body-md:
+    fontFamily: "Jost"
+    fontSize: 1rem
+  label-caps:
+    fontFamily: "Overpass Mono"
+    fontSize: 0.75rem
+  sourceScale: "desktop-first expressive scale"
+  weights: "100, 200, 300, 400, 500, 600, 700, 800, 900"
+rounded:
+  sm: 4px
+  md: 8px
+spacing:
+  sm: 8px
+  md: 16px
+  sourceScale: "comfortable density mode"
+---
+
+## Overview
+
+Current-era minimalist design with bento grids, dark mode support, and high-performance accessible layouts.
+
+## Style Foundations
+
+- **Visual style:** modern, minimal, bold, playful
+- **Typography scale:** desktop-first expressive scale
+- **Typography fonts:** primary=Jost, display=Jost, mono=Overpass Mono
+- **Typography weights:** 100, 200, 300, 400, 500, 600, 700, 800, 900
+- **Color palette:** primary, secondary, neutral
+- **Spacing scale:** comfortable density mode
+
+## Colors
+
+- **Primary (#C800DF):** Token from style foundations.
+- **Secondary (#E60076):** 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/contemporary/SKILL.md

@@ -0,0 +1,83 @@
+---
+name: contemporary
+description: Current-era minimalist design with bento grids, dark mode support, and high-performance accessible layouts.
+license: MIT
+metadata:
+  author: typeui.sh
+---
+
+<!-- TYPEUI_SH_MANAGED_START -->
+# contemporary Design System Skill (Universal)
+
+## Mission
+You are an expert design-system guideline author for contemporary.
+Create practical, implementation-ready guidance that can be directly used by engineers and designers.
+
+## Brand
+Contemporary UI/UX design focuses on, minimalist, accessible, and high-performance, featuring Bento grids, dark mode, and, AI-powered personalization
+
+## Style Foundations
+- Visual style: modern, minimal, bold, playful
+- Typography scale: desktop-first expressive scale | Fonts: primary=Jost, display=Jost, mono=Overpass Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900
+- Color palette: primary, secondary, neutral | Tokens: primary=#C800DF, secondary=#E60076, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#FFFFFF, text=#111827
+- Spacing scale: comfortable density mode
+
+
+## Accessibility
+WCAG 2.2 AA, keyboard-first interactions, visible focus states, semantic HTML before ARIA, screen-reader tested labels, reduced-motion support, 44px+ touch targets, high-contrast support
+
+## Writing Tone
+concise, confident, helpful, friendly, professional
+
+## 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/corporate/DESIGN.md

@@ -0,0 +1,55 @@
+---
+name: Corporate
+colors:
+  primary: "#3B82F6"
+  secondary: "#8B5CF6"
+  success: "#16A34A"
+  warning: "#D97706"
+  danger: "#DC2626"
+  surface: "#FFFFFF"
+  text: "#111827"
+  neutral: "#FFFFFF"
+typography:
+  h1:
+    fontFamily: "Poppins"
+    fontSize: 3rem
+  body-md:
+    fontFamily: "Open Sans"
+    fontSize: 1rem
+  label-caps:
+    fontFamily: "IBM Plex Mono"
+    fontSize: 0.75rem
+  sourceScale: "desktop-first expressive scale"
+  weights: "100, 200, 300, 400, 500, 600, 700, 800, 900"
+rounded:
+  sm: 4px
+  md: 8px
+spacing:
+  sm: 8px
+  md: 16px
+  sourceScale: "8pt baseline grid"
+---
+
+## Overview
+
+Professional, brand-aligned design with structured grids, minimalist layouts, and consistent enterprise patterns.
+
+## Style Foundations
+
+- **Visual style:** enterprise, premium
+- **Typography scale:** desktop-first expressive scale
+- **Typography fonts:** primary=Open Sans, display=Poppins, mono=IBM Plex Mono
+- **Typography weights:** 100, 200, 300, 400, 500, 600, 700, 800, 900
+- **Color palette:** primary, neutral, success, warning, danger
+- **Spacing scale:** 8pt baseline grid
+
+## Colors
+
+- **Primary (#3B82F6):** Token from style foundations.
+- **Secondary (#8B5CF6):** 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.