interaction-design

Creates intuitive user experiences through feedback patterns, microinteractions, and accessible interaction design. Use when designing loading states, error handling UX, animation guidelines, or touch interactions.

Quality

79%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./plugins/interaction-design/skills/interaction-design/SKILL.md

Quality

Content

75%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 content is a well-organized, mostly executable interaction-design reference with lean code examples and clear sections. Its main limitation is minor: some JSX references undefined components, and as a catalog it has no validation workflow to showcase.

Suggestions

Make code examples fully self-contained: define or stub the <Icon> and <Illustration> components and the className hooks (skeleton, error-container, empty-state) so snippets are directly runnable.

Tighten the Animation Guidelines and Best Practices lists by trimming subjective asides (e.g. 'longer feels sluggish') to keep every token load-bearing.

If the skill grows, move the per-state pattern implementations into reference files (e.g. references/loading-states.md) and keep SKILL.md as a navigable overview to push progressive_disclosure toward 5.

Dimension	Reasoning	Score
Conciseness	The body is mostly lean: short section intros followed directly by code, with no padding about what CSS/JSX or libraries are; a few asides ("longer feels sluggish", "Show loading states for waits >0.5s") could be trimmed, placing it at efficient-with-minor-excess rather than perfectly lean.	4 / 5
Actionability	Provides concrete, mostly copy-paste-ready CSS and JSX for loading/error/empty states and accessibility; minor gaps because several examples reference undefined components (<Icon>, <Illustration>, className hooks without definitions), keeping it just below fully executable.	4 / 5
Workflow Clarity	As a pattern catalog it is clearly organized by state type with unambiguous guidance per section; there is no multi-step process to sequence, but for a simple reference skill the per-section guidance is clear, so it earns a solid 4 rather than 5 which would require explicit validation checkpoints in a real workflow.	4 / 5
Progressive Disclosure	Single-file skill with no bundle files and clean section headers (Interaction Patterns, Loading/Error/Empty States, Accessibility, Animation, Best Practices) providing good structure and easy navigation; not a 5 only because it slightly exceeds the under-50-line simple-skill threshold and inlines a fair amount of pattern code that could optionally live in reference files.	4 / 5
	Total	16 / 20 Passed

Description

83%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 cleanly states both what the skill does and when to use it, with concrete trigger terms across several interaction-design sub-areas. It is specific and actionable, with only minor gaps in synonym coverage and a small overlap risk with general UX skills.

Dimension	Reasoning	Score
Specificity	Names the interaction-design domain plus several concrete sub-areas ("feedback patterns, microinteractions, and accessible interaction design"), matching the anchor that lists several specific capabilities with minor coverage gaps; not a 5 because the single verb 'Creates' fronts sub-domains rather than multiple distinct actions.	4 / 5
Completeness	Explicitly answers both what ("Creates intuitive user experiences through feedback patterns, microinteractions, and accessible interaction design") and when ("Use when designing loading states, error handling UX, animation guidelines, or touch interactions") with concrete trigger phrases, matching the top anchor.	5 / 5
Trigger Term Quality	"Use when designing loading states, error handling UX, animation guidelines, or touch interactions" gives good natural keyword coverage a user would say; not a 5 because it lacks synonyms/common variations (e.g. 'spinners', 'skeletons', 'toasts', 'transitions').	4 / 5
Distinctiveness Conflict Risk	The interaction-design framing with specific trigger terms is mostly distinct from sibling skills, though broad UX/UI or accessibility skills carry minor overlap risk, so it sits at 'mostly distinct' rather than a clear niche.	4 / 5
	Total	17 / 20 Passed

Validation

100%

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 — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository: secondsky/claude-skills
Path: plugins/interaction-design/skills/interaction-design/SKILL.md
Commit: ad16332

Reviewed: 12 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.