Tactile UI

For the love of beautiful UX.

I love beautiful UX.

Tactile UI turns that interest into a working method for agents: choose one interaction, give its surface some character, and keep the action clear.

The Sea Glass video prompted this study of glass buttons, sliders, checkboxes and quick settings.

Try the component board, see the material in a phone interface, or move a lens across type.

The skill turns those details into implementation choices and checks for keyboard use, reduced motion and legibility.

The controls use CSS; the optics study uses a WebGPU approximation.

This is an original web interpretation, not the video's renderer or evidence of a usability improvement.

What it does

• Builds a material from tint, an edge highlight and a contact shadow, with a readable foreground.
• Keeps organic decoration separate from predictable controls and their hit areas.
• Builds native sliders, checkboxes, switches and segmented controls with immediate, visible state changes.
• Requires a plain comparison, keyboard and touch support, reduced motion and an opaque fallback.
• Distinguishes CSS blur from real refraction and measured performance from an untested impression.

SKILL.md, material and component recipes, an optics guide with an example shader, sources, agent metadata and MIT LICENSE. No runtime dependency required by the skill.

Who it’s for

Designers and engineers working with coding agents who want a more expressive interface without losing familiar behavior. Start with one card or control, especially in frequently used or high-stakes flows.

How to install / use

1. Use the install command below, or download and unzip the package into your agent's skills directory. The tactile-ui folder contains SKILL.md at its root.
2. Ask your agent to use tactile-ui on one existing interaction. Supply the task, code and visual reference.
3. Compare the plain and tactile versions, exercise the controls, and review the actual checks before shipping.