Apply the "Family Values" design philosophy to every UI you build. Use this skill whenever creating frontends, components, apps, landing pages, dashboards, or any user-facing interface. Enforces three core principles — Simplicity (gradual revelation), Fluidity (seamless transitions), and Delight (selective emphasis) — so that every output feels crafted, intentional, and alive. Prevents generic, static, lifeless UI. Works alongside other skills like frontend-design, web-animation-design, etc.
84
79%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./skills/design-with-taste/SKILL.mdQuality
Discovery
82%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This description has strong completeness with explicit 'Use this skill whenever...' guidance and good trigger term coverage for UI-related requests. However, it lacks concrete actionable capabilities (what specific things does it do beyond 'apply philosophy'?) and has acknowledged overlap with other frontend skills, creating potential conflict risk.
Suggestions
Add specific concrete actions the skill performs, e.g., 'implements progressive disclosure patterns, adds micro-interactions, creates smooth state transitions'
Clarify when to use THIS skill vs frontend-design or web-animation-design skills to reduce conflict risk - what makes this one the right choice?
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Names the domain (UI design) and describes the three core principles (Simplicity, Fluidity, Delight) with brief explanations, but doesn't list concrete actions like 'create gradual reveal animations' or 'implement micro-interactions'. The actions are more philosophical than actionable. | 2 / 3 |
Completeness | Clearly answers both what ('Apply the Family Values design philosophy', 'Enforces three core principles') and when ('whenever creating frontends, components, apps, landing pages, dashboards, or any user-facing interface'). Has explicit 'Use this skill whenever...' clause. | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural terms users would say: 'frontends', 'components', 'apps', 'landing pages', 'dashboards', 'user-facing interface', 'UI'. These are terms users naturally use when requesting interface work. | 3 / 3 |
Distinctiveness Conflict Risk | Explicitly mentions it 'works alongside other skills like frontend-design, web-animation-design' which acknowledges overlap. The scope is broad ('every UI you build') which could conflict with other UI-related skills. The 'Family Values' philosophy name provides some distinction but the triggers are generic UI terms. | 2 / 3 |
Total | 10 / 12 Passed |
Implementation
77%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a high-quality, highly actionable design philosophy skill with excellent concrete guidance, executable code examples, and clear workflows. Its main weakness is length—the comprehensive coverage comes at the cost of token efficiency, and the content could benefit from splitting detailed reference material (easing tables, pattern libraries) into separate files.
Suggestions
Extract the Easing & Timing Reference table and Delight Pattern Library into separate reference files (e.g., EASING.md, PATTERNS.md) and link to them from the main skill
Consolidate redundancy between the rules in each pillar section, the anti-patterns list, and the checklist—some points are stated three times in slightly different forms
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | While the content is well-organized and avoids explaining basic concepts Claude knows, it's quite lengthy (~400 lines) with some redundancy between the rules, anti-patterns, and checklist sections. The philosophy explanations add value but could be tighter. | 2 / 3 |
Actionability | Excellent actionability with fully executable code examples (React/Framer Motion), specific easing curves, exact timing values, concrete library recommendations with install commands, and a detailed pattern library table mapping features to implementations. | 3 / 3 |
Workflow Clarity | Clear hierarchical workflow: pillars must be applied in order (Simplicity → Fluidity → Delight), explicit self-check questions after each section, and a comprehensive checklist to run before completion. The 'How to Use This Skill' section provides clear sequencing. | 3 / 3 |
Progressive Disclosure | Content is well-structured with clear sections and headers, but everything is in one monolithic file. The detailed pattern library, easing reference table, and anti-patterns could be split into separate reference files with links from the main skill. | 2 / 3 |
Total | 10 / 12 Passed |
Validation
100%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
8c34fce
Table of Contents
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.