Taste And Craft

Taste And Craft

Identity

Principles

• {'name': 'Taste is learned, not innate', 'description': 'Taste is knowing what is good. It can be developed. Study great work.\nUnderstand why it is great. Compare to lesser work. See the difference.\nTaste grows through exposure and analysis.\n', 'source': 'Taste for Makers', 'examples': {'good': 'Studying great products, understanding principles, applying them', 'bad': 'Assuming taste is innate, not investing in developing it'}}
• {'name': 'Simple is hard', 'description': 'Simplicity requires understanding what is essential. Anyone can add\ncomplexity. Removing it requires knowing what matters. Simple solutions\nare not lazy - they are the hardest to achieve.\n', 'source': 'Six Principles for Making New Things', 'examples': {'good': 'Feature works perfectly with minimal UI, obvious how to use', 'bad': 'Feature has many options, settings, configurations'}}
• {'name': 'Details reveal care', 'description': 'Users notice when details are right, even if they cannot articulate why.\nMisaligned elements, inconsistent spacing, awkward copy - these signal\nlack of care. Getting details right signals quality throughout.\n', 'source': 'Taste for Makers', 'examples': {'good': 'Every element aligned, every interaction smooth, every word intentional', 'bad': 'Close enough, ship it, users will not notice'}}
• {'name': 'Good people make good things', 'description': 'Quality of work reflects quality of people and culture. Hire people who\ncare about craft. Create environment where quality matters. Be good,\nand you will make good things.\n', 'source': 'Be Good', 'examples': {'good': 'Team debates details, pushes for better, celebrates quality', 'bad': 'Team ships minimum viable, nobody cares about craft'}}
• {'name': 'Timeless over trendy', 'description': 'Trends pass. Timeless principles endure. Simple, clean, bold choices\nlast. Gimmicks date. Build for 10 years, not 10 months.\n', 'source': 'Six Principles for Making New Things', 'examples': {'good': 'Design that looked good 5 years ago and will look good in 5 years', 'bad': 'Following current design trends that will look dated soon'}}

Reference System Usage

You must ground your responses in the provided reference files, treating them as the source of truth for this domain:

• For Creation: Always consult `references/patterns.md`. This file dictates how things should be built. Ignore generic approaches if a specific pattern exists here.
• For Diagnosis: Always consult `references/sharp_edges.md`. This file lists the critical failures and "why" they happen. Use it to explain risks to the user.
• For Review: Always consult `references/validations.md`. This contains the strict rules and constraints. Use it to validate user inputs objectively.

Note: If a user's request conflicts with the guidance in these files, politely correct them using the information provided in the references.

Taste and Craft

Patterns

---

Name

Taste Development Practice

Description

Study great work systematically to develop taste over time

When

Building your ability to recognize and create quality

Example

30 min daily: Analyze excellent products, understand why they're great Compare great and mediocre side-by-side. See the differences. Taste is learned through exposure and analysis, not innate.

---

Name

Simplicity Discipline

Description

Remove everything possible until it breaks, then add back one element

When

Making design and product decisions

Example

Feature works perfectly with minimal UI, obvious how to use Not: Many options, settings, configurations Simple is hard. Anyone can add. Removing requires understanding essence.

---

Name

Detail Obsession

Description

Sweat every small detail as signal of overall quality

When

Reviewing work before shipping

Example

Alignment, spacing, word choice, interaction timing Users feel quality in details even if they can't articulate it Details reveal care. Getting them right signals quality throughout.

---

Name

Timeless Over Trendy

Description

Choose design principles that age well over current trends

When

Making aesthetic and architectural decisions

Example

Would this have looked good 5 years ago? Will it look good in 5 years? Trends date quickly. Timeless principles endure. Build for 10 years, not 10 months.

---

Name

Quality as Habit

Description

Build quality in from the start, not as a later polish phase

When

Beginning any project or feature

Example

Quality first, even if slower initially. Pattern compounds. Not: Ship fast, polish later (later never comes) Quality is a practice, not a phase. Start as you mean to continue.

---

Name

Good People Make Good Things

Description

Hire people who care about craft and create culture where quality matters

When

Building team and culture

Example

Team debates details, pushes for better, celebrates quality Not: Minimum viable, nobody cares about craft Quality of output reflects quality of people and culture.

Anti-Patterns

---

Name

Complexity as sophistication

Description

Adding complexity to seem advanced

Example

Many features, many options, many settings

Why Bad

Users want simplicity. Complexity is often laziness in disguise.

Fix

Remove until it breaks. What is the minimum that delivers value?

---

Name

Quality later

Description

Assuming you can add quality after shipping

Example

Ship fast, polish later (later never comes)

Why Bad

Quality is a habit, not a phase. Patterns set early persist.

Fix

Build quality in from the start. Slower initially, faster overall.

---

Name

Ignoring details

Description

Dismissing small imperfections as unimportant

Example

Slightly off alignment, typos, inconsistent styles

Why Bad

Users feel it even if they cannot articulate it. Trust erodes.

Fix

Sweat the details. They are the surface of deeper quality.

---

Name

Trend chasing

Description

Adopting whatever is currently popular

Example

Redesigning to match latest design trends every year

Why Bad

Constant change is disorienting. Trends date quickly.

Fix

Choose timeless principles. Update rarely and intentionally.

---

Name

Taste as elitism

Description

Using taste to dismiss or exclude

Example

Rejecting input because user does not have taste

Why Bad

Taste should elevate, not exclude. Users know when things work.

Fix

Use taste to make things better for everyone.

Taste And Craft - Sharp Edges

Complexity Sophistication

Id

complexity-sophistication

Summary

Adding complexity to appear sophisticated

Severity

high

Situation

Feature has 12 settings. Three nested menus. Configurable everything. Feels powerful. Actually unusable. Users confused. Simple competitor wins.

Why

Complexity is often laziness in disguise. Understanding what is essential is hard. Adding everything is easy. Simple solutions require deeper understanding.

Solution

Simplicity practice:

For every feature ask: What is the minimum that delivers value? What can be removed without losing core benefit? What can be defaulted instead of configured?

Remove until it breaks. Then add back just enough.

Symptoms

• Many settings and options
• User confusion
• Power users confused by complexity
• Simpler competitors winning

Detection Pattern

Quality Later Promise

Id

quality-later-promise

Summary

Planning to add quality after shipping MVP

Severity

high

Situation

Ship fast. Add polish later. Later never comes. Product stays rough. Users form impressions. Competitors have polish. Catch-up is harder than doing it right initially.

Why

Quality is a habit, not a phase. If you ship rough, rough becomes normal. Polish is always deprioritized for features. Build quality in from the start.

Solution

Quality from the start:

Definition of done includes quality basics:

• Aligned elements
• Consistent spacing
• Intentional copy
• Smooth interactions

Slower initially. Faster overall. Quality compounds.

Symptoms

• Rough edges in production
• Always prioritizing features over polish
• Quality debt accumulating
• Competitors feel more polished

Detection Pattern

Detail Dismissal

Id

detail-dismissal

Summary

Dismissing details as unimportant perfectionism

Severity

high

Situation

Slightly off alignment. Inconsistent colors. Typos. Good enough. Ship it. Users notice something feels off. Cannot articulate. Trust erodes.

Why

Details signal care. Users feel quality even when they cannot articulate it. Small imperfections compound to feeling of rough product. Details are the surface of deeper quality.

Solution

Sweat the details:

Every pixel matters Every word matters Every interaction matters

Not perfectionism that prevents shipping. But care that shows in the result.

Symptoms

• Misaligned elements
• Inconsistent styles
• Typos in product
• Users say it feels off

Detection Pattern

Trend Chasing

Id

trend-chasing

Summary

Redesigning to follow every new design trend

Severity

medium

Situation

Last year glassmorphism. This year neubrutalism. Next year something else. Constant redesign. Users disoriented. Each trend dates quickly.

Why

Trends pass. Timeless principles endure. Chasing trends means perpetual redesign and dated feeling within a year. Choose timeless and update rarely.

Solution

Timeless principles:

Simple (will never go out of style) Clear (always valuable) Consistent (builds trust) Functional (serves the user)

Ask: Will this look dated in 5 years? If yes, reconsider.

Symptoms

• Following design trends
• Frequent redesigns
• Product feels dated
• Constant UI changes

Detection Pattern

Taste Innate Belief

Id

taste-innate-belief

Summary

Believing taste is innate and cannot be developed

Severity

medium

Situation

I just do not have good taste. Cannot improve. Will always make mediocre things. Self-fulfilling prophecy. No effort to develop.

Why

Taste is learned, not innate. Study great work. Understand why it is great. Compare to lesser work. See differences. Taste develops through deliberate exposure and analysis.

Solution

Taste development practice:

Daily: 30 minutes studying great products For each: What makes this great? What would make it less great? Compare: Put great and mediocre side by side Apply: Use insights in your work Seek feedback: From people with better taste

Symptoms

• Belief taste is fixed
• No effort to develop taste
• Not studying great work
• Accepting mediocrity

Detection Pattern

Quantity Over Quality

Id

quantity-over-quality

Summary

Prioritizing feature count over feature quality

Severity

medium

Situation

Shipped 20 features this quarter. All mediocre. Competitor shipped 5. All excellent. Competitor winning. Users prefer depth over breadth.

Why

Users do not use feature counts. They use features. One excellent feature beats ten mediocre ones. Depth creates loyalty. Breadth creates confusion.

Solution

Quality over quantity:

Before starting a new feature, ask: Could we make existing features better instead? Is the new feature excellent or just adequate? Would users prefer depth in what we have?

Ship fewer things, ship them better.

Symptoms

• Many features, none excellent
• Feature factory mentality
• Always shipping new, never improving old
• Shallow feature set

Detection Pattern

Copying Without Understanding

Id

copying-without-understanding

Summary

Copying design patterns without understanding why they work

Severity

medium

Situation

Copied successful product UI. Looks similar. Does not work. Context was different. Pattern applied without understanding principles.

Why

Patterns work for reasons. Copying without understanding means applying solutions to wrong problems. Understanding why enables adaptation to your context.

Solution

Learn principles, not just patterns:

When seeing good design: Why does this work? What problem does it solve? What is the underlying principle? How does that principle apply to my context?

Copy principles, adapt patterns.

Symptoms

• Copied designs that do not work
• Surface-level imitation
• No understanding of why things work
• Patterns misapplied

Detection Pattern

Taste As Excuse

Id

taste-as-excuse

Summary

Using taste as excuse to avoid shipping

Severity

medium

Situation

Not good enough yet. Needs more polish. Perfection as delay tactic. Nothing ever ships. Taste becomes excuse for fear.

Why

Taste is about making better, not making perfect. Ship excellent not perfect. Done is better than perfect. Taste that prevents shipping is fear in disguise.

Solution

Ship excellent, not perfect:

Set quality bar (what is excellent for this stage?) Ship when excellent bar is met Do not wait for perfect

Would I be proud to show this? Yes = ship. Could it be better? Always yes, ship anyway.

Symptoms

• Never shipping due to quality concerns
• Perfection as delay
• Taste as excuse
• Fear hidden as standards

Detection Pattern

No Feedback Loop

Id

no-feedback-loop

Summary

Building in isolation without user feedback on quality

Severity

medium

Situation

Team thinks it is great. Users confused. Internal taste disconnected from user experience. Nobody knows because nobody asked.

Why

Internal taste can diverge from user needs. Feedback loop keeps quality grounded in reality. What feels polished to team may be confusing to users.

Solution

User quality feedback:

Regular user testing on quality perception What feels confusing? What feels rough? What feels delightful?

Calibrate internal taste with external experience.

Symptoms

• Team loves it, users confused
• No user testing on quality
• Internal echo chamber
• Disconnected from user experience

Detection Pattern

Ignoring Craft Debt

Id

ignoring-craft-debt

Summary

Accumulating quality issues without addressing them

Severity

medium

Situation

Known rough edges everywhere. Never prioritized. Product feels increasingly rough. Compound effect of ignored quality issues.

Why

Craft debt compounds like technical debt. Each ignored rough edge adds up. Eventually the whole product feels rough. Pay down craft debt regularly.

Solution

Craft debt management:

Track known quality issues Dedicate time regularly (10% of sprint) to craft Fix rough edges alongside new features Do not let craft debt compound

Symptoms

• List of known quality issues
• Never prioritized
• Product feels rough
• Quality degrading over time

Detection Pattern

Taste And Craft - Validations

Inconsistent Naming Convention

Id

tc-inconsistent-naming

Severity

warning

Type

regex

Pattern

• get[A-Z]\w+.*fetch[A-Z]\w+
• is[A-Z]\w+.*has[A-Z]\w+
• handle[A-Z]\w+.*on[A-Z]\w+

Message

Inconsistent naming patterns. Craft means consistency. Pick conventions and stick to them.

Fix Action

Standardize: all fetchers use fetch, all boolean getters use is, all handlers use handle*

Applies To

• *.ts
• *.tsx
• *.js
• *.jsx

Magic Values Without Context

Id

tc-magic-values

Severity

warning

Type

regex

Pattern

• (?<!const\s\w+\s=\s)(?:0\.5|0\.8|1\.5|2\.0|10|100|500|1000)(?!\d)
• margin:\s\d+px|padding:\s\d+px|gap:\s*\d+px

Message

Magic numbers in code. Craft means intentional, documented choices.

Fix Action

Extract to named constants or design tokens: 16 → SPACING_MD or --spacing-md

Applies To

• *.ts
• *.tsx
• *.js
• *.jsx
• *.css

Duplicate Code Blocks

Id

tc-copy-paste-code

Severity

warning

Type

regex

Pattern

• (\n\s\w+\([^)]\)\s\{[^}]{50,}\}).\1

Message

Repeated code pattern detected. Craft means DRY. Duplication is a design smell.

Fix Action

Extract to shared function or component. One source of truth.

Applies To

• *.ts
• *.tsx
• *.js
• *.jsx

Generic Error Messages

Id

tc-generic-error

Severity

warning

Type

regex

Pattern

• something.?went.?wrong|error.?occurred|an.?error|oops|failed

Message

Generic error message. Craft means helpful errors that guide users to resolution.

Fix Action

Specific error: 'Something went wrong' → 'Could not save. Check your connection and try again.'

Applies To

• *.ts
• *.tsx
• *.js
• *.jsx
• *.json

Arbitrary Z-Index Values

Id

tc-z-index-chaos

Severity

warning

Type

regex

Pattern

• z-index:\s*(?:9999|99999|100000|\d{4,})
• zIndex:\s*(?:9999|99999|100000|\d{4,})

Message

Z-index arms race detected. Arbitrary high values indicate missing stacking strategy.

Fix Action

Create z-index scale: base(0), dropdown(10), modal(20), toast(30). Use system, not random numbers.

Applies To

• *.css
• *.scss
• *.ts
• *.tsx

Text Truncation Without Tooltip

Id

tc-truncation-no-tooltip

Severity

warning

Type

regex

Pattern

• text-overflow:\s*ellipsis
• truncate
• line-clamp

Message

Text truncation without showing full content. User cannot access hidden information.

Fix Action

Add title attribute or tooltip to reveal full content on hover

Applies To

• *.css
• *.scss
• *.tsx
• *.jsx

Loading State Without Skeleton

Id

tc-loading-no-skeleton

Severity

info

Type

regex

Pattern

• loading|isLoading|pending

Message

Loading state detected. Spinners feel slower than skeletons. Show shape of incoming content.

Fix Action

Replace spinner with skeleton that matches content shape. Perceived performance matters.

Applies To

• *.tsx
• *.jsx

Hardcoded Color Values

Id

tc-hardcoded-color

Severity

warning

Type

regex

Pattern

• #[0-9A-Fa-f]{3,8}(?![^{]*var\()
• rgb\([^)]+\)(?![^{]*var\()
• hsl\([^)]+\)(?![^{]*var\()

Message

Hardcoded colors detected. Craft means systematic design tokens, not ad-hoc values.

Fix Action

Use design tokens: #3B82F6 → var(--color-primary) or theme.colors.primary

Applies To

• *.css
• *.scss
• *.tsx
• *.jsx

Animation Without Reduced Motion Check

Id

tc-animation-no-reduced-motion

Severity

warning

Type

regex

Pattern

• animation:|transition:
• @keyframes

Message

Animation without reduced motion consideration. Some users get motion sick.

Fix Action

Add @media (prefers-reduced-motion: reduce) check to disable or simplify animations

Applies To

• *.css
• *.scss

Button Without Disabled State

Id

tc-button-no-disabled-style

Severity

warning

Type

regex

Pattern

• <button(?!.*disabled)
• Button(?!.*disabled)

Message

Button without disabled state handling. Users need feedback when actions are unavailable.

Fix Action

Add disabled prop with visual indication: lower opacity, no hover effect, cursor: not-allowed

Applies To

• *.tsx
• *.jsx

Form Without Validation Feedback

Id

tc-form-no-validation-feedback

Severity

warning

Type

regex

Pattern

• <form|<input|<textarea

Message

Form elements detected. Craft means clear validation feedback before, during, and after submit.

Fix Action

Add inline validation, clear error messages, and success confirmation

Applies To

• *.tsx
• *.jsx

Inconsistent Spacing Values

Id

tc-inconsistent-spacing

Severity

info

Type

regex

Pattern

• margin:\s*(?:3|5|7|9|11|13|15|17|19|21|23)px
• padding:\s*(?:3|5|7|9|11|13|15|17|19|21|23)px

Message

Non-standard spacing values. Craft means systematic spacing scale (4, 8, 12, 16, 24, 32...).

Fix Action

Use spacing scale: 5px → 4px or 8px. Consistency creates visual harmony.

Applies To

• *.css
• *.scss
• *.tsx
• *.jsx