skills.rest
cosscom
cosscomOFFICIAL
Explore all skills by this author →
GitHub

coss

Guide React developers in selecting, using, and migrating coss UI components.

10.4k|522|Updated Oct 15, 2024
Search Tags:#React#component library#UI components#Base UI#coss UI
One-click install
npx skills add https://github.com/cosscom/coss --skill coss-cosscom
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: coss
Source: https://github.com/cosscom/coss/tree/main/apps/ui/skills/coss
Command: npx skills add https://github.com/cosscom/coss --skill coss-cosscom

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @base-ui/react, tailwindcss, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance for using the coss UI component library, solving the challenge of correctly implementing coss UI components in your projects.

Core Features & Use Cases

  • Component Selection: Helps identify the right coss primitive for a UI task.
  • Usage Code: Offers examples for correct usage of coss components, including imports, composition, and props.
  • Migration: Assists in migrating from shadcn/Radix to coss/Base UI.
  • Composition: Covers composing trigger-based overlays and troubleshooting coss component behavior.
  • Documentation: Provides detailed reference guides and examples for all coss components.

Quick Start

Use the coss skill to implement a coss Button component in your React app: import { Button } from '@coss/ui'; <Button>Click me</Button>.

Frequently Asked Questions about coss

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

FAQPage Schema
How do I implement React UI components using Base UI and Tailwind CSS?▼

To implement React UI components using the coss UI library, you import components like Button from '@coss/ui' and use them directly in your React app. The library provides primitives built on Base UI and styled with Tailwind CSS v4.

What is the best way to migrate from shadcn or Radix to Base UI components?▼

The best way to migrate from shadcn or Radix to Base UI primitives is by using the coss UI library's migration guidance. It assists in transitioning your existing component dependencies and composition patterns to Base UI seamlessly.

Do I need Tailwind CSS v4 to use the coss UI component library?▼

Yes, you need Tailwind CSS v4 and @base-ui/react installed to use the coss UI component library. These dependencies are required to properly render and apply styles to the components within your React project.

How do I compose trigger-based overlays with React UI components?▼

To compose trigger-based overlays with React UI components, the coss UI library provides specific composition patterns and troubleshooting guidance. It helps you correctly structure imports and props for overlay behavior using Base UI primitives.

Why does my coss UI component behavior not match the documentation?▼

If your coss UI component behavior does not match documentation, verify your Tailwind CSS v4 and @base-ui/react setup. The library offers troubleshooting guidance for correctly composing components and resolving migration issues.

Related Skills

Explore More Software Engineering Skills→
MapleTechLabsMapleTechLabs
1.6k

coss

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

Official
Advanced
ncaqncaq
3

react-component-convention

Standardize React component file structure with fixed import, type, and export ordering.

Community
Advanced
gustavscirulisgustavscirulis
114

baseline-ui

Validate Tailwind CSS UI against animation, typography, accessibility, and layout constraints.

Community
Intermediate
retrip-airetrip-ai
2

base-ui-design

Standardize React UI components with Base UI design guidelines.

Official
Basic