interface
Design engineering principles for making interfaces feel polished. Use when building UI, reviewing frontend code, or working on any visual detail, from animations, hover states, shadows, borders, and typography to optical alignment and tabular numbers.
npx skills add wellwelwel/lagune --skill interface --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Details that make interfaces feel better Great interfaces rarely come from a single thing. It's usually a collection of small details that compound into a great experience. Apply these principles when building or reviewing UI code. ## Quick Reference | Category | When to Use | | ----------------------------- | ----------------------------------------------------------------- | | [Typography](typography.md) | Text wrapping, font smoothing, tabular numbers | | [Surfaces](surfaces.md) | Border radius, optical alignment, shadows, hit areas | | [Animations](animations.md) | Interruptible animations, enter/exit transitions, icon animations | | [Performance](performance.md) | Transition specificity, `will-change` usage | ## Core Principles ### 1. Concentric Border Radius Outer radius = inner radius + padding. Mismatched radii on nested elements is the most common thing that makes interfaces feel off. ### 2. Optical Over Geometric Alignment When geometric centering looks off, align optically. Buttons with icons, play triangles, and asymmetric icons all need manual adjustment. ### 3. Shadows Over Borders Layer multiple transparent `box-shadow` values for natural depth. Shadows adapt to an
- Quick Reference
- Core Principles
- 1. Concentric Border Radius
- 2. Optical Over Geometric Alignment
- 3. Shadows Over Borders
- 4. Interruptible Animations
- 5. Split and Stagger Enter Animations
- 6. Subtle Exit Animations
- 7. Contextual Icon Animations
- 8. Font Smoothing
- 9. Tabular Numbers
- 10. Text Wrapping
- 11. Skip Animation on Page Load
- 12. Never Use transition: all
npx tsx tools/cdp.ts --out ./temp/shots --shot 'label|<url>'
What does the interface skill do?
Design engineering principles for making interfaces feel polished. Use when building UI, reviewing frontend code, or working on any visual detail, from animations, hover states, shadows, borders, and typography to optical alignment and tabular numbers.
How do I install it?
Run `npx skills add wellwelwel/lagune --skill interface --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From wellwelwel/lagune, a repository with 89 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.