Skip to main content
xaem-theme-ui Two-pass theme generation and code translation pipeline. Pass 1 generates high-entropy visual themes (colour palettes, glow intensities, animation timing, typography weights). Pass 2 translates themes into CSS variables, TypeScript design tokens, Tailwind config, and Framer Motion presets. Complements scientific-luxury by handling creative generation before constraint enforcement.
설치로 이동 Skills Marketplace 커뮤니티가 만든 AI 스킬을 발견하고 탐색하세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/CleanExpo/NodeJS-Starter-V1 --skill xaem-theme-ui명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
Zip 다운로드 다운로드 중... 이 저장소의 다른 Skills Route complex requests to the right specialist agent or chain of agents. This skill acts as the central brain of an agent swarm — it analyses what the user needs, determines which specialist domain(s) are required, and coordinates parallel or sequential agent execution. Use this skill when a request spans multiple domains (e.g., "research competitors and create a pitch deck"), when you need to decide which specialist should handle an ambiguous request, or when a task requires a multi-step pipeline across different skills. Triggers on: multi-step requests, cross-domain tasks, "coordinate", "plan this out", "I need help with multiple things", or any complex request that touches more than one specialist area. Also triggers when the user seems unsure which tool or approach to use.
>-
Hybrid DAG execution primitive combining deterministic and agentic nodes with hard iteration caps
id xaem-theme-ui name xaem-theme-ui type skill version 1.0.0 created 20/03/2026 modified 20/03/2026 status active metadata {"author":"NodeJS-Starter-V1","version":"1.0.0","locale":"en-AU"} description Two-pass theme generation and code translation pipeline. Pass 1 generates high-entropy visual themes (colour palettes, glow intensities, animation timing, typography weights). Pass 2 translates themes into CSS variables, TypeScript design tokens, Tailwind config, and Framer Motion presets. Complements scientific-luxury by handling creative generation before constraint enforcement.
context fork
XAEM Theme UI - Theme Generation & Code Translation
Two-pass pipeline for generating high-entropy visual themes and translating them into implementable code. Works upstream of scientific-luxury constraint enforcement.
Description
XAEM Theme UI adds a creative generation layer to the design system. While scientific-luxury enforces structural constraints (OLED black, 0.5px borders, rounded-sm, physics-based easings), it does not generate themes. This skill fills that gap with a two-pass pipeline:
Pass 1 (Generate) : Create high-entropy visual themes -- spectral colour palettes, glow intensities, animation timing scales, typography weight distributions, opacity hierarchiesPass 2 (Translate) : Convert generated themes into implementable code -- CSS variables, TypeScript design tokens, Tailwind config extensions, Framer Motion preset overrides, component style maps
The structural skeleton remains immutable. Only the visual skin is customisable.
When to Apply
Positive Triggers
Generating new colour palettes or theme variations
Creating design tokens for a new feature area
Building theme presets (dark variants, branded themes)
User mentions: "theme", "palette", "colour scheme", "design tokens", "generate theme"
Translating a mood board or colour brief into code
Customising glow intensities, animation timing, or opacity scales
Negative Triggers
Enforcing existing design constraints (use scientific-luxury instead)
Reviewing component layout compliance (use scientific-luxury instead)
Optimising algorithm performance (use council-of-logic instead)
Writing backend logic, API routes, or database schemas
The Two Laws
Law 1: Generate Then Translate
Every theme goes through both passes sequentially. Never ship a palette without its code translation. Never write design token code without a generation rationale.
Law 2: Never Violate Structural Constraints
The following are immutable and cannot be overridden by any theme:
Constraint Locked Value Reason Background #050505 (OLED Black)Foundation of visual hierarchy
Border width 0.5pxSingle-pixel precision
Border radius rounded-sm (2px)Sharp, professional appearance
Animation engine Framer Motion only Physics-based motion
Easing curves Physics-based (outExpo, snappy, etc.) No linear transitions
Layout pattern Timeline / asymmetrical No symmetrical card grids
Status icons Breathing orbs No Lucide/FontAwesome for status
Pass 1: Theme Generation
1.1 Colour Palette Generation Every theme defines exactly six spectral colours mapped to semantic roles:
Role Semantic Purpose Default Hex Primary Active, in-progress, CTA #00F5FFSuccess Completed, approved, positive #00FF88Warning Verification, awaiting, caution #FFB800Danger Error, failed, rejected #FF4444Accent Escalation, human intervention #FF00FFNeutral Pending, inactive, disabled #6B7280
Palette Strategies Analogous -- Colours within 30 degrees on the colour wheel. Produces harmonious, low-contrast themes suited for ambient dashboards.
Example: Primary #00F5FF → Success #00FFC8 → Warning #88FF00
Complementary -- Pairs colours from opposite sides of the wheel. High contrast, suited for alert-heavy interfaces.
Example: Primary #00F5FF → Accent #FF0A55
Triadic -- Three colours evenly spaced at 120 degrees. Balanced vibrancy for data-rich views.
Example: Primary #00F5FF → Warning #FF8800 → Accent #AA00FF
Palette Constraints
All colours must have sufficient contrast against #050505 (minimum 4.5:1 for text)
No pastel or desaturated colours (saturation must be >= 70%)
No pure white (#FFFFFF) as a spectral colour
Each colour must be visually distinct at 50% opacity over OLED black
1.2 Glow Intensity Curves Glow is the primary visual feedback mechanism. Three intensity tiers:
Tier Inner Opacity Outer Opacity Spread (px) Use Case Low 20% 10% 20 Subtle ambient presence Medium 40% 20% 40 Default interactive High 60% 30% 60 Alert, active focus
Themes may adjust these values within these bounds:
Inner opacity: 15%--65%
Outer opacity: 8%--35%
Spread: 12px--80px
1.3 Animation Timing Scale Themes define a timing scale with six duration values:
Token Default (s) Range (s) Purpose fast0.2 0.15--0.3 Micro-interactions normal0.4 0.3--0.6 Standard transitions slow0.6 0.5--0.9 Deliberate, emphasised breathe2.0 1.5--3.0 Breathing pulse loops pulse1.5 1.0--2.5 Glow pulse cycles ambient3.0 2.0--4.0 Background ambient effects
All durations must use physics-based easing. Linear timing is banned .
1.4 Typography Weight Distribution Themes select from the permitted weight range:
Token Default Range Usage heroWeight200 100--300 Hero titles titleWeight300 200--400 Section headings bodyWeight400 300--500 Body text dataWeight500 400--600 Monospace data labelWeight400 300--500 Uppercase labels
Font families are locked : JetBrains Mono (data), Inter/SF Pro (editorial).
1.5 Opacity Hierarchy Tuning Themes define a six-step text opacity scale and a three-step border opacity scale:
Text: primary(0.85-0.95) → secondary(0.65-0.75) → tertiary(0.45-0.55)
→ muted(0.35-0.45) → subtle(0.25-0.35) → ghost(0.15-0.25)
Border: visible(0.08-0.12) → subtle(0.04-0.08) → ghost(0.02-0.04)
Pass 2: Code Translation
2.1 CSS Variable Output :root {
--spectral-primary : #00F5FF ;
--spectral-success : #00FF88 ;
--spectral-warning : #FFB800 ;
--spectral-danger : #FF4444 ;
--spectral-accent : #FF00FF ;
--spectral-neutral : #6B7280 ;
--glow-low-inner : 20 ;
--glow-low-outer : 10 ;
--glow-med-inner : 40 ;
--glow-med-outer : 20 ;
--glow-high-inner : 60 ;
--glow-high-outer : 30 ;
--duration-fast : 0.2s ;
--duration-normal : 0.4s ;
--duration-slow : 0.6s ;
--duration-breathe : 2s ;
--duration-pulse : 1.5s ;
--duration-ambient : 3s ;
--text-primary : rgba (255 , 255 , 255 , 0.9 );
--text-secondary : rgba (255 , 255 , 255 , 0.7 );
--text-tertiary : rgba (255 , 255 , 255 , 0.5 );
--text-muted : rgba (255 , 255 , 255 , 0.4 );
--text-subtle : rgba (255 , 255 , 255 , 0.3 );
--text-ghost : rgba (255 , 255 , 255 , 0.2 );
--border-visible : rgba (255 , 255 , 255 , 0.1 );
--border-subtle : rgba (255 , 255 , 255 , 0.06 );
--border-ghost : rgba (255 , 255 , 255 , 0.03 );
}
2.2 TypeScript Design Token File export const THEME = {
spectral : {
primary : '#00F5FF' ,
success : '#00FF88' ,
warning : '#FFB800' ,
danger : '#FF4444' ,
accent : '#FF00FF' ,
neutral : '#6B7280' ,
},
glow : {
low : { inner : '20' , outer : '10' , spread : 20 },
medium : { inner : '40' , outer : '20' , spread : 40 },
high : { inner : '60' , outer : '30' , spread : 60 },
},
durations : {
fast : 0.2 ,
normal : 0.4 ,
slow : 0.6 ,
breathe : 2.0 ,
pulse : 1.5 ,
ambient : 3.0 ,
},
weights : {
hero : 200 ,
title : 300 ,
body : 400 ,
data : 500 ,
label : 400 ,
},
} as const ;
2.3 Tailwind Theme Extension
{
colors : {
spectral : {
primary : 'var(--spectral-primary)' ,
success : 'var(--spectral-success)' ,
warning : 'var(--spectral-warning)' ,
danger : 'var(--spectral-danger)' ,
accent : 'var(--spectral-accent)' ,
neutral : 'var(--spectral-neutral)' ,
},
},
transitionDuration : {
fast : 'var(--duration-fast)' ,
normal : 'var(--duration-normal)' ,
slow : 'var(--duration-slow)' ,
},
}
2.4 Framer Motion Preset Overrides import { THEME } from './design-tokens' ;
export const themeMotion = {
fadeInLeft : {
initial : { opacity : 0 , x : -20 },
animate : { opacity : 1 , x : 0 },
transition : {
duration : THEME .durations .normal ,
ease : [0.19 , 1 , 0.22 , 1 ],
},
},
breathing : {
animate : { opacity : [1 , 0.6 , 1 ], scale : [1 , 1.05 , 1 ] },
transition : {
duration : THEME .durations .breathe ,
repeat : Infinity ,
ease : 'easeInOut' ,
},
},
glowPulse : (colour : string ({
animate : {
boxShadow : [
`0 0 0 ${colour} 00` ,
`0 0 ${THEME.glow.medium.spread} px ${colour} ${THEME.glow.medium.inner} ` ,
`0 0 0 ${colour} 00` ,
],
},
transition : { duration : THEME .durations .pulse , repeat : Infinity },
}),
};
2.5 Status Colour Mapping import { THEME } from './design-tokens' ;
export const STATUS_MAP = {
pending : THEME .spectral .neutral ,
in_progress : THEME .spectral .primary ,
awaiting_verification : THEME .spectral .warning ,
verification_in_progress : THEME .spectral .warning ,
verification_passed : THEME .spectral .success ,
verification_failed : THEME .spectral .danger ,
completed : THEME .spectral .success ,
failed : THEME .spectral .danger ,
blocked : THEME .spectral .warning ,
escalated_to_human : THEME .spectral .accent ,
} as const ;
Existing Design Tokens Reference The current baseline lives at apps/web/lib/design-tokens.ts. Key exports:
SPECTRAL -- Six-colour palette (cyan, emerald, amber, red, magenta, grey)BACKGROUNDS -- OLED black foundation with elevation stepsTEXT -- Six-step text opacity hierarchyBORDERS -- Three-step border opacity hierarchyEASINGS -- Four physics-based cubic-bezier curvesDURATIONS -- Six animation duration tokensMOTION_PRESETS -- Framer Motion animation presetsTW -- Tailwind class helper constants All generated themes must be compatible with this token structure.
Theme Presets
Scientific Luxury (Default) The baseline theme. All values match apps/web/lib/design-tokens.ts.
Primary: #00F5FF (Cyan) Success: #00FF88 (Emerald)
Warning: #FFB800 (Amber) Danger: #FF4444 (Red)
Accent: #FF00FF (Magenta) Neutral: #6B7280 (Grey)
Glow: standard | Timing: standard | Weights: standard
Midnight Aurora Cool-shifted palette with extended glow spread for ambient dashboards.
Primary: #00D4FF (Ice Blue) Success: #00E87A (Mint)
Warning: #FF9F00 (Deep Amber) Danger: #FF3355 (Crimson)
Accent: #CC44FF (Violet) Neutral: #5A6270 (Slate)
Glow: high-spread (50px med) Timing: slower (+20%)
Weights: lighter (hero 100, title 200)
Solar Flare Warm-shifted palette with snappy timing for alert-dense interfaces.
Primary: #FFAA00 (Solar Gold) Success: #44FF66 (Neon Green)
Warning: #FF6600 (Flame) Danger: #FF2222 (Hot Red)
Accent: #FF44AA (Hot Pink) Neutral: #7A7A80 (Warm Grey)
Glow: tight (spread 16px) Timing: faster (-15%)
Weights: heavier (data 600, title 400)
Deep Ocean Desaturated blue-green palette with slow, ambient timing for monitoring views.
Primary: #0099CC (Deep Teal) Success: #00CC99 (Sea Green)
Warning: #CCAA00 (Muted Gold) Danger: #CC3344 (Muted Red)
Accent: #9944CC (Deep Purple) Neutral: #556677 (Ocean Grey)
Glow: diffuse (spread 70px) Timing: slowest (+30%)
Weights: standard
Anti-Patterns Anti-Pattern Why It Fails Correct Approach Overriding #050505 background in theme config Breaks OLED black foundation Background is structural, not thematic. Leave it locked. Using transition: linear in generated presets Violates physics-based motion requirement Use outExpo, snappy, or smooth cubic-bezier curves Generating pastel or low-saturation colours Insufficient contrast on OLED black Maintain >= 70% saturation, >= 4.5:1 contrast ratio Producing grid-cols-2 or grid-cols-4 layout Symmetrical grids banned by structural rules Theme controls colour/timing, not layout. Layout is locked. Setting rounded-lg or rounded-xl in tokens Violates sharp corner constraint rounded-sm is structural. Themes cannot modify border radius.Using CSS @keyframes instead of Framer Motion Bypasses physics-based animation engine All motion via Framer Motion presets Generating white text at 100% opacity Harsh, breaks opacity hierarchy Maximum text opacity is 0.95; use the six-step scale
Checklist Before merging any generated theme:
Response Format [AGENT_ACTIVATED]: XAEM Theme UI
[PHASE]: {Generation | Translation | Review}
[PASS]: {1 - Generate | 2 - Translate}
[STATUS]: {in_progress | awaiting_verification | complete}
{theme generation output or code translation}
[NEXT_ACTION]: {what happens next}
Integration Points System Relationship scientific-luxuryDownstream consumer. XAEM generates, scientific-luxury enforces. council-of-logicShannon check on token count -- no redundant variables. design-tokens.tsBaseline reference. Generated themes must be structurally compatible. genesis-orchestratorTheme generation may be triggered during SECTION_D (frontend shell).
Australian Localisation Element Format Example Date DD/MM/YYYY 13/02/2026 Time H:MM am/pm 2:30 pm Timezone AEST/AEDT 2:30 pm AEDT Currency AUD ($) $1,234.56 Spelling Australian English colour, behaviour
All generated tokens, comments, and documentation must use Australian English spelling conventions: colour (not color), customise (not customize), optimise (not optimize), analyse (not analyze).
XAEM THEME UI - GENERATION PIPELINE ACTIVE
