high-contrast-skeuomorphic-clean

Create high-contrast skeuomorphic design systems with molded dark surfaces and tactile inset depth.

5.7k|685|Updated Feb 3, 2026
One-click install
npx skills add https://github.com/MengTo/Skills --skill high-contrast-skeuomorphic-clean
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: high-contrast-skeuomorphic-clean
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/high-contrast-skeuomorphic-clean
Command: npx skills add https://github.com/MengTo/Skills --skill high-contrast-skeuomorphic-clean

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and developers often struggle to produce dark interfaces that feel tactile and premium rather than flat or washed-out, ending up with either mushy neumorphism or overly glossy retro skeuomorphism.

Core Features & Use Cases

  • Design System Direction: Provides a complete visual language covering page shells, cards, controls, and micro-visualizations built on molded dark surfaces with crisp light separation.
  • Implementation Guidance: Specifies concrete techniques such as one-pixel gradient borders, inset shadow stacks, top-edge highlights, and restrained signal accent colors.
  • Reference Demo: Ships a sandboxed Core Interface dashboard demo (HTML with Tailwind, GSAP, and Iconify) that serves as a fidelity target for recreation or remix prompts.
  • Use Case: Ask your agent to build a responsive analytics dashboard or admin panel that feels industrial-clean and tactile, using the included demo as the quality bar for composition, spacing, and motion restraint.

Quick Start

Use the high-contrast-skeuomorphic-clean skill to create a responsive standalone HTML dashboard with molded dark surfaces and a restrained cyan accent, matching the quality of the included Core Interface demo.

Frequently Asked Questions about high-contrast-skeuomorphic-clean

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

FAQPage Schema
How do I create a skeuomorphic dark UI that still looks modern?

Use a deep black or charcoal shell on a lighter outer page, then add depth through one-pixel gradient borders, top-edge highlights, and inset shadow stacks. Keep one restrained accent color for status dots and active markers instead of glossy materials.

What is the difference between clean skeuomorphism and neumorphism?

Clean skeuomorphism uses high contrast, crisp light separation, and sharp molded surfaces, while neumorphism relies on soft low-contrast shadows that often look washed out. This skill explicitly avoids mushy edges and weak contrast.

How do I use the included Core Interface demo?

Open demo/index.html as the visual and interaction reference, then follow demo/PROMPT.md to recreate or remix it. The demo is a sandboxed HTML page using Tailwind, GSAP, and Iconify with bundled image assets.

When should I avoid this skeuomorphic design approach?

Avoid it when you need flat minimal cards, playful soft neumorphism, or colorful multi-accent palettes. The system is designed for tactile, industrial-clean interfaces with mostly monochrome surfaces and a single signal accent.

What accent color usage does this design system recommend?

Use one restrained signal color derived from the brand for status lights, active markers, progress slivers, and focal emphasis. Avoid multiple accent colors or bright glows that break the clean industrial mood.