Design with Taste

This skill encodes the design philosophy behind Family — a product widely praised for feeling alive, welcoming, and intentional. Originally documented by Benji Taylor at benji.org/family-values.

Read this before writing any UI code. Every time.

The user wants something built. Your job is to make it feel like a human who gives a shit designed it.

The Three Pillars

Ordered by priority. You cannot have Delight without Fluidity, and you cannot have Fluidity without Simplicity.

1. Simplicity — Gradual Revelation

"Each action by the user makes the interface unfold and evolve, much like walking through a series of interconnected rooms."

The problem: Most UIs dump everything at once — every feature, every option, every edge case, all visible, all the time. This transfers cognitive burden from the designer to the user.

The principle: Show only what matters right now. The interface should feel like walking through rooms — you glimpse what's next before you arrive.

Rules:

• One primary action per view. Two equally weighted CTAs = failure. Make everything else secondary.
• Progressive disclosure over feature dumps. Layered trays, step-by-step flows, expandable sections. Never show a 12-field form when 3 steps of 4 fields works.
• Context-preserving overlays over full-page navigations. Sheets/trays/modals that overlay the current context keep users oriented. Full-screen transitions displace them.
• Vary heights of stacked layers. Each subsequent sheet/tray must be a visibly different height so the progression is unmistakably clear. Never stack two identical-height layers.
• Every sheet/tray/modal needs a title and dismiss action. Users must always know what they're looking at and how to get back.
• Trays adapt to context. A tray appearing within a dark-themed flow should adopt a darker color scheme. The visual environment follows the user.
• Trays can launch full-screen flows. A compact tray is a valid entry point for a multi-step full-screen experience — don't force a binary choice between "tray" and "page."
• Use trays for transient actions; full screens for persistent destinations. Confirmations, warnings, and contextual info = tray. Settings, core content = full screen.

// GOOD: Progressive tray — compact, focused, context-aware
<Sheet>
  <SheetTrigger>Confirm Send</SheetTrigger>
  <SheetContent className="h-[45vh]"> {/* height varies from parent */}
    <SheetHeader>
      <SheetTitle>Review Transaction</SheetTitle>
      <DismissButton />
    </SheetHeader>
    {/* Core info only — no extras */}
    <Button>Send $42.00</Button>
  </SheetContent>
</Sheet>

Self-check: Can the user tell within 1 second what to do next? If not, simplify.

2. Fluidity — Seamless Transitions

"We fly instead of teleport."

The problem: Static transitions make products feel dead. A dead product feels uncared for. Instant cuts destroy spatial orientation — where did that come from? Where did it go?

The principle: Treat your app as a space with unbreakable physical rules. Know why a transition makes sense architecturally before adding it. Every element moves from somewhere to somewhere.

Rules:

• No instant show/hide. Every element that appears or disappears must animate. Pick a transition that makes spatial sense — fade, slide, scale, morph.
• Shared element transitions. If an element exists in both State A and State B (a card that expands, a button that becomes a sheet), it must visually travel between them. Never unmount and remount — morph.
• Directional consistency. Navigate right (next step, next tab) → content enters from right. Go back → content enters from left. Tabs to the left of current slide left. This builds spatial memory.
• Text morphing over instant replacement. When button labels change (e.g., "Continue" → "Confirm"), animate the transition. Identify shared letter sequences ("Con") — keep them fixed while the rest morphs. Use torph (npm i torph) — dependency-free, works with React/Vue/Svelte. Crossfade is the minimum fallback; shared-letter morphing is the ideal.
• Partial text changes: only animate what changes. If a sentence gains or loses a word, keep the unchanged portion static. Animating unchanged text creates jarring redundancy.
• Persistent elements stay put. If a header, card, or component persists across a transition, it must NOT animate out and back in. Only the changing parts move.
• Loading states travel to their destination. A spinner doesn't just sit where triggered — it moves to where the user will look for results (e.g., after submitting a transaction, the spinner migrates to the activity tab icon).
• Micro-directional cues. Chevrons, arrows, and carets should animate to reflect the action taken. A → becomes a ← on back-navigation. An accordion chevron rotates on expand.
• Unified interpolation. All visual elements driven by the same data should share the same lerp/easing. This makes the interface feel like one thing breathing rather than a bunch of parts updating independently. When the value changes, the line, the label, the axis, and the badge should all move as one.

// Text morphing — use torph
import { TextMorph } from 'torph/react';
<TextMorph>{label}</TextMorph>  // handles shared-letter animation automatically

// Directional tab transitions
const direction = newIndex > currentIndex ? 1 : -1;
<motion.div
  key={currentTab}
  initial={{ x: direction * 20, opacity: 0 }}
  animate={{ x: 0, opacity: 1 }}
  exit={{ x: -direction * 20, opacity: 0 }}
  transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
/>

// Shared element: card → detail view
<motion.div
  layoutId={`card-${id}`}
  className={isExpanded ? "fixed inset-0 rounded-none" : "rounded-xl"}
  transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
/>

The golden easing curve: cubic-bezier(0.16, 1, 0.3, 1) — fast start, gentle settle. Default for all entrances and morphs. Use ease-in (cubic-bezier(0.4, 0, 1, 1)) for exits only. Never use linear.

Self-check: Record your screen and play back at 0.5x speed. Can you follow every element's journey? Anything that teleports needs a transition.

3. Delight — Selective Emphasis

"Mastering delight is mastering selective emphasis."

The problem: Either zero personality (corporate slop) or everything bounces and sparkles (annoying). Both miss the point.

The principle: The Delight-Impact Curve — the less frequently a feature is used, the more delightful it should be. Daily actions need efficiency with subtle touches. Rare moments deserve theatrical ones.

Delight ↑
        |         *  (rare features: theatrical)
        |       *
        |     *
        |   * *  (medium: memorable)
        | * *
        |* *  *  (frequent: subtle)
        +------------------→ Feature frequency

Rules:

• Polish everything equally. The settings page, the empty state, the error screen — all receive the same care as the hero section. One unpolished corner makes the whole feel unpolished. "Like a fancy restaurant with a dirty bathroom."
• Easter eggs reward exploration. Hide moments in unexpected places. They create stories users share. Key: place them in features used just enough that discovery feels like reward, not annoyance.
• Celebrate completions. Significant actions (backup, onboarding, first transaction) deserve confetti, a custom animation, a satisfying sound — not a green checkmark.
• Make destructive actions satisfying. Deleting items? They tumble into a trash can with a sound effect. Destructive ≠ unpleasant.
• Animate numbers and live charts. Values that change (prices, counts, balances) should count/flip/morph. Commas should shift position smoothly as numbers grow — never just swap. For real-time line charts, use liveline (npm i liveline) — one canvas, no dependencies beyond React 18, 60fps interpolation. For 60fps value overlays, update the DOM directly rather than through React state to avoid re-render overhead.
• Empty states are first impressions. An animated arrow pointing toward the create button, a floating illustration, a warm message. Never "No items yet" with nothing else.
• Sound design amplifies physicality. Completion sounds, subtle interaction feedback. Sound reinforces reward and makes actions feel real.
• Drag-and-drop should feel satisfying. Stacking animations, smooth reorder, visual feedback on lift. Reordering items should feel better than the result deserves.

Delight pattern library — concrete moments proven to work:

// Animated number with smooth comma shifting
function AnimatedNumber({ value }) {
  const spring = useSpring(value, 
how to use design-with-taste
CursorClaude CodeClineCodexWindsurfGooseGitHub CopilotVS CodeGemini CLIKiloOpencodeKimi CLIRoo ClineAiderContinueZedBolt.newLovablev0Replit AgentSweepSmol DeveloperDevinCavemanAmpAntigravity
How to use design-with-taste on Cursor
AI-first code editor with Composer
1
Prerequisites
Before installing skills in Cursor, ensure your development environment meets these requirements:
›Cursor installed and configured on your development machine
›Node.js version 16.0+ with npm package manager (verify with node --version)
›Active project directory or workspace where you want to add design-with-taste
2
Execute installation command
Execute the skills CLI command in your project's root directory to begin installation:
$npx skills add https://github.com/cristicretu/family-taste-skill --skill design-with-tastecopy
The skills CLI fetches design-with-taste from GitHub repository cristicretu/family-taste-skill and configures it for Cursor.
3
Select Cursor when prompted
The CLI will show a list of available agents. Use arrow keys to navigate and space to select Cursor:
◆ Which agents do you want to install to?
│
│ ── Universal (.agents/skills) ── always included ────
│   • Amp
│   • Antigravity
│   • Cline
│   • Codex
│ ●Cursor(selected)
│   • Cursor
│   • Windsurf
4
Verify installation
Confirm successful installation by checking the skill directory location:
.cursor/skills/design-with-taste
Reload or restart Cursor to activate design-with-taste. Access the skill through slash commands (e.g., /design-with-taste) or your agent's skill management interface.
⚠
Security & Verification Notice
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your development environment. Always verify the publisher's identity, review recent commits, and test in isolated environments before production deployment.
Additional Resources
›View source code on GitHub›Skills CLI documentation›Learn more about Cursor›What are agent skills?