design-spells

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

Quality

26%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Low

Low-risk findings worth noting

Fix and improve this skill with Tessl

tessl review fix ./skills/design-spells/SKILL.md

Quality

Content

42%Scale 1-5

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

This skill reads more like a design philosophy document than an actionable skill for Claude. It lacks concrete code examples, specific implementation patterns, or executable guidance. While the structure is reasonable and the intent is clear, the absence of any actual 'spells' (code snippets, specific CSS techniques, animation examples) makes it difficult for Claude to act on concretely.

Suggestions

Add 2-3 concrete, executable code examples showing specific micro-interactions (e.g., a magnetic hover effect in CSS/JS, a physics-based button animation with Framer Motion)

Include a validation step in the workflow, such as checking for layout shifts with DevTools or verifying 60fps performance

Create a reference file with categorized design spell patterns and their implementations rather than pointing to an external website

Remove the 'Context' section which largely repeats the description, and tighten the 'When to Use' section into a brief bullet list

Dimension	Reasoning	Score
Conciseness	The skill contains some unnecessary explanation (e.g., the 'Context' section explaining what the skill does when the header already covers it, and verbose descriptions of when to use it). However, it's not egregiously padded—it's moderately efficient but could be tightened significantly.	3 / 5
Actionability	The skill provides no concrete code examples, no specific CSS/JS snippets, no copy-paste ready implementations. It only gives high-level direction like 'Use CSS, Anime.js, or Framer Motion' without showing how. The guidance is abstract and descriptive rather than executable.	2 / 5
Workflow Clarity	There is a 4-step workflow listed, but it lacks validation checkpoints, feedback loops, or concrete commands. Steps like 'Research Spells' and 'Adapt Pattern' are vague and don't provide specific actions. No verification step exists to confirm the implementation meets performance targets (60fps).	3 / 5
Progressive Disclosure	The content is reasonably structured with clear sections, but there are no bundle files or references to deeper documentation. For a skill that references a specific external resource (designspells.com), it could benefit from linking to curated examples or a reference file with specific patterns and their implementations.	3 / 5
	Total	11 / 20 Passed

Description

11%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.

This description reads more like a marketing tagline than a functional skill description. It lacks concrete actions, specific trigger terms, and any guidance on when Claude should select this skill. The use of buzzwords like 'magic' and 'personality' adds no discriminative value for skill selection.

Suggestions

Replace vague language with specific actions the skill performs, e.g., 'Generates CSS/JS code for hover effects, scroll animations, loading spinners, button transitions, and toast notifications.'

Add an explicit 'Use when...' clause with natural trigger terms, e.g., 'Use when the user asks for animations, hover effects, micro-interactions, UI polish, transitions, or wants to add interactive details to a webpage.'

Remove subjective/marketing terms like 'magic' and 'personality' and replace with concrete deliverables or output types (e.g., 'CSS animations', 'JavaScript interaction snippets', 'Lottie animations').

Dimension	Reasoning	Score
Specificity	The description uses entirely vague, abstract language like 'micro-interactions', 'design details', 'magic', and 'personality' without naming any concrete actions. There are no specific capabilities listed—no verbs describing what the skill actually does.	1 / 5
Completeness	The 'what' is extremely vague—it says 'curated' items but doesn't explain what the skill does with them. There is no 'when' clause at all. Both dimensions are missing or too vague to be useful.	1 / 5
Trigger Term Quality	The terms 'micro-interactions' and 'design details' are somewhat relevant but niche. 'Websites and apps' are generic. Missing natural user phrases like 'animations', 'hover effects', 'transitions', 'UI polish', 'loading states', or specific interaction types users would request.	2 / 5
Distinctiveness Conflict Risk	The description is very broad and could overlap with any UI/UX design skill, animation skill, CSS skill, or frontend development skill. 'Websites and apps' covers an enormous domain with no clear niche carved out.	2 / 5
	Total	6 / 20 Passed

Validation

90%

Warnings & errors only

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

Validation — 10 / 11 Passed

Validation for skill structure

Criteria	Description	Result
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	10 / 11 Passed

Repository: administrakt0r/AI-Agents-Safe-Coding-Skills
Path: skills/design-spells/SKILL.md
Commit: 57c135b

Reviewed: 3 days ago

Table of Contents

Discovery Implementation Validation

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.