# Set up sushindustries

You are configuring the current project to use components or packages from sushindustries.
Actions this document asks of you: **read**, then follow one link and **install**.

## Decide what is being installed

- A **component** is source copied into the project (TanStack CLI or shadcn), styled by atomic classes from `@sushindustries/atoms`.
- A **package** is installed from npm and used as a dependency.

Ask the user if it is not obvious from their request.

## Components

Each component's own instructions live at `https://adamjurek.com/r/prompt/<name>`:

- `boot-loader` - A count to a hundred that stalls at ninety until what it is covering has actually arrived. Fills its parent, not the viewport. → https://adamjurek.com/r/prompt/boot-loader
- `reveal` - Fades and rises its children the first time they reach the viewport. Never un-reveals. → https://adamjurek.com/r/prompt/reveal
- `scroll-spin` - Rotates its children with the page scroll, in a rAF callback rather than React state. → https://adamjurek.com/r/prompt/scroll-spin
- `smooth-scroll` - Mounts Lenis for the page and renders nothing. Respects reduced motion. → https://adamjurek.com/r/prompt/smooth-scroll
- `typed-mark` - Types a word out one character at a time, cycling the syntax palette. No JavaScript, no state, and it runs with scripting off. → https://adamjurek.com/r/prompt/typed-mark
- `use-scroll-progress` - How far one element has travelled up the viewport, 0 to 1, once per frame. Gated by an observer so an off-screen element costs nothing. → https://adamjurek.com/r/prompt/use-scroll-progress
- `use-scroll-turn` - Scroll position as a rotation, delivered once per frame. Drives a CSS transform or a three.js object, never React state. → https://adamjurek.com/r/prompt/use-scroll-turn
- `accordion` - details, stacked - every behaviour ships in the element, and items open independently on purpose. → https://adamjurek.com/r/prompt/accordion
- `archive` - A filterable grid with categories, subcategories and tags. Renders its own links through a callback so the router stays yours. → https://adamjurek.com/r/prompt/archive
- `aspect-ratio` - A box that keeps its shape and fills whatever is put in it. CSS aspect-ratio, as a prop. → https://adamjurek.com/r/prompt/aspect-ratio
- `card` - Title, optional meta, arbitrary body. Heading level is a prop so the outline stays correct. → https://adamjurek.com/r/prompt/card
- `collapsible` - One details, dressed - a sentence that opens, for prose rather than lists. → https://adamjurek.com/r/prompt/collapsible
- `context-menu` - One menu, reachable by right-click, by long press, and by a button. Escape and arrow keys included. → https://adamjurek.com/r/prompt/context-menu
- `desk-window` - A window you can drag, close and stack. Position is written to the element during a drag and to state only on release. → https://adamjurek.com/r/prompt/desk-window
- `device` - A phone, a tablet or a laptop in CSS 3D, chosen by the stylesheet rather than by JavaScript, whose screen is a real scroll container with real controls in it. → https://adamjurek.com/r/prompt/device
- `dialog` - A native dialog driven by props: top layer, focus trap and Escape from the element, click-outside from here. → https://adamjurek.com/r/prompt/dialog
- `dock` - A launcher, what is open, and a corner. Search opens upward and results are the consumer's to compute. → https://adamjurek.com/r/prompt/dock
- `folder-shelf` - A desktop of folders that open into draggable windows, several at once, remembered between visits. → https://adamjurek.com/r/prompt/folder-shelf
- `grid` - A responsive grid with no breakpoints in it. One number decides the column count at every width. → https://adamjurek.com/r/prompt/grid
- `item` - One row of a list: tile, title, description, meta - the nav panel's anatomy, extracted for reuse. → https://adamjurek.com/r/prompt/item
- `nav-bar` - A site header whose panels expand. Built on <details>, so it works before hydration and closes on Escape. → https://adamjurek.com/r/prompt/nav-bar
- `scroll-area` - The named inner scroll: thin bar, and the smooth scroller handed back - the pair everyone forgets separately. → https://adamjurek.com/r/prompt/scroll-area
- `section` - Kicker, heading and body, revealing top-down with an 80ms offset. → https://adamjurek.com/r/prompt/section
- `separator` - A rule with two directions and an accessibility decision: announced when it separates content, silent when it is furniture. → https://adamjurek.com/r/prompt/separator
- `sheet` - The dialog docked to an edge, for content tall enough that centring it would mean scrolling a floating box. → https://adamjurek.com/r/prompt/sheet
- `spacer` - Vertical space on the scale, optionally with a rule and a label. For Markdown, where there is no markup to hang a margin on. → https://adamjurek.com/r/prompt/spacer
- `theme-toggle` - A segmented control that reports which option was pressed and knows nothing about themes. Roving focus, and `aria-checked` is the selector that draws it. → https://adamjurek.com/r/prompt/theme-toggle
- `use-desk-state` - Which windows are open, where they sit and what has been put away, remembered without breaking a server render. → https://adamjurek.com/r/prompt/use-desk-state
- `use-device-kind` - Which machine the stylesheet is currently drawing, as a value. Null until mounted, on purpose - a default would be a claim the server cannot support. → https://adamjurek.com/r/prompt/use-device-kind
- `alert` - The Markdown callout, reachable from JSX - application news in the same box the docs already use. → https://adamjurek.com/r/prompt/alert
- `avatar` - A person at glyph size: the image if it loads, initials on a toned fill if it does not. → https://adamjurek.com/r/prompt/avatar
- `badge` - A word wearing a fill, in the site's own tone pairs - a badge invents no colour of its own. → https://adamjurek.com/r/prompt/badge
- `button` - The pill and the ghost - one action and its alternative, with no third variant on purpose. → https://adamjurek.com/r/prompt/button
- `checkbox` - A native checkbox with its words attached, painted by accent-color rather than redrawn. → https://adamjurek.com/r/prompt/checkbox
- `clock` - The reader's own day and time, in the reader's own zone, without asking anybody for a location. → https://adamjurek.com/r/prompt/clock
- `code-block` - A highlighted code slab with the CLI's colours, a lit top edge, and a copy button that confirms in place. → https://adamjurek.com/r/prompt/code-block
- `copy-button` - A glass chip that writes to the clipboard and confirms in the button itself, then hands back. → https://adamjurek.com/r/prompt/copy-button
- `credit` - A dependency, credited, with its author required rather than optional. → https://adamjurek.com/r/prompt/credit
- `empty` - Nothing, said properly: what is missing, why that is fine, and what to do next - in that order, quietly. → https://adamjurek.com/r/prompt/empty
- `field` - A labelled control with one line under it - the error is announced by being pointed at, not by being red. → https://adamjurek.com/r/prompt/field
- `frontmatter` - A small frontmatter reader for `key: value` and inline lists. Not YAML, deliberately. → https://adamjurek.com/r/prompt/frontmatter
- `input` - A text input, and only the drawing of one - state and labels belong to the form and to Field. → https://adamjurek.com/r/prompt/input
- `kbd` - A key, drawn as one. Semantically <kbd>, visually the chip the command palette already wears. → https://adamjurek.com/r/prompt/kbd
- `markdown-view` - Renders Markdown with callouts, CSS-only tabs, custom blocks and highlighted code. → https://adamjurek.com/r/prompt/markdown-view
- `native-select` - The platform's own select in the site's clothes - the phone wheel and the OS menu, kept. → https://adamjurek.com/r/prompt/native-select
- `progress` - The native progress element, restyled - omit value and the indeterminate state is real. → https://adamjurek.com/r/prompt/progress
- `questions` - The questions a page expects to be asked. Given an onAsk, each one is a button that puts itself to an assistant; without it, a plain list. → https://adamjurek.com/r/prompt/questions
- `radio-group` - Radios in a fieldset - the one grouping screen readers announce without help. → https://adamjurek.com/r/prompt/radio-group
- `reference` - An inline mention that carries a hover card: title, summary and meta for the thing it names, raised by CSS alone. → https://adamjurek.com/r/prompt/reference
- `skeleton` - The wait, drawn as the thing being waited for: a line, a block or a circle, shimmering unless motion is reduced. → https://adamjurek.com/r/prompt/skeleton
- `slider` - A native range input with its label - keyboard steps and form value ship in the element. → https://adamjurek.com/r/prompt/slider
- `spinner` - One ring, one border, one turn - with a visually hidden label, because a spinner with nothing to announce is just an animation. → https://adamjurek.com/r/prompt/spinner
- `switch` - A checkbox that admits it: a real input with role=switch, and a track :checked drives. → https://adamjurek.com/r/prompt/switch
- `table` - A table that is a table: declared columns, right-aligned numbers, sideways scroll in its own frame. → https://adamjurek.com/r/prompt/table
- `textarea` - A textarea in the same clothes as Input, growing with its content where the browser allows. → https://adamjurek.com/r/prompt/textarea
- `toast` - Strings, four seconds, bottom corner, announced politely - one provider and one hook, nothing else. → https://adamjurek.com/r/prompt/toast
- `toggle` - A button that stays down, and the single-select group of them - aria-pressed is the whole contract. → https://adamjurek.com/r/prompt/toggle
- `tooltip` - One line on hover and focus, in the markup rather than in title= - and never carrying controls. → https://adamjurek.com/r/prompt/tooltip
- `typography` - The type scale as components: Heading with outline and size separated, the Label eyebrow, the Lead. One decision, made once. → https://adamjurek.com/r/prompt/typography
- `video-player` - A video held behind a picture of itself. The player is a child, so it mounts on play and unmounts on stop - no vendor, no bytes and no cookies until somebody asks. → https://adamjurek.com/r/prompt/video-player
- `breadcrumb` - The trail, told twice from one list: a visible nav with correct ARIA, and the schema.org BreadcrumbList rendered from the same array. → https://adamjurek.com/r/prompt/breadcrumb
- `command-palette` - Search over everything the host can name, in a native dialog: substring filter, arrow keys, and the host keeps the router. → https://adamjurek.com/r/prompt/command-palette
- `doc-aside` - An on-page table of contents: a sticky rail on desktop, a collapsed row on mobile. Collapse is CSS, not state. → https://adamjurek.com/r/prompt/doc-aside
- `doc-nav` - The left rail of a documentation page: the sections of a library, the elements in each, and the one that is open. A sticky column on a wide screen, a collapsed row below it. → https://adamjurek.com/r/prompt/doc-nav
- `hero` - The head of a documentation page: trail, element name, version, measured facts, actions and a responsive shot. Folds to one column by the room it has, not by the size of the window. → https://adamjurek.com/r/prompt/hero
- `pagination` - Pages as links with first and last always reachable. The window everyone already knows, and nothing that breaks middle-click. → https://adamjurek.com/r/prompt/pagination
- `showcase` - A component in a real iframe at every width it has to survive, side by side, with its source and install commands. → https://adamjurek.com/r/prompt/showcase

## Packages

Each package's own instructions live at `https://adamjurek.com/r/prompt/packages/<name>`:

- `@sushindustries/assistant` - A chat panel that streams Markdown, told which machine it is running on. TanStack AI on the wire, Groq behind it, and its whole personality in a Markdown file. → https://adamjurek.com/r/prompt/packages/assistant
- `@sushindustries/atoms` - The design tokens and the atomic utilities built on them. One stylesheet, no build step, no framework. → https://adamjurek.com/r/prompt/packages/atoms
- `@sushindustries/db` - The schema and the client. Drizzle over Postgres, with the connection kept server-side by construction. → https://adamjurek.com/r/prompt/packages/db
- `@sushindustries/llms` - Generate llms.txt, llms-full.txt, robots.txt and sitemap.xml from one description of a site. Framework-agnostic strings in, strings out. → https://adamjurek.com/r/prompt/packages/llms
- `@sushindustries/product-viewer` - Runtime material swapping and geometric zone tinting for a single GLB product. Framework-free. → https://adamjurek.com/r/prompt/packages/product-viewer
- `@sushindustries/react-product-viewer` - A React Three Fiber viewer for a single GLB product: orbit, contact shadow, runtime material variants, geometric zone tinting, and a PNG snapshot. → https://adamjurek.com/r/prompt/packages/react-product-viewer
- `@sushindustries/ui` - The components this site is made of. Every one of them is installable on its own - nothing here is site-specific. → https://adamjurek.com/r/prompt/packages/ui

## Ground rules

- The stylesheet is loaded once, globally: `@sushindustries/atoms/atoms.css`. Skipping it is the only common failure.
- Versions in the instructions are the verified ones. Do not silently upgrade them.
- If something does not fit the project, stop and tell the user rather than forcing it.