--- name: ui-maxxing description: Where to source real UI material: components, motion, fonts, color, icons, inspiration, portfolios, agent-design tooling, instead of inventing generic AI UI. Use when building or restyling any interface, picking a font/palette/animation, or when a design looks generic and needs a specific reference to steal from. Sourcing only; craft methodology lives in refero-design / impeccable. --- # ui-maxxing 81 hand-curated sources. Not a link dump: a routing table. **Before writing UI, pick a concrete source below and name it.** "Generic Tailwind card" is the failure mode this file exists to prevent. Rows marked **·** are the ones worth opening first. Generated from `sources.json` in the ui-maxxing repo. Do not hand-edit; edit the source list and rerun `node skill.js`, otherwise this file and the gallery drift apart. ## Components _copy-paste, shadcn-compatible unless noted_ | Source | Use it for | |---|---| | [shadcn/ui](https://ui.shadcn.com) **·** | the foundation | | [21st.dev](https://21st.dev) **·** | thousands, searchable | | [Aceternity UI](https://ui.aceternity.com) | flashy hero effects | | [Magic UI](https://magicui.design) | aceternity, calmer | | [React Bits](https://reactbits.dev) | animated one-offs | | [Motion Primitives](https://motion-primitives.com) | motion primitives | | [unlumen UI](https://ui.unlumen.com) | best easing here | | [Componentry](https://componentry.dev) | copy-paste + motion | | [Skiper UI](https://skiper-ui.com) | the uncommon ones | | [Cult UI](https://cult-ui.com) | polished, opinionated | | [SmoothUI](https://smoothui.dev) | small and tasteful | | [Watermelon UI](https://ui.watermelon.sh) | dashboards and blocks | | [HyperUI](https://hyperui.dev) | plain tailwind, no deps | | [Uiverse](https://uiverse.io) | css-only oddities | | [HeroUI](https://heroui.com) | a11y handled | | [Neobrutalism](https://neobrutalism.dev) | loud and retro | | [BYQ Supply](https://www.byq.supply) **·** | sections that copy as prompts | | [GrayBlocks](https://grayblocks.net) | figma / framer / webflow | | [Webflow Templates](https://webflow.com/templates) | whole templates | | [Monet](https://www.monet.design) | 1000+, searchable, one command | ## Motion _pick ONE library per project, mixed easing systems read as slop_ | Source | Use it for | |---|---| | [GSAP](https://gsap.com) **·** | the heavyweight | | [Anime.js](https://animejs.com) | lighter timelines | | [react-spring](https://www.react-spring.dev) | spring physics | | [AutoAnimate](https://auto-animate.formkit.com) **·** | lists, one line | | [LottieFiles](https://lottiefiles.com) | vector animations | | [Rive](https://rive.app) | stateful, real runtime | | [Spline](https://spline.design) | 3d in the browser | | [Animista](https://animista.net) | css keyframes, copy out | | [Theatre.js](https://www.theatrejs.com) | scrubbable timeline | | [Jitter](https://jitter.video) | motion graphics | | [Swishy](https://www.swishy.ai) | prompt to mp4 | | [Figma](https://www.figma.com) | prototype motion | ## Color _lock the palette before writing a single component_ | Source | Use it for | |---|---| | [Realtime Colors](https://realtimecolors.com) **·** | palette on real ui | | [fffuel](https://www.fffuel.co) **·** | noise, grain, holo | | [Mesh](https://meshgradient.com) | webgl mesh | | [Shader Gradient](https://www.shadergradient.co) | animated shaders | | [Pattern Monster](https://pattern.monster) | svg patterns | | [Shape Divider](https://www.shapedivider.app) | section dividers | | [CSS Gradient](https://cssgradient.io) | plain gradients | ## Type _the fastest way to stop looking generic_ | Source | Use it for | |---|---| | [Fontshare](https://www.fontshare.com) **·** | not the google defaults | | [Fontsource](https://fontsource.org) | self-host anything | | [Bunny Fonts](https://fonts.bunny.net) | gdpr google mirror | | [Fonts In Use](https://fontsinuse.com) | what brands actually set | | [Fontjoy](https://fontjoy.com) | pairings | | [Space Type Generator](https://spacetypegenerator.com) | kinetic type | | [Doodle Fonts](https://doodlefonts.app) | draw your own | ## Icons _do not overthink this one_ | Source | Use it for | |---|---| | [Lucide](https://lucide.dev) **·** | the default | | [Phosphor](https://phosphoricons.com) | weights | | [Heroicons](https://heroicons.com) | tailwind native | | [Iconify](https://iconify.design) | every set, one api | ## Inspiration _open one of these BEFORE designing, not after_ | Source | Use it for | |---|---| | [Mobbin](https://mobbin.com) **·** | real screens and flows | | [Refero](https://refero.design) **·** | searchable by style | | [Appshots](https://appshots.design) | mobile, by flow | | [Godly](https://godly.design/sites) | award-tier landing | | [Recent](https://recent.design) | fresh, daily | | [Layers](https://layers.to) | community shots | | [Rebrand](https://rebrand.gallery) | identities | | [CARI](https://cari.institute) **·** | named visual eras | | [Constraint Systems](https://constraint.systems) | interfaces nobody has | | [Form Follows Function](https://fff.cmiscm.com) | html5 experiments | | [DIELINE](https://thedieline.com) | packaging | | [posts.design](https://posts.design) | social posts | | [Navbar Gallery](https://navbar.gallery) | only navbars | | [OGimage.gallery](https://ogimage.gallery) | og images | | [Drainspotting](https://drainspotting.art) | manhole covers | | [PFL SafetyCards](https://www.safetycards.org) | airline safety cards | | [Dribbble](https://dribbble.com) | shots, browse by flow | | [Footer.design](https://www.footer.design) | only footers | ## Portfolios _what one person can do with a page_ | Source | Use it for | |---|---| | [Manish](https://www.manishkr.xyz) | design engineer | | [Marco Cornacchia](https://www.marco.fyi) | product designer, figma | | [Pixelwrld](https://pixelwrld.co) | product designer, ships tools | ## Agent _the lane that actually compounds_ | Source | Use it for | |---|---| | [uiscanner](https://uiscanner.com) **·** | url to tokens + prompt | | [getdesign.md](https://getdesign.md) | design.md for agents | | [Figma MCP Catalog](https://www.figma.com/mcp-catalog/) | figma into claude code | | [Variant](https://variant.com) | scroll for directions | | [Google Stitch](https://stitch.withgoogle.com) | prompt to ui | | [Cursor Directory](https://cursor.directory) | agent rules | ## Misc _presentation, and the directories of directories_ | Source | Use it for | |---|---| | [Mockuply](https://mockuply.com) | mockups | | [Toools.design](https://www.toools.design) | the meta-directory | | [Tooooools](https://tooooools.app) | lo-fi image effects | | [Rotating glow border](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) | the @property trick | --- ## How to actually use this 1. Name the archetype: landing, dashboard, settings, onboarding, marketing. 2. Open **one** inspiration source. Pick **one** reference. Name it out loud. If the reference is a live site, run `ui_teardown` on it and build from the tokens. 3. Lock font and palette **before** any component. Fontshare plus Realtime Colors, five minutes. 4. Pull components from the matching table. Never from memory. Memory is where generic comes from. 5. Motion last, one library, one easing system. 6. If nothing here fits, say so plainly. Do not fall back to generic.