constellai 0.3.0

package/skills/design/futuristic/SKILL.md

@@ -0,0 +1,83 @@
+---
+name: futuristic
+description: Forward-looking design with tech-inspired typography, modern layouts, and a sleek, innovation-driven aesthetic.
+license: MIT
+metadata:
+  author: typeui.sh
+---
+
+<!-- TYPEUI_SH_MANAGED_START -->
+# Futuristic Design System Skill (Universal)
+
+## Mission
+You are an expert design-system guideline author for Futuristic.
+Create practical, implementation-ready guidance that can be directly used by engineers and designers.
+
+## Brand
+
+
+## Style Foundations
+- Visual style: modern
+- Typography scale: desktop-first expressive scale | Fonts: primary=Roboto, display=Audiowide, mono=Anonymous Pro | weights=100, 200, 300, 400, 500, 600, 700, 800, 900
+- Color palette: primary, neutral, success, warning, danger | Tokens: primary=#3B82F6, secondary=#8B5CF6, 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/generative-visuals-playbook/SKILL.md

@@ -0,0 +1,48 @@
+---
+name: generative-visuals-playbook
+description: |
+  Use this skill when Codex needs produce generative art using p5.js with seeded randomness so every render is reproducible. Helpful for procedural posters, motion-style stills, and artistic frame studies. Recast from the original algorithmic-art/SKILL.md material as the generative-visuals-playbook procedure.
+---
+
+# Generative Visuals Playbook
+
+## Role
+
+Use this skill when Codex needs produce generative art using p5.js with seeded randomness so every render is reproducible. Helpful for procedural posters, motion-style stills, and artistic frame studies. Recast from the original algorithmic-art/SKILL.md material as the generative-visuals-playbook procedure.
+
+## Source Trace
+
+- Original Markdown: `algorithmic-art/SKILL.md`
+- Reformulated skill name: `generative-visuals-playbook`
+- Upstream reference: https://github.com/anthropics/skills/tree/main/skills/algorithmic-art
+- 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 Anthropic's official skills repository.
+
+## Purpose
+
+Produce generative art using p5.js with seeded randomness so every render is reproducible. Helpful for procedural posters, motion-style stills, and artistic frame studies.
+
+## Origin
+
+- Upstream: https://github.com/anthropics/skills/tree/main/skills/algorithmic-art
+- 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/anthropics/skills/tree/main/skills/algorithmic-art
+```
+
+Then request this skill by name (`algorithmic-art`) or with
+one of the trigger phrases listed in this skill's frontmatter.

package/skills/design/gif-sticker-maker-playbook/SKILL.md

@@ -0,0 +1,48 @@
+---
+name: gif-sticker-maker-playbook
+description: |
+  Use this skill when Codex needs convert photos into animated GIF stickers in Funko Pop / Pop Mart style via the MiniMax API. Helpful for personalized chat stickers and avatar packs. Recast from the original gif-sticker-maker/SKILL.md material as the gif-sticker-maker-playbook procedure.
+---
+
+# Gif Sticker Maker Playbook
+
+## Role
+
+Use this skill when Codex needs convert photos into animated GIF stickers in Funko Pop / Pop Mart style via the MiniMax API. Helpful for personalized chat stickers and avatar packs. Recast from the original gif-sticker-maker/SKILL.md material as the gif-sticker-maker-playbook procedure.
+
+## Source Trace
+
+- Original Markdown: `gif-sticker-maker/SKILL.md`
+- Reformulated skill name: `gif-sticker-maker-playbook`
+- Upstream reference: https://github.com/MiniMax-AI/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 MiniMax AI team.
+
+## Purpose
+
+Convert photos into animated GIF stickers in Funko Pop / Pop Mart style via the MiniMax API. Helpful for personalized chat stickers and avatar packs.
+
+## Origin
+
+- Upstream: https://github.com/MiniMax-AI/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/MiniMax-AI/skills
+```
+
+Then request this skill by name (`gif-sticker-maker`) or with
+one of the trigger phrases listed in this skill's frontmatter.

package/skills/design/glassmorphism/DESIGN.md

@@ -0,0 +1,55 @@
+---
+name: Glassmorphism
+colors:
+  primary: "#1856FF"
+  secondary: "#3A344E"
+  success: "#07CA6B"
+  warning: "#E89558"
+  danger: "#EA2143"
+  surface: "#FFFFFF"
+  text: "#141414"
+  neutral: "#FFFFFF"
+typography:
+  h1:
+    fontFamily: "Plus Jakarta Sans"
+    fontSize: 3rem
+  body-md:
+    fontFamily: "Plus Jakarta Sans"
+    fontSize: 1rem
+  label-caps:
+    fontFamily: "JetBrains Mono"
+    fontSize: 0.75rem
+  sourceScale: "mobile-first compact 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
+
+Frosted glass effect with translucent layers, subtle blur, and luminous borders for depth and modern elegance.
+
+## Style Foundations
+
+- **Visual style:** clean, high-contrast, bold, enterprise, liquidglass effect, glassmorphism
+- **Typography scale:** mobile-first compact scale
+- **Typography fonts:** primary=Plus Jakarta Sans, display=Plus Jakarta Sans, mono=JetBrains Mono
+- **Typography weights:** 100, 200, 300, 400, 500, 600, 700, 800, 900
+- **Color palette:** primary, neutral, success, warning, danger, info, surface/subtle layers
+- **Spacing scale:** comfortable density mode
+
+## Colors
+
+- **Primary (#1856FF):** Token from style foundations.
+- **Secondary (#3A344E):** Token from style foundations.
+- **Success (#07CA6B):** Token from style foundations.
+- **Warning (#E89558):** Token from style foundations.
+- **Danger (#EA2143):** Token from style foundations.
+- **Surface (#FFFFFF):** Token from style foundations.
+- **Text (#141414):** Token from style foundations.
+- **Neutral (#FFFFFF):** Derived from the surface token for official format compatibility.

package/skills/design/glassmorphism/SKILL.md

@@ -0,0 +1,86 @@
+---
+name: glassmorphism
+description: Frosted glass effect with translucent layers, subtle blur, and luminous borders for depth and modern elegance.
+license: MIT
+metadata:
+  author: typeui.sh
+---
+
+<!-- TYPEUI_SH_MANAGED_START -->
+# Glassmorphism Design System Skill (Universal)
+
+## Mission
+You are an expert design-system guideline author for Glassmorphism.
+Create practical, implementation-ready guidance that can be directly used by engineers and designers.
+
+## Brand
+provide fast, reliable communication for individuals, teams, and communities while maintaining a clean interface and high performance across desktop environments.
+
+## Style Foundations
+- Visual style: clean, high-contrast, bold, enterprise, liquidglass effect, glassmorphism
+- Typography scale: mobile-first compact scale | Fonts: primary=Plus Jakarta Sans, display=Plus Jakarta Sans, mono=JetBrains Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900
+- Color palette: primary, neutral, success, warning, danger, info, surface/subtle layers | Tokens: primary=#1856FF, secondary=#3A344E, success=#07CA6B, warning=#E89558, danger=#EA2143, surface=#FFFFFF, text=#141414
+- Spacing scale: comfortable density mode
+
+- bento cards
+
+## Accessibility
+WCAG 2.2 AA, keyboard-first interactions, visible focus states
+
+## Writing Tone
+concise, confident, helpful, clear, 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 decorative motion without purpose
+- avoid ambiguous labels
+- avoid mixing multiple visual metaphors
+
+## 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/gpt-taste-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/gpt-taste-playbook/SKILL.md

@@ -0,0 +1,91 @@
+---
+name: gpt-taste-playbook
+description: |
+  Use this skill when Codex needs elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing. Recast from the original gpt-tasteskill/SKILL.md material as the gpt-taste-playbook procedure.
+---
+
+# Gpt Taste Playbook
+
+## Role
+
+Use this skill when Codex needs elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing. Recast from the original gpt-tasteskill/SKILL.md material as the gpt-taste-playbook procedure.
+
+## Source Trace
+
+- Original Markdown: `gpt-tasteskill/SKILL.md`
+- Reformulated skill name: `gpt-taste-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.
+
+You are an elite, award-winning frontend design engineer. Standard LLMs possess severe statistical biases: they compose massive 6-line wrapped headings by using narrow containers, leave ugly empty gaps in bento grids, use cheap meta-labels ("QUESTION 05", "SECTION 01"), output invisible button text, and endlessly repeat the same Left/Right layouts.
+
+Your goal is to aggressively break these defaults. Your outputs needs to be highly creative, perfectly spaced, motion-rich (GSAP), mathematically flawless in grid execution, and heavily rely on varied, high-end assets.
+
+DO NOT USE EMOJIS IN YOUR CODE, COMMENTS, OR OUTPUT. Maintain strictly professional formatting.
+
+## PYTHON-DRIVEN TRUE RANDOMIZATION (BREAKING THE LOOP)
+LLMs are inherently lazy and consistently pick the first layout option. To prevent this, you MUST simulate a Python script execution in your `<design_plan>` before writing any UI code.
+Use a deterministic seed (e.g., character count of the user prompt modulo math) to simulate `random.choice()` and strictly select:
+- 1 Hero Architecture (from Section 3)
+- 1 Typography Stack (Satoshi, Cabinet Grotesk, Outfit, or Geist. NEVER Inter)
+- 3 Unique Component Architectures (from Section 6)
+- 2 Advanced GSAP Paradigms (from Section 5)
+You are forbidden from defaulting to the same UI twice. You needs to follow the exact output of your simulated Python randomization.
+
+## AIDA STRUCTURE & SPACING
+Every page MUST begin with a highly creative, premium Navigation Bar (e.g., floating glass pill, or minimal split nav).
+The rest of the page MUST follow the AIDA framework:
+- **Attention (Hero):** Cinematic, clean, wide layout.
+- **Interest (Features/Bento):** High-density, mathematically perfect grid or interactive typographic components.
+- **Desire (GSAP Scroll/Media):** Pinned sections, horizontal scroll, or text-reveals.
+- **Action (Footer/Pricing):** Massive, high-contrast CTA and clean footer links.
+**SPACING RULE:** Add huge vertical padding between all major sections (e.g., `py-32 md:py-48`). Sections needs to feel like distinct, cinematic chapters. Avoid cramp elements together.
+
+## HERO ARCHITECTURE & THE 2-LINE IRON RULE
+The Hero needs to breathe. It needs to NOT be a narrow, 6-line text wall.
+- **The Container Width Fix:** You MUST use ultra-wide containers for the H1 (e.g., `max-w-5xl`, `max-w-6xl`, `w-full`). Allow the words to flow horizontally.
+- **The Line Limit:** The H1 MUST NEVER exceed 2 to 3 lines. 4, 5, or 6 lines is a catastrophic failure. Make the font size smaller (`clamp(3rem, 5vw, 5.5rem)`) and the container wider to ensure this.
+- **Hero Layout Options (Randomly Assigned via Python):**
+  1. *Cinematic Center (Highly Preferred):* Text perfectly centered, massive width. Below the text, exactly two high-contrast CTAs. Below the CTAs or behind everything, a stunning, full-bleed background image with a dark radial wash.
+  2. *Artistic Asymmetry:* Text offset to the left, with an artistic floating image overlapping the text from the bottom right.
+  3. *Editorial Split:* Text left, image right, but with massive negative space.
+- **Button Contrast:** Buttons needs to be perfectly legible. Dark background = white text. Light background = dark text. Invisible text is a failure.
+- **BANNED IN HERO:** Do NOT use arbitrary floating stamp/badge icons on the text. Do NOT use pill-tags under the hero. Do NOT place raw data/stats in the hero.
+
+## THE GAPLESS BENTO GRID
+- **Zero Empty Space in Grids:** LLMs notoriously leave blank, dead cells in CSS grids. You MUST use Tailwind's `grid-flow-dense` (`grid-auto-flow: dense`) on every Bento Grid. You needs to mathematically verify that your `col-span` and `row-span` values interlock perfectly. No grid shall have a missing corner or empty void.
+- **Card Restraint:** Avoid use too many cards. 3 to 5 highly intentional, beautifully styled cards are better than 8 messy ones. Fill them with a mix of large imagery, dense typography, or CSS effects.
+
+## ADVANCED GSAP MOTION & HOVER PHYSICS
+Static interfaces are strictly forbidden. You needs to write real GSAP (`@gsap/react`, `ScrollTrigger`).
+- **Hover Physics:** Every clickable card and image needs to react. Use `group-hover:scale-105 transition-transform duration-700 ease-out` inside `overflow-hidden` containers.
+- **Scroll Pinning (GSAP Split):** Pin a section title on the left (`ScrollTrigger pin: true`) while a gallery of elements scrolls upwards on the right side.
+- **Image Scale & Fade Scroll:** Images needs to start small (`scale: 0.8`). As they scroll into view, they grow to `scale: 1.0`. As they scroll out of view, they smoothly darken and fade out (`opacity: 0.2`).
+- **Scrubbing Text Reveals:** Opacity of central paragraph words starts at 0.1 and scrubs to 1.0 sequentially as the user scrolls.
+- **Card Stacking:** Cards overlap and stack on top of each other dynamically from the bottom as the user scrolls down.
+
+## COMPONENT ARSENAL & CREATIVITY
+Select components from this arsenal based on your randomization:
+- **Inline Typography Images:** Embed small, pill-shaped images directly INSIDE massive headings. Example: `I shape <span className="inline-block w-24 h-10 rounded-full align-middle bg-cover bg-center mx-2" style={{backgroundImage: 'url(...)'}}></span> digital spaces.`
+- **Horizontal Accordions:** Vertical slices that expand horizontally on hover to reveal content and imagery.
+- **Infinite Marquee (Trusted Partners):** Smooth, continuously scrolling rows of authentic `@phosphor-icons/react` or large typography.
+- **Feedback/Testimonial Carousel:** Clean, overlapping portrait images next to minimalist typography quotes, controlled by subtle arrows.
+
+## CONTENT, ASSETS & STRICT BANS
+- **The Meta-Label Ban:** BANNED FOREVER are labels like "SECTION 01", "SECTION 04", "QUESTION 05", "ABOUT US". Remove them entirely. They look cheap and unprofessional.
+- **Image Context & Style:** Use `https://picsum.photos/seed/{keyword}/1920/1080` and match the keyword to the vibe. Apply sophisticated CSS filters (`grayscale`, `mix-blend-luminosity`, `opacity-90`, `contrast-125`) so they avoid look like boring stock photos.
+- **Creative Backgrounds:** Inject subtle, professional ambient design. Use deep radial blurs, grainy mesh gradients, or shifting dark overlays. Avoid flat, boring colors.
+- **Horizontal Scroll Bug:** Wrap the entire page in `<main className="overflow-x-hidden w-full max-w-full">` to absolutely prevent horizontal scrollbars caused by off-screen animations.
+
+## MANDATORY PRE-FLIGHT <designplan>
+Before writing ANY React/UI code, you MUST output a `<design_plan>` block containing:
+1. **Python RNG Execution:** Write a 3-line mock Python output showing the deterministic selection of your Hero Layout, Component Arsenal, GSAP animations, and Fonts based on the prompt's character count.
+2. **AIDA Check:** Confirm the page contains Navigation, Attention (Hero), Interest (Bento), Desire (GSAP), Action (Footer).
+3. **Hero Math Verification:** Explicitly state the `max-w` class you are applying to the H1 to GUARANTEE it will flow horizontally in 2-3 lines. Confirm NO stamp icons or spam tags exist.
+4. **Bento Density Verification:** Prove mathematically that your grid columns and rows leave zero empty spaces and `grid-flow-dense` is applied.
+5. **Label Sweep & Button Check:** Confirm no cheap meta-labels ("QUESTION 05") exist, and button text contrast is perfect.
+Only output the UI code after this rigorous verification is complete.

package/skills/design/gradient/DESIGN.md

@@ -0,0 +1,55 @@
+---
+name: Gradient
+colors:
+  primary: "#990FFA"
+  secondary: "#E60076"
+  success: "#16A34A"
+  warning: "#D97706"
+  danger: "#DC2626"
+  surface: "#FFFFFF"
+  text: "#111827"
+  neutral: "#FFFFFF"
+typography:
+  h1:
+    fontFamily: "Space Grotesk"
+    fontSize: 2.25rem
+  body-md:
+    fontFamily: "Montserrat"
+    fontSize: 1rem
+  label-caps:
+    fontFamily: "JetBrains Mono"
+    fontSize: 0.75rem
+  sourceScale: "12/14/16/18/24/30/36"
+  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
+
+Smooth color transitions and gradient-rich surfaces for modern, playful interfaces with visual depth.
+
+## Style Foundations
+
+- **Visual style:** modern, playful
+- **Typography scale:** 12/14/16/18/24/30/36
+- **Typography fonts:** primary=Montserrat, display=Space Grotesk, mono=JetBrains Mono
+- **Typography weights:** 100, 200, 300, 400, 500, 600, 700, 800, 900
+- **Color palette:** primary, secondary, neutral, success, warning, danger
+- **Spacing scale:** 8pt baseline grid
+
+## Colors
+
+- **Primary (#990FFA):** 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/gradient/SKILL.md

@@ -0,0 +1,83 @@
+---
+name: gradient
+description: Smooth color transitions and gradient-rich surfaces for modern, playful interfaces with visual depth.
+license: MIT
+metadata:
+  author: typeui.sh
+---
+
+<!-- TYPEUI_SH_MANAGED_START -->
+# Gradient Design System Skill (Universal)
+
+## Mission
+You are an expert design-system guideline author for Gradient.
+Create practical, implementation-ready guidance that can be directly used by engineers and designers.
+
+## Brand
+Gradient design style
+
+## Style Foundations
+- Visual style: modern, playful
+- Typography scale: 12/14/16/18/24/30/36 | Fonts: primary=Montserrat, display=Space Grotesk, mono=JetBrains Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900
+- Color palette: primary, secondary, neutral, success, warning, danger | Tokens: primary=#990FFA, secondary=#E60076, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#FFFFFF, text=#111827
+- Spacing scale: 8pt baseline grid
+
+
+## Accessibility
+WCAG 2.2 AA, keyboard-first interactions, visible focus states, semantic HTML before ARIA, screen-reader tested labels, 44px+ touch targets
+
+## 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/gradients/SKILL.md

@@ -0,0 +1,59 @@
+---
+name: gradients
+description: Tasteful CSS gradients — linear, radial, conic, repeating, and layered meshes; consult when adding depth or color washes to backgrounds.
+domain: design
+category: design
+tags: [css, gradients, backgrounds, color, mesh]
+official_sources:
+  - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients
+  - https://developer.mozilla.org/en-US/docs/Web/CSS/gradient
+verified: 2026-06-16
+---
+
+# Gradients
+
+## Overview
+CSS gradients are image-type values that transition smoothly between colors without raster assets, used for backgrounds, fills, and layered "mesh" effects. They are widely available (baseline since 2015). MDN documents the gradient data type and a practical usage guide. Read this when adding color washes, subtle depth, or decorative backgrounds in CSS.
+
+## Official sources
+- MDN — Using CSS gradients (guide): https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients
+- MDN — `<gradient>` data type: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient
+
+## Core concepts
+- **linear-gradient()** — colors progress along a straight line at a given angle or direction (MDN gradient).
+- **radial-gradient()** — colors radiate outward from a center origin (MDN gradient).
+- **conic-gradient()** — colors transition around a center point, useful for pie charts and color wheels (MDN gradient).
+- **Repeating variants** — `repeating-linear-gradient()`, `repeating-radial-gradient()`, `repeating-conic-gradient()` tile a gradient to fill the area (MDN gradient).
+- **Color stops & hints** — positions control where colors land; hints adjust the midpoint of interpolation (MDN Using gradients).
+- **Layering / meshes** — multiple gradients stacked in one `background` (comma-separated) create mesh-like blends (MDN Using gradients).
+- **Premultiplied interpolation** — gradients interpolate in alpha-premultiplied space to avoid muddy gray transitions (MDN gradient).
+
+## Best practices
+- Stack several positioned radial gradients to approximate a soft "mesh" without images (MDN Using gradients — overlaying gradients).
+- Place explicit color stops to control band placement and create hard lines when desired (MDN Using gradients).
+- Use `background-blend-mode` to mix layered gradients for richer results (MDN Using gradients).
+- When fading to transparent, beware default interpolation muddiness — premultiplied space mitigates it, but verify the midpoint (MDN gradient).
+
+## Common pitfalls
+- Fading a color to `transparent` and getting a gray haze → fade to the same hue with `0` alpha (e.g., `rgb(0 0 0 / 0)`) instead of the keyword (MDN gradient interpolation note).
+- Overusing high-contrast gradients behind text → keep washes subtle and check contrast of overlaid content.
+- Forgetting repeating gradients exist for patterns → use `repeating-*` instead of manually duplicating stops (MDN gradient).
+
+## Examples
+```css
+/* Layered "mesh": multiple soft radial gradients stacked */
+.hero {
+  background:
+    radial-gradient(40rem 40rem at 10% 20%, #6d5efc55, transparent 60%),
+    radial-gradient(30rem 30rem at 90% 30%, #00d4ff44, transparent 60%),
+    linear-gradient(160deg, #0b1020, #131a33);
+}
+```
+
+## Further reading
+- MDN Using CSS gradients (overlaying, hints, blending): https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients
+- MDN `<gradient>` reference: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient
+
+## Related skills
+- ../css-techniques — backgrounds and modern CSS context
+- ../color-and-typography — choosing harmonious, accessible colors