← ClaudeAtlas

coss-ui-setuplisted

Configure the complete Coss UI style in an existing shadcn TanStack Start monorepo, including agent knowledge, TanStack-compatible fonts, root isolation, and iOS Safari backdrop support. Use after project-setup, not to initialize a missing project or build application features.
P-Essonam/maximin-skills · ★ 1 · AI & Automation · score 62
Install: claude install-skill P-Essonam/maximin-skills
# Coss UI Setup Follow this skill strictly. ## Prerequisite Verify that the current project is a shadcn TanStack Start monorepo with a shared UI package. If it is not, stop and ask the user to run `$project-setup` first. Preserve the structure and configuration generated by shadcn. ## Install Install the official Coss skill globally for the supported agents. Keep symlink mode by omitting `--copy`: ```powershell pnpm dlx skills add cosscom/coss --skill coss --global --agent opencode claude-code antigravity --yes ``` From the shared UI package, install the Coss style and all Coss components: ```powershell pnpm dlx shadcn@latest add @coss/style pnpm dlx shadcn@latest add @coss/ui ``` ## Adapt Coss to TanStack Start Do not create `layout.tsx`, use `next/font`, or retain Next.js-specific font wiring. If `@coss/style` generates Next.js font setup, adapt it for TanStack Start: 1. Add `@fontsource-variable/inter` and `@fontsource-variable/geist-mono` to the shared UI package if missing. 2. Add these imports once to the existing shared `globals.css`: ```css @import "@fontsource-variable/inter"; @import "@fontsource-variable/geist-mono"; ``` 3. Ensure its existing `@theme inline` block contains: ```css --font-sans: "Inter Variable", sans-serif; --font-heading: "Inter Variable", sans-serif; --font-mono: "Geist Mono Variable", monospace; ``` 4. Remove only the generated Next.js font wiring that the CSS setup replaces. Verify that TanStack's `src