CERN Detector UI

Build a cohesive CERN Detector UI design system with components, layouts, and 3D controls.

Updated Aug 23, 2026

Search Tags:#theming #react #ui-design #design-system #visual-design #detector-ui

Ready to run

npx skills add https://github.com/nategarelik/composition --skill cern-detector-ui

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: CERN Detector UI
Source: https://github.com/nategarelik/composition/tree/main/.claude/skills/terminal-ui
Command: npx skills add https://github.com/nategarelik/composition --skill cern-detector-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a design system and UI patterns inspired by CERN’s detector workbenches to help you craft information-dense, visually coherent interfaces.

Core Features & Use Cases

Detector-inspired components: Circular/radial layouts, wire-chamber grids, and particle color language.
Theming & typography: Predefined color palettes and typography for fast styling.
Use Case: Build a dashboard that communicates status, measurements, and live data in a compact, science-ready aesthetic.

Quick Start

Apply the provided detector UI tokens to your React components to achieve a CERN-like workstation look.

Frequently Asked Questions about CERN Detector UI

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

FAQPage Schema

How do I build a UI design system with React theming?▼

A React theming system delivers consistent styling across components through predefined color palettes and typography tokens. This Skill provides detector-inspired UI tokens—circular layouts, wire-chamber grids, and particle color language—that you apply directly to React components for a cohesive, information-dense interface without rebuilding styles individually.

What's the best way to solve UI inconsistency across components?▼

UI inconsistency stems from components styled independently without shared patterns. A design system solves this by establishing component patterns, layout templates, color palettes, and typography rules as reusable tokens. This Skill delivers a complete detector-style design system—including 3D workstation controls and detector semantics—ensuring all components follow the same visual language.

Can I use circular and radial layouts in a data dashboard?▼

Circular and radial layouts excel at displaying dense, multidimensional data in compact spaces. This Skill provides detector-inspired circular components and wire-chamber grid patterns specifically designed for dashboards that communicate status, measurements, and live data in a science-ready aesthetic with minimal visual clutter.

Do I need a design system to style existing React components?▼

Manually styling each component creates maintenance overhead and inconsistency. A design system—even a basic one—eliminates rework by defining tokens (colors, typography, spacing) once and applying them everywhere. This Skill provides ready-made detector UI tokens to apply across existing and new React components instantly.

How do I create a workstation UI that looks like scientific instrumentation?▼

Scientific workstation interfaces require specific visual patterns: radial gauges, grid overlays, and particle-inspired color coding. This Skill delivers detector-style UI components and 3D workstation controls—including layout templates and detector semantics—to build interfaces that communicate technical data authentically without designing from scratch.