Guide · Agent skill
How to use the Skeuomorphic UI skill for tactile web styling
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Skeuomorphic UI skill is a set of instructions and CSS patterns that tells an AI agent how to style web interfaces so they look tactile, such as pressed buttons, carved wells, and soft-plastic or soft-metal panels. It is written for front-end developers and designers who want that physical look in HTML and CSS. After this guide you will know what the skill does, how to install it, how to ask for its effects in plain language, and what to check before using it.
Skeuomorphic UI StylingMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Get the skeuomorphic-ui ZIP from our page.
- 2Unzip into a skills folder. Extract it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder for one project.
- 3Or upload it in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the ZIP.
- 4Ask for a tactile style. Describe the component and material, using words like pressed, carved, soft-plastic, or soft-metal.
- 5Review the code. Check the raised and pressed states, the gradient border, and whether text and icons remain readable.
What the skeuomorphic-ui skill makes the agent do
An agent skill is a folder of instructions that an AI agent loads when a request matches the skill's description. This one covers skeuomorphic styling: surfaces that imitate real physical materials using layered gradients, stacked inner and outer shadows, thin reflective gradient borders, subtle micro texture, and embossed text or icon details.
When you ask for a button, card, or control that looks pressed, carved, or made of soft plastic or metal, the agent follows the skill's recipe. The recipe starts with a rounded shape and a vertical gradient, adds a 1px gradient border, stacks shadows, adds a top-edge highlight, and then adds small details only where the size supports them.
The skill does not change anything outside the code the agent writes for your page.
- Raised surface for cards, panels, primary buttons, tabs, and control housings
- Pressed surface for active buttons, toggled controls, selected tabs, and inset wells
- Embossed labels and icons for text and icon details inside tactile controls
- Micro texture at low opacity
- A base set of CSS color and shadow tokens you can tune for your brand
How to install the skeuomorphic-ui skill
Download the ZIP for the skill from our page. Then choose one of these two options.
For a single personal setup, unzip the folder into ~/.claude/skills/. To limit the skill to one project, unzip it into that project's .claude/skills/ folder. The skill folder should contain SKILL.md, which is the file the agent reads.
If you use the Claude apps instead, upload the ZIP under Settings → Capabilities → Skills.
- Personal use: ~/.claude/skills/
- Single project: the .claude/skills/ folder inside that project
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
How to trigger the skill with natural requests
You do not need a special command. The agent uses the skill when your request matches its description, which lists words such as pressed, carved, tactile, realistic, soft-plastic, soft-metal, and premium physical interface styling. Plain requests using these words are the most reliable way to trigger it.
You can also name the skill directly. The demo prompts in the package begin with $skeuomorphic-ui, so naming it in your request is a clear signal.
Describe the component and the material you want. Mention the element type (button, card, switch, input, dial, toolbar) and whether it should look raised, pressed, or inset.
- Use $skeuomorphic-ui to make a raised soft-plastic card with an embossed title.
- Make this primary button look pressed when it is active, with a carved inset well behind the label.
- Style this toolbar in soft metal with subtle grain, keeping the icons readable.
- Create a tactile volume dial in HTML and CSS using the skeuomorphic-ui surface recipe.
Example: the pressed surface pattern
The skill includes ready-made CSS. This is the pressed surface pattern it uses for active buttons and inset wells. It moves the element down 1px and reverses the depth with inset shadows. The agent may adapt these values to your design tokens.
The skill also defines base tokens such as --sk-bg-top, --sk-shadow, and --sk-highlight. Changing these values is the simplest way to match your brand.
.sk-surface.is-pressed {
transform: translateY(1px);
background:
linear-gradient(180deg, #d5dce8, #eef2f7 52%, #f8fafc) padding-box,
linear-gradient(180deg, rgba(72, 84, 112, 0.38), rgba(255, 255, 255, 0.62)) border-box;
box-shadow:
inset 0 4px 10px rgba(31, 41, 55, 0.22),
inset 0 -1px 0 rgba(255, 255, 255, 0.72),
0 4px 10px rgba(31, 41, 55, 0.10);
}Taste rules and quick checks to review the output
The skill sets clear limits. Use one physical material per component. Keep light coming from the top and shadows falling below. Avoid pure black shadows. Do not mix glassmorphism, neumorphism, and skeuomorphism in the same component. Reserve heavy pressed effects for interactive states, and reduce texture on small controls.
After the agent writes the code, check the raised state for a brighter top edge and darker lower edge, check that the pressed state reverses depth, and confirm that text and icons remain readable.
- Raised state: brighter top edge, darker lower edge
- Pressed state: depth reversed with inset shadows
- Gradient border: 1px, not overpowering the content
- Text and icons: still readable after shadow effects
What the skill needs and how it runs
The skill lists no required tools or dependencies. It does not run scripts and does not use the network. Its files are demo/index.html, demo/PROMPT.md, demo/source.json, and SKILL.md. The demo files are a reference: demo/index.html shows the visual and interaction target, and demo/PROMPT.md contains prompts that ask for a full responsive HTML page based on that reference.
Because the skill is only instructions and CSS, the main safety concern is the code the agent writes, not the skill itself. Review generated CSS and HTML as you would any code before you deploy it.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
- Licence: MIT
What people use it for
- Styling a dashboard panel or card with a soft-plastic raised look
- Making a primary button or toggle show a clear pressed state
- Prototyping a hardware-like control such as a dial, switch, or toolbar in HTML and CSS
- Building a consistent set of shadow and gradient tokens to tune for a brand
Frequently asked questions
How do I install the skeuomorphic-ui skill?
Download the ZIP from our page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. In the Claude apps, you can instead upload the ZIP under Settings → Capabilities → Skills.
What does the skeuomorphic-ui skill require?
The skill lists no requirements. It does not run scripts and does not use the network. It is a set of instructions and CSS snippets.
Is the skeuomorphic-ui skill free to use?
The skill is published under the MIT licence. Check the licence text included with the download for the full terms.
How do I trigger the skill?
Describe the look you want using words such as pressed, carved, tactile, soft-plastic, or soft-metal, or name the skill directly with $skeuomorphic-ui. The agent uses it when the request matches its description.
When should I not use this skill?
Avoid it for minimal flat or modern-minimal interfaces, because the effects are heavy by design and can look dated if overused. It is also a poor fit for accessibility-critical screens where low-contrast embossed text may be hard to read.
Why does my skeuomorphic design look hard to read?
Embossed text and heavy shadows can reduce contrast. The skill's quick checks say to confirm that text and icons remain readable after shadow effects. Reduce texture and shadow strength on small controls, and adjust the --sk-* tokens.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you are a front-end developer or designer who wants realistic, tactile styling for dashboards, panels, or control widgets, and you want consistent shadow and gradient tokens to tune. Pick a different approach if you need flat or minimal interfaces, or if the screen must meet strict readability requirements.
Download the skill