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

fantasy

Generate fantasy-themed design system guidance with WCAG 2.2 AA accessibility rules.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents inconsistent, inaccessible implementations by providing clear, token-based fantasy design-system rules for UI teams and agents.

Core Features & Use Cases

  • Game-inspired visual foundations: Defines a bold premium style with explicit typography, color tokens, and spacing rhythm.
  • Implementation-ready component guidance: Requires designers and engineers to translate foundations into component anatomy, states, variants, and responsive behavior.
  • Accessibility and quality gates: Enforces WCAG 2.2 AA, keyboard-first interaction, visible focus states, and testable acceptance criteria.

Quick Start

Use the fantasy skill to generate fantasy-themed design-system guidance that is consistent with the specified tokens and includes accessibility acceptance criteria.

Frequently Asked Questions about fantasy

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

FAQPage Schema
How do I create a game-inspired design system that meets WCAG 2.2 AA accessibility requirements?▼

To create an accessible game-inspired design system, establish bold premium typography and color tokens with explicit spacing rhythm, then enforce keyboard-first focus-visible behavior and testable acceptance criteria to satisfy WCAG 2.2 AA constraints.

What are design tokens and how do they ensure consistent UI component states?▼

Design tokens are predefined variables for color, typography, and spacing that anchor component anatomy and interaction states, ensuring consistent visual rendering and preventing inaccessible implementations across product teams.

How do I implement keyboard-first interaction rules for UI components?▼

Implement keyboard-first interaction rules by defining explicit focus-visible states within your design tokens, then applying testable acceptance criteria that validate keyboard navigation flows and WCAG 2.2 AA compliance.

Can I use token-based design rules to standardize responsive behavior across variants?▼

Yes, token-based design rules standardize responsive behavior by translating visual foundations into component anatomy, states, and variants, ensuring consistent spacing rhythm and interaction handling across different screen sizes.

Does this fantasy design system provide quality gates for preventing inaccessible implementations?▼

Yes, the fantasy design system provides token-anchored do and don't quality gates that enforce WCAG 2.2 AA compliance, keyboard-first interaction, and visible focus states to prevent inconsistent and inaccessible UI implementations.

What is the best way to define a bold premium color palette for a game-themed interface?▼

The best way to define a bold premium color palette is by establishing explicit color tokens within a design system framework, ensuring accessible contrast ratios and consistent usage across all UI components and interaction states.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
bergsidebergside
2.3k

artistic

Standardize high-contrast artistic UI design tokens with WCAG 2.2 AA accessibility rules.

Official
Intermediate
bergsidebergside
2.3k

retro

Apply vintage typography and high-contrast palette rules to UI components.

Official
Intermediate
antoniorv6antoniorv6

elevated-design

Transform web interfaces using an Apple-inspired design system with whitespace and typography.

Community
Advanced