CtrlK
BlogDocsLog inGet started
Tessl Logo

design-spells

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

41

Quality

41%

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 ./plugins/AI-Agents-Safe-Coding-Skills-claude/skills/design-spells/SKILL.md

The canonical home for this skill is design-spells in administrakt0r/AI-Agents-Safe-Coding-Skills

SKILL.md
Quality
Evals
Security

Quality

Content

50%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 well-structured and concise enough for a short skill, with a clear workflow and good section organization. Its main weakness is actionability: it directs Claude to an external site for patterns and names tools without any concrete example or copy-paste guidance.

Suggestions

Add one or two concrete inline examples of a 'spell' (e.g., a magnetic hover effect in CSS/JS) so Claude can act without browsing the external site.

Insert an explicit verification checkpoint in the workflow, e.g. 'Verify the interaction holds 60fps and causes no layout shift before shipping.'

Trim marketing language in the intro/Context ('memorable digital experiences', 'premium brand personality') to tighten token efficiency.

DimensionReasoningScore

Conciseness

The body is mostly efficient and does not over-explain concepts Claude knows, but the intro and Context sections carry marketing padding ('memorable digital experiences', 'genuinely magical', 'premium brand personality') that could be trimmed.

3 / 5

Actionability

Guidance is high-level: it points Claude to browse an external site (designspells.com) and 'adapt' patterns, names libraries (CSS, Anime.js, Framer Motion) and a 60fps target, but gives no concrete example interaction, code, or specific steps to execute.

2 / 5

Workflow Clarity

A clear four-step sequence (Identify, Research, Adapt, Implement) is present, but there are no explicit validation/verification checkpoints such as confirming the interaction runs at 60fps or testing on mobile.

3 / 5

Progressive Disclosure

The skill is under 50 lines with well-organized sections (Context, When to Use, Execution Workflow, Strict Rules) and needs no external reference files, satisfying the simple-skill exception for a top score.

5 / 5

Total

13

/

20

Passed

Description

32%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 identifies a clear niche but is too vague to be a strong trigger: it states no concrete actions, lacks a 'Use when' clause, and leans on marketing language ('magic', 'personality') rather than natural trigger terms. It is distinguishable from other skills but under-specified on what and when.

Suggestions

Replace 'Curated micro-interactions...' with concrete actions, e.g. 'Adds micro-interactions, hover effects, and animated transitions to web and app UIs.'

Append an explicit trigger clause: 'Use when polishing a finished UI, adding a wow factor, or replacing standard hover/load/transition behaviors.'

Include natural user-facing terms ('polish', 'wow factor', 'hover states', 'loaders', 'transitions') alongside 'micro-interactions' to improve trigger matching.

DimensionReasoningScore

Specificity

It names the domain ('micro-interactions and design details') but the only action verbs are vague curation phrasing ('Curated... that add "magic" and personality'), with no concrete actions Claude performs.

2 / 5

Completeness

It gives a vague 'what' (a curated collection of design details) and provides no 'when' / 'Use when...' guidance at all, matching the vague-what-and-no-when anchor.

2 / 5

Trigger Term Quality

It offers a couple relevant domain keywords ('micro-interactions', 'design details') but omits the natural phrases users actually say ('polish the UI', 'add a wow factor', 'hover/animation effects') and has no trigger clause.

2 / 5

Distinctiveness Conflict Risk

The micro-interaction/design-polish niche is mostly distinct with only minor overlap risk against general UI/design skills; it would not trigger for unrelated skills.

4 / 5

Total

10

/

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.

Validation15 / 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
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.