skills.rest
CleanExpo
CleanExpoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

scientific-luxury

Enforce Scientific Luxury design standards in React interfaces with OLED black, spectral colours, and single-pixel borders.

1|Updated Nov 30, 2025
Search Tags:#typography#react#animation#ui-design#design-system#aesthetic-enforcement#oled-black
One-click install
npx skills add https://github.com/CleanExpo/NodeJS-Starter-V1 --skill scientific-luxury
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: scientific-luxury
Source: https://github.com/CleanExpo/NodeJS-Starter-V1/tree/main/.skills/custom/scientific-luxury
Command: npx skills add https://github.com/CleanExpo/NodeJS-Starter-V1 --skill scientific-luxury

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The design system enforces a distinctive Scientific Luxury aesthetic, ensuring UI elements avoid generic SaaS styling and adhere to a precise visual language.

Core Features & Use Cases

  • OLED black background foundation, spectral colour palette, and single-pixel borders.
  • Physics-based animations and timeline layout patterns to replace card grids.
  • Guidance for typography, borders, color usage, and Australian localisation standards.

Quick Start

Create a new React component that adheres to OLED black backgrounds, spectral colours, and single-pixel borders.

Frequently Asked Questions about scientific-luxury

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enforce OLED black backgrounds in a React UI design system?▼

Enforce OLED black backgrounds in a React UI by applying a strict design system standard that mandates true black backgrounds, a spectral colour palette, and single-pixel borders to uphold a Scientific Luxury aesthetic.

What is the Scientific Luxury aesthetic for UI design?▼

The Scientific Luxury aesthetic is a precise visual language for UI design that replaces generic SaaS styling with OLED black backgrounds, spectral colours, single-pixel borders, and physics-based animations.

How do I replace generic SaaS card grids with timeline layout patterns in React?▼

Replace generic SaaS card grids by applying predefined timeline layout patterns alongside physics-based motion, ensuring components adhere to a spectral colour palette and single-pixel borders.

Can I use physics-based animations and spectral colours in my React components?▼

Yes, you can use physics-based animations and spectral colours in React components by applying a governance guide that validates YAML frontmatter and enforces typography, border, and colour standards.

Does this React design system support YAML frontmatter validation for UI components?▼

Yes, the design system supports YAML frontmatter validation for component name and description, ensuring new React elements comply with the required OLED black, spectral colour, and border standards.

When should I avoid using single-pixel borders and OLED black backgrounds for UI styling?▼

Avoid using single-pixel borders and OLED black backgrounds when your project requires generic SaaS styling or lacks support for physics-based motion and timeline layout patterns inherent to the Scientific Luxury aesthetic.

Related Skills

Explore More Design & Creative Skills→
janekmjanekm

react-patterns

Standardize React component patterns for Convex-integrated apps.

Community
Intermediate
CleanExpoCleanExpo
1

dashboard-patterns

Codify real-time dashboard patterns for NodeJS-Starter-V1 with Supabase Realtime and spectral colours.

Community
Advanced
ianyimiianyimi
1

Global Tech Stack

Enforce coding standards for the global tech stack in Claude Code.

Community
Basic
Lyiu-10Lyiu-10

minimalist-ui

Generate minimalist editorial web interfaces with typographic hierarchies and bento grids.

Community
Advanced