We split this skill into the rules it gives an agent

41 rules. 17 are common, 0 are distinctive, and 24 are very specific to this project.

• 17

  Common

  Most of the 12 edited versions we read keep these.

• 0

  Distinctive

  This author's own choices. Worth a look.

• 24

  Very specific

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

• Common
• Distinctive
• Very specific

1. Common:

   MUST use Tailwind CSS defaults unless custom values already exist or are explicitly requested

   line 23
2. Very specific:

   MUST use motion/react (formerly framer-motion) when JavaScript animation is required

   line 24
3. Very specific:

   SHOULD use tw-animate-css for entrance and micro-animations in Tailwind CSS

   line 25
4. Very specific:

   MUST use cn utility (clsx + tailwind-merge) for class logic

   line 26
5. Very specific:

   MUST use accessible component primitives for anything with keyboard or focus behavior (Base UI, React Aria, Radix)

   line 30
6. Common:

   MUST use the project’s existing component primitives first

   line 31
7. Common:

   NEVER mix primitive systems within the same interaction surface

   line 32
8. Very specific:

   SHOULD prefer Base UI for new primitives if compatible with the stack

   line 33
9. Very specific:

   MUST add an aria-label to icon-only buttons

   line 34
10. Common:

    NEVER rebuild keyboard or focus behavior by hand unless explicitly requested

    line 35
11. Very specific:

    MUST use an AlertDialog for destructive or irreversible actions

    line 39
12. Common:

    SHOULD use structural skeletons for loading states

    line 40
13. Very specific:

    NEVER use h-screen, use h-dvh

    line 41
14. Very specific:

    MUST respect safe-area-inset for fixed elements

    line 42
15. Common:

    MUST show errors next to where the action happens

    line 43
16. Very specific:

    NEVER block paste in input or textarea elements

    line 44
17. Common:

    NEVER add animation unless it is explicitly requested

    line 48
18. Very specific:

    MUST animate only compositor props (transform, opacity)

    line 49
19. Very specific:

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

    line 50
20. Very specific:

    SHOULD avoid animating paint properties (background, color) except for small, local UI (text, icons)

    line 51
21. Very specific:

    SHOULD use ease-out on entrance

    line 52
22. Very specific:

    NEVER exceed 200ms for interaction feedback

    line 53
23. Common:

    MUST pause looping animations when off-screen

    line 54
24. Common:

    NEVER introduce custom easing curves unless explicitly requested

    line 56
25. Common:

    SHOULD avoid animating large images or full-screen surfaces

    line 57
26. Very specific:

    MUST use text-balance for headings and text-pretty for body/paragraphs

    line 61
27. Very specific:

    MUST use tabular-nums for data

    line 62
28. Very specific:

    SHOULD use truncate or line-clamp for dense UI

    line 63
29. Very specific:

    NEVER modify letter-spacing (tracking-*) unless explicitly requested

    line 64
30. Very specific:

    MUST use a fixed z-index scale (no arbitrary z-*)

    line 68
31. Very specific:

    SHOULD use size-* for square elements instead of w-* + h-*

    line 69
32. Very specific:

    NEVER animate large blur() or backdrop-filter surfaces

    line 73
33. Very specific:

    NEVER apply will-change outside an active animation

    line 74
34. Very specific:

    NEVER use useEffect for anything that can be expressed as render logic

    line 75
35. Common:

    NEVER use gradients unless explicitly requested

    line 79
36. Common:

    NEVER use purple or multicolor gradients

    line 80
37. Common:

    NEVER use glow effects as primary affordances

    line 81
38. Common:

    SHOULD use Tailwind CSS default shadow scale unless explicitly requested

    line 82
39. Common:

    MUST give empty states one clear next action

    line 83
40. Common:

    SHOULD limit accent color usage to one per view

    line 84
41. Common:

    SHOULD use existing theme or Tailwind CSS color tokens before introducing new ones

    line 85

“Common” is measured: kept by at least 6 in 10 of the 12 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.

• Other versions15 projects use a version of this.

  Word for word · 3

  1. ibelick/ui-skills★ 10k100% same
  2. julianromli/faiz-skills★ 16100% same
  3. dvaJi/argos★ 3100% same

  Edited · 10

  1. vercel-labs/open-agents★ 5.8k92% same
  2. agentset-ai/agentset★ 2.1k76% same
  3. kapishdima/soundcn★ 86498% same
  4. ninehills/skills★ 28092% same
  5. master5d/claude-design-skills★ 2692% same
  6. noartem/skills★ 1390% same
  7. the-hyve-company/design-factory-app★ 492% same
  8. sanmidable/skills★ 295% same
  9. BuFi007/open-agents★ 192% same
  10. GalvinGao/skills★ 192% same

  Wrote their own version · 2

  1. jscraik/Agent-Skills★ 9same name
  2. hsynozdamar-byte/claude-skills-edited★ 4same name

  How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.

• Used alongsideProjects with it also use create-design-md, better-interface and 5 more.

  Other files people use alongside this one.

  How we pick theseFiles found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.

  • ItamarZand88Skill

    create-design-md

    Create a new DESIGN.md file for any website, app, or custom design system. Use when the user wants to document a design system in DESIGN.md format, extract design tokens from a URL or existing CSS, create a custom design system from scratch, author a DESIGN.md for their own project, or contribute a new design to the awesome-design-md collection. Also trigger when user mentions "design system documentation", wants to formalize their app's visual language, or asks to create or generate a DESIGN.md file.

    Also in 4 projects that use this

  • AnasX7Skill

    better-interface

    Combines all of the `better-*` skills into a single review across accessibility, layout, writing, typography, color and UI polish.

    Also in 3 projects that use this

  • AnasX7Skill

    better-accessibility

    Helps your project comply with accessibility standards and best practices.

    Also in 3 projects that use this

  • +4 more from AnasX7
• In this repository5 other files it gives its agents.

  • fixing-accessibilitySkill
  • fixing-metadataSkill
  • fixing-motion-performanceSkill
  • improve-uiSkill
  • ui-skills-rootSkill