skills.rest
jbreel77888
jbreel77888COMMUNITY
Explore all skills by this author →
GitHub

immersive

Generates implementation-ready design-system guidelines for an immersive exhibit-style interface.

Updated Jun 20, 2026
Search Tags:#typography#accessibility#WCAG#design system#design tokens#UI consistency#component guidelines
One-click install
npx skills add https://github.com/jbreel77888/Ai-Agnet --skill immersive-jbreel77888
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: immersive
Source: https://github.com/jbreel77888/Ai-Agnet/tree/main/skills/design/design-systems/style-skills/immersive
Command: npx skills add https://github.com/jbreel77888/Ai-Agnet --skill immersive-jbreel77888

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building an immersive, exhibit-style interface often lack consistent, implementation-ready design rules, leading to inconsistent spacing, ambiguous component states, and accessibility gaps. ## Core Features & Use Cases - Design Token Foundations: Defines color tokens (deep green primary #00592B, cobalt blue, hot pink accents), Oswald and JetBrains Mono typography scales, and 4/8/12/16/24/32 spacing rhythm. - Component-Level Rules: Specifies anatomy, variants, states (default, hover, focus-visible, active, disabled, loading, error), and responsive behavior for cards, skewed buttons, and decorative blocks. - Accessibility & QA Gates: Enforces WCAG 2.2 AA compliance, keyboard-first interactions, testable acceptance criteria, and a code-review QA checklist. - Use Case: A designer-engineer pair building a gamified storytelling landing page uses this Skill to generate opinionated component rules, anti-patterns, and migration notes that keep the single continuous brand canvas consistent. ## Quick Start Ask the AI to generate design-system guidelines for a hero section with cards and buttons following the Immersive style foundations.

Frequently Asked Questions about immersive

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

FAQPage Schema
How do I create design-system guidelines for a component library?▼

Start by restating the design intent, then define tokens and foundational constraints before component-level guidance. Specify anatomy, states, variants, and interaction behavior, and finish with accessibility acceptance criteria and a QA checklist executable in code review.

What design tokens does the Immersive style use?▼

It uses primary #00592B deep green, secondary #0023D1 cobalt blue, success #16A34A, warning #D97706, and danger #DC2626. Typography uses Oswald for display and body with JetBrains Mono for labels, on a 12/14/16/20/24/32 scale with 4/8/12/16/24/32 spacing.

How do I make component states accessible for keyboard users?▼

Define explicit focus-visible states with visible focus indicators and ensure all interactions work keyboard-first per WCAG 2.2 AA. Every accessibility statement must be testable in implementation, and conflicts between aesthetics and accessibility should be resolved in favor of accessibility.

What component states should a design system define?▼

Define default, hover, focus-visible, active, disabled, loading, and error states as relevant to each component. Also describe interaction behavior for keyboard, pointer, and touch, plus responsive behavior and edge cases like long labels and empty states.

When should I use must versus should in design guidelines?▼

Use "must" for non-negotiable rules such as accessibility requirements and token usage, and "should" for recommendations. Pair every do-rule with at least one concrete don't-example, and include migration guidance when introducing new patterns.

Related Skills

Explore More Design & Creative Skills→
KartikSharma4448KartikSharma4448

branding-generator

Interview clients, research markets, and generate three brand directions with visual assets.

Community
Advanced
SylphxAISylphxAI
4

uiux

Generate design system documentation with tokens and WCAG AA accessibility criteria.

Official
Basic
apuyaapuya

ui-design

Specifies, audits, and hands off visual design using semantic design tokens.

Community
Intermediate
pohlai88pohlai88

material-theme-builder

Generate Material Design 3 color themes and tokens from a source hex color.

Community
Intermediate