ui-sources
Skill2 starsChanged 17 days agoMITView on GitHub
Where to get ready-made animated and styled React components (shadcn registries such as Motion Primitives, Kokonut UI, bklit UI, Magic UI, Animate UI and Watermelon UI) and how to bring one into the project cleanly. Use when a UI feature needs a component the project doesn't have yet, in a React + Tailwind + shadcn project.
In this repository3 other files it gives its agents.
- dev-setupSkill
- launch-checkSkill
- web-tasteSkill
The file
We split this skill into the rules it gives an agent
5 rules. About 0 are common, 2 are distinctive, and 3 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈2
Distinctive · estimate
This author's own choices. Worth a look.
3
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Very specific: line 9
Use only the registries the project approved in docs/ARCHITECTURE.md.
- Distinctive: line 24
Check the project's own components first.
- Very specific: line 25
Check the component against web-taste if the project has it.
- Distinctive: line 26
Add it with the shadcn CLI version pinned in the project, using the install command from the component's page.
- Very specific: line 28
Check its new dependencies against the approved list in docs/ARCHITECTURE.md.
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
UI sources
Use only the registries the project approved in docs/ARCHITECTURE.md. If it lists none, this skill doesn't apply.
Registries
| Registry | Site | License | Good for |
| Motion Primitives | motion-primitives.com | MIT | Text effects, reveals, transitions, small motion building blocks |
| Kokonut UI | kokonutui.com | MIT | Polished marketing and app components |
| bklit UI | github.com/bklit/bklit-ui | MIT | Charts and data display |
| Magic UI | magicui.design | MIT | Animated landing page components |
| Animate UI | animate-ui.com | MIT + Commons Clause | Animated versions of shadcn primitives. Fine inside a product; never resell the components themselves |
| Watermelon UI | ui.watermelon.sh | MIT | Copy-paste shadcn components; small project, check each component's quality |
Adding a component
- Check the project's own components first. Reuse or extend one before adding another.
- Check the component against
web-tasteif the project has it. Many registry showpieces are banned there (bento grids, glow orbs, sparkles, backdrop blur, animated borders). Pick something else, or the plain version. - Add it with the shadcn CLI version pinned in the project, using the install command from the component's page. Never paste code from anywhere else.
- Make it the project's code: remove comments, demo content, unused props, variants and exports, and any dependency it added that the project doesn't need. Name it for what it does here.
- Check its new dependencies against the approved list in
docs/ARCHITECTURE.md. Ask before keeping any that aren't on it. - Run
check.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
Reviews can't be read right now.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.