skills.rest
mohamed-g-shoaib
mohamed-g-shoaibCOMMUNITY
Explore all skills by this author →
GitHub

coss

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
One-click install
npx skills add https://github.com/mohamed-g-shoaib/rootly --skill coss-mohamed-g-shoaib
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
daveiodaveio

tailwind-theme-builder

Configure Tailwind v4 and shadcn/ui theming with CSS variables and dark mode.

Community
Advanced
llama-farmllama-farm
835

designer-skills

Provide design patterns and checklists for React UI with TailwindCSS, TanStack Query, and Radix UI.

Official
Advanced
epicweb-devepicweb-dev
5.5k

epic-ui-guidelines

Guides React developers to implement accessible UI components with Tailwind CSS and Radix UI.

Official
Basic
MapleTechLabsMapleTechLabs
1.6k

coss

Implement coss UI components using Base UI primitives with Tailwind CSS v4.

Official
Advanced