Skills
.Work. You
Rest

skeuomorphic-ui

Community

Create tactile, premium skeuomorphic UI surfaces.

Design & Creative#ui styling#interaction states#skeuomorphic#css gradients#box shadows#embossed text#micro texture
AuthorMengTo
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Skeuomorphic UI guidance turns flat web components into tactile, premium-feeling surfaces that look physically grounded without becoming glossy, cartoonish, or inconsistent.

Core Features & Use Cases

  • Surface styling recipe: Layered gradients, reflective 1px gradient borders, stacked outer/inset shadows, and controlled edge highlights.
  • Interaction states: Pressed/active surfaces that reverse depth using inset shadows and slight transforms.
  • Embossed details: Subtle embossed text and icon shadows for readable, hardware-like labels.
  • Micro texture control: Low-opacity grain/seam/dot-style texture to be felt rather than noticed.
  • Brand-tunable tokens: A token set to adjust top/mid/bottom tones, edge highlights, and shadow tinting for different themes.

Quick Start

Apply the skeuomorphic UI Surface Recipe to your card/button container, set custom CSS tokens, then add the pressed state class for interactive elements.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: skeuomorphic-ui
Download link: https://github.com/MengTo/Skills/archive/main.zip#skeuomorphic-ui

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.