frontend by dicklesworthstone
Interaction Design dicklesworthstone/interaction-design
Design and implement microinteractions, motion design, transitions, and user feedback patterns.
What it changes View full report → Passed 13 of 22 test cases with the skill, and 11 of 22 without it.
Without skill 50%
With skill 59%
Checks it passed that the model alone missed 2 fixed11 passed either way9 still failing0 broke
Pass-rate lift +9 pp
Tokens +110%
Agent turns 0%
Response time +12% Model gemini-3.6-flashMeasured 8/29/2026 v1 13 of 22 cases passed with skill
Use this skill Claude Code DecimalAI agent CLI & files
Save it into your project's skills folder. Claude Code picks it up in its next session.
curl -fsSL --create-dirs -o .claude/skills/dicklesworthstone-interaction-design/SKILL.md https://app.decimal.ai/s/dicklesworthstone-interaction-design/SKILL.md Copy command Copy SKILL.md
Want it pinned and updatable? pip install "decimalai>=0.15", then decimalai skills add dicklesworthstone-interaction-design, and start Claude Code with claude --plugin-dir "$(git rev-parse --show-toplevel)/.agents"
Linked stays up to date: your agents get the author's new versions automatically.
Editable copy is yours to change; the author's updates won't reach it.
Install linked skill Create editable copy
1 · One-time — install the CLI (
docs ↗ )
$ pip install "decimalai>=0.15"Copy
2 · Get the skill — writes .agents/skills/dicklesworthstone-interaction-design/ and pins it in .decimal/skills.lock
$ decimalai skills add dicklesworthstone-interaction-designCopy
Copy link Copy README badge Copy SKILL.md No CLI? Get the same file — curl · raw file $ curl -fsSL --create-dirs -o .claude/skills/dicklesworthstone-interaction-design/SKILL.md https://app.decimal.ai/s/dicklesworthstone-interaction-design/SKILL.mdCopy
Safety checks: 3 of 3 passed
Code scan Clean Intent Passed Content Clean
Overview Benchmark Contents Activity Versions 1 Ratings 0
See it in action One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
Prompt When a toast banner exits the screen, the frontend team defaulted to a linear easing or standard ease-out transition curve. Write the CSS cubic-bezier transition rule for elements exiting the view.
What was checked, without and with the skill Checked Without skill With skill Uses cubic-bezier curve cubic-bezier(0.55, 0, 1, 0.45) for accelerating exiting elements.
Show both answers
What's inside The instructions your model reads when the skill loads.
SKILL.md 322 lines 4 files
Interaction Design
Create engaging, intuitive interactions through motion, feedback, and thoughtful state transitions that enhance usability and delight users.
When to Use This Skill
Adding microinteractions to enhance user feedback
Implementing smooth page and component transitions
Designing loading states and skeleton screens
Creating gesture-based interactions
Building notification and toast systems
Implementing drag-and-drop interfaces
Adding scroll-triggered animations
Designing hover and focus states
Core Principles
1. Purposeful Motion
Motion should communicate, not decorate:
Feedback : Confirm user actions occurredOrientation : Show where elements come from/go toFocus : Direct attention to important changesContinuity : Maintain context during transitions
2. Timing Guidelines
3. Easing Functions
/* Common easings */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Decelerate - entering */
When it activates Automatically, when a task matches.
Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.
Track record Benchmark 13 / 22
test cases passed, vs 11 / 22 without
Adoption
Users 0
Times used 0 View activity → Safety and source details
SkillSafety ✓ 3 of 3 passed ✓ Code scan 15 of 15 checks clean
0 critical · 0 warning · 0 info — scanner v4 — 8/10/2026
View 15 scanner checks live_secret remote_code_execution reverse_shell data_exfiltration ssrf_metadata agent_snooping anti_refusal destructive_commands obfuscated_unicode unicode_homoglyph opaque_blob suspicious_url tool_overreach trigger_abuse prompt_injection_phrasing
✓ Intent Safe
LLM judge · does the skill do what it claims
✓ Content Clean
LLM judge · policy & harmful-content review
Source Imported dicklesworthstone / pi_agent_rust
tests/ext_conformance/artifacts/agents-wshobson/ui-design/skills/interaction-design/SKILL.md
View on GitHub ↗ License NOASSERTIONImported 8/10/2026Version v1Bundled 3 files