coss

Name: coss
Availability: InStock
Author: spinboxx

Guide React apps implementing and migrating to coss UI primitives.

Updated Aug 23, 2026

Search Tags:#frontend #react #migration #tailwind #ui-components #base-ui #coss

Ready to run

npx skills add https://github.com/SpinBoxx/turborepo-boilerplate --skill coss

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: coss
Source: https://github.com/SpinBoxx/turborepo-boilerplate/tree/main/apps/web/.agents/skills/coss
Command: npx skills add https://github.com/SpinBoxx/turborepo-boilerplate --skill coss

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Helps teams implement and migrate to the coss UI component library by providing standardized usage, accessibility, and Tailwind-based styling guidance, reducing reliance on ad-hoc patterns and ensuring consistent design language across React projects.

Core Features & Use Cases

Guidance on importing, composing, and styling coss primitives (Dialog, Menu, Select, Combobox, etc.) to accelerate UI development.
Migration support from shadcn/Radix to coss/Base UI patterns, including trigger-based overlays and form-integrated workflows.
Best practices for accessibility, responsive layouts, and Tailwind token usage to prevent common pitfalls.

Quick Start

Start by reviewing the references and migration rules to apply coss primitives in your React project.

Frequently Asked Questions about coss

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I migrate React UI components from shadcn to Base UI primitives?▼

Migrate shadcn to Base UI by replacing Radix-based patterns with coss trigger-based overlays and form-integrated workflows. This provides standardized usage and accessibility guidance for React apps.

What is the best way to style Base UI overlays using Tailwind CSS?▼

Style Base UI overlays using Tailwind CSS tokens to ensure a consistent design language across React projects. This prevents common pitfalls by applying standardized responsive layout patterns.

Can I use coss primitives for accessible Dialog and Combobox components in React?▼

Use coss primitives for accessible Dialog, Menu, Select, and Combobox components in React. They provide standardized accessibility patterns and clear references for practical usage.

Does the coss migration path support trigger-based overlays and form-integrated workflows?▼

The coss migration path supports trigger-based overlays and form-integrated workflows. It helps teams transition from shadcn and Radix patterns to Base UI components with clear guidance.

Why does implementing UI primitives without standardized patterns cause issues?▼

Implementing UI primitives without standardized patterns causes issues by creating reliance on ad-hoc solutions. This leads to inconsistent design language and accessibility pitfalls across React projects.

How do I start using coss to build React interfaces?▼

Start building React interfaces with coss by reviewing the provided references and migration rules. This accelerates UI development by guiding the importing, composing, and styling of primitives.