Generated components arrive with their own blues and their own spacing, and then you spend longer fixing them than writing them. Naming the file the tokens live in, and listing the states, fixed both for me.
Build [component] using only what is already in this project:
- Colours, radii and shadows: the CSS variables in globals.css. No hex values.
- Spacing and type: existing Tailwind classes, no arbitrary values like p-[13px].
- Components: reuse what is in components/ui. Do not install anything.
Match the density of [existing component] and give it the same states: default, hover, focus-visible, disabled, loading, empty.
AskVibe