Make your own
Everything I learned building these 21 components, written as a skill your AI coding agent can follow: how to find the right moment in your product, choose the object, write the storyboard, model the physics, render it cheaply, add sound, make it accessible, and verify it. Concrete numbers and code from the real components, not adjectives.
Install for Claude Code
Writes the skill to ~/.claude/skills/tactile-components. Then ask your agent for something tactile, or type /tactile-components.
curl -fsSL https://www.jamesfrewin.com/components/skill/install.sh | shUsing another AI? Copy the whole skill as one file and paste it in.
What’s inside
- IdeasA tactile component is not a style. It is a single moment in a product where touching something real is the clearest, warmest way to do the thing.
- MaterialsRecipes per material: the layer stack, the colour values from the source, and the one trick that sells each one.
- Motion and soundHow to choreograph a tactile component in time, and how to make it audible and felt without becoming noisy.
- PhysicsConcrete, code-level recipes with the real constants from the source components.
- RenderingHow to draw tactile objects so they hold 60fps on a midrange phone and cost nothing at rest.
- Interaction and accessibilityInput plumbing that makes gestures reliable on every device, and the semantics that make each component operable without a pointer, with a screen reader, at 320px and in both themes.
- VerificationA tactile component is only finished when you have watched it fail to break.
- The rebuild promptA component is only shareable if another agent can rebuild it exactly.
- Case studiesEleven components, each with the moment, the gesture, the techniques that make it work, and the mistakes found and fixed along the way.