coss

Name: coss
Availability: InStock
Author: makisuo

Standardizes coss UI primitives for React apps with portalProps and Tailwind token conventions.

1.6k|107|Updated Feb 15, 2026

Search Tags:#ui #accessibility #react #migration #tailwind #primitives #coss

Ready to run

npx skills add https://github.com/Makisuo/maple --skill coss-makisuo

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: coss
Source: https://github.com/Makisuo/maple/tree/main/.agents/skills/coss
Command: npx skills add https://github.com/Makisuo/maple --skill coss-makisuo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Enables teams to consistently and correctly implement the coss UI component library across React apps, improving accessibility and visual coherence.

Core Features & Use Cases

Provides guidance on selecting the right coss primitives for overlays, forms, inputs, and data displays.
Offers reference patterns, usage rules, and migration tips from shadcn/Radix to coss/Base UI.
Includes best-practice examples and troubleshooting tips for accessible, Tailwind-driven interfaces.

Quick Start

Migrate a shadcn/Radix dialog flow to coss by wiring Dialog components and ensuring portal forwarding with portalProps.

Frequently Asked Questions about coss

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

FAQPage Schema

How do I migrate shadcn or Radix UI components to coss Base UI in React?▼

To migrate shadcn or Radix UI components to coss Base UI, wire the equivalent coss primitives and ensure portal forwarding using the portalProps pattern. This standardizes overlays, forms, inputs, and data displays for consistent, accessible interfaces.

How do I ensure accessibility when using coss UI primitives for React overlays?▼

To ensure accessibility with coss UI primitives, apply the standardized portalProps patterns for portal forwarding and use the provided reference patterns for overlays. This enforces consistent, accessible component behaviors across React applications.

What is the best way to compose forms with coss UI primitives and Tailwind?▼

The best way to compose forms with coss UI primitives is to use the field-based composition method along with Tailwind token conventions. This approach ensures visual coherence and standardized input handling across your React application.

Do I need specific Tailwind token conventions for coss UI data displays?▼

Yes, you need to follow specific Tailwind token conventions when implementing coss UI data displays. The skill enforces these conventions to guarantee visual coherence and consistent styling across React components.

Can I use coss UI primitives alongside my existing shadcn components during migration?▼

You can use coss UI primitives alongside existing shadcn components during migration by following the provided migration guidance. It maps shadcn and Radix patterns to coss and Base UI equivalents to maintain functionality.

Why does my coss UI dialog portal forwarding fail in React?▼

coss UI dialog portal forwarding fails when portalProps patterns are not correctly applied. To resolve this, ensure you are using the enforced portalProps patterns for portal forwarding as specified in the migration and reference guidance.