skills.rest
jason23452
jason23452COMMUNITY
Explore all skills by this author →
GitHub

coss

Implements React UIs with coss components built on Base UI and Tailwind CSS v4.

Updated Jun 28, 2026
Search Tags:#frontend#react#tailwind css#ui components#shadcn#base ui#coss
One-click install
npx skills add https://github.com/jason23452/my-skill --skill coss-jason23452
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: coss
Source: https://github.com/jason23452/my-skill/tree/main/frontend/ui-kit/coss
Command: npx skills add https://github.com/jason23452/my-skill --skill coss-jason23452

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @base-ui/react, lucide-react, class-variance-authority, clsx, tailwind-merge, tailwindcss, @tailwindcss/vite, and includes scripts (resource) and references (resource) components.

What problem does it solve? Building React interfaces with the coss component library requires knowing 54 primitives, their composition rules, and how they differ from shadcn/Radix patterns; this Skill provides the correct imports, composition hierarchies, and migration guidance so generated code matches official coss conventions. ## Core Features & Use Cases - Primitive selection and usage: A component registry maps UI intents (dialogs, selects, forms, toasts, menus) to the right coss primitive with dedicated reference guides covering imports, patterns, and pitfalls. - shadcn/Radix migration guidance: Rule references explain how to translate Radix-style assumptions (like asChild or type="single") into coss/Base UI equivalents such as render composition and array-based values. - Automated bootstrap: A Node script installs coss via the shadcn CLI, configures Tailwind CSS v4, path aliases, and components.json, then verifies generated artifacts and runtime dependencies. - Use Case: When asked to build a settings page with a confirmation dialog and form validation in a React/Vite app, the Skill selects Dialog, AlertDialog, Form, and Field primitives and emits accessible, docs-accurate code. ## Quick Start Ask the assistant to build a React component using coss, for example: create a delete-confirmation dialog with a form using coss UI components in my Vite React project.

Frequently Asked Questions about coss

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

FAQPage Schema
How do I install coss UI components in a React project?▼

Run the shadcn CLI with your project's package manager, for example npx shadcn@latest add @coss/ui for all primitives or npx shadcn@latest init @coss/style for new projects. The CLI creates component files and installs dependencies, so let it finish completely.

What is the difference between coss and shadcn/ui?▼

coss is built on Base UI instead of Radix UI and uses render-based composition rather than asChild. Patterns like Accordion use a multiple prop with array values instead of Radix's type="single" or type="multiple" API.

Does coss UI work with Tailwind CSS v4?▼

Yes, coss assumes Tailwind CSS v4 conventions and requires tailwindcss plus @tailwindcss/vite in React/Vite projects. The bootstrap script adds the Vite plugin and ensures the CSS entry imports tailwindcss.

Which coss component should I use for searchable selection?▼

Use Combobox for searchable selection from a strict set of options, or Autocomplete when free-text input with suggestions is allowed. Use Select only when options are predefined and no search is needed.

Why does my coss dialog form layout break?▼

DialogHeader, DialogPanel, and DialogFooter must remain direct layout sections of DialogPopup. Keep the header outside the form and wrap only the panel and footer in a Form with className="contents".

Can I control where coss popups render in the DOM?▼

Yes, composed popup components like DialogPopup, MenuPopup, and SelectPopup accept an optional portalProps object forwarded to the internal Base UI Portal, supporting keepMounted and a custom container node.

Related Skills

Explore More Software Engineering Skills→
vobasevobase
59

shadcn-ui

Integrate shadcn/ui components into React projects with Tailwind CSS and TypeScript configuration.

Official
Intermediate
kaustubhhiwarekaustubhhiware

fullstack-guardian

Develop full-stack features with integrated security and validation.

Community
Advanced
RomualdPRomualdP

React State Management

Implement Zustand stores and custom hooks for React client-side state.

Community
Intermediate
JewelsHovanJewelsHovan

shadcn-ui-best-practices

Enforce shadcn-ui best practices for React and TypeScript projects.

Community
Basic