JOYCO UI Kit

A bento/console-style component library built on shadcn/ui with Radix primitives and Tailwind, served from the JOYCO hub (hub.joyco.studio). Components are installed into the project at @/components/ui/* via the @joyco shadcn registry.

This skill deliberately holds no component API. Variants, props, and behavior live in the hub and in the installed source — both of which change. Memorizing them here guarantees drift. The skill's only job is to send you to the live source and keep you from improvising the kit's conventions.

Setting up a new project (Next.js + the kit + lint + agent)? That's the joyco-app skill. This skill is about using the kit once it's installed.

The one rule: don't work from memory

The kit's API changes. Before using a component, read its live definition. There are three sources, in order of what you need:

1. The Cluster / Filler layout primitives — the heart of the system. Read the live doc: https://hub.joyco.studio/components/cluster.md It covers the transparent-container concept, the bg cascade, Filler, asChild/inline use, the prop tables, and the design principles (no borders, no rounded corners, Filler instead of justify-*). Read it before laying out anything.