Communitygithub.com

learn-taste

Turn a session's design corrections into durable rules — with their why — written into DESIGN.md, a lint/token check, or an AGENTS.md pointer, so later sessions stop repeating the same mistake. Use after the user has corrected, reverted, or repeatedly nudged the agent's design choices (color, spacing, radius, shadow, motion, copy, component shape) and wants them 记下来 / 沉淀 / 总结成规则 / 下次别再犯, or at the end of a design-heavy session to harvest what was learned. Proposes, then stops; writes only what the user approves. 中文触发:把这次的修改沉淀成设计规则、总结我的设计偏好、写入 DESIGN.md、整理设计规范、下次别再犯同样的错。

¿Qué es learn-taste?

learn-taste is a Claude Code agent skill that turn a session's design corrections into durable rules — with their why — written into DESIGN.md, a lint/token check, or an AGENTS.md pointer, so later sessions stop repeating the same mistake. Use after the user has corrected, reverted, or repeatedly nudged the agent's design choices (color, spacing, radius, shadow, motion, copy, component shape) and wants them 记下来 / 沉淀 / 总结成规则 / 下次别再犯, or at the end of a design-heavy session to harvest what was learned. Proposes, then stops; writes only what the user approves. 中文触发:把这次的修改沉淀成设计规则、总结我的设计偏好、写入 DESIGN.md、整理设计规范、下次别再犯同样的错。.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/AlexL-z/dsh-wsw-design-skill/tree/HEAD/skills/learn-taste

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Learning Taste

Every correction a user makes is taste the agent didn't have. If it isn't written down, the next session makes the same mistake and the user corrects it again. This skill finds those corrections, turns each one into a rule with its reason, and writes it where the next agent will read it.

It does ONE thing: write rules. It never changes component code, and it never adds a rule the user didn't express.

Hard Rules

  1. Only the user's taste. Every rule traces back to something the user said, edited, or confirmed. Never add a rule because it seems like good practice. That's your taste, and your taste is what the user was correcting.
  2. Never invent a why. If the user gave no reason, propose one marked inferred and get it confirmed before writing. A wrong why is worse than none: the next agent extends the reasoning to cases it doesn't fit.
  3. Propose, then stop. Present every candidate and write only what the user approves. A wrong rule repeats in every future session, exactly like the mistake would have.
  4. A check beats a sentence. If a violation can be found by matching code (a banned value, a raw hex instead of a token, a forbidden property), propose a lint rule, a token restriction, or a test. A check runs every time. A sentence in a long file gets skipped when the agent's context is full.
  5. Write for an agent that wasn't here. No "like we discussed" or "the card from earlier". Name the class of component, the value, the token, the file.

Workflow

Phase 1: Collect corrections

Read the current conversation from the first turn. If the user names earlier sessions and you can read their transcripts (DSH keeps no separate per-project transcript store, so use only what this session can reach; if they are not reachable, ask the user to paste the corrections or point at the files), read those too.

Explicit corrections are the minority. Look for all five signals:

SignalExampleWhat it tells you
Explicit correction"No, semi-transparent shadow, not a border"The rule, often with the why
Silent editUser changed duration: 400 to 200 in a file you wroteYour default was wrong and their value is the rule. Find these through notices that a file changed outside your edits, or by diffing a file against what you last wrote
Repeated nudge"Smaller." → "Still too big." → "Ok"Your default was off by the total distance. Record where they landed, not the steps
Revert or rejection"Undo that", picking variant B over A, deleting something you addedWhat not to do. The why is usually missing, so it goes to Phase 3's questions
Confirmed non-obvious choice"Yes, keep the icon outside the button"A choice a fresh agent might not repeat. Record it only if a fresh agent would plausibly do otherwise

For each one, capture the user's exact words (or the diff), what you had done, what they wanted instead, and any reason they gave.

Skip what isn't taste: functional bugs, content specific to one screen ("the headline should say Pricing"), and corrections to your understanding of the task.

Completion criterion: every turn has been read, and every correction is listed with its source quote or diff.

Phase 2: Filter

Walk every correction through this tree:

Would a fresh agent building a DIFFERENT component in this repo make the same mistake?
├── No (a one-off: this campaign's color, this page's layout) → Skipped
└── Yes
    ├── Does an existing rule cover it? Check DESIGN.md, AGENTS.md (or CLAUDE.md), and any project rule or reference file.
    │   ├── Yes, and it says the same thing → The rule failed. Rewrite it stricter
    │   │   (a number, a token, "never") instead of adding a duplicate.
    │   ├── Yes, and it contradicts → Conflict. Show both; the user picks.
    │   └── No → continue
    ├── Can a violation be found by matching code? → Check candidate.
    │   Keep a one-line rule too, so the why is recorded somewhere.
    └── Did the user say it applies everywhere, not just here? → Ask where their global rules live.
        Otherwise it's a project rule.

Completion criterion: every Phase 1 correction ends as Skipped, Rewrite, Conflict, Check candidate, or a rule to generalize.

Phase 3: Generalize and find the why

Pick the narrowest level that would have prevented the mistake on the next, different component:

LevelExampleVerdict
Instance"The pricing card gets a shadow, not a border"Too narrow: it only protects this card
Class"Raised surfaces (cards, popovers, menus) separate from the background with shadow-raised, never a solid border"Write this
Universal"Never use borders"Too broad: breaks inputs, dividers, tables

If the same correction came up on two or more different components, that's evidence for the class level. If two levels both seem right, ask.

Write the rule strictly: values and token names from this codebase, "always" or "never", no "prefer" or "try to". Use softer wording only when the user framed it as a preference.

Then the why. Use the user's reason, in their words, when they gave one. Otherwise write your best candidate, mark it inferred, and put it in the questions for the user.

Self-test before proposing: read only the rule and its why, then picture the original task. Would an agent that knows nothing else produce what the user wanted? If it could still produce the wrong version, the rule is too vague. Add the value, the token, or the exception.

Completion criterion: every kept rule has a level and a why marked as the user's or inferred.

Phase 4: Decide where it goes

Check candidate?
├── Yes → lint rule, token restriction, or test, plus a one-line rule in DESIGN.md
└── No
    ├── Is DESIGN.md's section for this aspect over ~40 lines, AND relevant to only some tasks
    │   (motion rules don't matter when building a settings form)?
    │   └── Yes → split that aspect into its own reference file (e.g. `design/motion.md`) and leave a one-line pointer in DESIGN.md
    └── Default → DESIGN.md at the repo root, under the matching section:
        Surfaces · Color · Typography · Spacing & layout · Motion · Interaction · Copy

Create DESIGN.md or the section if it's missing.

Make sure it gets read. A DESIGN.md that no agent loads changes nothing. If neither AGENTS.md nor CLAUDE.md points to it, propose adding this line to the one the project uses (AGENTS.md in DSH projects): Before building or changing UI, read DESIGN.md.

Entry format:

## Surfaces

- **Raised surfaces (cards, popovers, menus) use `shadow-raised`, never a solid border.**
  Why: a solid border makes a raised surface look flat and heavy; a semi-transparent shadow separates it from the background and adapts to both themes.
  <!-- 2026-11-12: "no, semi-transparent shadow, not a border" -->

The comment holds the date and the user's words. When a later correction conflicts, it shows which rule is newer and what the user actually said.

Phase 5: Report and stop

Present the report below, then stop.

Phase 6: Write on approval

Write only the approved items. Show the resulting diff of DESIGN.md (and any rule, reference, or config file). For a check, implement it and run it across the codebase. If it flags existing code, report the count and ask whether to make it a warning or fix the violations. Never fix them without asking, because that changes component code.

Required Output Format

Rules to add

#You saidRuleWhyWhere
1"no, semi-transparent shadow, not a border"Raised surfaces use shadow-raised, never a solid borderSolid borders look flat and heavy; shadows adapt to both themesDESIGN.md › Surfaces
2Changed duration: 400 → 200 in Dropdown.tsxDropdowns open in 200msinferred: 400ms felt sluggish on a surface opened many times a dayDESIGN.md › Motion

Needs your answer

Each inferred why, each ambiguous generalization level, and each global-or-project question. One line each, with your recommendation.

Conflicts

The existing rule, the new correction, and which one you'd keep.

Make it a check

Each check candidate with its exact implementation (the rule config or test), and what it would flag in the current codebase.

Skipped

One line per skipped correction and why, so the user can override.

Close with: "Say write all or write 1, 3, and answer the questions above."

If the session had no taste corrections, say so in one line. That's a good result, not a failure.

Invocation Variants

DSH loads this skill by description — no slash command is required. Trigger it by asking, in any language:

AskBehavior
把这次的设计修改沉淀成规则 / "harvest this session's corrections"Current session, full workflow, stop at the report
也看看之前那几次会话Also read any earlier sessions that are reachable; if they are not, ask for the corrections
write all / write 1, 3Write the approved items from the last report
整理一下 DESIGN.md / prune DESIGN.mdRead DESIGN.md and propose merges for duplicates, fixes for contradictions, and stricter wording for vague rules. Same propose-then-stop rule

Working in DSH: write to DESIGN.md at the project root, and add the pointer line to AGENTS.md. This skill never edits component code.

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

choreograph

Coordinate several elements that animate together — decide what moves, in what order, how much they overlap, and what stays still — so a group reads as one intentional motion instead of a pile of separate animations. Use when building or fixing a staggered list, a hero entrance, a view swap inside a container, a multi-step flow, an element leaving while its siblings close the gap, a morph between rich states, or any interaction with several moving parts (icon + background + lines, panel + content, items flying into a target). Triggers on — stagger, sequence, choreography, "one after another", crossfade, AnimatePresence mode, hero entrance, multi-step, useAnimate, "feels mechanical", "too much going on", "feels slow to open". 中文触发:入场编排、几个元素一起动、错开出现、先后顺序、转场衔接、看着很挤/很机械、打开得太慢.

mobile-native

Make a web app feel native on a phone — the small CSS and meta-tag fixes that separate "a website in a browser" from something that feels installed. Covers sticky hover states, tap highlight flashes, the 100vh bug, inputs that zoom the page, laggy taps, pull-to-refresh hijacking scroll, content under the notch, long-press selecting button text, carousels that scroll the wrong way, mismatched status bars, and the rule that you test on real hardware. Use when a web app is being built for or reviewed on mobile, when something "works in Chrome but feels wrong on my phone", when building a PWA, a bottom sheet, a carousel, a full-screen layout, or any touch interaction. For motion decisions themselves use the installed emil-design-eng skill. 中文触发:手机上看着不对、移动端适配、点击后有灰块、悬浮态卡住、输入框自动放大、100vh 高度不对、刘海遮挡、PWA 像网页不像 App.

Skills relacionados