CtrlK
BlogDocsLog inGet started
Tessl Logo

skeuomorphic-ui

Create skeuomorphic web UI surfaces with layered gradients, stacked inner and outer shadows, reflective gradient borders, micro texture, and embossed text or icon details. Use when asked for pressed, carved, tactile, realistic, soft-plastic, soft-metal, or premium physical interface styling.

76

Quality

95%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

90%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is a tight, fully actionable styling recipe with complete CSS for each state and a useful taste-rules and quick-checks appendix. It is lean and copy-paste ready; the only gaps are inline validation checkpoints within the surface recipe and any progressive-disclosure structure (none is strictly needed here).

Suggestions

Weave a brief inline checkpoint into the Surface Recipe (e.g., after step 4, "Verify the top edge reads brighter than the lower edge at render size") so validation is part of the sequence rather than only in the trailing Quick Checks.

Consider moving the per-state CSS variants (Raised, Pressed, Embossed, Micro Texture) into a single references file linked from a shorter overview, which would let SKILL.md stay under ~50 lines and raise progressive-disclosure structure.

Add a one-line fix-retry cue near Quick Checks (e.g., "If text looks washed out, reduce text-shadow opacity and re-check readability") to close the feedback loop for the most common failure mode.

DimensionReasoningScore

Conciseness

The body is lean: short scoping lines ("Use for cards, panels, primary buttons...") followed directly by copy-paste CSS, with no primers on what CSS, gradients, or shadows are; every section earns its tokens, matching the lean-and-efficient anchor.

5 / 5

Actionability

Complete executable CSS is provided for base tokens, raised surface, pressed surface, embossed text/icons, and micro texture, covering the common cases in copy-paste-ready form, matching the fully-executable anchor.

5 / 5

Workflow Clarity

A clear 7-step Surface Recipe is paired with a terminal "Quick Checks" validation checklist, but checkpoints are not woven inline into the sequence and there is no explicit fix-and-retry loop, placing it just below the anchor requiring inline validation with feedback loops.

4 / 5

Progressive Disclosure

Sections are well-organized with clear headers and no nested or buried references, and all content is appropriately inline for a self-contained styling recipe; however the skill exceeds 50 lines and contains no one-level-deep references, so it does not fully meet the anchor that expects well-signaled reference links.

4 / 5

Total

18

/

20

Passed

Description

100%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description is exemplary: it states a concrete capability, enumerates the constituent surface techniques, and supplies a rich set of natural trigger terms within an explicit "Use when" clause. It is concise, distinct, and fully answers both what and when.

DimensionReasoningScore

Specificity

"Create skeuomorphic web UI surfaces with layered gradients, stacked inner and outer shadows, reflective gradient borders, micro texture, and embossed text or icon details" enumerates multiple concrete surface treatments with comprehensive coverage, matching the anchor for several specific concrete actions rather than the minor-gaps anchor at 4.

5 / 5

Completeness

It explicitly answers both what ("Create skeuomorphic web UI surfaces with...") and when ("Use when asked for...") with concrete trigger phrases, matching the anchor that requires both clearly and explicitly.

5 / 5

Trigger Term Quality

"pressed, carved, tactile, realistic, soft-plastic, soft-metal, or premium physical interface styling" provides comprehensive natural synonyms a user would actually say, exceeding the good-coverage anchor at 4.

5 / 5

Distinctiveness Conflict Risk

The skeuomorphic styling niche with specific tactile triggers is clearly distinguishable from flat/material/glassmorphism skills and carries minimal conflict risk, matching the clear-niche anchor.

5 / 5

Total

20

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
MengTo/Skills
Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.