Surface
Simulated real materials
The surface clearly resembles paper, leather, wood, fabric, or metal.
Terminology classification · Established movement
The interface imitates a real object through materials, lighting, and physical details.
Also called: skeuomorphic design, realistic UI, real-world metaphor UI
Definition and scope
Skeuomorphism carries recognizable objects and materials into the interface. Paper, leather, metal, relief, and crafted details help explain how a control behaves.
Scope: This entry covers the visual style. An interaction metaphor such as a trash can for deleting a file applies the same principle at a conceptual level.
The four defining signals should remain visible without relying on the style name.
Surface
The surface clearly resembles paper, leather, wood, fabric, or metal.
Depth
Highlights, bevels, and inner shadows describe a coherent light source.
Layout
The whole surface is drawn as the object it replaces, such as a notebook or console.
Geometry
Stitching, embossing, and crafted edges extend the chosen material logic.
Decisive difference with the closest neighbor
Choose the intent that matches your work, then copy this static brief into your agent.
Create this surface with skeuomorphism around one identifiable real object. Simulate its material, apply coherent lighting, and use physical details only to clarify affordance.
Preserve functional structure, then apply one material metaphor to primary controls. Harmonize light direction, relief, and texture instead of adding competing materials.
Repair the rendering by removing ornaments that do not match the chosen material or object. Strengthen labels, states, and contrast so decoration never carries meaning alone.
Understand → Recognize → Choose → Compare
Pre-written instruction by SkillCodex — your request is neither sent nor used to adapt this text; no content is generated, and copying executes nothing.
Implement correctly
# Implement Skeuomorphism in your agent ## Objective Create this surface with skeuomorphism around one identifiable real object. Simulate its material, apply coherent lighting, and use physical details only to clarify affordance. ## Prerequisites - Inspect existing components, tokens, and brand constraints. - Confirm that this style fits the surface and content. - Preserve existing structure, semantics, and interactions. ## Behavior and surfaces - Simulated real materials — The surface clearly resembles paper, leather, wood, fabric, or metal. - Physical lighting — Highlights, bevels, and inner shadows describe a coherent light source. - Object metaphor — The whole surface is drawn as the object it replaces, such as a notebook or console. - Crafted details — Stitching, embossing, and crafted edges extend the chosen material logic. ## States - Cover existing default, hover, focus, active, disabled, loading, and error states. - Provide a static state when reduced motion is requested. ## Accessibility - Measure contrast against the busiest region of every texture. - Pair relief and shine with a color, text, or programmatic state change. - Compress textures and ensure the interface remains usable without them. ## When not to use - Mixing leather, metal, glass, and wood without a guiding object. - Replacing accessible labels and states with an ambiguous visual imitation. ## Acceptance criteria - A specialized tool where the real object immediately explains the interaction. - A narrative or heritage experience where material carries brand meaning. ## Guardrails - Show the proposed changes before any external action. - Do not publish, send, delete, pay for, or change remote state without explicit authorization. - Preserve unrelated changes and stop if the scope becomes ambiguous. ## Output format - Outcome or verdict. - Files or actions involved. - Checks run and observable evidence. - Remaining blockers or limitations.
Try next
# Audit Skeuomorphism on the real surface ## Objective Check that Skeuomorphism remains consistent, accessible, and measured on the components that actually use it. ## Checks - Compare interactive states and fallbacks. - Check contrast, focus, and reduced motion. - Report visual effects that weaken hierarchy or performance. ## Guardrails - Show the proposed changes before any external action. - Do not publish, send, delete, pay for, or change remote state without explicit authorization. - Preserve unrelated changes and stop if the scope becomes ambiguous. ## Output format - Outcome or verdict. - Files or actions involved. - Checks run and observable evidence. - Remaining blockers or limitations.
sha256:caaf996644618a871a2baf0e31efd8b10d314de95999d6e5db8b0a3003e0595b
Diagnose a problem
# Debug Skeuomorphism in your agent ## Observed symptom [DESCRIBE THE SYMPTOM HERE] ## Observable checks - Compare the surface with the documented visual signals. - Verify contrast, focus, reduced motion, and fallback behavior. - Isolate the visual layer without changing functional structure. ## Possible causes - The style hides hierarchy or reduces contrast. - The effect is applied to too many surfaces or depends on an unavailable API. - An interactive state is no longer perceivable. ## Bounded corrections Repair the rendering by removing ornaments that do not match the chosen material or object. Strengthen labels, states, and contrast so decoration never carries meaning alone. ## Final verification - Measure contrast against the busiest region of every texture. - Pair relief and shine with a color, text, or programmatic state change. - Compress textures and ensure the interface remains usable without them. ## Guardrails - Show the proposed changes before any external action. - Do not publish, send, delete, pay for, or change remote state without explicit authorization. - Preserve unrelated changes and stop if the scope becomes ambiguous. ## Output format - Outcome or verdict. - Files or actions involved. - Checks run and observable evidence. - Remaining blockers or limitations.
Try next
# Prevent Skeuomorphism drift ## Objective Turn the visual fix into a reusable rule and focused check without freezing the whole interface. ## Checks - Isolate the responsible tokens or variants. - Add focused evidence for the affected states. - Compare nearby styles before widening the rule. ## Guardrails - Show the proposed changes before any external action. - Do not publish, send, delete, pay for, or change remote state without explicit authorization. - Preserve unrelated changes and stop if the scope becomes ambiguous. ## Output format - Outcome or verdict. - Files or actions involved. - Checks run and observable evidence. - Remaining blockers or limitations.
sha256:f3f91e96cc886d3d423f938454dfc5fada669bf5a0f376d1641722be45dc93f5
Pack digest: sha256:f75d3bc549dbbcc1bbff2220c515e718ad6b35c94801ff349ebbbc07b640b4fd
Audience measurement
With your consent, Google Analytics and aggregate first-party counters measure site usage to help us improve it. These counters contain no search text, candidate, session identifier, or event identifier. You can change your choice anytime via “Cookies” in the footer.