CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

design-spells

Curated micro-interactions and design details that add "magic" and personality to websites and apps.

Quality

61%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Low

Low-risk findings worth noting

Fix and improve this skill with Tessl

tessl review fix ./skills/design-spells/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

61%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 lean and cleanly organized with a sensible four-step workflow, but it stays at the altitude of direction rather than instruction: no code examples, no bundled spell patterns, and reliance on browsing an external site for the research step. Validation/verification of the 'flawless execution' mandate is asserted as a rule but never operationalized as a workflow checkpoint.

Suggestions

Bundle a references file (e.g. references/spells.md) containing 3-5 concrete example patterns with code — such as a magnetic hover or physics-based button — so the 'Research Spells' step does not depend on browsing an external website.

Add a validation checkpoint after implementation: verify smooth framerate and no layout shifts, and fall back to a simpler interaction if a spell is janky, turning the 'Quality Execution' rule into an actionable feedback loop.

Include one copy-paste-ready implementation snippet (CSS/JS or Framer Motion) demonstrating the mandated 60fps, GPU-accelerated standard so the tool guidance is executable rather than aspirational.

DimensionReasoningScore

Conciseness

The body is short, well-sectioned, and does not explain concepts Claude already knows; there is no padding of basic material. A few marketing-flavored phrases ("genuinely 'magical'", "feel expensive and highly crafted", "surprise and delight users") could be trimmed, which fits 'Efficient; minor instances of over-explanation that could be trimmed' rather than score 5's 'every token earns its place'.

4 / 5

Actionability

There is some concrete guidance — named tools (CSS, Anime.js, Framer Motion), concrete targets ("a simple submit button, a profile photo, a scroll indicator, a pricing toggle"), and performance constraints (60fps, GPU-accelerated, no layout shifts) — but no executable code, no example spell, and the core 'Research Spells' step depends on browsing an external website with no bundled material. This matches 'Some concrete guidance but incomplete... missing key details' rather than score 4, which requires concrete code or commands.

3 / 5

Workflow Clarity

The four-step Execution Workflow (Identify Opportunity → Research Spells → Adapt Pattern → Implement) is clearly sequenced, but there are no validation checkpoints: nothing instructs verifying performance, checking for layout shifts, or falling back when a spell misbehaves. The 'Quality Execution' rule sets a quality bar but is not a checkpoint, so this is 'sequence present but checkpoints missing or implicit' rather than score 4's 'most checkpoints present'.

3 / 5

Progressive Disclosure

The skill is a single well-organized SKILL.md with no bundle files, and its sections are clear and easy to navigate. However, the 'Research Spells' step critically depends on external website content rather than any bundled reference file of example spells, so the under-50-lines exception ('no need for external references') does not fully apply — good structure with a minor disclosure gap, i.e. score 4 rather than 5.

4 / 5

Total

14

/

20

Passed

Description

45%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 communicates an appealing niche but is a static noun phrase: it names no concrete actions and, critically, provides no 'Use when' trigger guidance, so an agent would have to infer when to invoke it. Keywords are relevant but thin on synonyms.

Suggestions

Add a 'Use when...' clause with explicit triggers, e.g. 'Use when polishing a finished UI, adding hover states, creative loaders, or easter eggs, or when the user asks to make the interface delightful or add personality.'

Convert the noun phrase into concrete actions, e.g. 'Curates and implements micro-interactions and design details (magnetic hovers, physics-based motion, creative loaders) for websites and apps.'

Include natural trigger synonyms users would actually say — 'UI polish', 'delight', 'microinteractions', 'hover states', 'page transitions' — to improve both trigger coverage and distinctiveness from generic frontend/design skills.

DimensionReasoningScore

Specificity

The description names its domain ("micro-interactions and design details" for "websites and apps") but lists no actions at all — it is a noun phrase describing a curated collection, with no verbs like implement, browse, or adapt. This matches the anchor 'Names the domain but actions are minimal or generic' rather than score 3, which requires 1-2 concrete actions.

2 / 5

Completeness

The 'what' is reasonably clear (a curated collection of micro-interactions and design details that add personality), but there is no 'Use when...' clause or equivalent trigger guidance, which caps completeness at 3 per the judging guidelines. It cannot score 4 because 'when' is entirely absent rather than merely imprecise.

3 / 5

Trigger Term Quality

It includes some relevant natural keywords ("micro-interactions", "design details", "magic", "personality") but misses common variations users would say, such as UI polish, delight, animation, hover effects, or transitions. This is 'some relevant keywords but missing common variations or synonyms', not score 4's 'good keyword coverage; a few natural terms missing'.

3 / 5

Distinctiveness Conflict Risk

"Design details" and "websites and apps" are fairly broad phrasing that could overlap with general frontend, branding, or UI-design skills, though "micro-interactions" carves out a somewhat specific niche. This sits between 'somewhat specific but could still overlap with similar skills' and 'mostly distinct', and the absence of distinct trigger phrases keeps it at 3.

3 / 5

Total

11

/

20

Passed

Validation

93%

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

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository

administrakt0r/AI-Agents-Safe-Coding-Skills

Path

skills/design-spells/SKILL.md

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.