Feel skill
A Claude Code skill for physics-driven interactive components: mass, stiffness and damping, no hand-picked durations.
- 68 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill generates frontend code and runs a local demo server and audit script on your machine.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/feelDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill generates frontend code and runs a local demo server and audit script on your machine.
This is third-party code. Review the repository files before installing.
What it does
Feel builds interactive components from a physical model: mass, stiffness, damping and force fields. You describe a feel, for example "a toggle that feels heavy", "a drawer with magnetic stops" or "a card you throw into a corner", and get two things. First, a working component where heavy things lag the finger and release keeps the body's real velocity. Second, a test rig that plots position, velocity and the force field and overlays the model's prediction on measured motion. Hand-picked durations are banned by rule: if CSS needs a duration, it is computed from the model. The `scripts/audit.mjs` script flags any `transition: 300ms`, `cubic-bezier` or timer that moves things. The spring can be exported to Framer Motion, react-spring, SwiftUI, Compose or CSS `linear()`.
Who it is for. Frontend developers and interface designers who want animation that feels like a physical object with no hand-tuned curves.
Good fit when
- A toggle should feel heavy and settle into detents.
- A drawer sheet must stop at several magnetic positions.
- A rotary knob needs detents and inertia.
- Existing code must be audited for hand-picked durations and curves.
Not a fit when
- You need a simple decorative entrance animation where physics is overkill.
- The project follows a design system duration scale.
- You need a complete UI component kit.
Example request
/feel bottom sheet with three magnetic stops, slightly bouncy, for React.Limitations
The main output targets the web: JavaScript components and a React `useFeel.ts` hook. For other platforms the skill gives a spring export and no ready components. Verification runs a local server and a browser, so the rig is unavailable where no browser exists. The no hand-picked durations rule is strict: a project with a fixed design-system scale will need exceptions. The demo has four components and is no library for every case.
How to disable. Delete the skill folder from `~/.claude/skills/feel`. Files from `runtime/` and components added to your project are removed by hand.
FAQ
How do I install Feel?
With `npx skills add diip3sh/feel` or by cloning the repository into `~/.claude/skills/feel`. Then call `/feel` with a description of the feel.
What does `scripts/audit.mjs` check?
It scans for hand-picked durations, `cubic-bezier` and timers that move things, and checks the solver against the exact solution on a linear spring.
Where can the spring be exported?
To Framer Motion, react-spring, SwiftUI, Compose or CSS `linear()` through `Feel.exportCode`.
How do I try an example?
Open the live demo on the project site or run `python3 -m http.server 8750` in the repository and visit 127.0.0.1:8750.
Which words describe a feel?
`Feel.words("very heavy, snappy")` turns a description into body parameters and `Feel.metrics` shows the computed values.
Discussion
No questions or reviews yet.
Related
SkillsA skill that animates anything drawn in code: characters, water, smoke, icons and scenes in React Native and SwiftUI
A skill that builds Framer components with Three.js, WebGL and GSAP: 3D, shaders and scroll animation in a single TSX file.
Six Framer Motion skills for React: motion components, variants, gestures, scroll, layout animations and AnimatePresence
A skill of ready CSS transitions for web interfaces: modals, dropdowns, toasts, loaders and dozens of other animations with matching rules
A skill that turns copy, a style brief and sound into coherent code animation: storyboard, style choice, Remotion and review.
The fun-isometric skill draws isometric stickers from flat slabs with an outline and animates them on real keyframes.
README in short
The repository holds the skill, the `runtime/feel.js` and `feel.css` runtime, four example components, references on models, vocabulary and verification, and an audit script. Rig controls follow Fluid Functionalism and run on Feel springs.