Skip to content
Get packs

Skeuomorphic UI Styling

Gives the agent a recipe for tactile, physical-looking web UI surfaces with shadows, gradients and embossed text.

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
4 files

What it does

When you ask for a button, card or control that looks pressed, carved, or made of soft plastic or metal, the agent follows this skill's set of CSS patterns for layered gradients, inner and outer shadows, thin reflective borders, subtle texture and embossed labels. Without it, the agent would usually produce plain flat styling. The skill is a design guide written as instructions and CSS snippets; it does not change anything outside the code the agent writes for your page.

Great for

  • Front-end developers who want a realistic, tactile look for dashboards, panels or control widgets
  • Designers prototyping hardware-like or retro-physical interfaces in HTML and CSS
  • Anyone who wants a consistent set of shadow and gradient tokens they can tune for their brand

Skip it if

  • Minimal flat or modern-minimal interfaces, since the effects are heavy by design and can look dated if overused
  • Accessibility-critical screens where low-contrast embossed text may be hard to read (the skill itself warns to check readability)

Try asking

  • “Make this settings card look like soft plastic with a raised edge and a pressed state for the active tab”
  • “Style my toolbar buttons with skeuomorphic depth using the brand colours #2a6df4 and light grey”
  • “Create a tactile on/off switch with carved inset shadows and embossed labels”
Step-by-step guide: how to use Skeuomorphic UI StylingInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 4 original files, the MIT licence and an attribution note.

    skeuomorphic-ui.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip skeuomorphic-ui.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip skeuomorphic-ui.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent your brand colours and theme (light or dark) so it can tune the base tokens rather than using the defaults
  • Ask for the effect on a few key controls only; the skill recommends reserving heavy pressed effects for interactive states
  • Check the result at its real rendered size, since rounded corners and 1px borders can look different when scaled

What's inside

  • demo/index.html
  • demo/PROMPT.md
  • demo/source.json
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.