CtrlK
BlogDocsLog inGet started
Tessl Logo

motion-ui

Production-ready UI motion system for React/Next.js. Use when implementing animations, transitions, or motion patterns.

61

Quality

73%

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

Fix and improve this skill with Tessl

tessl review fix ./skills/motion-ui/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

82%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 strong, executable reference: dense with working code, clear pattern tables, and solid QA/debugging checklists. Its main weaknesses are mild prose padding in a few rationale sections and a monolithic single-file structure that could offload some examples to one-level-deep reference files.

Suggestions

Trim the prose rationale on device adaptation and layout-avoidance to one line each, keeping the code as the primary signal.

Move the larger worked examples (Modal full example, Skeleton, Stagger List) into a references/EXAMPLES.md linked one level deep to reduce SKILL.md length and improve progressive disclosure.

Add an explicit validate-then-fix loop for the one fragile workflow present (import-version mixing), e.g., a one-line "if grep finds both packages, migrate to a single source before continuing" checkpoint.

DimensionReasoningScore

Conciseness

The body is code-heavy and mostly assumes Claude's competence, with only minor prose over-explanation (device-adaptation heuristic commentary, layout-avoid rationale) that could be trimmed, fitting the score-4 anchor.

4 / 5

Actionability

It provides copy-paste-ready TSX/CSS/Tailwind examples plus scenario-to-pattern tables and concrete import/version guidance that fully cover the common cases, matching the score-5 anchor.

5 / 5

Workflow Clarity

As a patterns/reference skill it relies on checklists (QA, Debugging) and explicit rules ("Always specify mode", "If it does none → remove it") rather than a fragile multi-step sequence, giving most checkpoints with only minor gaps, fitting the score-4 anchor.

4 / 5

Progressive Disclosure

The single SKILL.md is well-organized into clear sections (When to Use, How It Works, Examples) with no nested references, but all content is inlined in one ~575-line file rather than split into one-level-deep reference files, so it sits at score-4 rather than 5.

4 / 5

Total

17

/

20

Passed

Description

65%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 answers what and when with a clear niche and decent trigger terms, but it stays at a high level of abstraction without concrete capability verbs. Adding one or two specific actions (e.g., "tune", "orchestrate", accessibility-aware motion) would lift specificity and completeness.

Suggestions

Replace the generic "motion system" framing with one or two concrete verbs (e.g., "Implement, tune, and orchestrate accessibility-aware animations and transitions") to raise specificity.

Expand the when-clause with more concrete triggers such as "use when adding hover/scroll/layout animations, modal or list enter/exit transitions, or reduced-motion fallbacks".

Add a natural synonym like "framer-motion" or "spring physics" to broaden trigger-term coverage for users who phrase it differently.

DimensionReasoningScore

Specificity

Names the domain ("UI motion system for React/Next.js") but offers no concrete actions beyond the generic "motion system" label, matching the score-2 anchor where actions are minimal or generic.

2 / 5

Completeness

It states both what ("Production-ready UI motion system for React/Next.js") and when ("Use when implementing animations, transitions, or motion patterns"), but the when-clause could be more specific, matching the score-4 rather than the comprehensive score-5 anchor.

4 / 5

Trigger Term Quality

"animations, transitions, or motion patterns" plus "React/Next.js" gives good natural keyword coverage, though synonyms like "framer-motion" or "spring" are missing, fitting the score-4 anchor.

4 / 5

Distinctiveness Conflict Risk

The React/Next.js motion niche is mostly distinct from generic animation skills with only minor overlap risk against closely related CSS/animation skills, fitting the score-4 anchor.

4 / 5

Total

14

/

20

Passed

Validation

87%

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

Validation14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

skill_md_line_count

SKILL.md is long (577 lines); consider splitting into references/ and linking

Warning

metadata_version

'metadata.version' is missing

Warning

Total

14

/

16

Passed

Repository
affaan-m/ECC
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.