coss

Name: coss
Availability: InStock
Author: mohamed-g-shoaib

Implement coss UI primitives in React with Tailwind styling and accessibility.

Updated Mar 10, 2026

Search Tags:#ui #documentation #frontend #react #migration #component-library #coss

Ready to run

npx skills add https://github.com/mohamed-g-shoaib/rootly --skill coss-mohamed-g-shoaib

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: coss
Source: https://github.com/mohamed-g-shoaib/rootly/tree/main/.agents/skills/coss
Command: npx skills add https://github.com/mohamed-g-shoaib/rootly --skill coss-mohamed-g-shoaib

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The coss skill provides clear guidance for implementing, migrating to, and troubleshooting coss UI primitives in React projects.

Core Features & Use Cases

Covers imports, accessibility, Tailwind styling, and common pitfalls when using coss primitives.
Serves as a migration companion for moving from shadcn/Radix to coss/Base UI and for building trigger-based overlays.
Provides structured references to UI primitives, usage patterns, and example compositions.

Quick Start

Install the coss skill in your project and begin applying its patterns to build consistent, accessible UI components.

Frequently Asked Questions about coss

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

FAQPage Schema

How do I migrate my React component library from shadcn or Radix to Base UI?▼

Migrate from shadcn or Radix to Base UI by following structured references for mapping primitives and updating imports. This ensures accessible interfaces remain consistent while transitioning component composition patterns safely.

What is the correct way to implement accessible overlays and dialogs in React?▼

Implement accessible overlays and dialogs by using documented composition patterns for coss primitives. This approach assembles menus, selects, and forms correctly while avoiding common pitfalls in trigger-based UI construction.

Can I use Tailwind styling conventions with Base UI primitives in my React project?▼

Yes, you can apply Tailwind styling conventions with Base UI primitives. The skill provides specific guidance on documenting imports and styling to ensure safe, scalable UI construction without conflicting with underlying accessibility features.

What are common pitfalls when building forms and selects with React UI primitives?▼

Common pitfalls when building forms and selects include incorrect import structures and breaking trigger-based overlay composition. Avoid these issues by following documented patterns to maintain accessible and consistent interfaces.

How do I ensure consistent imports when updating my React frontend to use Base UI components?▼

Ensure consistent imports by referencing structured documentation for Base UI components. This guides the correct implementation of primitives, preventing scaling issues and maintaining accessible interfaces throughout your React project.