skills.rest
lauhon
lauhonCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

cosmos

Write HTML and CSS using Red Bull Cosmos design system tokens.

5|2|Updated Mar 9, 2026
Search Tags:#html#design system#css#design tokens#web ui#cosmos#red bull
One-click install
npx skills add https://github.com/lauhon/pi --skill cosmos-lauhon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cosmos
Source: https://github.com/lauhon/pi/tree/main/skills/cosmos
Command: npx skills add https://github.com/lauhon/pi --skill cosmos-lauhon

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @cosmos/foundation.

What problem does it solve? Building web UI that matches Red Bull brand guidelines requires knowing the exact Cosmos design tokens for color, typography, spacing, radius, borders, elevation, and breakpoints. This Skill provides the complete Foundation token reference so generated markup uses official --cosmos-* CSS custom properties instead of hardcoded values. ## Core Features & Use Cases - Token Reference: Complete tables of Cosmos primitives covering color roles, type scale, spacing scale, radius, border widths, elevation shadows, backdrop blur, and breakpoints. - Install Guidance: Instructions for loading the Foundation CSS from the static host for prototyping or installing the @cosmos/foundation npm package from Red Bull's registry for production. - Use Case: You need to build a branded landing page or card component for a Red Bull project. Use this Skill to generate HTML/CSS where every color, font, and spacing value comes from the correct Cosmos token, passing brand review on the first try. ## Quick Start Use the cosmos skill to build a responsive card component with a headline, body text, and a primary button that follows Red Bull brand guidelines.

Frequently Asked Questions about cosmos

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

FAQPage Schema
How do I use Red Bull Cosmos design tokens in CSS?▼

Load the Foundation stylesheet from rbds-static.redbull.com or install @cosmos/foundation via npm, then reference tokens as CSS custom properties like var(--cosmos-color-primary) or var(--cosmos-spacing-normal). Never hardcode hex or pixel values for brand properties.

How do I install the @cosmos/foundation npm package?▼

Scope the @cosmos registry to Red Bull's Artifactory in .npmrc or .yarnrc.yml, then run npm install --save-dev @cosmos/foundation. Import the primitives CSS from node_modules/@cosmos/foundation/lib/primitives/index.css.

Which Cosmos color token should I use for error states?▼

Use --cosmos-color-accent-inform for invalid input and delayed states, and reserve --cosmos-color-accent-negative for critical or destructive actions only. Focus states must use --cosmos-color-accent-focus to meet WCAG 2.1 contrast requirements.

Can I use CSS custom properties in media query breakpoints?▼

No, CSS @media conditions cannot read custom properties. Use the literal pixel values (650px, 1000px, 1200px, 1350px) or a preprocessor variable if working with SCSS, LESS, or Stylus.

Does Cosmos support non-Latin fonts like Arabic or Japanese?▼

Yes, the Foundation provides per-script font stylesheets such as ar.css, ja.css, ko.css, th.css, he.css, hi.css, and ka.css, plus per-script font-family tokens like --cosmos-font-family-arabic-text. Load the file matching your target language instead of or in addition to default.css.

Related Skills

Explore More Design & Creative Skills→
musher-devmusher-dev

scaffolding-sections

Scaffold Svelte 5 marketing page sections from IA definitions.

Official
Intermediate
Buntyarora97Buntyarora97

repl_setup

Configure web applications for Replit with framework-specific setup guides.

Community
Intermediate
summarybotngsummarybotng
2

QE Visual Accessibility

Test web applications for visual regressions, responsive design, and WCAG 2.2 accessibility.

Official
Advanced
DevanBDevanB

Frontend CSS

Enforce Tailwind utility classes and design system tokens in CSS files.

Community
Basic