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.
Fetches design-with-taste from cristicretu/family-taste-skill and configures it for Cursor.
3
Select Cursor when prompted
The CLI shows a list of agents. Use arrow keys and space to select Cursor:
◆ Which agents do you want to install to?
│
│ ── Universal (.agents/skills) ────────────────
│ · Cline · Codex · Goose · Windsurf
│ ●Cursor(selected)
│ · Cursor · Aider · Continue
4
Verify installation
Confirm successful installation by checking the skill directory location:
.cursor/skills/design-with-taste
Restart Cursor to activate design-with-taste. Access via /design-with-taste in your agent's command palette.
⚠
Security 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 environment. Always review source, verify the publisher, and test in isolation before production.
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><SheetContentclassName="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 torphimport{TextMorph}from'torph/react';<TextMorph>{label}</TextMorph>// handles shared-letter animation automatically// Directional tab transitionsconst direction = newIndex > currentIndex ?1:-1;<motion.divkey={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.divlayoutId={`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.
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:
Feature
Frequency
Delight Level
Pattern
Number input
Daily
Subtle
Commas shift position as digits are typed
Tab/chart navigation
Daily
Subtle
Arrow icon flips direction with value change
Empty state
First visit
Medium
Animated arrow + floating illustration
Item reorder
Occasional
Medium
Stacking animation + smooth drop
Delete/trash
Occasional
Medium
Item tumbles into skeuomorphic trash + sound
First feature use
Once
High
Animated guide arrow in empty state
Critical completion (backup, onboarding)
Once
Theatrical
Confetti explosion + celebratory sound
Easter egg (QR, hidden gesture)
Rare
Theatrical
Ripple on tap → sequin effect on swipe
// Animated number with smooth comma shiftingfunctionAnimatedNumber({ value }){const spring =useSpring(value,
Implementation Guide
Prerequisites
›Claude Desktop or compatible AI client with skill support
›Clear understanding of task or problem to solve
›Willingness to iterate and refine outputs
Time Estimate
15-45 minutes depending on use case complexity
Steps
1Install skill using provided installation command
2Test with simple use case relevant to your work
3Evaluate output quality and relevance
4Iterate on prompts to improve results
5Integrate into regular workflow if valuable
Common Pitfalls
⚠Expecting perfect results without iteration
⚠Not providing enough context in prompts
⚠Using skill for tasks outside its intended scope
⚠Accepting outputs without review and validation
Best Practices
✓ Do
+Start with clear, specific prompts
+Provide relevant context and constraints
+Review and refine all outputs before using
+Iterate to improve output quality
+Document successful prompt patterns
✗ Don't
−Don't use without understanding skill limitations
−Don't skip validation of outputs
−Don't share sensitive information in prompts
−Don't expect skill to replace human judgment
💡 Pro Tips
★Be specific about desired format and style
★Ask for multiple options to choose from
★Request explanations to understand reasoning
★Combine AI efficiency with human expertise
When to Use This
✓ Use when
Use when skill capabilities match your task, clear ROI on time saved, and you can validate outputs. Best for repetitive tasks, learning, and quality improvement.
✗ Avoid when
Avoid when task requires deep expertise you can't validate, involves sensitive decisions, or when learning process is more valuable than speed of completion.
Learning Path
1Familiarize yourself with skill capabilities and limitations
2Start with low-risk, non-critical tasks
3Progress to more complex and valuable use cases
4Build expertise through regular use and experimentation
