skills.rest
superpollo02
superpollo02COMMUNITY
Explore all skills by this author →
GitHub

neumorphism

Standardize neumorphic UI components with token-first styling and WCAG 2.2 AA accessibility.

Updated May 13, 2026
Search Tags:#accessibility#design system#wcag 2.2#tokens#ui components#neumorphism
One-click install
npx skills add https://github.com/superpollo02/awesome-design-skill --skill neumorphism-superpollo02
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: neumorphism
Source: https://github.com/superpollo02/awesome-design-skill/tree/main/skills/neumorphism
Command: npx skills add https://github.com/superpollo02/awesome-design-skill --skill neumorphism-superpollo02

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Neumorphism design guidance solves inconsistent, inaccessible neumorphic UI implementation by standardizing tokens, component states, and testable accessibility constraints.

Core Features & Use Cases

  • Tokenized visual foundations: Applies a defined monochromatic palette, typography scale, spacing rhythm, and rounding to keep surfaces visually consistent.
  • Implementation-ready behavior rules: Ensures required interaction states (default, hover, focus-visible, active, disabled, loading, error where relevant) follow keyboard-first and semantic HTML principles.
  • Quality gates for maintainability: Converts style direction into concrete “must/should” rules with anti-patterns and a QA checklist, reducing regressions across teams.

Quick Start

Use the neumorphism skill to generate a set of implementation rules and accessibility acceptance criteria for a neumorphic button and input component set using the provided tokens.

Frequently Asked Questions about neumorphism

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

FAQPage Schema
How do I make neumorphic UI components meet WCAG 2.2 AA accessibility standards?▼

To make neumorphic UI meet WCAG 2.2 AA, apply keyboard-first focus-visible behavior, enforce semantic HTML over ARIA, and use standardized monochromatic tokens to maintain contrast across visual states.

What design tokens are needed for consistent neumorphism design systems?▼

Consistent neumorphism requires a monochromatic palette, typography scale, spacing rhythm, and rounding tokens. These standardize surfaces and ensure visual consistency across components like buttons and inputs.

How do I implement accessible interaction states for neumorphic buttons and inputs?▼

Implement accessible neumorphic interaction states by defining default, hover, focus-visible, active, disabled, loading, and error behaviors. Token-first styling and semantic HTML ensure these states are testable and maintainable.

Can I use neumorphism for responsive cards, modals, and navigation components?▼

Yes, you can apply neumorphism to responsive cards, modals, and navigation by using tokenized visual foundations and standardized interaction rules that handle edge cases across monochromatic surfaces.

What are the common limitations of building neumorphic UI without quality gates?▼

Without quality gates, neumorphic UI often suffers from inconsistent component states and accessibility regressions. Applying concrete must/should rules, anti-patterns, and a QA checklist prevents these maintainability issues.

Related Skills

Explore More Design & Creative Skills→
guideopsguideops

power

Implement a dark aesthetic design system with typography and color scales.

Community
Intermediate
superpollo02superpollo02

tetris

Generate WCAG 2.2 AA design-system guidelines with Tetris-inspired tokens and interaction states.

Community
Intermediate
superpollo02superpollo02

mono

Define a monospace-driven design system with WCAG 2.2 AA accessibility tokens.

Community
Intermediate
alexzhang1030alexzhang1030

i-colorize

Add strategic color to monochromatic interfaces with semantic mapping and accessible contrast.

Community
Intermediate