New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Fixing Motion Performance

by kapishdima in kapishdima/soundcn

“Fix animation performance issues.”

— description from SKILL.md by kapishdima
MITAuto-check passed

Install Fixing Motion Performance

skills CLI
$ npx skills add kapishdima/soundcn --skill fixing-motion-performance -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install kapishdima/soundcn fixing-motion-performance --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/kapishdima/soundcn.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/fixing-motion-performance .claude/skills/fixing-motion-performance && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
fixing-motion-performance
GitHub stars
862
Used in
1 other repo
Token cost
~1.1k tokens
SKILL.md length
569 words
Files
1
Skills in repo
4
Repo updated
First seen
Licence
MIT

At a glance

  • Works in 9 steps: never patterns (critical) → choose the mechanism (critical) → measurement (high) → …
  • SKILL.md covers how to use, when to apply, rendering steps glossary and rule categories by priority, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

About this skill

Fixing Motion Performance is a skill in kapishdima/soundcn (862 stars). Its SKILL.md is about 1.1k tokens, and copies of it appear in 1 other owners' repositories. Licence: MIT.

Workflow steps

9 steps, taken from the step headings in SKILL.md.

  1. never patterns (critical)
  2. choose the mechanism (critical)
  3. measurement (high)
  4. scroll (high)
  5. paint (medium-high)
  6. layers (medium)
  7. blur and filters (medium)
  8. view transitions (low)
  9. tool boundaries (critical)

What it can do on your machine

Read from SKILL.md and the folder at commit 7cbfbb3. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Fixing Motion Performance loads about 1.1k tokens when it runs. Until then it costs about 15 tokens; SKILL.md has 569 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~15
When it runs · the whole SKILL.md, loaded when a task matches
~1.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from kapishdima/soundcn at commit 7cbfbb3, republished under its MIT licence (© kapishdima). 569 words, ~1,124 tokens.

Download SKILL.mdSave it as .claude/skills/fixing-motion-performance/SKILL.md (or your agent's skills folder).
name
fixing-motion-performance
description
Fix animation performance issues.

fixing-motion-performance

Fix animation performance issues.

how to use

  • /fixing-motion-performance Apply these constraints to any UI animation work in this conversation.

  • /fixing-motion-performance <file> Review the file against all rules below and report:

    • violations (quote the exact line or snippet)
    • why it matters (one short sentence)
    • a concrete fix (code-level suggestion)

Do not migrate animation libraries unless explicitly requested. Apply rules within the existing stack.

when to apply

Reference these guidelines when:

  • adding or changing UI animations (CSS, WAAPI, Motion, rAF, GSAP)
  • refactoring janky interactions or transitions
  • implementing scroll-linked motion or reveal-on-scroll
  • animating layout, filters, masks, gradients, or CSS variables
  • reviewing components that use will-change, transforms, or measurement

rendering steps glossary

  • composite: transform, opacity
  • paint: color, borders, gradients, masks, images, filters
  • layout: size, position, flow, grid, flex

rule categories by priority

prioritycategoryimpact
1never patternscritical
2choose the mechanismcritical
3measurementhigh
4scrollhigh
5paintmedium-high
6layersmedium
7blur and filtersmedium
8view transitionslow
9tool boundariescritical

quick reference

1. never patterns (critical)
  • do not interleave layout reads and writes in the same frame
  • do not animate layout continuously on large or meaningful surfaces
  • do not drive animation from scrollTop, scrollY, or scroll events
  • no requestAnimationFrame loops without a stop condition
  • do not mix multiple animation systems that each measure or mutate layout
2. choose the mechanism (critical)
  • default to transform and opacity for motion
  • use JS-driven animation only when interaction requires it
  • paint or layout animation is acceptable only on small, isolated surfaces
  • one-shot effects are acceptable more often than continuous motion
  • prefer downgrading technique over removing motion entirely
3. measurement (high)
  • measure once, then animate via transform or opacity
  • batch all DOM reads before writes
  • do not read layout repeatedly during an animation
  • prefer FLIP-style transitions for layout-like effects
  • prefer approaches that batch measurement and writes
4. scroll (high)
  • prefer Scroll or View Timelines for scroll-linked motion when available
  • use IntersectionObserver for visibility and pausing
  • do not poll scroll position for animation
  • pause or stop animations when off-screen
  • scroll-linked motion must not trigger continuous layout or paint on large surfaces
Show full SKILL.md (218 more words)Show less
5. paint (medium-high)
  • paint-triggering animation is allowed only on small, isolated elements
  • do not animate paint-heavy properties on large containers
  • do not animate CSS variables for transform, opacity, or position
  • do not animate inherited CSS variables
  • scope animated CSS variables locally and avoid inheritance
6. layers (medium)
  • compositor motion requires layer promotion, never assume it
  • use will-change temporarily and surgically
  • avoid many or large promoted layers
  • validate layer behavior with tooling when performance matters
7. blur and filters (medium)
  • keep blur animation small (<=8px)
  • use blur only for short, one-time effects
  • never animate blur continuously
  • never animate blur on large surfaces
  • prefer opacity and translate before blur
8. view transitions (low)
  • use view transitions only for navigation-level changes
  • avoid view transitions for interaction-heavy UI
  • avoid view transitions when interruption or cancellation is required
  • treat size changes as potentially layout-triggering
9. tool boundaries (critical)
  • do not migrate or rewrite animation libraries unless explicitly requested
  • apply these rules within the existing animation system
  • never partially migrate APIs or mix styles within the same component

review guidance

  • enforce critical rules first (never patterns, tool boundaries)
  • choose the least expensive rendering work that matches the intent
  • for any non-default choice, state the constraint that justifies it (surface size, duration, or interaction requirement)
  • when reviewing, prefer actionable notes and concrete alternatives over theory

© kapishdima, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/fixing-motion-performance of kapishdima/soundcn.

Open the folder on GitHubat commit 7cbfbb3

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in kapishdima/soundcn, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Fixing Motion Performance next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Fixing Motion Performance compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Fixing Motion Performance this skillkapishdima/soundcn8621 repos~1.1kAutomated safety check: PassMIT
Fixing Motion Performanceibelick/ui-skills9.5k5 repos~1.4kAutomated safety check: PassMIT
Emilkowalski Motionnexu-io/open-design100k—~644Automated safety check: PassApache-2.0
HyperFrames Animationheygen-com/hyperframes59k3 repos~2.1kAutomated safety check: PassApache-2.0
HyperFrames Motion Doctrineheygen-com/hyperframes59k1 repos~3kAutomated safety check: PassApache-2.0
Motion Patternsaffaan-m/ECC275k1 repos~3.3kAutomated safety check: PassMIT

Similar skills

  • Fixing Motion Performance

    ibelick/ui-skills

    Audits and fixes web animation performance: layout thrashing, work that belongs on the compositor, scroll-linked motion and costly blur effects.

    9.5k GitHub starsUsed in 5 repos~1.4k tokens
    Frontend & DesignAuto-check passed

  • Emilkowalski Motion

    nexu-io/open-design

    Motion-design follow-up skill inspired by Emil Kowalski's animation guidance.

    100k GitHub stars~644 tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • HyperFrames Animation

    heygen-com/hyperframes

    Collects motion rules, scene blueprints, transitions and runtime adapters for HyperFrames video compositions, with GSAP as the default animation runtime.

    59k GitHub starsUsed in 3 repos~2.1k tokens
    Media & CreativeAuto-check passed

  • HyperFrames Motion Doctrine

    heygen-com/hyperframes

    Sets the motion rules for HyperFrames videos so scenes read as one continuous camera move, covering exit-to-entry vectors, seams, idle motion and sustained motion.

    59k GitHub starsUsed in 1 repo~3k tokens
    Media & CreativeAuto-check passed

  • Motion Patterns

    affaan-m/ECC

    Production-ready animation patterns for React / Next.js — button, modal, toast, stagger, page transitions, exit animations, scroll, and layout — built on motion-foundations tokens and springs.

    275k GitHub starsUsed in 1 repo~3.3k tokens
    Auto-check passed

  • Framer Motion

    calesthio/OpenMontage

    A skill your agent uses when implementing Disney's 12 animation principles with Framer Motion in React applications

    65k GitHub stars~821 tokensUpdated 5 days ago
    Frontend & DesignAuto-check passed

More from kapishdima/soundcn

  • Generate Creative Ideas

    kapishdima/soundcn

    Creative problem-solving and ideation using SCAMPER, First Principles, Random Word, and AI-optimized techniques.

    862 GitHub stars~2.9k tokensUpdated 4 mo ago
    Auto-check passed

  • Fixing Metadata

    kapishdima/soundcn

    Ship correct, complete metadata.

    862 GitHub starsUsed in 1 repo~1k tokens
    Auto-check passed

  • Fixing Accessibility

    kapishdima/soundcn

    Fix accessibility issues.

    862 GitHub stars~982 tokensUpdated 4 mo ago
    Auto-check passed

Questions about Fixing Motion Performance

How do I install Fixing Motion Performance in Claude Code?

Run `npx skills add kapishdima/soundcn --skill fixing-motion-performance -a claude-code`. Or copy the skill folder (.agents/skills/fixing-motion-performance in kapishdima/soundcn) into .claude/skills/fixing-motion-performance in your project. Claude Code loads it when a task matches its description.

How do I install Fixing Motion Performance in Codex?

Run `npx skills add kapishdima/soundcn --skill fixing-motion-performance -a codex`. Or copy the skill folder (.agents/skills/fixing-motion-performance in kapishdima/soundcn) into .agents/skills/fixing-motion-performance in your project. Codex loads it when a task matches its description.

Can I use Fixing Motion Performance in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add kapishdima/soundcn --skill fixing-motion-performance -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/fixing-motion-performance, .gemini/skills/fixing-motion-performance, .github/skills/fixing-motion-performance and .opencode/skills/fixing-motion-performance in your project.

What does Fixing Motion Performance need to run?

SKILL.md names no scripts, command-line tools or credentials: Fixing Motion Performance is instructions for the agent only.

Does Fixing Motion Performance access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Fixing Motion Performance safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Fixing Motion Performance use?

Fixing Motion Performance is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Fixing Motion Performance use?

About 1.1k tokens (SKILL.md is roughly 4.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Fixing Motion Performance?

Skills that share tags, products or a category with Fixing Motion Performance: Fixing Motion Performance (ibelick/ui-skills, 9.5k stars), Emilkowalski Motion (nexu-io/open-design, 100k stars), HyperFrames Animation (heygen-com/hyperframes, 59k stars) and HyperFrames Motion Doctrine (heygen-com/hyperframes, 59k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Fixing Motion Performance?

kapishdima (a GitHub user) maintains it in kapishdima/soundcn, which has 862 GitHub stars. The repository holds 4 skills in this directory. The repository was last updated on June 9, 2026.

Source: kapishdima/soundcn on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.