Styling

Motion and animation

Adds smooth, safe motion - transitions and keyframes on transform and opacity, prefers-reduced-motion, pause controls for auto-playing content, View Transitions and scroll-driven animations with feature checks, @starting-style for entry effects, and motion libraries set for reduced motion. Use when animating UI, adding page transitions, parallax or a carousel, or when an animation stutters.

fe-motionevery web project4 rules79 tokens always loaded, 838 tokens when used, 1432 tokens in references on demand.

Install

init installs this skill when the project uses every web project. Pick your agent to see where its files land.

npx github:dawidolko/frontend-skills init

Not tested yet with this runner. npx and pnpm dlx are tested; if this one fails, use one of them.

Without --agents, init finds the agents from what the project already has, and asks when it finds none:

How init finds each of the 17 agents

Agent	Found by
Claude Code	`CLAUDE.md` `.claude` `CLAUDE.local.md`
OpenAI Codex	`.codex` `AGENTS.override.md`
Cursor	`.cursor` `.cursorrules`
GitHub Copilot	`.github/copilot-instructions.md` `.github/instructions` `.github/skills` `.github/prompts`
Gemini CLI	`GEMINI.md` `.gemini`
Antigravity CLI	`.agents/rules` `.agent/rules`
Devin / Windsurf	`.devin` `.windsurf` `.windsurfrules`
OpenCode	`opencode.json` `opencode.jsonc` `.opencode`
Cline	`.clinerules` `.cline`
Zed	`.rules` `.zed`
JetBrains Junie	`.junie`
Kiro	`.kiro`
Augment	`.augment` `.augment-guidelines`
Trae	`.trae`
Continue	`.continue`
Amazon Q Developer	`.amazonq`
Aider	`.aider.conf.yml` `CONVENTIONS.md`

Where fe-motion lands for Claude Code

.claude/skills/fe-motion/SKILL.mdskill
.claude/skills/fe-motion/references/motion.mdskill
.claude/rules/fe-motion.mdrule file
CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.claude/rules/fe-motion.md

---
paths:
  - "**/*.css"
  - "**/*.scss"
  - "**/*.less"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
---

# Motion and animation (frontend-skills)

Adds smooth, safe motion - transitions and keyframes on transform and opacity, prefers-reduced-motion, pause controls for auto-playing content, View Transitions and scroll-driven animations with feature checks, @starting-style for entry effects, and motion libraries set for reduced motion. Use when animating UI, adding page transitions, parallax or a carousel, or when an animation stutters.

- Animate `transform` (`translate`, `scale`, `rotate`) and `opacity`, never `width`, `height`, `top`, `left` or `margin` (css/animate-composited).
- Non-essential motion runs only under `@media (prefers-reduced-motion: no-preference)` or is toned down under `reduce` (css/reduced-motion).
- Anything that moves on its own for more than five seconds has a pause control and stops on focus and hover (css/pause-auto-motion).
- Scroll-driven animations and anchor-positioned effects sit in `@supports` with a still fallback (css/limited-needs-supports).
- Call `document.startViewTransition` only after checking it exists; cross-document view transitions are an enhancement.
- Keep UI transitions short (about 150–300 ms) and purposeful; never animate for its own sake.
- Entry effects use `@starting-style`, exit effects `transition-behavior: allow-discrete`, not timers.
- `will-change` only to fix a measured problem, never on many elements.
- Animation libraries follow the user setting (Motion `MotionConfig reducedMotion="user"`, `useReducedMotion`).
- No flashing more than three times per second.

Before larger changes, read the full skill: `.claude/skills/fe-motion/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-motion lands for OpenAI Codex

.agents/skills/fe-motion/SKILL.mdskill
.agents/skills/fe-motion/references/motion.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenAI Codex has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-motion lands for Cursor

.agents/skills/fe-motion/SKILL.mdskill
.agents/skills/fe-motion/references/motion.mdskill
.cursor/rules/fe-motion.mdcrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.cursor/rules/fe-motion.mdc

---
description: Adds smooth, safe motion - transitions and keyframes on transform and opacity, prefers-reduced-motion, pause controls for auto-playing content, View Transitions and scroll-driven animations with feature checks, @starting-style for entry effects, and motion libraries set for reduced motion. Use when animating UI, adding page transitions, parallax or a carousel, or when an animation stutters.
globs: **/*.css, **/*.scss, **/*.less, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro
alwaysApply: false
---

# Motion and animation (frontend-skills)

- Animate `transform` (`translate`, `scale`, `rotate`) and `opacity`, never `width`, `height`, `top`, `left` or `margin` (css/animate-composited).
- Non-essential motion runs only under `@media (prefers-reduced-motion: no-preference)` or is toned down under `reduce` (css/reduced-motion).
- Anything that moves on its own for more than five seconds has a pause control and stops on focus and hover (css/pause-auto-motion).
- Scroll-driven animations and anchor-positioned effects sit in `@supports` with a still fallback (css/limited-needs-supports).
- Call `document.startViewTransition` only after checking it exists; cross-document view transitions are an enhancement.
- Keep UI transitions short (about 150–300 ms) and purposeful; never animate for its own sake.
- Entry effects use `@starting-style`, exit effects `transition-behavior: allow-discrete`, not timers.
- `will-change` only to fix a measured problem, never on many elements.
- Animation libraries follow the user setting (Motion `MotionConfig reducedMotion="user"`, `useReducedMotion`).
- No flashing more than three times per second.

Before larger changes, read the full skill: `.agents/skills/fe-motion/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-motion lands for GitHub Copilot

.agents/skills/fe-motion/SKILL.mdskill
.agents/skills/fe-motion/references/motion.mdskill
.github/instructions/fe-motion.instructions.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.github/instructions/fe-motion.instructions.md

---
applyTo: "**/*.css,**/*.scss,**/*.less,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro"
description: "Adds smooth, safe motion - transitions and keyframes on transform and opacity, prefers-reduced-motion, pause controls for auto-playing content, View Transitions and scroll-driven animations with feature checks, @starting-style for entry effects, and motion libraries set for reduced motion. Use when animating UI, adding page transitions, parallax or a carousel, or when an animation stutters."
---

# Motion and animation (frontend-skills)

- Animate `transform` (`translate`, `scale`, `rotate`) and `opacity`, never `width`, `height`, `top`, `left` or `margin` (css/animate-composited).
- Non-essential motion runs only under `@media (prefers-reduced-motion: no-preference)` or is toned down under `reduce` (css/reduced-motion).
- Anything that moves on its own for more than five seconds has a pause control and stops on focus and hover (css/pause-auto-motion).
- Scroll-driven animations and anchor-positioned effects sit in `@supports` with a still fallback (css/limited-needs-supports).
- Call `document.startViewTransition` only after checking it exists; cross-document view transitions are an enhancement.
- Keep UI transitions short (about 150–300 ms) and purposeful; never animate for its own sake.
- Entry effects use `@starting-style`, exit effects `transition-behavior: allow-discrete`, not timers.
- `will-change` only to fix a measured problem, never on many elements.
- Animation libraries follow the user setting (Motion `MotionConfig reducedMotion="user"`, `useReducedMotion`).
- No flashing more than three times per second.

Before larger changes, read the full skill: `.agents/skills/fe-motion/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-motion lands for Gemini CLI

.agents/skills/fe-motion/SKILL.mdskill
.agents/skills/fe-motion/references/motion.mdskill
GEMINI.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Gemini CLI: Gemini CLI was replaced by Antigravity CLI for unpaid tiers on 2026-06-18; choose "antigravity" too if you use it.

Gemini CLI has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

GEMINI.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-motion lands for Antigravity CLI

.agents/skills/fe-motion/SKILL.mdskill
.agents/skills/fe-motion/references/motion.mdskill
.agents/rules/fe-motion.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.agents/rules/fe-motion.md

---
trigger: glob
globs: "**/*.css, **/*.scss, **/*.less, **/*.jsx, **/*.tsx, **/*.vue, **/*.svelte, **/*.astro"
description: "Adds smooth, safe motion - transitions and keyframes on transform and opacity, prefers-reduced-motion, pause controls for auto-playing content, View Transitions and scroll-driven animations with feature checks, @starting-style for entry effects, and motion libraries set for reduced motion. Use when animating UI, adding page transitions, parallax or a carousel, or when an animation stutters."
---

# Motion and animation (frontend-skills)

- Animate `transform` (`translate`, `scale`, `rotate`) and `opacity`, never `width`, `height`, `top`, `left` or `margin` (css/animate-composited).
- Non-essential motion runs only under `@media (prefers-reduced-motion: no-preference)` or is toned down under `reduce` (css/reduced-motion).
- Anything that moves on its own for more than five seconds has a pause control and stops on focus and hover (css/pause-auto-motion).
- Scroll-driven animations and anchor-positioned effects sit in `@supports` with a still fallback (css/limited-needs-supports).
- Call `document.startViewTransition` only after checking it exists; cross-document view transitions are an enhancement.
- Keep UI transitions short (about 150–300 ms) and purposeful; never animate for its own sake.
- Entry effects use `@starting-style`, exit effects `transition-behavior: allow-discrete`, not timers.
- `will-change` only to fix a measured problem, never on many elements.
- Animation libraries follow the user setting (Motion `MotionConfig reducedMotion="user"`, `useReducedMotion`).
- No flashing more than three times per second.

Before larger changes, read the full skill: `.agents/skills/fe-motion/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-motion lands for Devin / Windsurf

.agents/skills/fe-motion/SKILL.mdskill
.agents/skills/fe-motion/references/motion.mdskill
.devin/rules/fe-motion.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Devin / Windsurf: Devin CLI also reads .cursor/rules; with Cursor chosen too, the CLI sees both rule files of a skill.

Planned by the installer itself for the example React project in the repository.

.devin/rules/fe-motion.md

---
trigger: glob
globs: "**/*.css,**/*.scss,**/*.less,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro"
---

# Motion and animation (frontend-skills)

Adds smooth, safe motion - transitions and keyframes on transform and opacity, prefers-reduced-motion, pause controls for auto-playing content, View Transitions and scroll-driven animations with feature checks, @starting-style for entry effects, and motion libraries set for reduced motion. Use when animating UI, adding page transitions, parallax or a carousel, or when an animation stutters.

- Animate `transform` (`translate`, `scale`, `rotate`) and `opacity`, never `width`, `height`, `top`, `left` or `margin` (css/animate-composited).
- Non-essential motion runs only under `@media (prefers-reduced-motion: no-preference)` or is toned down under `reduce` (css/reduced-motion).
- Anything that moves on its own for more than five seconds has a pause control and stops on focus and hover (css/pause-auto-motion).
- Scroll-driven animations and anchor-positioned effects sit in `@supports` with a still fallback (css/limited-needs-supports).
- Call `document.startViewTransition` only after checking it exists; cross-document view transitions are an enhancement.
- Keep UI transitions short (about 150–300 ms) and purposeful; never animate for its own sake.
- Entry effects use `@starting-style`, exit effects `transition-behavior: allow-discrete`, not timers.
- `will-change` only to fix a measured problem, never on many elements.
- Animation libraries follow the user setting (Motion `MotionConfig reducedMotion="user"`, `useReducedMotion`).
- No flashing more than three times per second.

Before larger changes, read the full skill: `.agents/skills/fe-motion/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-motion lands for OpenCode

.agents/skills/fe-motion/SKILL.mdskill
.agents/skills/fe-motion/references/motion.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

OpenCode has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-motion lands for Cline

.claude/skills/fe-motion/SKILL.mdskill
.claude/skills/fe-motion/references/motion.mdskill
.clinerules/fe-motion.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Cline: If .clinerules is a single file rather than a folder, Cline rule files are not written; skills still are.

Planned by the installer itself for the example React project in the repository.

.clinerules/fe-motion.md

---
paths:
  - "**/*.css"
  - "**/*.scss"
  - "**/*.less"
  - "**/*.jsx"
  - "**/*.tsx"
  - "**/*.vue"
  - "**/*.svelte"
  - "**/*.astro"
---

# Motion and animation (frontend-skills)

Adds smooth, safe motion - transitions and keyframes on transform and opacity, prefers-reduced-motion, pause controls for auto-playing content, View Transitions and scroll-driven animations with feature checks, @starting-style for entry effects, and motion libraries set for reduced motion. Use when animating UI, adding page transitions, parallax or a carousel, or when an animation stutters.

- Animate `transform` (`translate`, `scale`, `rotate`) and `opacity`, never `width`, `height`, `top`, `left` or `margin` (css/animate-composited).
- Non-essential motion runs only under `@media (prefers-reduced-motion: no-preference)` or is toned down under `reduce` (css/reduced-motion).
- Anything that moves on its own for more than five seconds has a pause control and stops on focus and hover (css/pause-auto-motion).
- Scroll-driven animations and anchor-positioned effects sit in `@supports` with a still fallback (css/limited-needs-supports).
- Call `document.startViewTransition` only after checking it exists; cross-document view transitions are an enhancement.
- Keep UI transitions short (about 150–300 ms) and purposeful; never animate for its own sake.
- Entry effects use `@starting-style`, exit effects `transition-behavior: allow-discrete`, not timers.
- `will-change` only to fix a measured problem, never on many elements.
- Animation libraries follow the user setting (Motion `MotionConfig reducedMotion="user"`, `useReducedMotion`).
- No flashing more than three times per second.

Before larger changes, read the full skill: `.claude/skills/fe-motion/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-motion lands for Zed

.agents/skills/fe-motion/SKILL.mdskill
.agents/skills/fe-motion/references/motion.mdskill
CLAUDE.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Zed: Zed reads only the first instruction file of its list; the block is placed in that file.

Zed has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CLAUDE.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-motion lands for JetBrains Junie

.agents/skills/fe-motion/SKILL.mdskill
.agents/skills/fe-motion/references/motion.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

JetBrains Junie: Junie reads .agents/skills only in a trusted project.

JetBrains Junie has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-motion lands for Kiro

.kiro/skills/fe-motion/SKILL.mdskill
.kiro/skills/fe-motion/references/motion.mdskill
.kiro/steering/fe-motion.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.kiro/steering/fe-motion.md

---
inclusion: fileMatch
fileMatchPattern: ["**/*.css", "**/*.scss", "**/*.less", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro"]
---

# Motion and animation (frontend-skills)

Adds smooth, safe motion - transitions and keyframes on transform and opacity, prefers-reduced-motion, pause controls for auto-playing content, View Transitions and scroll-driven animations with feature checks, @starting-style for entry effects, and motion libraries set for reduced motion. Use when animating UI, adding page transitions, parallax or a carousel, or when an animation stutters.

- Animate `transform` (`translate`, `scale`, `rotate`) and `opacity`, never `width`, `height`, `top`, `left` or `margin` (css/animate-composited).
- Non-essential motion runs only under `@media (prefers-reduced-motion: no-preference)` or is toned down under `reduce` (css/reduced-motion).
- Anything that moves on its own for more than five seconds has a pause control and stops on focus and hover (css/pause-auto-motion).
- Scroll-driven animations and anchor-positioned effects sit in `@supports` with a still fallback (css/limited-needs-supports).
- Call `document.startViewTransition` only after checking it exists; cross-document view transitions are an enhancement.
- Keep UI transitions short (about 150–300 ms) and purposeful; never animate for its own sake.
- Entry effects use `@starting-style`, exit effects `transition-behavior: allow-discrete`, not timers.
- `will-change` only to fix a measured problem, never on many elements.
- Animation libraries follow the user setting (Motion `MotionConfig reducedMotion="user"`, `useReducedMotion`).
- No flashing more than three times per second.

Before larger changes, read the full skill: `.kiro/skills/fe-motion/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-motion lands for Augment

.agents/skills/fe-motion/SKILL.mdskill
.agents/skills/fe-motion/references/motion.mdskill
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Augment has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

AGENTS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

The real file

Where fe-motion lands for Trae

.trae/skills/fe-motion/SKILL.mdskill
.trae/skills/fe-motion/references/motion.mdskill
.trae/rules/fe-motion.mdrule file
AGENTS.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Trae: Trae reads AGENTS.md only after it is enabled in its settings.

Planned by the installer itself for the example React project in the repository.

.trae/rules/fe-motion.md

---
description: "Adds smooth, safe motion - transitions and keyframes on transform and opacity, prefers-reduced-motion, pause controls for auto-playing content, View Transitions and scroll-driven animations with feature checks, @starting-style for entry effects, and motion libraries set for reduced motion. Use when animating UI, adding page transitions, parallax or a carousel, or when an animation stutters."
globs: **/*.css,**/*.scss,**/*.less,**/*.jsx,**/*.tsx,**/*.vue,**/*.svelte,**/*.astro
alwaysApply: false
---

# Motion and animation (frontend-skills)

- Animate `transform` (`translate`, `scale`, `rotate`) and `opacity`, never `width`, `height`, `top`, `left` or `margin` (css/animate-composited).
- Non-essential motion runs only under `@media (prefers-reduced-motion: no-preference)` or is toned down under `reduce` (css/reduced-motion).
- Anything that moves on its own for more than five seconds has a pause control and stops on focus and hover (css/pause-auto-motion).
- Scroll-driven animations and anchor-positioned effects sit in `@supports` with a still fallback (css/limited-needs-supports).
- Call `document.startViewTransition` only after checking it exists; cross-document view transitions are an enhancement.
- Keep UI transitions short (about 150–300 ms) and purposeful; never animate for its own sake.
- Entry effects use `@starting-style`, exit effects `transition-behavior: allow-discrete`, not timers.
- `will-change` only to fix a measured problem, never on many elements.
- Animation libraries follow the user setting (Motion `MotionConfig reducedMotion="user"`, `useReducedMotion`).
- No flashing more than three times per second.

Before larger changes, read the full skill: `.trae/skills/fe-motion/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-motion lands for Continue

.frontend-skills/skills/fe-motion/SKILL.mdskill
.frontend-skills/skills/fe-motion/references/motion.mdskill
.continue/rules/fe-motion.mdrule file

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Planned by the installer itself for the example React project in the repository.

.continue/rules/fe-motion.md

---
name: "Motion and animation"
description: "Adds smooth, safe motion - transitions and keyframes on transform and opacity, prefers-reduced-motion, pause controls for auto-playing content, View Transitions and scroll-driven animations with feature checks, @starting-style for entry effects, and motion libraries set for reduced motion. Use when animating UI, adding page transitions, parallax or a carousel, or when an animation stutters."
globs: ["**/*.css", "**/*.scss", "**/*.less", "**/*.jsx", "**/*.tsx", "**/*.vue", "**/*.svelte", "**/*.astro"]
alwaysApply: false
---

# Motion and animation (frontend-skills)

- Animate `transform` (`translate`, `scale`, `rotate`) and `opacity`, never `width`, `height`, `top`, `left` or `margin` (css/animate-composited).
- Non-essential motion runs only under `@media (prefers-reduced-motion: no-preference)` or is toned down under `reduce` (css/reduced-motion).
- Anything that moves on its own for more than five seconds has a pause control and stops on focus and hover (css/pause-auto-motion).
- Scroll-driven animations and anchor-positioned effects sit in `@supports` with a still fallback (css/limited-needs-supports).
- Call `document.startViewTransition` only after checking it exists; cross-document view transitions are an enhancement.
- Keep UI transitions short (about 150–300 ms) and purposeful; never animate for its own sake.
- Entry effects use `@starting-style`, exit effects `transition-behavior: allow-discrete`, not timers.
- `will-change` only to fix a measured problem, never on many elements.
- Animation libraries follow the user setting (Motion `MotionConfig reducedMotion="user"`, `useReducedMotion`).
- No flashing more than three times per second.

Before larger changes, read the full skill: `.frontend-skills/skills/fe-motion/SKILL.md`. Explain any rule id with `npx github:dawidolko/frontend-skills explain <id>`.

The real file

Where fe-motion lands for Amazon Q Developer

.frontend-skills/skills/fe-motion/SKILL.mdskill
.frontend-skills/skills/fe-motion/references/motion.mdskill
.amazonq/rules/frontend-skills.mdinstruction block

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Amazon Q Developer: Amazon Q Developer IDE plugins reach end of support on 2027-04-30; AWS points to Kiro.

Amazon Q Developer has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

.amazonq/rules/frontend-skills.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-motion` (Motion and animation): when editing `**/*.css`, `**/*.scss`, `**/*.less`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, first read `.frontend-skills/skills/fe-motion/SKILL.md`.

The real file

Where fe-motion lands for Aider

.frontend-skills/skills/fe-motion/SKILL.mdskill
.frontend-skills/skills/fe-motion/references/motion.mdskill
CONVENTIONS.mdinstruction block
.aider.conf.ymlconfig

For every agent also: .frontend-skills/profile.json, .frontend-skills/lessons.md and .frontend-skills/install.json.

Aider has no rule files scoped to file types; it reads the skills and the instruction block.

Planned by the installer itself for the example React project in the repository.

CONVENTIONS.md

## Front-end work (frontend-skills)

- Before front-end work, read `.frontend-skills/profile.json` (the stack) and `.frontend-skills/lessons.md` (confirmed conventions of this project; they win over any skill).
- Use the installed `fe-*` skill that matches the files you edit.
- After changing UI code, run `npx github:dawidolko/frontend-skills audit --changed --json` and fix findings at `serious` and above; `explain <rule id>` gives the reason, the source and the fix.
- Name rule ids (such as `a11y/img-alt`) in reviews and commit messages.

### Skills

- `fe-motion` (Motion and animation): when editing `**/*.css`, `**/*.scss`, `**/*.less`, `**/*.jsx`, `**/*.tsx`, `**/*.vue`, `**/*.svelte`, `**/*.astro`, first read `.frontend-skills/skills/fe-motion/SKILL.md`.

The real file

How to use it

Once installed, the agent loads the skill by itself when a task matches its description. You can also ask for it in your own words, for example:

And to check and fix the work:

Use the fe-motion skill on this file.
Run the front-end audit on what I changed and fix everything serious.
Explain css/animate-composited and fix it here.

Rules it teaches

css/animate-composited
Animations and transitions change transform and opacity, not layout properties such as width, height, top, left or margin.
moderatestatic
css/reduced-motion
Non-essential motion (entrance animations, parallax, smooth scrolling) respects prefers-reduced-motion.
moderatestatic
css/pause-auto-motion
Anything that moves, blinks or scrolls on its own for more than five seconds (carousels, marquees, background video) can be paused.
seriousmanualWCAG 2.2.2
css/limited-needs-supports
CSS that is not Baseline yet (anchor positioning) or only just became Baseline (scroll-driven animations) sits in @supports with a fallback.
moderatestatic

The rule digest

This part is copied into each agent's scoped rule file, so it stands on its own:

Animate transform (translate, scale, rotate) and opacity, never width, height, top, left or margin (css/animate-composited).
Non-essential motion runs only under @media (prefers-reduced-motion: no-preference) or is toned down under reduce (css/reduced-motion).
Anything that moves on its own for more than five seconds has a pause control and stops on focus and hover (css/pause-auto-motion).
Scroll-driven animations and anchor-positioned effects sit in @supports with a still fallback (css/limited-needs-supports).
Call document.startViewTransition only after checking it exists; cross-document view transitions are an enhancement.
Keep UI transitions short (about 150–300 ms) and purposeful; never animate for its own sake.
Entry effects use @starting-style, exit effects transition-behavior: allow-discrete, not timers.
will-change only to fix a measured problem, never on many elements.
Animation libraries follow the user setting (Motion MotionConfig reducedMotion="user", useReducedMotion).
No flashing more than three times per second.

Steps the agent follows

Find existing motion: tokens for duration and easing (--duration-fast, --ease-out), the global reduced-motion block, the animation library and its config.
Choose the property: movement is translate, growth is scale or grid-template-rows: 0fr → 1fr, appearance is opacity.
Write the motion inside prefers-reduced-motion: no-preference, or write a reduced variant (a fade instead of a slide) under reduce.
For page transitions, feature-check the View Transition API and keep navigation working without it.
Give carousels, marquees and background videos a pause button; do not autoplay under reduced motion.
Profile in DevTools (Performance panel, rendering "Paint flashing"): no long frames, no layout in the animation.

How the agent checks the work

npx github:dawidolko/frontend-skills audit --changed reports transitions and keyframes on layout properties, a project with motion and no reduced-motion handling, and scroll timelines outside @supports.
By hand: turn on "reduce motion" in the operating system (or emulate it in DevTools Rendering) and use the page; pause every moving element with the keyboard.

Checked by the audit

The static checks of these rules run in audit; this is a real session on the example project:

Terminal recording: audit lists findings by severity with rule ids and file:line, and fails at serious. — `audit`: counts by severity, each rule with its first location, the exit code.

Reference files

references/motion.md1432 tokens

SKILL.md on GitHub