skeumorphism

Generate token-based Skeumorphism UI design rules with WCAG 2.2 AA accessibility criteria.

1|Updated Jul 9, 2026
One-click install
npx skills add https://github.com/PiercingXX/xx-stack --skill skeumorphism
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: skeumorphism
Source: https://github.com/PiercingXX/xx-stack/tree/main/packs/design/design-skills/skeumorphism
Command: npx skills add https://github.com/PiercingXX/xx-stack --skill skeumorphism

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Skeumorphism Design System guidance prevents inconsistent, low-accessibility “3D texture” UI by providing token-based, implementation-ready rules engineers can apply reliably.

Core Features & Use Cases

It defines concrete foundations for typography, spacing, and color tokens and translates them into component-level requirements with explicit interaction states (default, hover, focus-visible, active, disabled, loading, error where relevant). It is designed for teams standardizing playful, physical-metaphor interfaces such as dashboards, controls, and product UI surfaces while maintaining WCAG 2.2 AA accessibility and reviewable QA checklists.

Quick Start

Use the Skeumorphism design skill to generate implementation rules for your next component so it follows the specified token foundations and includes testable accessibility acceptance criteria.

Frequently Asked Questions about skeumorphism

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

FAQPage Schema
How do I build accessible skeumorphism UI components for a design system?

Build accessible skeumorphism UI components by applying token-based, implementation-ready rules that define explicit interaction states and WCAG 2.2 AA testable criteria. This prevents inconsistent 3D texture interfaces while maintaining physical-metaphor designs.

What is token-based theming for skeumorphism interfaces?

Token-based theming for skeumorphism interfaces provides concrete foundations for typography, spacing, and color tokens. It translates these foundations into component-level requirements with explicit interaction states like default, hover, focus-visible, active, and disabled.

How do I standardize interaction states for physical-metaphor UI controls?

Standardize interaction states for physical-metaphor UI controls by defining explicit rules for default, hover, focus-visible, active, disabled, loading, and error states. This ensures consistent textured, 3D-inspired interfaces across dashboards and product UI surfaces.

How do I add WCAG 2.2 AA accessibility criteria to 3D-inspired UI patterns?

Add WCAG 2.2 AA accessibility criteria to 3D-inspired UI patterns by generating implementation rules with testable accessibility acceptance criteria and a QA checklist with anti-patterns. This ensures playful physical-metaphor interfaces remain accessible and reviewable.

Can I use skeumorphism design rules for production product dashboards?

Yes, you can use skeumorphism design rules for production product dashboards. The guidance targets teams standardizing playful interfaces for dashboards, controls, and product UI surfaces while maintaining specified typography, color, and spacing foundations.

Why does my 3D textured UI fail accessibility reviews?

3D textured UI fails accessibility reviews when it lacks consistent token-based foundations and explicit interaction-state rules. Without testable WCAG 2.2 AA criteria and a QA checklist with anti-patterns, low-accessibility texture interfaces result in review failures.