Cosmic design skill for AI agents

Overview

Cosmic is a futuristic, sci-fi-inspired design system skill for AI-powered development. It combines dark atmospheres with vibrant neon accents and a single-weight display typeface to create interfaces that feel like mission control for a spacecraft — immersive, spatial, and unmistakably from the future. This isn't subtle refinement; it's bold world-building.

When you add this skill file to your AI coding tool, every component it generates — from glowing action buttons to data dashboards that look like they belong on a starship bridge — follows the same sci-fi visual language, neon accent system, and typographic voice.

Design tokens

Color palette

Cosmic builds on a neon blue-to-violet axis designed to glow against dark surfaces — the digital equivalent of light cutting through deep space:

The blue-violet neon pairing is the visual engine of the entire system. On dark surfaces, these colors appear to emit light rather than reflect it — an effect the skill file leverages for focus rings, hover states, active indicators, and decorative glow treatments. The AI agent learns to use neon as functional illumination: light draws the eye to what's interactive.

Typography

Cosmic uses Audiowide for all body and display text — a futuristic, wide-set display typeface with a single weight (400/regular). This is the most constrained typographic choice of any typeui.sh design skill, and it's intentional.

Audiowide's geometric, space-age letterforms immediately establish the sci-fi atmosphere. The single-weight limitation means the AI agent cannot rely on bold or light variants to create hierarchy. Instead, it builds typographic contrast entirely through:

• Size — the 6-step scale (12 / 14 / 16 / 20 / 24 / 32) does all the heavy lifting for hierarchy
• Color — neon blue or violet for emphasis vs. muted text for supporting content
• Opacity — dimmed text for tertiary information, full brightness for primary content
• Spacing — letter-spacing and line-height adjustments to differentiate headings from body

JetBrains Mono handles code blocks and monospaced content, providing a practical counterpart where Audiowide's display characteristics would hurt readability at small sizes in dense technical contexts.

Spacing

A 4px base unit drives the spacing scale: 4 / 8 / 12 / 16 / 24 / 32. Sci-fi interfaces thrive on precision — tight, measured spacing reinforces the high-tech aesthetic. The skill file uses the grid to create the kind of technical, instrument-panel feel where every element is deliberately placed, not loosely arranged.

Component coverage

The skill file covers 40+ component families grouped by function:

• Inputs and forms — buttons, text inputs, selects, comboboxes, checkboxes, radios, switches, textareas, date/time pickers, file uploaders
• Data display — cards, tables, data lists, data grids, charts, stats/metrics, badges, chips, avatars
• Navigation — breadcrumbs, pagination, steppers, sidebars, top bars, command palette, tabs
• Overlays — modals, drawers, sheets, tooltips, popovers, menus
• Feedback — alerts, toasts, notifications center, progress indicators, skeletons, empty states
• Page-level — authentication screens, settings pages, documentation layouts, onboarding flows, pricing blocks, search

For each component, the skill defines required interaction states (default, hover, focus-visible, active, disabled, loading, error), keyboard and touch behavior, spacing and typography token usage, and responsive edge cases.

Design philosophy

Cosmic is built on the idea that interfaces can transport users into a different world while remaining fully functional:

• Neon as functional light — blue and violet accents aren't decorative; they represent illumination on a dark surface. Interactive elements glow because they're "powered on." Disabled elements go dim because they're offline. This metaphor gives every state a narrative reason
• Single-weight discipline — Audiowide at 400 only forces the AI to think differently about hierarchy. Without bold and light variants, size, color, and opacity become the primary tools — producing interfaces that feel like HUD displays rather than traditional web pages
• Immersive dark canvas — the dark foundation creates the conditions for neon to work. Light text and glowing accents on dark surfaces produce the spatial depth that makes sci-fi interfaces feel three-dimensional
• Precision over comfort — tight spacing and geometric type create an instrument-panel density that signals "high-tech" without becoming cluttered. Every pixel of whitespace feels measured
• Consistent world-building — the skill maintains the sci-fi metaphor across every component. A form input looks like a data terminal. A modal looks like a system dialog. A progress bar looks like a power gauge. The AI agent never breaks character

This makes Cosmic a strong fit for:

• Gaming dashboards and companion apps
• Space, astronomy, and science visualization tools
• Cyberpunk or sci-fi themed products
• Developer tools and terminal-inspired interfaces
• Music production and audio software
• Data monitoring and real-time analytics platforms
• Any product that wants to feel like technology from the next century

Accessibility

Cosmic enforces WCAG 2.2 AA compliance as a hard requirement. Futuristic aesthetics and neon effects never come at the cost of usability. The skill file instructs the AI agent to:

• Use keyboard-first interaction patterns for all interactive elements
• Include visible focus states on every focusable component — neon glow effects naturally create strong focus indicators, but the skill ensures they meet contrast requirements and aren't purely decorative
• Maintain sufficient color contrast ratios, particularly ensuring neon blue and violet text remains readable against dark backgrounds at all type sizes
• Prioritize accessibility over aesthetics when the two conflict

The single-weight constraint actually benefits accessibility — without thin or light font weights, the AI never produces faint, hard-to-read text. Every piece of content renders at Audiowide's 400 weight, which maintains consistent stroke width and legibility.

Every accessibility rule is written to be testable in code review.

How to use with Claude AI

In Cursor IDE

1. Pull the skill file into your project:

npx typeui.sh pull cosmic

2. The file is saved to .cursor/skills/cosmic/SKILL.md by default. Cursor automatically picks up skill files from this directory and makes them available to Claude.

3. Start prompting — Claude will generate sci-fi themed interfaces with Audiowide typography, neon blue-violet accents, and dark spatial layouts.

In Claude Desktop or API

1. Copy the skill file content from the typeui.sh page (use the Copy button in the sidebar).

2. Paste it into your system prompt or as a reference document at the start of your conversation.

3. Ask Claude to build components or pages. It will follow the Cosmic guidelines — using the neon glow system, single-weight Audiowide type, and instrument-panel precision throughout.

In other AI tools

The skill file is standard markdown and works with any AI tool that accepts system-level instructions:

• Windsurf — place the file in your project's .windsurf/rules/ directory
• GitHub Copilot — add it to .github/copilot-instructions.md or reference it in your prompt
• OpenAI GPTs — upload it as a knowledge file in the GPT configuration
• Any LLM API — include the file content in the system message

What sets Cosmic apart

Cosmic is the most thematically committed design skill on typeui.sh. Every other skill adapts to any product context; Cosmic builds a world:

• Single-weight typeface — Audiowide at 400 only is the most constrained type system of any skill. The AI builds hierarchy through size, color, and opacity alone, producing HUD-like interfaces that no other skill can replicate
• Neon-as-light metaphor — blue and violet aren't just accent colors; they represent functional illumination. Interactive = glowing, disabled = dim, focused = bright ring. This gives every interaction state a narrative logic
• World-consistent components — the skill maintains the sci-fi metaphor across all 40+ component families. Every element feels like it belongs in the same universe
• Constraint-driven accessibility — the single font weight prevents thin, hard-to-read text by design; neon focus states naturally provide strong visual indicators
• Anti-patterns built in — the skill blocks low contrast text, inconsistent spacing, and ambiguous labels so the immersive style never sacrifices clarity for atmosphere
• Quality gates — every rule is anchored to a token or measurable threshold, keeping the sci-fi aesthetic consistent whether the AI generates a single tooltip or an entire mission control dashboard