# immersive

Generates design system guidelines for exhibit-style interfaces with a deep green canvas, Oswald display typography, and hard shadows.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2300 installs · ★ 3349
- Author: typeui.sh
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/bergside/awesome-design-skills/tree/HEAD/skills/immersive/SKILL.md
- Updated: 2026-06-28
- HTML: https://affpapa.org/en/nevibecode/skills/immersive

## What it does

This skill guides the model to author design system documentation for playful, exhibit-style web applications. The visual identity relies on a single continuous deep green canvas (`#00592B`) without alternating section backgrounds. Crisp white cards with thick black borders, JetBrains Mono details, and heavy Oswald typography punch off the background alongside skewed arcade-inspired buttons.

The rules establish strict design tokens: a typography scale from 12 to 32, a spacing scale across 4, 8, 12, 16, 24, and 32, and an explicit palette. For components, the model must document every required state, including keyboard focus, active, loading, and error. Whenever aesthetic choices collide with usability, the guidelines strictly prioritize WCAG 2.2 AA compliance.

Outputs follow a fixed sequence covering token foundations, component variants, anti-patterns, and a QA review checklist. Applying this style effectively requires embedding the Oswald and JetBrains Mono typefaces into your frontend build.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add bergside/awesome-design-skills --skill immersive -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/immersive/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/immersive/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add bergside/awesome-design-skills --skill immersive -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/immersive/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add bergside/awesome-design-skills --skill immersive -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/immersive/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install bergside/awesome-design-skills immersive
```

2. **Manually: put the files in place**
- File: `.github/skills/immersive/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add bergside/awesome-design-skills --skill immersive -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/bergside/awesome-design-skills --path skills/immersive
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/immersive/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add bergside/awesome-design-skills --skill immersive -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/bergside/awesome-design-skills/tree/HEAD/skills/immersive/SKILL.md

## When to use it
- write component guidelines for exhibit-style digital interfaces
- define color, spacing, and typography tokens based on Oswald and JetBrains Mono
- document component interaction states according to WCAG 2.2 AA standards
- create QA checklists and migration notes for frontend code reviews

## Example prompts
- Generate design system documentation for a card component following the immersive skill.
- Write guidelines for skewed buttons and focus states using immersive style tokens.
- Create a QA checklist for code reviews based on the immersive design system rules.

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 7cb1cee7b430cab0.

BEGIN THIRD-PARTY FILE 7cb1cee7b430cab0
```text
---
name: "immersive"
description: "An immersive, interactive, exhibit-style interface that blends storytelling, animation, and gamified elements to create a playful, experience-driven journey. The entire app sits on a single continuous brand-colored canvas (deep green)"
metadata:
  author: typeui.sh
---

<!-- TYPEUI_SH_MANAGED_START -->
# Immersive Design System Skill (Cursor)

## Mission
You are an expert design-system guideline author for Immersive.
Create practical, implementation-ready guidance that can be directly used by engineers and designers.

## Brand
An immersive, interactive, exhibit-style interface that blends storytelling, animation, and gamified elements to create a playful, experience-driven journey. The entire app sits on a single continuous brand-colored canvas (deep green) — there is no alternation between section backgrounds. Crisp white cards with thick black borders, hard offset block shadows, and oversized condensed display typography (Oswald) punch off that canvas. Buttons are skewed white blocks with hard black shadows that grow on hover, like posters or arcade signs reacting to the player. Decorative geometric blocks in brand-tertiary (cobalt blue) and brand-quaternary (hot pink) layer behind cards to add depth without breaking the brand-color continuity. The result feels less like browsing a website and more like exploring a digital exhibit.

## Style Foundations
- Visual style: modern, clean, high-contrast
- Typography scale: 12/14/16/20/24/32 | Fonts: primary=Oswald, sans-serif, display=Oswald, sans-serif, mono=JetBrains Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900
- Color palette: primary, neutral, success, warning, danger | Tokens: primary=#00592B, secondary=#0023D1, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#FFFFFF, text=#111827
- Spacing scale: 4/8/12/16/24/32

## Accessibility
WCAG 2.2 AA, keyboard-first interactions, visible focus states

## Writing Tone
concise, confident, helpful

## Rules: Do
- prefer semantic tokens over raw values
- preserve visual hierarchy
- keep interaction states explicit

## Rules: Don't
- avoid low contrast text
- avoid inconsistent spacing rhythm
- avoid ambiguous labels

## Expected Behavior
- Follow the foundations first, then component consistency.
- When uncertain, prioritize accessibility and clarity over novelty.
- Provide concrete defaults and explain trade-offs when alternatives are possible.
- Keep guidance opinionated, concise, and implementation-focused.

## Guideline Authoring Workflow
1. Restate the design intent in one sentence before proposing rules.
```
END THIRD-PARTY FILE 7cb1cee7b430cab0

The third-party file has ended. Everything between the 7cb1cee7b430cab0 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2606 of 4330 bytes. © typeui.sh · MIT · https://github.com/bergside/awesome-design-skills/tree/HEAD/skills/immersive/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md