scientific-luxury

Design system enforcement for Scientific Luxury tier UI. Triggers on \"design\", \"UI\", \"component\", \"styling\", \"animation\", or when creating React components. Enforces OLED black backgrounds, spectral colours, single-pixel borders, physics-based animations, and timeline layouts. Configurable design parameters (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) for layout complexity, animation density, and content spacing.

Aller à l'installation

Dépôt: CleanExpo/NodeJS-Starter-V1
Dernière activité de la source: 26 mars 2026 à 03:03
Langue détectée de SKILL.md: anglais
Étoiles: 1
Forks: 0

Options d'installation

Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.

Vérifiez les fichiers source

Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.

Retour à la recherche Retour à l’installation

id	scientific-luxury
name	scientific-luxury
type	skill
version	3.0.0
created	20/03/2026
modified	26/03/2026
status	active
metadata	{"author":"NodeJS-Starter-V1","version":"3.0.0","locale":"en-AU"}
description	Design system enforcement for Scientific Luxury tier UI. Triggers on \"design\", \"UI\", \"component\", \"styling\", \"animation\", or when creating React components. Enforces OLED black backgrounds, spectral colours, single-pixel borders, physics-based animations, and timeline layouts. Configurable design parameters (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) for layout complexity, animation density, and content spacing.
context	fork

Scientific Luxury Design System

Visual DNA for NodeJS-Starter-V1 Framework. Rejects generic SaaS aesthetics in favour of precision meets elegance.

Description

Enforces the Scientific Luxury design tier across all React components and UI work. Mandates OLED black backgrounds, single-pixel borders, spectral colour mapping, physics-based Framer Motion animations, timeline/orbital layouts, and JetBrains Mono typography for data. Rejects Bootstrap card grids, Lucide icons for status, rounded corners, and linear transitions.

When to Apply

Positive Triggers

Creating new React components
Styling UI elements
Implementing animations
Reviewing designs for compliance
User mentions: "design", "UI", "component", "style", "animation"

Negative Triggers

Writing backend-only logic, API routes, or database schemas
Optimising algorithms or data structures (use council-of-logic instead)
Configuring CI/CD, deployment, or infrastructure

Core Principle

If it looks like a Bootstrap template, it's wrong.

Banned Elements

These patterns are explicitly PROHIBITED:

Banned Element	Why	Alternative
Standard Bootstrap/Tailwind cards	Generic, overused	Timeline nodes, data strips
Generic neon borders (`border-cyan-500`)	Cheap gaming aesthetic	Single pixel borders with opacity
Symmetrical grids (`grid-cols-2`, `grid-cols-4`)	"The Bento Trap"	Asymmetrical splits (40/60, 30/70)
Standard rounded corners (`rounded-lg`, `rounded-xl`)	Soft, unprofessional	Sharp (`rounded-sm`) or none
Lucide/FontAwesome icons for status	Visual noise	Breathing orbs, pulse indicators
Linear transitions	Mechanical, lifeless	Physics-based easing curves
White/light backgrounds	Generic SaaS look	OLED Black (#050505)
`text-muted-foreground`	Semantic but generic

Range	Behaviour	Scientific Luxury Mapping
1-3	Structured asymmetric layouts. 40/60 or 30/70 splits. Clean editorial grids.	Asymmetric splits (symmetric grids still banned)
4-7	Timeline layers, overlapping elements, varied aspect ratios. Offset headers.	Default — timeline layout patterns
8-10	Orbital/radial layouts, masonry grids, fractional CSS Grid (`2fr 1fr 1fr`), massive whitespace zones.	Advanced — orbital grid, staggered masonry

Range	Behaviour	Scientific Luxury Mapping
1-3	Entry-only animations. No perpetual motion. CSS `:hover`/`:active` states only.	Breathing animations disabled. `DURATIONS.fast` ceiling.
4-7	Standard Framer Motion transitions. Stagger children on mount. Hover/tap feedback.	Default — `DURATIONS.normal`, breathing enabled
8-10	Advanced choreography: spring physics (`stiffness: 100, damping: 20`), scroll-triggered reveals, parallax, magnetic hover, staggered cascades.	Premium — `useSpring` presets, `useMotionValue`/`useTransform`

Range	Behaviour	Scientific Luxury Mapping
1-3	Luxury spacing. Generous `space-y-8`, `p-8`+. Art gallery feel. Everything breathes.	Default — matches existing Scientific Luxury aesthetic
4-7	Standard app spacing. `space-y-4`, `p-4`-`p-6`. Balanced for daily-use interfaces.	Standard — tighter padding, more content per view
8-10	Cockpit mode. Minimal padding. Data-dense. 1px line separators instead of cards. `font-mono` for all numbers.	Dashboard — cross-reference `dashboard-patterns` skill

Layer	z-index	Usage
Base	0	Default content
Elevated	10	Cards with elevation, floating elements
Overlay	20	Dropdowns, popovers, tooltips
Modal	30	Modal dialogs, drawers
Toast	40	Toast notifications
Tooltip	50	Tooltip overlays (highest)

Breakpoint	Pattern	Details
Desktop (≥1024px)	Fixed sidebar	240px width, collapsible to 64px icon-only
Tablet (768-1023px)	Overlay sidebar	Slides in from left, backdrop blur behind
Mobile (<768px)	Bottom navigation bar	4-5 items max, icon + label, min-h-[60px]

--background-primary: #050505; /* True OLED black */
--background-elevated: rgba(255, 255, 255, 0.01);
--background-hover: rgba(255, 255, 255, 0.02);

Colour	Hex	Usage
Cyan	`#00F5FF`	Active, in-progress, primary actions
Emerald	`#00FF88`	Success, completed, approved
Amber	`#FFB800`	Warning, verification, awaiting
Red	`#FF4444`	Error, failed, rejected
Magenta	`#FF00FF`	Escalation, human intervention
Grey	`#6B7280`	Pending, inactive, disabled

const STATUS_COLOURS = {
  pending: '#6B7280',
  in_progress: '#00F5FF',
  awaiting_verification: '#FFB800',
  completed: '#00FF88',
  failed: '#FF4444',
  escalated: '#FF00FF',
} as const;

/* Text Hierarchy */
--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);

/* Border Hierarchy */
--border-visible: rgba(255, 255, 255, 0.1);
--border-subtle: rgba(255, 255, 255, 0.06);

--font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Data/Technical */
--font-sans: 'Inter', 'SF Pro Display', system-ui; /* Editorial/Names */

Element	Font	Size	Weight	Tracking
Hero Title	Sans	5xl-6xl	Extralight (200)	Tight
Section Title	Sans	2xl-4xl	Light (300)	Tight
Label	Sans	10px	Normal	0.2-0.3em
Data Value	Mono	lg-xl	Medium (500)	Normal
Timestamp	Mono	10px	Normal	Normal

// Hero title
<h1 className="text-5xl font-extralight tracking-tight text-white">
  Command Centre
</h1>

// Label
<p className="text-[10px] uppercase tracking-[0.3em] text-white/30">
  Real-Time Monitoring
</p>

// Data value
<span className="font-mono text-lg font-medium tabular-nums">
  {percentage}%
</span>

border: 0.5px solid rgba(255, 255, 255, 0.06);

className = 'border-[0.5px] border-white/[0.06]';

/* Subtle (default) */
border-[0.5px] border-white/[0.06]

/* Visible (hover/focus) */
border-[0.5px] border-white/[0.1]

/* Spectral (active state) */
border-[0.5px] border-cyan-500/30

<div className="relative pl-4">
  {/* Vertical spine */}
  <div className="absolute top-0 bottom-0 left-8 w-px bg-gradient-to-b from-white/10 via-white/5 to-transparent" />

  <div className="space-y-8">
    {items.map((item, index) => (
      <TimelineNode key={item.id} item={item} index={index} />
    ))}
  </div>
</div>

<div className="flex items-center gap-8 border-[0.5px] border-white/[0.06] bg-white/[0.01] px-6 py-3">
  {metrics.map((metric, index) => (
    <React.Fragment key={metric.label}>
      {index > 0 && <div className="h-4 w-px bg-white/10" />}
      <div className="flex items-baseline gap-2">
        <span className="text-[10px] tracking-widest text-white/30 uppercase">{metric.label}</span>
        <span className="font-mono text-lg" style={{ color: metric.colour }}>
          {metric.value}
        </span>
      </div>
    </React.Fragment>
  ))}
</div>

// 60/40 split
<div className="flex">
  <div className="flex-[3]">Main content</div>
  <div className="flex-[2]">Sidebar</div>
</div>

// 70/30 split
<div className="flex">
  <div className="flex-[7]">Main content</div>
  <div className="flex-[3]">Sidebar</div>
</div>

const EASINGS = {
  outExpo: [0.19, 1, 0.22, 1], // Primary - smooth deceleration
  smooth: [0.4, 0, 0.2, 1], // Gentle ease
  snappy: [0.68, -0.55, 0.265, 1.55], // Snappy with overshoot
};

<motion.div
  animate={{
    opacity: [1, 0.6, 1],
    scale: [1, 1.05, 1],
  }}
  transition={{
    duration: 2,
    repeat: Infinity,
    ease: 'easeInOut',
  }}
/>

<motion.div
  animate={{
    boxShadow: [`0 0 0 ${colour}00`, `0 0 20px ${colour}40`, `0 0 0 ${colour}00`],
  }}
  transition={{
    duration: 1.5,
    repeat: Infinity,
  }}
/>

<motion.div
  initial={{ opacity: 0, x: -20 }}
  animate={{ opacity: 1, x: 0 }}
  transition={{
    delay: index * 0.1,
    duration: 0.5,
    ease: [0.19, 1, 0.22, 1],
  }}
/>

function BreathingOrb({ colour, isActive, size = 'md' }) {
  const sizes = { sm: 'h-8 w-8', md: 'h-12 w-12', lg: 'h-16 w-16' };

  return (
    <motion.div
      className={cn(sizes[size], 'flex items-center justify-center rounded-full border-[0.5px]')}
      style={{
        borderColor: isActive ? `${colour}50` : 'rgba(255,255,255,0.1)',
        backgroundColor: isActive ? `${colour}10` : 'rgba(255,255,255,0.02)',
        boxShadow: isActive ? `0 0 30px ${colour}40` : 'none',
      }}
    >
      <motion.div
        className="h-2 w-2 rounded-full"
        style={{ backgroundColor: colour }}
        animate={isActive ? { scale: [1, 1.3, 1], opacity: [1, 0.6, 1] } : {}}
        transition={{ duration: 2, repeat: Infinity }}
      />
    </motion.div>
  );
}

// Date formatting
new Date().toLocaleDateString('en-AU', {
  day: '2-digit',
  month: '2-digit',
  year: 'numeric',
}); // "23/01/2026"

Pattern	Problem	Correct Approach
Bootstrap/Tailwind card grids (`grid-cols-2`, `grid-cols-4`)	Generic SaaS aesthetic, "The Bento Trap"	Timeline nodes, data strips, or asymmetrical splits (40/60, 30/70)
Lucide/FontAwesome icons for status indicators	Visual noise, lacks scientific precision	Breathing orbs with spectral colours and glow pulse animations
White or light backgrounds	Violates OLED black foundation	Use `#050505` as primary background with `rgba(255,255,255,0.01)` elevation
`rounded-lg` or `rounded-xl` corners	Soft, unprofessional appearance	Only `rounded-sm` (2px) permitted; `rounded-full` for orbs only
Linear CSS transitions (`transition: all 0.3s linear`)	Mechanical, lifeless motion	Framer Motion with physics-based easing (`[0.19, 1, 0.22, 1]`)

[AGENT_ACTIVATED]: Scientific Luxury
[PHASE]: {Audit | Implementation | Review}
[STATUS]: {in_progress | complete}

{design analysis or component guidance}

[NEXT_ACTION]: {what to do next}