skills.rest
bergside
bergsideOFFICIAL
Explore all skills by this author →
WebsiteGitHub

cosmic

Define tokenized typography, spacing, and color foundations for dark sci-fi UI.

2.3k|211|Updated Mar 9, 2026
Search Tags:#typography#accessibility#design system#neon#guidelines#ui tokens#component states
One-click install
npx skills add https://github.com/bergside/awesome-design-skills --skill cosmic-bergside
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cosmic
Source: https://github.com/bergside/awesome-design-skills/tree/main/skills/cosmic
Command: npx skills add https://github.com/bergside/awesome-design-skills --skill cosmic-bergside

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill standardizes a futuristic sci-fi design language so teams can build consistent neon-dark interfaces that remain accessible and implementation-ready.

Core Features & Use Cases

  • Tokenized foundations: defines typography, spacing, and color tokens (including explicit hex values) to drive consistent styling.
  • Accessibility-first rules: sets WCAG 2.2 AA, keyboard-first interaction patterns, and visible focus-state requirements.
  • Engineering-ready guidance: provides opinionated do/don’t constraints and quality gates to reduce review churn and UI drift.

Quick Start

Ask an AI to generate a Cosmic-styled component spec for your app’s primary button, including default, hover, focus-visible, active, disabled, loading, and error states with WCAG 2.2 AA-aligned color and focus behavior.

Frequently Asked Questions about cosmic

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

FAQPage Schema
How do I build a neon sci-fi UI that meets WCAG 2.2 AA accessibility standards?▼

Build a neon sci-fi UI by applying tokenized typography, spacing, and color foundations with explicit interaction-state rules to maintain WCAG 2.2 AA accessibility across dark-themed interfaces.

What are UI tokens and how do they keep dark-themed design systems consistent?▼

UI tokens are defined typography, spacing, and color values that drive consistent styling across a dark-themed design system, preventing UI drift by standardizing component states and variants.

How do I generate component specs for neon design states like hover and focus-visible?▼

Generate component specs by defining explicit rules for default, hover, focus-visible, active, disabled, loading, and error states using tokenized color and keyboard-first interaction behavior constraints.

Can I use this design system approach for keyboard-first interaction patterns?▼

Yes, this design system approach enforces keyboard-first interaction patterns by setting explicit visible focus-state requirements and WCAG 2.2 AA-aligned behavior rules for all component variants.

Are there quality gates to reduce review churn when implementing a sci-fi UI?▼

Yes, opinionated do and don't constraints provide testable quality gates using Cosmic foundation constraints to reduce review churn and ensure brand consistency during UI implementation.

Why does my neon dark-themed interface fail accessibility checks on disabled and loading states?▼

Neon dark-themed interfaces fail accessibility checks when disabled and loading states lack explicit WCAG 2.2 AA-aligned color contrast and visible focus-state token definitions.

Related Skills

Explore More Design & Creative Skills→
PiercingXXPiercingXX
1

luxury

Generate tokenized design-system guidance for luxury dark UI components.

Community
Intermediate
superpollo02superpollo02

cosmic

Define neon-themed UI components with WCAG 2.2 AA accessibility and token-based styling.

Community
Intermediate
PiercingXXPiercingXX
1

paper

Generate implementation-ready Paper design-system guidance with WCAG acceptance criteria.

Community
Intermediate
alissimorealissimore

ui-styling

Apply Nexus design system and Tailwind CSS tokens to UI components.

Community
Basic