Give Your Coding Agent Better Taste
Install motion skills and use your coding agent to audit a component animation.
Introduction
30 Second Summary
A dropdown can feel sluggish even when it opens correctly. A hover state can feel abrupt even when every click works.
In this project, you will install open animation skills into your coding agent. The finished audit leaves concrete evidence in a verified diff plus before-and-after recordings.
What You'll Build
Play your finished recordings back to back to see the same component move with tighter timing under the same interactions.
By the end of this project, you'll have:
- A pair of before-and-after recordings that captures your original motion plus the reviewed version for direct comparison.
- A specific animation audit that names easing curves plus duration values you can inspect.
- A verified Git diff that proves the component changed plus a controlled comparison showing how the review weakens when a skill is missing.
- Secret Mission: An optional challenge to push your skills further.
Are there any prerequisites?
You need an animated component inside a repository your coding agent can access. The skills are free, though your coding agent still uses its existing subscription or API access.
Before We Start
A motion audit needs a stable starting point. A local Git repository preserves the file changes you will inspect later.
Your coding agent also needs access to the same repository. That shared context lets the agent inspect the component you choose.
A screen recorder preserves what the component looked like before the review. This preparation makes the later comparison trustworthy.
In this step, get ready to:
- Prepare a local Git repository for the motion review.
- Connect your coding agent to the repository.
- Prepare the recording workspace for one animated component.
Prepare the Git repository
Git gives you independent evidence of every value the agent changes. First, you need a repository that your editor can display throughout the review.
- Start your usual code editor through Spotlight on macOS or Windows Search on Windows.
You should see your editor open with its normal workspace controls.
- Use your editor's folder-opening command to load the folder that contains your component or will contain it.
You should see the folder name in the editor's file sidebar.
- Open the editor's integrated terminal for the folder.
- Check whether Git is available by running this command:
git --version
What does this command check?
The command prints the installed Git version. A version number confirms that the terminal can run Git.
✔️ I see a Git version number
Git is ready. Keep the integrated terminal open for the repository setup.
ⓧ Command not found
Git needs to be installed before this repository can track the agent's edits.
macOS
- Open the official Git installation guide for macOS.
- Complete the Xcode Command Line Tools prompt if macOS displays it.
- Return to the integrated terminal after the installation finishes.
- Confirm Git is available by running this command:
git --version
What confirms the installation?
You should see a Git version number in the terminal. That output confirms the installation is available to your editor.
Windows
- Download Git for Windows from the official Git website.
- Complete the installer using its default options.
- Restart your code editor after the installation finishes.
- Return to the integrated terminal.
- Confirm Git is available by running this command:
git --version
What confirms the installation?
You should see a Git version number in the terminal. That output confirms the installation is available to your editor.
Still missing Git?
Restart your editor so its terminal picks up the newly installed command. Reopen the same repository folder after the restart.
Help me troubleshoot Git installation
- Initialize the open folder as a Git repository by running this command:
git init
What does this command do?
The command creates the hidden .git directory that stores the repository history. Running it inside an existing repository keeps the existing files intact.
You should see a message confirming that Git initialized or reinitialized the repository.
Repository initialization failed?
- Check that the integrated terminal belongs to the folder shown in your editor.
- Confirm that you can create files inside the folder.
Help me initialize the repository
Connect the agent to a component
The review only works when the agent can inspect the repository itself. You also need one small component so the later motion changes stay easy to compare.
- Use your coding agent's repository control to attach the folder already open in your editor.
- Approve access to the repository if the agent requests permission.
- Confirm that the agent's context view names the current repository folder.
You should see the repository attached with file access enabled. The agent is now available to inspect files in this workspace.
Agent cannot see the repository?
- Check that the agent is running from the same folder shown in your editor.
- Reconnect the current repository through the agent's workspace controls.
Help me connect my coding agent
Choose the path that matches your starting point.
Review an existing component
- Choose one component file with a dropdown opening or a button changing on hover.
- Open the selected component file from your editor's file sidebar.
- Record the selected file here: path to your component file.
Create a small component later
- Choose a future file path for a small dropdown or hover button component.
- Record the planned file here: path to your component file.
The next step uses this path when you create the component.
Why keep the component small?
A focused component makes easing curves and durations easier to compare. One clear interaction keeps the review tied to motion quality.
Prepare screen recording
The before-and-after comparison depends on two short recordings made from the same view. A quick test now confirms that your recorder can capture the component clearly.
- Open your screen-recording software through Spotlight on macOS or Windows Search on Windows.
You should see controls for starting a screen recording.
- Start a short test recording that shows your editor.
- Stop the recording once the component area or repository sidebar is visible.
Before you play it, do you expect the editor text to remain readable at normal playback size?
- Play the test recording from beginning to end.
You should see a clear clip of the editor with no blank recording area. Your recorder is ready for the before-and-after demonstrations.
Test recording is blank or cropped?
- Grant screen-recording permission if your operating system requests it.
- Select the editor window or screen area that contains the component.
- Repeat the short test after changing the capture area.
Help me fix my screen recording
- Switch back to the integrated terminal in your editor.
Before the final check, do you think Git still recognizes the open folder as a repository?
- Confirm the repository state by running this command:
git status
What should you see?
You should see a line beginning with On branch. This confirms that the terminal is inside the local repository.
Git does not recognize the repository?
- Check that the terminal is attached to the folder open in your editor.
- Run the repository initialization command again from that folder.
Help me verify my Git repository
✔️ My setup is ready
Your repository, coding agent, component choice, and screen recorder are ready for the motion review.
ⓧ I'd like to double check the full code
This setup step prepares the tools around your component. Compare your workspace with these target artifacts:
- Coding agent: Available to inspect and edit files in the repository.
- Git repository: Local repository open with Git available.
- Screen recording setup: Available for capturing short before-and-after component demonstrations.
Your review workspace is ready. Next, you'll build or open the selected component and capture its motion before the agent audits it.
Build and Record the Component
A motion review needs a clear starting point. Without one, every later improvement depends on memory.
Your coding agent will work against the component you prepare here. A baseline recording preserves how its motion feels before the review influences it.
In this step, get ready to:
- Prepare src/AnimatedComponent.jsx with one visible motion interaction.
- Run the component to confirm the interaction works.
- Save a baseline capture as recordings/before.mp4.
Prepare the animated component
A useful audit target has motion you can trigger repeatedly. A dropdown opening or a button changing on hover gives the agent something concrete to judge.
Your repository has one of two starting states. Follow the path that matches the component you chose.
Use an existing component
Keeping the existing interaction preserves the choices already present in your project. The file needs a consistent path so the review can target it later.
- Select the animated component you chose earlier in the editor's file tree.
- Ask the coding agent from earlier to relocate the component to src/AnimatedComponent.jsx without breaking its existing references if it uses another path.
- Inspect src/AnimatedComponent.jsx to confirm it contains a visible motion interaction.
- Ask the agent to add a dropdown transition or button hover transition if the component has no visible motion.
- Ask the agent to start the repository's existing component preview.
- Approve the preview command if the agent requests permission.
You'll see the component in its current state. Its dropdown or hover effect should respond each time you trigger it.
Create a new component
A compact interaction provides enough movement for a focused audit. The component only needs one motion effect that you can repeat on demand.
- Ask the coding agent from earlier to create src/AnimatedComponent.jsx as a runnable component with one visible motion interaction.
- Ask the agent to make the component visible through the repository's existing preview.
- Ask the agent to start the repository's existing component preview.
- Approve the preview command if the agent requests permission.
You'll see the new component in the preview. Its dropdown or hover effect should respond each time you trigger it.
What Makes This a Useful Baseline?
The component file preserves the current implementation. The preview shows whether that implementation produces visible motion.
This gives the later review a fixed target. It also gives you something concrete to compare after the values change.
Component Not Visible?
- Confirm that the agent used the exact path src/AnimatedComponent.jsx.
- Ask the agent to reconnect the component to the repository's existing preview if the preview is blank.
- Check that the preview process is still running in the terminal from earlier.
Help me display the animated component
Record the baseline
A baseline recording captures timing that source code cannot show by itself. Keep the interaction short so the later comparison focuses on the motion.
- Create a recordings folder in the repository's file tree if it is missing.
- Switch back to the component preview from earlier.
- Trigger the component's primary motion interaction once.
You should see the interaction complete from its resting state to its finished state. Repeatable movement makes the before and after comparison fair.
Keep the Baseline Honest
This capture records the component before any animation review. Awkward timing or abrupt easing belongs in the baseline because it shows what the skills eventually change.
- Set the capture area in the screen-recording software from earlier so the component preview is clearly visible.
- Start the capture.
- Trigger the primary motion interaction once.
- Move the pointer over the animated button if hover motion is part of the component.
- Stop the capture after the motion settles.
- Save the finished capture as recordings/before.mp4.
Before you play it back, which movement do you expect to notice first?
- Play recordings/before.mp4 from start to finish.
You should see the component at rest at the start. The clip should show the full interaction without cutting off its finish.
Baseline Missing or Unclear?
- Confirm that the recording is saved at the exact path recordings/before.mp4.
- Record the interaction again if the component falls outside the capture area.
- Leave a short resting moment at the start if the motion begins too quickly to judge.
Help me improve my baseline capture
Your starting motion is now preserved in code and on video. Next, you'll install the animation skills that give your coding agent a sharper review checklist.
Install the Animation Skills
Your baseline recording now preserves how src/AnimatedComponent.jsx moves before any review. The coding agent can inspect the repository, but it still needs motion rules to judge that interaction consistently.
Open Agent Skills give the agent reusable animation guidance. This step installs that guidance in the repository and confirms the agent can see it.
In this step, get ready to:
- Install the open animation skill set in the current repository.
- Confirm the connected coding agent can see the animation-related skills.
Install the skill set
The installer turns the public skills repository into project-scoped instructions for your connected agent. Project scope keeps these rules attached to this repository.
- Return to the repository terminal from earlier.
- Keep every skill selected if the installer asks which skills to add.
- Select the coding agent connected to this repository if the installer asks for a target.
- Choose Symlink if the installer asks for an installation method.
- Install the skill set in the current repository by running this command:
npx skills@latest add emilkowalski/skills
What Does This Command Do?
- The npx command runs the skills CLI without requiring a global installation.
- The skills@latest package reference selects the current published CLI release.
- The add emilkowalski/skills portion retrieves the skill collection from its public repository.
- The default project scope makes the selected skills available inside the current repository.
- Wait for the installer to finish.
- Check that the completion summary identifies your connected coding agent.
- Check that the summary reports installed skills.
Great, the repository now holds the motion guidance your coding agent needs.
Installer Did Not Finish?
- Confirm that npx is available in the terminal environment if the command cannot start.
- Check your network connection if the repository download stalls.
- Choose the connected coding agent if the installer cannot select a target automatically.
Get help with this installation. Check the official skills CLI issues for environment-specific reports.
List the installed skills
An installation summary confirms that files were written. The installed-skills list confirms which agent can access them.
Before you check, which animation skill names do you expect to see in the list?
- List the skills available to the connected coding agent by running this command:
npx skills list
What Does This Check Prove?
- The npx skills list command reports installed skills from the project scope.
- The target information shows which coding agent received each skill.
- Animation-related entries prove that the agent has access to the motion guidance.
You should see review-animations, animate, and animation-vocabulary in the output. The list should associate these skills with the coding agent connected to the repository.
Animation Skills Missing From the List?
- Run the installer again if the animation-related names do not appear.
- Keep every animation-related skill selected during the repeated installation.
- Select the agent connected to this repository when the installer asks for a target.
Help me fix the missing skills.
That checkpoint matters because your coding agent can now see the animation guidance. Next, you will use the review skill to audit src/AnimatedComponent.jsx.
Review the Component Motion
Your baseline recording preserves the component's original motion. The coding agent can now see the installed animation skills.
General feedback cannot guide precise edits. The review needs to name the affected interaction.
It also needs concrete easing curves. Each timing recommendation needs a duration value.
In this step, get ready to:
- Run the installed animation review against src/AnimatedComponent.jsx.
- Request concrete easing curve recommendations.
- Confirm each timing recommendation includes a duration value.
Frame the review request
A review-only request preserves the component you captured in recordings/before.mp4. It gives you a clear audit before any source values change.
- Switch back to the coding agent panel from earlier.
- Start a new request that tells the agent to use its installed animation review skill.
- Add src/AnimatedComponent.jsx as the only component file to inspect.
- Ask for each finding to name the affected interaction.
- Ask for each finding to explain the motion issue.
- Ask for a concrete easing curve in every relevant recommendation.
- Ask for a concrete duration value in every relevant recommendation.
- State that the agent must review the file without editing it.
Before you send the request, do you expect the skill-guided review to point to exact motion values?
- Send the completed request to the agent.
You should see a review organized around the motion in src/AnimatedComponent.jsx. Its recommendations should include concrete curves plus duration values.
Review Missing Concrete Values?
- Tell the agent to reread the installed animation review skill before retrying.
- Ask it to tie every recommendation to the source file.
- Request a replacement curve for every easing issue.
- Request a duration value for every timing issue.
Help me make my animation review specific.
Check the findings against the component
Specific values are useful when they match motion in the component. This check separates grounded findings from confident guesses.
- Read the first finding in the agent's review.
- Switch back to src/AnimatedComponent.jsx in the editor from earlier.
- Compare the finding with the motion interaction it names in the file.
- Repeat the comparison for the remaining findings.
- Request a revised finding for any recommendation that lacks a concrete curve.
- Request a revised finding for any recommendation that lacks a duration value.
- Read the revised review in the agent panel.
What Makes a Finding Actionable?
- The interaction identifies the exact motion being reviewed.
- The diagnosis explains what makes that motion feel wrong.
- The recommendation supplies a concrete easing curve.
- The timing guidance supplies a concrete duration value.
Before the final check, which finding do you expect to be easiest to verify against the source file?
- Scan the final response for at least one specific easing curve.
- Scan the final response for at least one duration value.
- Confirm each recommendation names the motion interaction it addresses.
You should now see file-specific findings with concrete motion improvements. The review gives you exact values to test in the next step.
You have turned a general request for better motion into an actionable audit. Each recommendation can now be checked against the component.
The review now contains concrete motion targets. Next up, the agent applies them before the repository diff provides proof.
Apply and Verify the Fixes
The animation review has given your coding agent concrete motion values to use. This step turns the recommendations you agree with into edits in src/AnimatedComponent.jsx.
Agent summaries can sound complete even when the file stays unchanged. Git gives you a direct record of the edited lines.
In this step, get ready to:
- Choose the animation review recommendations that support your intended interaction.
- Have the coding agent apply the selected fixes to the component.
- Verify the changed animation values from the repository diff.
Apply the selected recommendations
Motion recommendations are useful when they support the interaction you intended. Your selected findings define the boundaries for this edit.
- Re-read the animation review findings from earlier.
- Choose the findings that match the intended feel of your component.
- Switch back to the coding agent connected to your repository.
- Send the selected findings to the agent with src/AnimatedComponent.jsx as the only file to edit.
Your agent may ask for file-edit permission. This approval only covers the component change you requested.
- Approve any file-edit request only when it targets src/AnimatedComponent.jsx.
- Wait for the agent to finish the file edit.
- Return to src/AnimatedComponent.jsx in the editor from earlier.
- Confirm that the selected easing curve values appear in the file.
- Confirm that the selected duration or hover-transition values appear in the file.
- Keep the component edit uncommitted for the diff check.
The component file should now show the motion values selected from the review. Treat the agent's summary as a claim until the repository confirms those edits.
Verify the edit with Git
The agent's summary describes what it intended to change. A repository diff exposes the exact lines that changed.
Before you run the check, do you expect every selected motion value to appear in the diff?
- Verify the uncommitted file changes by running this command in the terminal from earlier:
git diff
What Does This Command Prove?
- The git command compares your current uncommitted files with the repository's recorded state.
- Removed lines show the previous animation values.
- Added lines show the values written by the coding agent.
- Find the diff section for src/AnimatedComponent.jsx.
- Check that the removed lines contain the previous animation values.
- Check that the added lines contain the selected easing curve values.
- Check that the added lines contain the selected duration or hover-transition values.
Good call checking the evidence. You now have proof that the component file contains the animation-related edits the agent claimed.
Is the Diff Empty or Unrelated?
- Return to src/AnimatedComponent.jsx in your editor.
- Save the file if your editor still shows unsaved changes.
- Return to the coding agent if the selected values are missing.
- Ask the agent to apply the selected findings directly to src/AnimatedComponent.jsx.
- Repeat the diff command above.
If other files appear in the output, focus on the section for your animated component.
Help me verify my animation diff
Your selected motion fixes are now applied and verified in the file. Next, you'll record the updated component so you can compare its motion with the baseline.
Compare the Before and After Motion
You have confirmed that the agent changed src/AnimatedComponent.jsx by checking the verified diff. The next question is whether those values improve the component when it moves.
Animation rules can sharpen easing curves or shorten durations. Your design intent still decides whether each recommendation belongs in the finished component.
In this step, get ready to:
- Capture the revised component as recordings/after.mp4.
- Play both recordings back to back.
- Record your judgement on the review findings.
Record the updated motion
A fair comparison uses the same starting state in both clips. Matching the original sequence can be fiddly, so follow the baseline as closely as you can.
- Return to the updated component preview from earlier.
- Match the starting state shown at the beginning of recordings/before.mp4.
- Switch back to the screen-recording software from earlier.
- Start a new recording.
- Reproduce the same interaction sequence shown in the baseline recording.
- Stop the recording after the final interaction.
- Save the new clip as recordings/after.mp4 inside the repository.
- In the editor from earlier, expand the recordings folder in the sidebar.
You should see before.mp4 plus after.mp4 inside the recordings folder.
Can't find the after recording?
Check that the recording was saved inside the repository's recordings folder. Confirm that its filename is exactly after.mp4.
Help me locate my saved recording.
You have the matched evidence pair now. The animation changes have a visual record you can inspect.
Compare both recordings
Back-to-back playback makes small timing differences easier to perceive. Watch one interaction at a time so each change gets a fair review.
Before you play the clips, which interaction do you expect to show the clearest difference?
- Play recordings/before.mp4 from beginning to end.
- Play recordings/after.mp4 immediately afterwards.
- Replay recordings/before.mp4 while focusing on the dropdown motion.
- Replay recordings/after.mp4 while focusing on the dropdown motion.
- Replay recordings/before.mp4 while focusing on the button hover transition.
- Replay recordings/after.mp4 while focusing on the button hover transition.
You should be able to name at least one visible difference in easing, duration, or hover response. That difference may improve the component or conflict with its intended feel.
- Return to the animation review findings from earlier.
- Match the clearest visual improvement to its review finding.
- Choose one review finding that conflicts with your design intent.
Before the final playback, do you expect both observations to remain obvious when you watch the pair again?
- Play recordings/before.mp4 once more from the beginning.
- Play recordings/after.mp4 immediately afterwards.
You should now be able to connect one visible improvement to a specific recommendation. You should also be able to point to one moment where a recommendation conflicts with your intended feel.
Your before-and-after pair now shows where the skill improved the motion plus where your intent overruled it. Next, you'll remove one skill to test how much specificity disappears from the same review.
Test a Review Without a Skill
Your coding agent has already produced precise motion findings for src/AnimatedComponent.jsx. You confirmed the applied values with git diff before comparing the two recordings.
A controlled comparison changes one input. You will remove one animation-review skill before repeating the same request against src/AnimatedComponent.jsx.
In this step, get ready to:
- Remove one installed animation-review skill from the repository.
- Repeat the previous review request against src/AnimatedComponent.jsx.
- Compare the original findings with the missing-skill findings.
Remove one animation-review skill
A useful control changes one factor at a time. The selected skill is the factor you remove.
- Return to the coding agent from earlier.
- Ask it to list its available skills again.
- Choose one animation-review skill whose description most directly supports motion audits.
- Record its name here: the animation skill you selected.
- Ask the coding agent to identify the repository folder that supplies the animation skill you selected without changing any files.
- Record the returned folder path here: the selected skill folder path.
- Locate the selected skill folder path in your editor's file explorer.
- Confirm the final folder name matches the animation skill you selected.
Delete Only the Selected Skill
Deleting a folder can feel risky. This test targets one installed skill folder.
- Delete only the selected skill folder path.
- Leave src/AnimatedComponent.jsx unchanged.
- Leave recordings/before.mp4 unchanged.
- Leave recordings/after.mp4 unchanged.
- Use the folder's context menu to delete the selected skill folder path.
- Approve the confirmation prompt if one appears.
- Ask the coding agent to list its available skills again.
You should see that the animation skill you selected is absent. The other installed animation skills should remain available.
Still Seeing the Deleted Skill?
The coding agent may be reading an older copy of its repository context.
- Refresh the agent's repository context using its usual reload control.
- Ask the agent to list its available skills again.
Need help with the stale list? Help me refresh my coding agent's skills.
Repeat the same animation review
The review request is your second control. Reusing its exact wording makes the deleted skill the only deliberate change.
- Return to the original animation-review request in the agent history.
- Copy the exact request you used earlier.
Before you submit it, do you expect the review to keep the same level of specificity with one skill missing?
- Submit the copied request to the connected coding agent.
- Decline any file edits if the agent offers to apply its findings.
You should see broader recommendations in the new findings. You should see fewer explicit easing curves or duration values.
- Keep the second review response open for comparison.
Review Still Just as Specific?
The agent may have reused its earlier response. It may also have retained the removed skill in active context.
- Start a fresh conversation after refreshing the agent's repository context.
- Submit the exact same review request again.
Need help isolating the missing skill? Help me troubleshoot the comparison review.
Compare both sets of findings
Specificity is the signal you are measuring. A side-by-side comparison shows which guidance disappeared after the skill was removed.
Before you compare the reviews, which parts of the original findings do you expect the second review to lose?
- Place the original review beside the missing-skill review.
- Mark every original finding that names a specific easing curve.
- Mark every original finding that names an exact duration value.
- Match each marked finding to the closest finding in the missing-skill review.
- Identify at least one pair where the missing-skill review uses broader language.
- Keep both review responses available in the agent history.
You should now have a direct example where the original review gives a concrete motion value while the missing-skill review gives general advice.
What This Test Proves
The deleted skill supplied review criteria that the base agent did not express with the same precision.
Your earlier rejected finding still matters. Specific advice can conflict with your design intent.
That's the experiment complete. You can now point to the exact guidance that weakened when the skill disappeared.
Secret mission
Defend a Motion Decision
One animation finding conflicted with your design intent. Make the coding agent argue both sides. Use your existing recordings plus verified diff to defend the decision you keep.
Clean Up Your Resources
Clean Up Your Resources
Your artifacts live in a local Git repository, so they create no ongoing cloud costs. Decide whether to keep them, pause your active tools, or remove the project evidence.
Resources you used:
- Animated component with verified motion changes at src/AnimatedComponent.jsx.
- Baseline recording at recordings/before.mp4.
- Updated recording at recordings/after.mp4.
- Verified animation diff for src/AnimatedComponent.jsx.
- Motion comparison notes stored in the repository.
Keep the Reusable Skills
The remaining animation skills are reusable across repositories. They stay installed in every cleanup option below.
Keep everything running
No action is needed. Choose this option if you want to preserve the component audit as evidence for future motion reviews.
- Keep the verified animation changes in src/AnimatedComponent.jsx.
- Keep the original motion capture at recordings/before.mp4.
- Keep the updated motion capture at recordings/after.mp4.
- Keep the original review findings in your coding agent history.
- Keep the missing-skill review findings in your coding agent history.
- Keep the verified animation diff in the repository.
- Keep your motion comparison notes in the repository.
- Leave the remaining animation skills installed for future reviews.
Pause - I'll come back to this later
Pause your active tools while preserving every repository artifact. Your local files remain ready for the next review session.
- Save every open file in your editor.
- End the coding agent session connected to the repository.
- Close your editor.
- Close your screen-recording software.
Your component, recordings, verified diff, notes, and installed skills remain on disk.
Delete - I don't want to use this again
Deletion is permanent, so take a moment to choose the scenario that matches how src/AnimatedComponent.jsx entered your repository. Both paths preserve the remaining animation skills for future projects.
I used an existing component
Use this path when the component existed before the project. It protects unrelated repository work while removing the animation-review experiment.
- Use your editor's source control controls to discard the animation-review edits in src/AnimatedComponent.jsx.
- Delete recordings/before.mp4 from the editor's file tree.
- Delete recordings/after.mp4 from the editor's file tree.
- Delete the file containing your motion comparison notes from the repository.
- Confirm the source control view no longer shows the animation-review edits.
- Confirm both recording paths no longer appear in the editor's file tree.
Your original component remains in the repository. The project-specific recordings and comparison notes are removed.
I created the component here
Use this path when the component exists only for this project. This removes the project-specific files without touching the reusable animation skills.
- Delete src/AnimatedComponent.jsx from the editor's file tree.
- Delete recordings/before.mp4 from the editor's file tree.
- Delete recordings/after.mp4 from the editor's file tree.
- Delete the file containing your motion comparison notes from the repository.
- Confirm all three project paths no longer appear in the editor's file tree.
The component evidence is removed from the repository. Your remaining animation skills stay available for another project.
Nice Work!
Nice Work!
You did it! You used animation skills to sharpen your coding agent's motion review. Your repository now preserves that proof through a verified diff alongside before-and-after recordings.
You've learned how to:
- Capture the original motion in recordings/before.mp4. Capture the revised motion in recordings/after.mp4. Compare both recordings as before-and-after motion evidence.
- Run a skill-backed animation review against src/AnimatedComponent.jsx. Choose concrete easing-curve changes from the findings. Apply selected duration changes.
- Use Git to verify real file edits instead of trusting the agent's summary. Preserve notes that document the motion improvements. Record any finding that conflicted with your design intent.
- Secret Mission: Remove one animation skill. Repeat the review to reveal vaguer findings. Use that contrast to identify what the deleted skill contributed.
Ready to quiz yourself?