@cohortapp/agent-sdk 2.12.0 → 2.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (127) hide show
  1. package/bin/maestro.mjs +6 -2
  2. package/docs/guides/front-door-session.md +49 -0
  3. package/lib/cli/design.mjs +185 -0
  4. package/lib/cli/design.test.mjs +270 -0
  5. package/lib/cli/global-setup-extras.mjs +44 -0
  6. package/lib/cli/global-setup-extras.test.mjs +95 -0
  7. package/lib/cli/session.mjs +11 -1
  8. package/lib/cli/session.test.mjs +17 -6
  9. package/lib/collective/global-config.mjs +5 -0
  10. package/lib/collective/global-config.test.mjs +5 -0
  11. package/lib/collective/vendor-skills.mjs +305 -0
  12. package/lib/collective/vendor-skills.test.mjs +306 -0
  13. package/lib/design/design-md.mjs +793 -0
  14. package/lib/design/design-md.test.mjs +318 -0
  15. package/lib/design/fixtures/DESIGN.golden.md +238 -0
  16. package/lib/design/fixtures/PRODUCT.golden.md +67 -0
  17. package/lib/design/fixtures/foundation.json +133 -0
  18. package/lib/design/refresh-gate.mjs +154 -0
  19. package/lib/design/refresh-gate.test.mjs +144 -0
  20. package/lib/design/write.mjs +275 -0
  21. package/lib/design/write.test.mjs +241 -0
  22. package/lib/prompts/parallelism.mjs +79 -0
  23. package/lib/prompts/parallelism.test.mjs +177 -0
  24. package/package.json +1 -1
  25. package/plugins/maestro-skills/plugin.json +4 -0
  26. package/plugins/maestro-skills/skills/cohort-design.md +153 -0
  27. package/plugins/maestro-skills/vendor/emilkowalski/LICENSE +21 -0
  28. package/plugins/maestro-skills/vendor/emilkowalski/UPSTREAM.json +70 -0
  29. package/plugins/maestro-skills/vendor/emilkowalski/skills/animate/RECIPES.md +324 -0
  30. package/plugins/maestro-skills/vendor/emilkowalski/skills/animate/SKILL.md +199 -0
  31. package/plugins/maestro-skills/vendor/emilkowalski/skills/animation-vocabulary/SKILL.md +173 -0
  32. package/plugins/maestro-skills/vendor/emilkowalski/skills/apple-design/SKILL.md +282 -0
  33. package/plugins/maestro-skills/vendor/emilkowalski/skills/emil-design-eng/SKILL.md +674 -0
  34. package/plugins/maestro-skills/vendor/emilkowalski/skills/find-animation-opportunities/SKILL.md +132 -0
  35. package/plugins/maestro-skills/vendor/emilkowalski/skills/improve-animations/AUDIT.md +115 -0
  36. package/plugins/maestro-skills/vendor/emilkowalski/skills/improve-animations/PLAN-TEMPLATE.md +73 -0
  37. package/plugins/maestro-skills/vendor/emilkowalski/skills/improve-animations/SKILL.md +101 -0
  38. package/plugins/maestro-skills/vendor/emilkowalski/skills/prototype/PICKER.md +197 -0
  39. package/plugins/maestro-skills/vendor/emilkowalski/skills/prototype/SKILL.md +90 -0
  40. package/plugins/maestro-skills/vendor/emilkowalski/skills/review-animations/SKILL.md +112 -0
  41. package/plugins/maestro-skills/vendor/emilkowalski/skills/review-animations/STANDARDS.md +187 -0
  42. package/plugins/maestro-skills/vendor/impeccable/LICENSE +191 -0
  43. package/plugins/maestro-skills/vendor/impeccable/NOTICE.md +11 -0
  44. package/plugins/maestro-skills/vendor/impeccable/SKILL.md +86 -0
  45. package/plugins/maestro-skills/vendor/impeccable/UPSTREAM.json +201 -0
  46. package/plugins/maestro-skills/vendor/impeccable/agents/impeccable-asset-producer.md +42 -0
  47. package/plugins/maestro-skills/vendor/impeccable/agents/impeccable-documenter.md +29 -0
  48. package/plugins/maestro-skills/vendor/impeccable/agents/impeccable-finish-reviewer.md +43 -0
  49. package/plugins/maestro-skills/vendor/impeccable/agents/impeccable-manual-edit-applier.md +97 -0
  50. package/plugins/maestro-skills/vendor/impeccable/reference/adapt.md +312 -0
  51. package/plugins/maestro-skills/vendor/impeccable/reference/adapt.native.md +58 -0
  52. package/plugins/maestro-skills/vendor/impeccable/reference/android.md +46 -0
  53. package/plugins/maestro-skills/vendor/impeccable/reference/animate.md +89 -0
  54. package/plugins/maestro-skills/vendor/impeccable/reference/audit.md +136 -0
  55. package/plugins/maestro-skills/vendor/impeccable/reference/audit.native.md +139 -0
  56. package/plugins/maestro-skills/vendor/impeccable/reference/bolder.md +33 -0
  57. package/plugins/maestro-skills/vendor/impeccable/reference/clarify.md +94 -0
  58. package/plugins/maestro-skills/vendor/impeccable/reference/colorize.md +86 -0
  59. package/plugins/maestro-skills/vendor/impeccable/reference/craft-floor.md +44 -0
  60. package/plugins/maestro-skills/vendor/impeccable/reference/craft.md +5 -0
  61. package/plugins/maestro-skills/vendor/impeccable/reference/critique.md +806 -0
  62. package/plugins/maestro-skills/vendor/impeccable/reference/degraded/asset-producer.md +37 -0
  63. package/plugins/maestro-skills/vendor/impeccable/reference/degraded/documenter.md +24 -0
  64. package/plugins/maestro-skills/vendor/impeccable/reference/degraded/finish-reviewer.md +38 -0
  65. package/plugins/maestro-skills/vendor/impeccable/reference/degraded/manual-edit-applier.md +92 -0
  66. package/plugins/maestro-skills/vendor/impeccable/reference/delight.md +70 -0
  67. package/plugins/maestro-skills/vendor/impeccable/reference/distill.md +111 -0
  68. package/plugins/maestro-skills/vendor/impeccable/reference/doctor.md +54 -0
  69. package/plugins/maestro-skills/vendor/impeccable/reference/document.md +416 -0
  70. package/plugins/maestro-skills/vendor/impeccable/reference/extract.md +69 -0
  71. package/plugins/maestro-skills/vendor/impeccable/reference/harden.md +336 -0
  72. package/plugins/maestro-skills/vendor/impeccable/reference/hooks.md +111 -0
  73. package/plugins/maestro-skills/vendor/impeccable/reference/init.md +131 -0
  74. package/plugins/maestro-skills/vendor/impeccable/reference/ios.md +51 -0
  75. package/plugins/maestro-skills/vendor/impeccable/reference/layout.md +84 -0
  76. package/plugins/maestro-skills/vendor/impeccable/reference/live-setup.md +104 -0
  77. package/plugins/maestro-skills/vendor/impeccable/reference/live.md +325 -0
  78. package/plugins/maestro-skills/vendor/impeccable/reference/new-work.md +147 -0
  79. package/plugins/maestro-skills/vendor/impeccable/reference/onboard.md +234 -0
  80. package/plugins/maestro-skills/vendor/impeccable/reference/operate.md +61 -0
  81. package/plugins/maestro-skills/vendor/impeccable/reference/optimize.md +258 -0
  82. package/plugins/maestro-skills/vendor/impeccable/reference/overdrive.md +127 -0
  83. package/plugins/maestro-skills/vendor/impeccable/reference/polish.md +105 -0
  84. package/plugins/maestro-skills/vendor/impeccable/reference/quieter.md +99 -0
  85. package/plugins/maestro-skills/vendor/impeccable/reference/routing.md +24 -0
  86. package/plugins/maestro-skills/vendor/impeccable/reference/shape.md +59 -0
  87. package/plugins/maestro-skills/vendor/impeccable/reference/typeset.md +80 -0
  88. package/plugins/maestro-skills/vendor/impeccable/reference/visualize.md +46 -0
  89. package/plugins/maestro-skills/vendor/taste-skill/LICENSE +21 -0
  90. package/plugins/maestro-skills/vendor/taste-skill/UPSTREAM.json +37 -0
  91. package/plugins/maestro-skills/vendor/taste-skill/skills/minimalist-skill/SKILL.md +85 -0
  92. package/plugins/maestro-skills/vendor/taste-skill/skills/redesign-skill/SKILL.md +178 -0
  93. package/plugins/maestro-skills/vendor/taste-skill/skills/soft-skill/SKILL.md +98 -0
  94. package/plugins/maestro-skills/vendor/taste-skill/skills/taste-skill/SKILL.md +1206 -0
  95. package/plugins/maestro-skills/vendor/unlazy/LICENSE +21 -0
  96. package/plugins/maestro-skills/vendor/unlazy/SECURITY.md +72 -0
  97. package/plugins/maestro-skills/vendor/unlazy/SKILL.md +104 -0
  98. package/plugins/maestro-skills/vendor/unlazy/UPSTREAM.json +94 -0
  99. package/plugins/maestro-skills/vendor/unlazy/references/dispatch.md +82 -0
  100. package/plugins/maestro-skills/vendor/unlazy/references/gates.md +149 -0
  101. package/plugins/maestro-skills/vendor/unlazy/references/method.md +49 -0
  102. package/plugins/maestro-skills/vendor/unlazy/references/orchestration.md +107 -0
  103. package/plugins/maestro-skills/vendor/unlazy/references/parallel.md +133 -0
  104. package/plugins/maestro-skills/vendor/unlazy/references/token-economy.md +48 -0
  105. package/plugins/maestro-skills/vendor/unlazy/scripts/dispatch-check.mjs +139 -0
  106. package/plugins/maestro-skills/vendor/unlazy/scripts/gate-check.mjs +960 -0
  107. package/plugins/maestro-skills/vendor/unlazy/scripts/gate-lint.mjs +245 -0
  108. package/plugins/maestro-skills/vendor/unlazy/scripts/lib/check-supervisor.mjs +46 -0
  109. package/plugins/maestro-skills/vendor/unlazy/scripts/lib/dispatch.mjs +293 -0
  110. package/plugins/maestro-skills/vendor/unlazy/scripts/lib/gates.mjs +953 -0
  111. package/plugins/maestro-skills/vendor/unlazy/scripts/lib/process-tree.mjs +161 -0
  112. package/plugins/maestro-skills/vendor/unlazy/scripts/lib/regex-worker.mjs +9 -0
  113. package/plugins/maestro-skills/vendor/unlazy/templates/PLAN.md +116 -0
  114. package/plugins/maestro-skills/vendor/unlazy/templates/gates-leaf.md +51 -0
  115. package/plugins/maestro-skills/vendor/unlazy/templates/gates-node.md +51 -0
  116. package/scripts/ci/check-skill-packs.mjs +388 -0
  117. package/scripts/ci/check-skill-packs.test.mjs +495 -0
  118. package/scripts/ci/check.mjs +3 -0
  119. package/scripts/daemon/agent-daemon-design.test.mjs +238 -0
  120. package/scripts/daemon/agent-daemon.mjs +108 -0
  121. package/scripts/daemon/cadence-consumer-frontdoor.test.mjs +61 -2
  122. package/scripts/daemon/cadence-consumer.mjs +46 -22
  123. package/scripts/daemon/prompt-builder.mjs +19 -3
  124. package/scripts/local-triggers/autoupdate.test.mjs +33 -3
  125. package/scripts/vendor/skill-packs.mjs +354 -0
  126. package/scripts/vendor/sync-skill-packs.mjs +242 -0
  127. package/scripts/vendor/sync-skill-packs.test.mjs +103 -0
@@ -0,0 +1,59 @@
1
+ # Shape
2
+
3
+ Discover what should be made and how it should work, then return a confirmed design brief without code.
4
+
5
+ ## Phase 1: Discovery interview
6
+
7
+ Do not write code or choose visual direction yet.
8
+
9
+ ### Cadence
10
+
11
+ - Use the structured question tool when available; otherwise ask and stop.
12
+ - Ask two or three related questions per round, then wait. One round is the default; add a second only when the answers expose a material gap.
13
+ - Do not dump a questionnaire, repeat settled facts, or turn obvious facts into menus. Assert the likely reading and invite correction.
14
+ - A sparse prompt requires at least one answer round. A precise prompt may need only a compact confirmation.
15
+
16
+ ### Round 1: purpose, people, and outcome
17
+
18
+ Choose the two or three questions that most change the result:
19
+
20
+ - What is this surface or feature for, and what problem must it solve?
21
+ - Who specifically reaches it, in what situation and state of mind?
22
+ - What is the primary thing they must understand or do? What would success look like?
23
+ - What is uniquely true here that a neighboring product or generic template could not claim?
24
+
25
+ ### Round 2: material, behavior, and boundaries
26
+
27
+ Run only for material unresolved decisions:
28
+
29
+ - What real content, evidence, data, and assets must the experience carry? What are realistic minimum, typical, and maximum ranges?
30
+ - Which states and transitions matter: first-run, empty, loading, error, success, permissions, overflow, or expert use?
31
+ - What is the intended fidelity, breadth, and interactivity: exploration, production-ready screen, full flow, or broader surface?
32
+ - What must remain untouched? What would make the result feel wrong even if it looked polished?
33
+ - Which platform, framework, performance, accessibility, localization, or delivery constraints are binding?
34
+
35
+ Never ask for CSS values or canned aesthetic lanes. New-work owns visual-world and concept choices.
36
+
37
+ ## Phase 2: Resolve the design direction
38
+
39
+ For new surfaces, brand expansion, or replacement, follow [new-work.md](new-work.md) through visual authority, any world workshop, and concept choice. Reuse discovery, then return before its contract, persistence, or implementation. Inside an established world, use its concept process only when composition or interaction remains materially open.
40
+
41
+ ## Phase 3: Write the brief
42
+
43
+ Write the smallest useful brief:
44
+
45
+ 1. **Job and audience:** who arrives, their context, need, and visitor mode.
46
+ 2. **Outcome and proof:** primary task/action, success, real evidence, and product-specific truth.
47
+ 3. **Selected direction:** visual authority, structural/interaction thesis, sequence, focal moment, and implementation consequence.
48
+ 4. **Scope and boundaries:** fidelity, breadth, interactivity, named target, what remains untouched, and explicit anti-goals.
49
+ 5. **States and ranges:** realistic content/data ranges and material states.
50
+ 6. **Interaction and layout:** hierarchy, topology, responsiveness, affordances, feedback, and transitions; intent, not CSS.
51
+ 7. **Constraints and open decisions:** platform, delivery, accessibility, localization, reusable components, and choices a builder must not invent.
52
+
53
+ Use three to five bullets when the task is settled; use the full structure only for ambiguous, multi-screen, or standalone planning. Do not restate the conversation.
54
+
55
+ ## Confirm and stop
56
+
57
+ Present the brief for explicit confirmation or one correction round, then stop: shape never writes code or a direction contract.
58
+
59
+ When no human or structured answer mechanism exists, mark assumptions plainly, return the brief, and stop.
@@ -0,0 +1,80 @@
1
+ Typography carries information, hierarchy, and voice. Improve it inside the established visual world; do not replace the identity unless the user asked to.
2
+
3
+ ---
4
+
5
+ ## Visitor mode
6
+
7
+ - **Persuade + Experience:** display type may carry the voice. Use decisive contrast and responsive scale when the composition benefits.
8
+ - **Operate + Read:** stability, scanability, and measure come first. A single well-tuned family and fixed role scale are often right.
9
+ - **Native:** follow [ios.md](ios.md) or [android.md](android.md), including platform scaling and accessibility behavior.
10
+
11
+ If typography replacement would create a new identity, route through [new-work.md](new-work.md) and update DESIGN.md. Otherwise preserve confirmed families and improve their use.
12
+
13
+ ## Two isolated assessments
14
+
15
+ When a sub-agent tool is available and permitted, run these independently; otherwise run them yourself in this order. Do not let detector findings anchor the design assessment.
16
+
17
+ 1. **Typographic assessment:** inspect representative pages and styles. Answer every question below with a file, selector, or computed value:
18
+ - **Authority and fit:** Which faces, weights, and roles are established? Do they fit the product and selected world, or are they unexamined defaults? Is every family necessary?
19
+ - **Hierarchy:** Can heading, body, label, metadata, and data roles be distinguished at a glance? Are adjacent sizes or weights too close to carry different jobs?
20
+ - **Scale and consistency:** Is there a deliberate role scale, or a collection of arbitrary values? Do repeated roles stay identical across screens and states?
21
+ - **Reading:** Does body copy stay within a comfortable 45–75 character measure? Are line height, paragraph rhythm, contrast, and tracking tuned to the actual face, width, language, and surface?
22
+ - **Stress:** What happens with long headings, localization expansion, zoom, narrow containers, missing weights, and font fallback?
23
+ - **Delivery:** Are only used assets loaded? Do fallback metrics, loading strategy, and variable-font settings avoid invisible text and disruptive reflow?
24
+ 2. **Mechanical scan:** run:
25
+
26
+ ```bash
27
+ .claude/skills/impeccable/scripts/impeccable detect --json --scope type [target files or dirs]
28
+ ```
29
+
30
+ Also inspect dynamic or arbitrary font values the detector cannot interpret. Synthesize both assessments before editing, noting what each caught alone. A clean scan is a floor, not proof of good typography.
31
+
32
+ ## Set the system
33
+
34
+ Before editing, state:
35
+
36
+ - the roles the interface needs;
37
+ - the intended contrast between those roles;
38
+ - the reading measure and density;
39
+ - which existing faces and weights are authoritative;
40
+ - any performance, localization, or accessibility constraints.
41
+
42
+ Use the fewest roles and families that make the hierarchy unmistakable. Combine size, weight, space, and tone deliberately instead of asking size alone to do all the work. Role names and tokens should describe purpose rather than values.
43
+
44
+ ## Apply
45
+
46
+ - Keep body copy comfortably readable and zoomable. Use 1rem / 16px as the ordinary web body floor unless a dense role, platform convention, or user setting justifies otherwise.
47
+ - Keep prose in the 45–75ch range. Tune line height inversely with measure: wider lines generally need more leading.
48
+ - Compensate light text on dark surfaces on all three perceptual axes: slightly more line height, a touch more tracking, and one step more weight when the face needs it.
49
+ - Tune line height to the face, width, language, and contrast, not a universal ratio.
50
+ - Keep repeated roles consistent across screens and states.
51
+ - Use numeric, tabular, code, and label features when their content benefits.
52
+ - Load only used font assets and weights. Provide metric-compatible fallbacks and avoid blocking text.
53
+ - Let marketing display type respond to available space when useful; keep dense product and reading surfaces spatially predictable.
54
+ - Preserve browser zoom, user font settings, Dynamic Type, and platform text scaling.
55
+ - Use paragraph spacing or first-line indentation as the primary paragraph rhythm; combining both usually double-marks the boundary.
56
+
57
+ Do not make type decorative at the expense of comprehension, or introduce a second family without a clear role it alone can perform.
58
+
59
+ ## Verify
60
+
61
+ - Primary, secondary, body, and metadata roles are recognizable without reading the copy.
62
+ - Long text remains comfortable across relevant widths and languages.
63
+ - The typography belongs to the product and its established world.
64
+ - Loading does not create disruptive reflow or invisible text.
65
+ - Zoom, text scaling, focus, contrast, and reduced viewport paths remain usable.
66
+ - The final mechanical scan has no unexplained findings.
67
+
68
+ Answer each item with rendered or source evidence, then rerun the scan. Do not substitute a bare “yes” for verification.
69
+
70
+ When the hierarchy holds, hand off to `/impeccable polish`.
71
+
72
+ ## Live-mode signature params
73
+
74
+ Every variant declares a coarse `scale` parameter and authors its type ramp against `var(--p-scale, 1)`.
75
+
76
+ ```json
77
+ {"id":"scale","kind":"range","min":0.85,"max":1.3,"step":0.05,"default":1,"label":"Scale"}
78
+ ```
79
+
80
+ Add at most one pairing or weight parameter when it represents a real system choice. Follow [live.md](live.md)'s parameter contract.
@@ -0,0 +1,46 @@
1
+ # Visualize: Direction Comps & Asset Production
2
+
3
+ Load this from [new-work.md](new-work.md) on a comp-led build, when image generation is available (a harness-native tool or the API fallback `impeccable context` reports). A code-led contract skips this file by design, not by drift; do not load it then. PRODUCT.md and DESIGN.md are preconditions. New-work has already resolved the visual world; this file must not reopen it. A surface-scope structure round that already put three visualized cards before the user (new-work.md, established world) has discharged this round: the locked card's comp is the approved comp, so record the approval and continue at After approval; generate nothing new.
4
+
5
+ A probe tests composition, narrative, hierarchy, density, focal moment, signature use, and image requirements. It is not a second identity workshop. Keep DESIGN.md's palette, typography direction, material language, component character, imagery stance, and motion grammar fixed.
6
+
7
+ ## Generate three compositional options
8
+
9
+ The comp round runs inside the build's phase state: `impeccable build-phase start --direction <seed key> --kind <...>` has already run (the roll's output names the command) and its `comps` phase is open before the first comp is generated; a comp rendered before that sits outside the state, and a session resumed from that point has no phases to follow. `impeccable generate-image` refuses to write under `.impeccable/mocks/` until start has run; a harness-native image tool is bound by the same order.
10
+
11
+ Render three distinct high-fidelity north-star comps of the requested surface, saved under `.impeccable/mocks/` so they survive the session. Comp at the surface's own viewport: portrait at device size for a native app or mobile-first surface, desktop landscape otherwise; a phone screen comped landscape misstates the composition before anything is built against it. Comps are the build thread's own work, never delegated: the thread that writes the prompts holds the direction's full context and has seen every comp when the build starts. Open every image by its workspace-relative path; sandboxed viewers reject absolute paths, and everything under the project root has a relative one. Base the comps on real content and the surface concepts already developed with the user. On an established world, anchor every comp on the real identity: capture a screenshot of a representative existing page and pass it as a reference image (the harness image tool's input image, or `impeccable generate-image --ref`); the prompt leads with the new surface's structure while the reference carries palette, type, and component character, because DESIGN.md words alone drift where a pixel reference does not. Name what the reference contributes and what it must not: chrome, palette, type, and component character carry over; the reference page's own content does not, and a banner, hero, or card lifted verbatim is the reference leaking, not fidelity. Three is the number: one comp invites rubber-stamping; the spread between three surfaces the composition worth building. The chosen card's decision comp is the first of the three: it already renders this direction at full fidelity under this discipline, so generate two more that vary what the first held fixed, and send all three to the approval point together. Only a round arriving with no decision comp (a degraded roll, an identity-mode page, a direction pinned without the decision round) renders all three here.
12
+
13
+ - A comp is a designed surface, not a picture of the subject. Lead the prompt with the surface's own structure: the regions this design has, named in order with their scale relationships; a page with no navigation says so instead of inventing one, and an unconventional surface states its unconventional skeleton. A prompt that leads with atmosphere gets a vignette back: the model paints the fish market instead of the fish market's website. Self-check every render: if it could hang as a poster, or reads as a photograph with some text on it, it is not a comp; regenerate with the layout scaffold stated more literally.
14
+ - The inverse is also a failure: a surface with none of its subject in it. The subject appears as the content the regions hold; the world dresses the frame and never displaces what the frame shows. The deletion usually rides in on the prompt's exclusion list, so exclusions bind invented claims, and a medium ban belongs to the committed imagery stance, never to caution. Before accepting a render, point at the subject; a render that depicts everything about the world and nothing of the subject fails however faithful its atmosphere. Regenerate with the subject's content named region by region.
15
+ - Judge a comp as the shipped screen: the visitor's job must be readable from the image alone. Name the surface's mode from the render with no caption; a render whose mode cannot be read back is art direction without a surface. Regenerate with the visitor's job as the prompt's spine.
16
+ - Commitment is depth, not coverage. The world enters through one dominant move plus the material, type, and spacing that support it; the remaining regions hold still so that move can be read. A region that simply does its job in the world's grammar carries the direction further than a region performing the concept. The check cuts competition, never content: a quieted region keeps its information and stops performing. A second element competing with the named focal moment at the same scale means the comp is shouting; with no named focal moment, several regions performing the concept at once is the same shout. Regenerate keeping the strongest move and quieting the rest. Busy is louder, not bolder.
17
+ - When the user shortlisted multiple concepts, spread the three across them.
18
+ - When one direction is committed, vary the structural uncertainty an image can resolve: topology, sequence, density, hierarchy, focal composition, or interaction framing.
19
+ - Show enough beyond the opening moment to prove the concept can govern the whole surface.
20
+ - Do not generate a palette artifact, ask new atmosphere questions, introduce a different type voice, or invent a new motif. If the committed world cannot support the concept, return to the concept shortlist rather than changing the world.
21
+
22
+ Each comp is a direction test, not a screenshot specification. Core UI text, responsive behavior, accessibility, semantics, and interaction states remain implementation responsibilities.
23
+
24
+ ## One approval point
25
+
26
+ Show the three together on the decision page (`impeccable serve-question`, one option per comp with the comp as its hero), or in the harness only when it renders images inline; a text-only surface does not count as display. Ask what should carry forward, what feels false to the world, and whether the selected concept should be approved, combined, revised, or rejected. Then stop and wait. A structured simulated user counts as attended and receives the same question.
27
+
28
+ Do not begin code until the user approves a direction or explicitly delegates the choice. If they delegate, choose using the task brief, PRODUCT.md, and DESIGN.md, and state the evidence. Approval refines the task concept; it does not modify DESIGN.md.
29
+
30
+ This approval point has no substitute and no skip condition. When the structured question tool errors, fall back to the decision page; only after both fail may you treat the choice as delegated, and a delegated pick is recorded exactly as an approval is and disclosed in your first reply, not your last. The finish reviewer treats comp-round comps with no recorded approval as a material finding; decision comps under `.impeccable/mocks/decision/` are the direction round's hand, not comp-round output, and imply no approval on their own.
31
+
32
+ After approval, record the choice where tools can find it: the approved comp's path goes in the surface brief, and its `.json` prompt sidecar gains `"approved": true` (every comp generated through `impeccable generate-image` has one; create it if a native tool didn't). The sidecar travels with the mocks folder, so the approval survives sessions and machines that never see the brief, and it is what `impeccable build-phase advance` reads to close the comps phase. Summarize the composition and the parts of the comp that must not be literalized, return to new-work.md, record the direction contract from the approved concept, and build.
33
+
34
+ ## After approval: the comp becomes a spec
35
+
36
+ The approved comp is a north star for translation into semantic, responsive, accessible code, never a license to recompose: keeping the palette and mood while redrawing the topology is a second art direction. Do not rasterize core UI text or controls. Do not substitute a different visual driver after approval without asking.
37
+
38
+ What the comp shows is measured, not remembered. new-work.md section 6 runs the build as phases (`impeccable build-phase`): the spec phase turns the comp into region boxes with sampled palettes (`impeccable comp-spec`), and the medium of every region follows from what the pixels are, never from what feels buildable: a figure, a product object, machinery, any illustration with perspective, shading, or drawing skill in it, and any texture by name (woven cloth, paper grain, fabric, leather, brushed metal) is a `plate` / `image` / `texture` region and ships as a raster; text, controls, chrome, diagrams with countable elements, flat shape systems, and anything that must move, scale, or respond are semantic. Writing "CSS" for a sculpted panel's finish, or a many-vertex `clip-path` for a torn edge, is the quiet deletion of the approved design; the detector's organic-clip-path and buried-raster rules and the hero gate's region scores catch it. Dropping an image-native region is a scope decision the user makes at the approval point, never a silent flattening after it. Generated imagery is a material, not a claim: evidence rules bind assertions, specs, testimonials, and photographs presented as real, never render fidelity.
39
+
40
+ ## Plates and provenance
41
+
42
+ Every raster region's plate is produced in the plates phase, before any page code, by the shipped asset producer or in the current thread (use `impeccable comp-spec --crop <id>` and save `impeccable comp-spec --plate-prompt <id>` to a prompt file; pass the crop and prompt to the harness image tool, or use `impeccable generate-image --ref <crop.png> --prompt-file <prompt.txt> --out <plate.png> --size <WxH> --quality high`). For isolated cutouts, add `--background transparent` to both the plate-prompt and API generation commands; use native PNG alpha and preserve white paint and clear gaps. Use `--background opaque` for full-frame imagery. Create output directories first and inspect alpha on light and dark grounds. Generation context is part of the asset: after generating any image with any tool, run `.claude/skills/impeccable/scripts/impeccable embed-prompt <image> --prompt "<prompt>"` with the exact string the tool received (`impeccable generate-image` does this itself), so the intent lives inside the file; `--read` recovers it, `--scan <dir>` lists rasters still missing one. The embedded prompt plus the region's row in the spec is the raster's **provenance**, and every raster the artifact references carries it; a sourced, stock, or pre-existing raster embeds its origin instead. A raster created or replaced later, in a fix batch or a reviewer's rebuild, is produced the same way; a raster a fix abandons is deleted in the same batch.
43
+
44
+ Convert images with a converter `impeccable context` reported at boot (the IMAGE_TOOLS line); probe only when it reported none, at most once per session, never per image.
45
+
46
+ Return to [new-work.md](new-work.md) for the direction contract, the phased build, and the finishing pass.
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Leonxlnx
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
@@ -0,0 +1,37 @@
1
+ {
2
+ "repo": "Leonxlnx/taste-skill",
3
+ "sha": "ccbc15639c97057cbfcf32ecebc38ef716e4bb37",
4
+ "date": "2026-08-24",
5
+ "license": "MIT",
6
+ "files": [
7
+ {
8
+ "path": "LICENSE",
9
+ "sha256": "4575a543ab88dad12ccea7d97e563d0bce5b448b06072e65d3264497dad326df"
10
+ },
11
+ {
12
+ "path": "skills/minimalist-skill/SKILL.md",
13
+ "sha256": "36bc7328f085405f43b476938e62460fa573bf7e984e949e072bcf014831a44c"
14
+ },
15
+ {
16
+ "path": "skills/redesign-skill/SKILL.md",
17
+ "sha256": "98ad3e5b051bfb71b2795f7e8a6aa0d32b51ee095606c098a4b2822ac07926c9"
18
+ },
19
+ {
20
+ "path": "skills/soft-skill/SKILL.md",
21
+ "sha256": "e1e32f5e2d420872c6c7332b53d5ff7721946766b78c4822b424c2d512c8fdbc"
22
+ },
23
+ {
24
+ "path": "skills/taste-skill/SKILL.md",
25
+ "sha256": "aa194351b246b8b4799099d4ed7b033d29eab6e6e3d58d8d2172978be7b3ec89"
26
+ }
27
+ ],
28
+ "omitted": [
29
+ "skills/imagegen-frontend-web, skills/imagegen-frontend-mobile — image generation belongs to cohort-mcp design_generate_image",
30
+ "skills/brandkit — brand tokens are DESIGN.md's, never a skill's",
31
+ "skills/gpt-tasteskill, skills/stitch-skill — other vendors' model/tooling wrappers",
32
+ "skills/taste-skill-v1 — superseded by skills/taste-skill",
33
+ "skills/brutalist-skill, skills/output-skill, skills/image-to-code-skill — styles and behaviours outside the four the design ruling admitted",
34
+ "assets/, examples/, research/, scripts/, skill.sh, .claude-plugin/"
35
+ ],
36
+ "notes": "MIT. Marketing and site pages ONLY — these skills self-declare out of scope for dashboards, data tables, forms and product UI. Directory names differ from the frontmatter names: taste-skill=design-taste-frontend, redesign-skill=redesign-existing-projects, soft-skill=high-end-visual-design, minimalist-skill=minimalist-ui. Their em-dash ban does NOT apply to Cohort copy."
37
+ }
@@ -0,0 +1,85 @@
1
+ ---
2
+ name: minimalist-ui
3
+ description: Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.
4
+ ---
5
+
6
+ # Protocol: Premium Utilitarian Minimalism UI Architect
7
+
8
+ ## 1. Protocol Overview
9
+ Name: Premium Utilitarian Minimalism & Editorial UI
10
+ Description: An advanced frontend engineering directive for generating highly refined, ultra-minimalist, "document-style" web interfaces analogous to top-tier workspace platforms. This protocol strictly enforces a high-contrast warm monochrome palette, bespoke typographic hierarchies, meticulous structural macro-whitespace, bento-grid layouts, and an ultra-flat component architecture with deliberate muted pastel accents. It actively rejects standard generic SaaS design trends.
11
+
12
+ ## 2. Absolute Negative Constraints (Banned Elements)
13
+ The AI must strictly avoid the following generic web development defaults:
14
+ - DO NOT use the "Inter", "Roboto", or "Open Sans" typefaces.
15
+ - DO NOT use generic, thin-line icon libraries like "Lucide", "Feather", or standard "Heroicons".
16
+ - DO NOT use Tailwind's default heavy drop shadows (e.g., `shadow-md`, `shadow-lg`, `shadow-xl`). Shadows must be practically non-existent or heavily customized to be ultra-diffuse and low opacity (< 0.05).
17
+ - DO NOT use primary colored backgrounds for large elements or sections (e.g., no bright blue, green, or red hero sections).
18
+ - DO NOT use gradients, neon colors, or 3D glassmorphism (beyond subtle navbar blurs).
19
+ - DO NOT use `rounded-full` (pill shapes) for large containers, cards, or primary buttons.
20
+ - DO NOT use emojis anywhere in code, markup, text content, headings, or alt text. Replace with proper icons or clean SVG primitives.
21
+ - DO NOT use generic placeholder names like "John Doe", "Acme Corp", or "Lorem Ipsum". Use realistic, contextual content.
22
+ - DO NOT use AI copywriting clichés: "Elevate", "Seamless", "Unleash", "Next-Gen", "Game-changer", "Delve". Write plain, specific language.
23
+
24
+ ## 3. Typographic Architecture
25
+ The interface must rely on extreme typographic contrast and premium font selection to establish an editorial feel.
26
+ - Primary Sans-Serif (Body, UI, Buttons): Use clean, geometric, or system-native fonts with character. Target: `font-family: 'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'Switzer', sans-serif`.
27
+ - Editorial Serif (Hero Headings & Quotes): Target: `font-family: 'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif`. Apply tight tracking (`letter-spacing: -0.02em` to `-0.04em`) and tight line-height (`1.1`).
28
+ - Monospace (Code, Keystrokes, Meta-data): Target: `font-family: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace`.
29
+ - Text Colors: Body text must never be absolute black (`#000000`). Use off-black/charcoal (`#111111` or `#2F3437`) with a generous `line-height` of `1.6` for legibility. Secondary text should be muted gray (`#787774`).
30
+
31
+ ## 4. Color Palette (Warm Monochrome + Spot Pastels)
32
+ Color is a scarce resource, utilized only for semantic meaning or subtle accents.
33
+ - Canvas / Background: Pure White `#FFFFFF` or Warm Bone/Off-White `#F7F6F3` / `#FBFBFA`.
34
+ - Primary Surface (Cards): `#FFFFFF` or `#F9F9F8`.
35
+ - Structural Borders / Dividers: Ultra-light gray `#EAEAEA` or `rgba(0,0,0,0.06)`.
36
+ - Accent Colors: Exclusively use highly desaturated, washed-out pastels for tags, inline code backgrounds, or subtle icon backgrounds.
37
+ - Pale Red: `#FDEBEC` (Text: `#9F2F2D`)
38
+ - Pale Blue: `#E1F3FE` (Text: `#1F6C9F`)
39
+ - Pale Green: `#EDF3EC` (Text: `#346538`)
40
+ - Pale Yellow: `#FBF3DB` (Text: `#956400`)
41
+
42
+ ## 5. Component Specifications
43
+ - Bento Box Feature Grids:
44
+ - Utilize asymmetrical CSS Grid layouts.
45
+ - Cards must have exactly `border: 1px solid #EAEAEA`.
46
+ - Border-radius must be crisp: `8px` or `12px` maximum.
47
+ - Internal padding must be generous (e.g., `24px` to `40px`).
48
+ - Primary Call-To-Action (Buttons):
49
+ - Solid background `#111111`, text `#FFFFFF`.
50
+ - Slight border-radius (`4px` to `6px`). No box-shadow.
51
+ - Hover state should be a subtle color shift to `#333333` or a micro-scale `transform: scale(0.98)`.
52
+ - Tags & Status Badges:
53
+ - Pill-shaped (`border-radius: 9999px`), very small typography (`text-xs`), uppercase with wide tracking (`letter-spacing: 0.05em`).
54
+ - Background must use the defined Muted Pastels.
55
+ - Accordions (FAQ):
56
+ - Strip all container boxes. Separate items only with a `border-bottom: 1px solid #EAEAEA`.
57
+ - Use a clean, sharp `+` and `-` icon for the toggle state.
58
+ - Keystroke Micro-UIs:
59
+ - Render shortcuts as physical keys using `<kbd>` tags: `border: 1px solid #EAEAEA`, `border-radius: 4px`, `background: #F7F6F3`, using the Monospace font.
60
+ - Faux-OS Window Chrome:
61
+ - When mocking up software, wrap it in a minimalist container with a white top bar containing three small, light gray circles (replicating macOS window controls).
62
+
63
+ ## 6. Iconography & Imagery Directives
64
+ - System Icons: Use "Phosphor Icons (Bold or Fill weights)" or "Radix UI Icons" for a technical, slightly thicker-stroke aesthetic. Standardize stroke width across all icons.
65
+ - Illustrations: Monochromatic, rough continuous-line ink sketches on a white background, featuring a single offset geometric shape filled with a muted pastel color.
66
+ - Photography: Use high-quality, desaturated images with a warm tone. Apply subtle overlays (`opacity: 0.04` warm grain) to blend photos into the monochrome palette. Never use oversaturated stock photos. Use reliable placeholders like `https://picsum.photos/seed/{context}/1200/800` when real assets are unavailable.
67
+ - Hero & Section Backgrounds: Sections should not feel empty and flat. Use subtle full-width background imagery at very low opacity, soft radial light spots (`radial-gradient` with warm tones at `opacity: 0.03`), or minimal geometric line patterns to add depth without breaking the clean aesthetic.
68
+
69
+ ## 7. Subtle Motion & Micro-Animations
70
+ Motion should feel invisible — present but never distracting. The goal is quiet sophistication, not spectacle.
71
+ - Scroll Entry: Elements fade in gently as they enter the viewport. Use `translateY(12px)` + `opacity: 0` resolving over `600ms` with `cubic-bezier(0.16, 1, 0.3, 1)`. Use `IntersectionObserver`, never `window.addEventListener('scroll')`.
72
+ - Hover States: Cards lift with an ultra-subtle shadow shift (`box-shadow` transitioning from `0 0 0` to `0 2px 8px rgba(0,0,0,0.04)` over `200ms`). Buttons respond with `scale(0.98)` on `:active`.
73
+ - Staggered Reveals: Lists and grid items enter with a cascade delay (`animation-delay: calc(var(--index) * 80ms)`). Never mount everything at once.
74
+ - Background Ambient Motion: Optional. A single, very slow-moving radial gradient blob (`animation-duration: 20s+`, `opacity: 0.02-0.04`) drifting behind hero sections. Must be applied to a `position: fixed; pointer-events: none` layer. Never on scrolling containers.
75
+ - Performance: Animate exclusively via `transform` and `opacity`. No layout-triggering properties (`top`, `left`, `width`, `height`). Use `will-change: transform` sparingly and only on actively animating elements.
76
+
77
+ ## 8. Execution Protocol
78
+ When tasked with writing frontend code (HTML, React, Tailwind, Vue) or designing a layout:
79
+ 1. Establish the macro-whitespace first. Use massive vertical padding between sections (e.g., `py-24` or `py-32` in Tailwind).
80
+ 2. Constrain the main typography content width to `max-w-4xl` or `max-w-5xl`.
81
+ 3. Apply the custom typographic hierarchy and monochromatic color variables immediately.
82
+ 4. Ensure every card, divider, and border adheres strictly to the `1px solid #EAEAEA` rule.
83
+ 5. Add scroll-entry animations to all major content blocks.
84
+ 6. Ensure sections have visual depth through imagery, ambient gradients, or subtle textures — no empty flat backgrounds.
85
+ 7. Provide code that reflects this high-end, uncluttered, editorial aesthetic natively without requiring manual adjustments.
@@ -0,0 +1,178 @@
1
+ ---
2
+ name: redesign-existing-projects
3
+ description: Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.
4
+ ---
5
+
6
+ # Redesign Skill
7
+
8
+ ## How This Works
9
+
10
+ When applied to an existing project, follow this sequence:
11
+
12
+ 1. **Scan** — Read the codebase. Identify the framework, styling method (Tailwind, vanilla CSS, styled-components, etc.), and current design patterns.
13
+ 2. **Diagnose** — Run through the audit below. List every generic pattern, weak point, and missing state you find.
14
+ 3. **Fix** — Apply targeted upgrades working with the existing stack. Do not rewrite from scratch. Improve what's there.
15
+
16
+ ## Design Audit
17
+
18
+ ### Typography
19
+
20
+ Check for these problems and fix them:
21
+
22
+ - **Browser default fonts or Inter everywhere.** Replace with a font that has character. Good options: `Geist`, `Outfit`, `Cabinet Grotesk`, `Satoshi`. For editorial/creative projects, pair a serif header with a sans-serif body.
23
+ - **Headlines lack presence.** Increase size for display text, tighten letter-spacing, reduce line-height. Headlines should feel heavy and intentional.
24
+ - **Body text too wide.** Limit paragraph width to roughly 65 characters. Increase line-height for readability.
25
+ - **Only Regular (400) and Bold (700) weights used.** Introduce Medium (500) and SemiBold (600) for more subtle hierarchy.
26
+ - **Numbers in proportional font.** Use a monospace font or enable tabular figures (`font-variant-numeric: tabular-nums`) for data-heavy interfaces.
27
+ - **Missing letter-spacing adjustments.** Use negative tracking for large headers, positive tracking for small caps or labels.
28
+ - **All-caps subheaders everywhere.** Try lowercase italics, sentence case, or small-caps instead.
29
+ - **Orphaned words.** Single words sitting alone on the last line. Fix with `text-wrap: balance` or `text-wrap: pretty`.
30
+
31
+ ### Color and Surfaces
32
+
33
+ - **Pure `#000000` background.** Replace with off-black, dark charcoal, or tinted dark (`#0a0a0a`, `#121212`, or a dark navy).
34
+ - **Oversaturated accent colors.** Keep saturation below 80%. Desaturate accents so they blend with neutrals instead of screaming.
35
+ - **More than one accent color.** Pick one. Remove the rest. Consistency beats variety.
36
+ - **Mixing warm and cool grays.** Stick to one gray family. Tint all grays with a consistent hue (warm or cool, not both).
37
+ - **Purple/blue "AI gradient" aesthetic.** This is the most common AI design fingerprint. Replace with neutral bases and a single, considered accent.
38
+ - **Generic `box-shadow`.** Tint shadows to match the background hue. Use colored shadows (e.g., dark blue shadow on a blue background) instead of pure black at low opacity.
39
+ - **Flat design with zero texture.** Add subtle noise, grain, or micro-patterns to backgrounds. Pure flat vectors feel sterile.
40
+ - **Perfectly even gradients.** Break the uniformity with radial gradients, noise overlays, or mesh gradients instead of standard linear 45-degree fades.
41
+ - **Inconsistent lighting direction.** Audit all shadows to ensure they suggest a single, consistent light source.
42
+ - **Random dark sections in a light mode page (or vice versa).** A single dark-background section breaking an otherwise light page looks like a copy-paste accident. Either commit to a full dark mode or keep a consistent background tone throughout. If contrast is needed, use a slightly darker shade of the same palette — not a sudden jump to `#111` in the middle of a cream page.
43
+ - **Empty, flat sections with no visual depth.** Sections that are just text on a plain background feel unfinished. Add high-quality background imagery (blurred, overlaid, or masked), subtle patterns, or ambient gradients. Use reliable placeholder sources like `https://picsum.photos/seed/{name}/1920/1080` when real assets are not available. Experiment with background images behind hero sections, feature blocks, or CTAs — even a subtle full-width photo at low opacity adds presence.
44
+
45
+ ### Layout
46
+
47
+ - **Everything centered and symmetrical.** Break symmetry with offset margins, mixed aspect ratios, or left-aligned headers over centered content.
48
+ - **Three equal card columns as feature row.** This is the most generic AI layout. Replace with a 2-column zig-zag, asymmetric grid, horizontal scroll, or masonry layout.
49
+ - **Using `height: 100vh` for full-screen sections.** Replace with `min-height: 100dvh` to prevent layout jumping on mobile browsers (iOS Safari viewport bug).
50
+ - **Complex flexbox percentage math.** Replace with CSS Grid for reliable multi-column structures.
51
+ - **No max-width container.** Add a container constraint (around 1200-1440px) with auto margins so content doesn't stretch edge-to-edge on wide screens.
52
+ - **Cards of equal height forced by flexbox.** Allow variable heights or use masonry when content varies in length.
53
+ - **Uniform border-radius on everything.** Vary the radius: tighter on inner elements, softer on containers.
54
+ - **No overlap or depth.** Elements sit flat next to each other. Use negative margins to create layering and visual depth.
55
+ - **Symmetrical vertical padding.** Top and bottom padding are always identical. Adjust optically — bottom padding often needs to be slightly larger.
56
+ - **Dashboard always has a left sidebar.** Try top navigation, a floating command menu, or a collapsible panel instead.
57
+ - **Missing whitespace.** Double the spacing. Let the design breathe. Dense layouts work for data dashboards, not for marketing pages.
58
+ - **Buttons not bottom-aligned in card groups.** When cards have different content lengths, CTAs end up at random heights. Pin buttons to the bottom of each card so they form a clean horizontal line regardless of content above.
59
+ - **Feature lists starting at different vertical positions.** In pricing tables or comparison cards, the list of features should start at the same Y position across all columns. Use consistent spacing above the list or fixed-height title/price blocks.
60
+ - **Inconsistent vertical rhythm in side-by-side elements.** When placing cards, columns, or panels next to each other, align shared elements (titles, descriptions, prices, buttons) across all items. Misaligned baselines make the layout look broken.
61
+ - **Mathematical alignment that looks optically wrong.** Centering by the math doesn't always look centered to the eye. Icons next to text, play buttons in circles, or text in buttons often need 1-2px optical adjustments to feel right.
62
+
63
+ ### Interactivity and States
64
+
65
+ - **No hover states on buttons.** Add background shift, slight scale, or translate on hover.
66
+ - **No active/pressed feedback.** Add a subtle `scale(0.98)` or `translateY(1px)` on press to simulate a physical click.
67
+ - **Instant transitions with zero duration.** Add smooth transitions (200-300ms) to all interactive elements.
68
+ - **Missing focus ring.** Ensure visible focus indicators for keyboard navigation. This is an accessibility requirement, not optional.
69
+ - **No loading states.** Replace generic circular spinners with skeleton loaders that match the layout shape.
70
+ - **No empty states.** An empty dashboard showing nothing is a missed opportunity. Design a composed "getting started" view.
71
+ - **No error states.** Add clear, inline error messages for forms. Do not use `window.alert()`.
72
+ - **Dead links.** Buttons that link to `#`. Either link to real destinations or visually disable them.
73
+ - **No indication of current page in navigation.** Style the active nav link differently so users know where they are.
74
+ - **Scroll jumping.** Anchor clicks jump instantly. Add `scroll-behavior: smooth`.
75
+ - **Animations using `top`, `left`, `width`, `height`.** Switch to `transform` and `opacity` for GPU-accelerated, smooth animation.
76
+
77
+ ### Content
78
+
79
+ - **Generic names like "John Doe" or "Jane Smith".** Use diverse, realistic-sounding names.
80
+ - **Fake round numbers like `99.99%`, `50%`, `$100.00`.** Use organic, messy data: `47.2%`, `$99.00`, `+1 (312) 847-1928`.
81
+ - **Placeholder company names like "Acme Corp", "Nexus", "SmartFlow".** Invent contextual, believable brand names.
82
+ - **AI copywriting cliches.** Never use "Elevate", "Seamless", "Unleash", "Next-Gen", "Game-changer", "Delve", "Tapestry", or "In the world of...". Write plain, specific language.
83
+ - **Exclamation marks in success messages.** Remove them. Be confident, not loud.
84
+ - **"Oops!" error messages.** Be direct: "Connection failed. Please try again."
85
+ - **Passive voice.** Use active voice: "We couldn't save your changes" instead of "Mistakes were made."
86
+ - **All blog post dates identical.** Randomize dates to appear real.
87
+ - **Same avatar image for multiple users.** Use unique assets for every distinct person.
88
+ - **Lorem Ipsum.** Never use placeholder latin text. Write real draft copy.
89
+ - **Title Case On Every Header.** Use sentence case instead.
90
+
91
+ ### Component Patterns
92
+
93
+ - **Generic card look (border + shadow + white background).** Remove the border, or use only background color, or use only spacing. Cards should exist only when elevation communicates hierarchy.
94
+ - **Always one filled button + one ghost button.** Add text links or tertiary styles to reduce visual noise.
95
+ - **Pill-shaped "New" and "Beta" badges.** Try square badges, flags, or plain text labels.
96
+ - **Accordion FAQ sections.** Use a side-by-side list, searchable help, or inline progressive disclosure.
97
+ - **3-card carousel testimonials with dots.** Replace with a masonry wall, embedded social posts, or a single rotating quote.
98
+ - **Pricing table with 3 towers.** Highlight the recommended tier with color and emphasis, not just extra height.
99
+ - **Modals for everything.** Use inline editing, slide-over panels, or expandable sections instead of popups for simple actions.
100
+ - **Avatar circles exclusively.** Try squircles or rounded squares for a less generic look.
101
+ - **Light/dark toggle always a sun/moon switch.** Use a dropdown, system preference detection, or integrate it into settings.
102
+ - **Footer link farm with 4 columns.** Simplify. Focus on main navigational paths and legally required links.
103
+
104
+ ### Iconography
105
+
106
+ - **Lucide or Feather icons exclusively.** These are the "default" AI icon choice. Use Phosphor, Heroicons, or a custom set for differentiation.
107
+ - **Rocketship for "Launch", shield for "Security".** Replace cliche metaphors with less obvious icons (bolt, fingerprint, spark, vault).
108
+ - **Inconsistent stroke widths across icons.** Audit all icons and standardize to one stroke weight.
109
+ - **Missing favicon.** Always include a branded favicon.
110
+ - **Stock "diverse team" photos.** Use real team photos, candid shots, or a consistent illustration style instead of uncanny stock imagery.
111
+
112
+ ### Code Quality
113
+
114
+ - **Div soup.** Use semantic HTML: `<nav>`, `<main>`, `<article>`, `<aside>`, `<section>`.
115
+ - **Inline styles mixed with CSS classes.** Move all styling to the project's styling system.
116
+ - **Hardcoded pixel widths.** Use relative units (`%`, `rem`, `em`, `max-width`) for flexible layouts.
117
+ - **Missing alt text on images.** Describe image content for screen readers. Never leave `alt=""` or `alt="image"` on meaningful images.
118
+ - **Arbitrary z-index values like `9999`.** Establish a clean z-index scale in the theme/variables.
119
+ - **Commented-out dead code.** Remove all debug artifacts before shipping.
120
+ - **Import hallucinations.** Check that every import actually exists in `package.json` or the project dependencies.
121
+ - **Missing meta tags.** Add proper `<title>`, `description`, `og:image`, and social sharing meta tags.
122
+
123
+ ### Strategic Omissions (What AI Typically Forgets)
124
+
125
+ - **No legal links.** Add privacy policy and terms of service links in the footer.
126
+ - **No "back" navigation.** Dead ends in user flows. Every page needs a way back.
127
+ - **No custom 404 page.** Design a helpful, branded "page not found" experience.
128
+ - **No form validation.** Add client-side validation for emails, required fields, and format checks.
129
+ - **No "skip to content" link.** Essential for keyboard users. Add a hidden skip-link.
130
+ - **No cookie consent.** If required by jurisdiction, add a compliant consent banner.
131
+
132
+ ## Upgrade Techniques
133
+
134
+ When upgrading a project, pull from these high-impact techniques to replace generic patterns:
135
+
136
+ ### Typography Upgrades
137
+ - **Variable font animation.** Interpolate weight or width on scroll or hover for text that feels alive.
138
+ - **Outlined-to-fill transitions.** Text starts as a stroke outline and fills with color on scroll entry or interaction.
139
+ - **Text mask reveals.** Large typography acting as a window to video or animated imagery behind it.
140
+
141
+ ### Layout Upgrades
142
+ - **Broken grid / asymmetry.** Elements that deliberately ignore column structure — overlapping, bleeding off-screen, or offset with calculated randomness.
143
+ - **Whitespace maximization.** Aggressive use of negative space to force focus on a single element.
144
+ - **Parallax card stacks.** Sections that stick and physically stack over each other during scroll.
145
+ - **Split-screen scroll.** Two halves of the screen sliding in opposite directions.
146
+
147
+ ### Motion Upgrades
148
+ - **Smooth scroll with inertia.** Decouple scrolling from browser defaults for a heavier, cinematic feel.
149
+ - **Staggered entry.** Elements cascade in with slight delays, combining Y-axis translation with opacity fade. Never mount everything at once.
150
+ - **Spring physics.** Replace linear easing with spring-based motion for a natural, weighty feel on all interactive elements.
151
+ - **Scroll-driven reveals.** Content entering through expanding masks, wipes, or draw-on SVG paths tied to scroll progress.
152
+
153
+ ### Surface Upgrades
154
+ - **True glassmorphism.** Go beyond `backdrop-filter: blur`. Add a 1px inner border and a subtle inner shadow to simulate edge refraction.
155
+ - **Spotlight borders.** Card borders that illuminate dynamically under the cursor.
156
+ - **Grain and noise overlays.** A fixed, pointer-events-none overlay with subtle noise to break digital flatness.
157
+ - **Colored, tinted shadows.** Shadows that carry the hue of the background rather than using generic black.
158
+
159
+ ## Fix Priority
160
+
161
+ Apply changes in this order for maximum visual impact with minimum risk:
162
+
163
+ 1. **Font swap** — biggest instant improvement, lowest risk
164
+ 2. **Color palette cleanup** — remove clashing or oversaturated colors
165
+ 3. **Hover and active states** — makes the interface feel alive
166
+ 4. **Layout and spacing** — proper grid, max-width, consistent padding
167
+ 5. **Replace generic components** — swap cliche patterns for modern alternatives
168
+ 6. **Add loading, empty, and error states** — makes it feel finished
169
+ 7. **Polish typography scale and spacing** — the premium final touch
170
+
171
+ ## Rules
172
+
173
+ - Work with the existing tech stack. Do not migrate frameworks or styling libraries.
174
+ - Do not break existing functionality. Test after every change.
175
+ - Before importing any new library, check the project's dependency file first.
176
+ - If the project uses Tailwind, check the version (v3 vs v4) before modifying config.
177
+ - If the project has no framework, use vanilla CSS.
178
+ - Keep changes reviewable and focused. Small, targeted improvements over big rewrites.