⏳ This skill is pending AI review.

Scores will appear once the review pipeline completes.

version unknown

feel

@diip3sh⭐ 8 stars

Build UI interactions whose motion comes from a physical model instead of durations and easing curves. Turn a feel described in words ("a toggle that feels heavy", "a drawer with a magnetic snap", "a card you throw into a corner", "a knob with heavy detents", "a sticky slider") into a production component driven by mass, stiffness, damping and force fields (magnets, friction, walls), on a line, in a plane or around a dial, plus a test rig that plots position, velocity and the force field, overlays the model's prediction on the measured motion, and exports the same spring to Framer Motion, react-spring, SwiftUI, Compose or CSS linear(). Use this whenever someone asks for an animation, transition, spring, gesture, drag, flick, snap points, bottom sheet, toggle, slider, carousel or any micro-interaction that should "feel" a certain way, or wants to tune or explain a spring, even if they never say "physics".

Choose how to use this skill

You do not need every option. Choose the path your AI client supports. The stable page stays the same; versioned files are immutable.

1. Native installer

This listing has no registered native installer command. Use the complete package or source fallback below, depending on what your client supports.

Do not guess an installer command or replace an existing version without reviewing the diff.

2. Complete package recommended

Download the ZIP when available. It includes SKILL.md plus the references, security notes and version metadata.

No complete ProSkills package is published for this listing yet.

3. Prompt-only

Copy the prompt above when the agent can read the stable page or when you want to adopt the workflow without installing a skill.

Need only the instruction file?

Download SKILL.md only if your client requires a single file. The complete ZIP is safer for a full installation because it preserves the references and release context.

No path installs or executes anything by itself. Your agent still needs access to the project files. Before updating, compare the installed version and review the diff.

—/10

// RATINGS

⭐GitHub Stars
⭐ 8 on GitHubGitHub ↗

New / niche

🟢ProSkills Score
—
📍

Not yet listed on ClawHub or SkillsMP

// README

Feel

Interactions built on physics. No hand-picked durations. A skill for Claude Code, plus the runtime and test rig it uses.

Feel: a heavy, detented knob flicked back to its zero detent, with its angle, velocity and force field plotted beside it

Live demo · Watch the video

Say how it should feel, for example "a toggle that feels heavy", "a drawer with a magnetic snap" or "a card you throw into a corner". You get two things:

  • A production component driven by mass, stiffness, damping and force fields, on a line, in a plane or around a dial.
  • A test rig that plots position, velocity and the force field. It overlays the model's prediction on the measured motion, can hand each release to the browser as CSS keyframes baked from the same model, and exports the same spring to Framer Motion, react-spring, SwiftUI, Compose or CSS linear().

The rule

Every motion comes from a physical model. No hand-picked durations.

  • A tap changes a target or gives an impulse.
  • A drag pulls the body through a hand spring, so heavy things lag the finger.
  • Release keeps the body's real velocity, and decisions come from where it would coast.
  • If CSS forces a duration, it's computed from the model and labelled as such.
  • scripts/audit.mjs fails on any transition: 300ms, cubic-bezier, duration: or timer that moves things.

Try it

Open the live demo, or run it locally:

python3 -m http.server 8750
open http://127.0.0.1:8750/

Heavy toggle: drag it slowly, flick it, or let go halfway. Magnetic drawer: flick the sheet and watch which magnet catches it. Corner card: throw it diagonally. Knob: turn it, flick it, and feel the detents. Switch any rig's "Runs on" to CSS keyframes and the browser plays each release instead.

Install the skill

npx skills add diip3sh/feel
# or
git clone https://github.com/diip3sh/feel ~/.claude/skills/feel

/feel a toggle that feels heavy, React
/feel bottom sheet with three magnetic stops, slightly bouncy

Runtime

const body = new Feel.Body({ feel: "heavy", x: 0, target: 0, min: 0, max: 60, onFrame: (b) => thumb.style.transform = `translateX(${b.x}px)` });
Feel.drag(el, body, { axis: "x", onTap: () => body.to(body.target ? 0 : 60) });
body.onRelease = (b, projected) => b.to(projected > 30 ? 60 : 0);

Feel.words("very heavy, snappy"), Feel.metrics(params), Feel.magnets({ stops, period }), Feel.Body2D with Feel.points({ stops }), Feel.drag(el, body, { axis: "x" | "y" | "xy" | "angle" }), Feel.handoff(body, styles), Feel.exportCode(params, "framer"), Feel.rig(host, { body, stage, travel }). React: runtime/react/useFeel.ts.

The rig's controls (Feel.ui) follow Fluid Functionalism, ported to plain DOM and moved by Feel springs.

Audit

node scripts/audit.mjs            # components + demo
node scripts/audit.mjs src/ --feel "heavy, snappy"

It scans for hand-picked durations, checks the solver against the exact solution on a line and in a plane, checks passivity and settling, checks that taps land on every stop, corner, detent and across a wheel's seam, checks that baked CSS keyframes match the JS loop, and checks that the rig's Measures and its readout give the same settle time.

MIT © diip3sh

// HOW IT'S BUILT

KEY FILES

SKILL.mdREADME.md

// REPO STATS

8 stars

// SHARE

Share on XShare on LinkedIn