How to use the High-Contrast Skeuomorphic Design agent skill

What the skill makes the agent do

The skill is a detailed visual style guide. When it is active, the agent designs the page shell, hero, cards, controls and supporting modules as one system with a consistent material feel. The target is a light or neutral outer page framing a deep black or charcoal application shell, with panels that look physically assembled rather than flat.

The guide also tells the agent which elements should look touchable, such as buttons, inputs, chips, search fields and progress bars, and how motion should feel. Motion guidance includes masked reveals, gentle object lift, slow orbiting details and calm particle drift. The guide explicitly rejects playful neumorphism and glossy consumer skeuomorphism, so the result should stay sharp and system-like.

• Dark shells with subtle gradients, inset highlights and soft inner shadows
• Cards with one-pixel edge wrappers, top-edge highlights and layered dark fills
• White or near-white text on dark surfaces, with muted grey support copy
• One accent colour used sparingly for status lights, active markers and progress details
• Pairing of clean sans-serif type with occasional mono labels

Install the skill (ZIP or Claude app upload)

Download the ZIP for this skill from this page. The skill lives in the agent-skills collection under web-design/high-contrast-skeuomorphic-clean and is published under the MIT licence.

To install it for yourself across projects, unzip the download into your user skills folder, ~/.claude/skills/. To install it for one project only, unzip it into that project's .claude/skills/ folder. The skill's main file is SKILL.md, and it is distributed with demo/PROMPT.md and demo/source.json.

If you use the Claude apps instead of files on disk, you can upload the skill under Settings, then Capabilities, then Skills.

• Personal install: ~/.claude/skills/
• Project install: .claude/skills/ inside your project
• Claude apps: Settings → Capabilities → Skills, then upload

How to trigger the skill with natural requests

You can trigger the skill by naming it with a dollar sign, as the included demo prompts do, or by describing the kind of interface you want. The description the skill matches on is about creating a high-contrast clean skeuomorphic design system with molded dark surfaces, crisp light separation, tactile inset depth and restrained signal accents, so requests that use those ideas will fit well.

Be specific about the content and the format. The demo prompts give a product brief, content anchors and a target such as a responsive standalone HTML document. The skill handles the visual direction, so your request can focus on what the page contains.

• Name it directly: use $high-contrast-skeuomorphic-clean with your brief
• Describe the look: dark tactile dashboard with molded panels and one accent colour
• Give the content: list the sections, panels or modules you need

Examples of prompts and what you get

The demo prompt file includes a product-brief prompt for a dashboard called Core Interface. Its content anchors are Timeline, Messages, Pending Actions, Active Media and Vitals Monitor, and its purpose covers application workflows, modular panels and information density. Adapting that pattern to your own product works well.

Use the skill for pages where the visual hierarchy matters: a product landing page with a bold editorial headline beside stacked product modules, or an instrument-style dashboard with status widgets and orbit diagrams.

• Analytics dashboard: panels for metrics, a status widget and a progress sliver as the accent
• Product landing page: large dark shell on a light background with a split hero layout
• Admin panel: dark inputs and chips with clear separation between interactive and passive surfaces

What the skill needs and how it runs

The skill lists no requirements. It does not run scripts and does not use the network. It is a set of instructions that shapes what the agent writes, so there is nothing extra to set up beyond installing it.

The guide sets style goals but does not check contrast ratios. If your project has accessibility requirements, run a separate contrast check on the output before you ship it.

• Requirements: none listed
• Scripts: none
• Network use: none
• Contrast: not verified by the skill; check it yourself

Tips for better results

Tune the look with the knobs the guide describes: contrast level, skeuomorphic depth, accent intensity, surface softness and structural framing. Ask for more bevel and inset shadow for a tactile feel, or less for a minimal one. Ask for a single accent colour and keep it sparing.

Avoid overcrowding. The guide warns that adding depth effects to every module makes the hierarchy noisy, so ask the agent to reserve the strongest tactile treatment for buttons, search fields and key panels.

• Ask for fewer accent colours if the output looks busy
• Keep background particle or canvas texture faint
• Request a responsive layout explicitly if you need mobile support