We split this skill into the rules it gives an agent

36 rules. 3 are common, 11 are distinctive, and 22 are very specific to this project.

• 3

  Common

  Most of the 9 edited versions we read keep these.

• 11

  Distinctive

  This author's own choices. Worth a look.

• 22

  Very specific

  Tied to their project's names, files or tools. Probably skip.

• Common
• Distinctive
• Very specific

1. Distinctive:

   Use Tailwind CSS defaults unless custom values already exist or are explicitly requested.

   line 13
2. Very specific:

   Use motion/react (formerly framer-motion) for JavaScript animation.

   line 14
3. Very specific:

   Use tw-animate-css for entrance and micro-animations.

   line 15
4. Very specific:

   Use cn utility (clsx + tailwind-merge) for class logic.

   line 16
5. Very specific:

   Use accessible primitives (Base UI, React Aria, Radix) for keyboard/focus behavior.

   line 20
6. Distinctive:

   Use the project's existing component primitives first.

   line 21
7. Distinctive:

   NEVER mix primitive systems within the same interaction surface.

   line 22
8. Very specific:

   Prefer Base UI for new primitives if compatible.

   line 23
9. Very specific:

   Add aria-label to icon-only buttons.

   line 24
10. Distinctive:

    NEVER rebuild keyboard or focus behavior by hand.

    line 25
11. Very specific:

    Use AlertDialog for destructive or irreversible actions.

    line 29
12. Distinctive:

    Use structural skeletons for loading states.

    line 30
13. Very specific:

    Use h-dvh instead of h-screen.

    line 31
14. Very specific:

    NEVER block paste in input or textarea.

    line 34
15. Distinctive:

    NEVER add animation unless explicitly requested.

    line 38
16. Very specific:

    NEVER animate layout properties (width, height, top, left, margin, padding).

    line 40
17. Very specific:

    Avoid animating paint properties (background, color) except for small local UI.

    line 41
18. Very specific:

    Use ease-out on entrance.

    line 42
19. Very specific:

    NEVER exceed 200ms for interaction feedback.

    line 43
20. Distinctive:

    NEVER introduce custom easing curves unless explicitly requested.

    line 46
21. Very specific:

    Use text-balance for headings, text-pretty for body/paragraphs.

    line 50
22. Very specific:

    Use tabular-nums for data.

    line 51
23. Very specific:

    Use truncate or line-clamp for dense UI.

    line 52
24. Very specific:

    NEVER modify letter-spacing unless explicitly requested.

    line 53
25. Very specific:

    Use a fixed z-index scale (no arbitrary z-*).

    line 57
26. Very specific:

    Use size-* for square elements instead of w-* + h-*.

    line 58
27. Very specific:

    NEVER animate large blur() or backdrop-filter surfaces.

    line 62
28. Very specific:

    NEVER apply will-change outside an active animation.

    line 63
29. Very specific:

    NEVER use useEffect for anything expressible as render logic.

    line 64
30. Common:

    NEVER use gradients unless explicitly requested.

    line 68
31. Common:

    NEVER use purple or multicolor gradients.

    line 69
32. Common:

    NEVER use glow effects as primary affordances.

    line 70
33. Distinctive:

    Use Tailwind default shadow scale unless explicitly requested.

    line 71
34. Distinctive:

    Use existing theme or Tailwind color tokens before introducing new ones.

    line 74
35. Distinctive:

    If a constraint conflicts with an explicit user request, follow the user request and note the deviation.

    line 78
36. Distinctive:

    If a component violates multiple constraints, report all violations sorted by severity (accessibility > performance > design).

    line 79

“Common” is measured: kept by at least 6 in 10 of the 9 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.