skills.rest
PiercingXX
PiercingXXCOMMUNITY
Explore all skills by this author →
GitHub

neumorphism

Convert neumorphic UI concepts into accessible implementation rules with QA checklists.

1|Updated Jul 9, 2026
Search Tags:#accessibility#design-system#design-guidelines#component-states#neumorphism#ui-tokens#ui-typography
One-click install
npx skills add https://github.com/PiercingXX/xx-stack --skill neumorphism-piercingxx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: neumorphism
Source: https://github.com/PiercingXX/xx-stack/tree/main/packs/design/design-skills/neumorphism
Command: npx skills add https://github.com/PiercingXX/xx-stack --skill neumorphism-piercingxx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It turns neumorphism’s abstract aesthetic goals into clear, implementation-ready design rules that reduce inconsistency and accessibility risk.

Core Features & Use Cases

  • Token-based foundations: Defines typography, color, and spacing constraints that keep components visually coherent.
  • Component-level guidance: Specifies states (default/hover/focus-visible/active/disabled/loading/error), interaction behaviors, and responsive expectations.
  • Accessibility and quality gates: Enforces WCAG-minded, testable acceptance criteria plus a QA checklist for review.

Quick Start

Ask the AI to produce implementation-ready neumorphism guidelines for a UI component by following the required output structure.

Frequently Asked Questions about neumorphism

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

FAQPage Schema
How do I create accessible neumorphic design guidelines for a UI component library?▼

Accessible neumorphic design guidelines convert soft, extruded UI concepts into consistent implementation rules by defining token-driven typography, color, and spacing foundations with explicit WCAG-minded accessibility acceptance criteria.

What component states should a neumorphism design system define?▼

A neumorphism design system should define default, hover, focus-visible, active, disabled, loading, and error states, specifying interaction behaviors and responsive expectations for each component variant.

How do I enforce accessibility standards when designing neumorphic interfaces?▼

Enforce accessibility in neumorphic interfaces by applying testable WCAG-minded acceptance criteria and a QA checklist that validates focus-visible states, contrast ratios, and interaction behaviors during code review.

Can I use design tokens to maintain consistency across neumorphic component variants?▼

Design tokens maintain consistency across neumorphic components by defining explicit typography, color, and spacing constraints that keep all component states and variants visually coherent.

What is the best way to document do and don't rules for a neumorphism design system?▼

Document neumorphism rules by creating an opinionated do and don't rule set paired with a code-review QA checklist, ensuring developers follow consistent accessibility and interaction standards.

When should I avoid using neumorphism for UI components?▼

Avoid neumorphism when accessibility requirements demand high contrast ratios that conflict with the soft, extruded visual style, or when component states cannot meet WCAG-minded acceptance criteria.

Related Skills

Explore More Design & Creative Skills→
thejordanleopoldthejordanleopold
4

design-system

Codify design tokens, color, typography, spacing, and motion into a DESIGN.md deliverable.

Community
Advanced
PiercingXXPiercingXX
1

simple

Convert Simple design tokens into component and accessibility rules.

Community
Basic
brainbrewlabsbrainbrewlabs
7

ui-design

Generate UI component specifications and WCAG 2.1 AA accessibility audits.

Official
Intermediate
efekrbasefekrbas
41

neumorphism

Generate platform-aware neumorphic UI designs with dual-shadow and inset effects for web and mobile components.

Community
Intermediate