skills.rest
mahou-labs
mahou-labsOFFICIAL
Explore all skills by this author →
GitHub

coss

Guide React UI development with coss primitives for accessible components and styling.

1|Updated Mar 12, 2026
Search Tags:#documentation#react#composition#tailwind#ui-components#coss
One-click install
npx skills add https://github.com/mahou-labs/shiru --skill coss-mahou-labs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: coss
Source: https://github.com/mahou-labs/shiru/tree/main/.agents/skills/coss
Command: npx skills add https://github.com/mahou-labs/shiru --skill coss-mahou-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Helps teams implement and document UI components with the coss library, ensuring consistent APIs, accessibility, and Tailwind-based styling across React projects.

Core Features & Use Cases

  • Provides authoritative guidance on selecting primitives, composing overlays, and wiring forms using coss components.
  • Offers references to component docs, particles, and migration notes to accelerate UI development.
  • Supports verifying correct imports, frontmatter metadata presence, and usage patterns in real projects.

Quick Start

Instantiate a basic coss Button and Dialog in a sample app to validate standard imports and composition.

Frequently Asked Questions about coss

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

FAQPage Schema
How do I build accessible React interfaces with Tailwind UI components?▼

To build accessible React interfaces with Tailwind UI components, apply primitive composition guidelines to ensure consistent APIs, correct imports, and adherence to structural and styling standards.

What is the best way to compose overlays and forms in React applications?▼

Composing overlays and forms in React applications requires selecting the correct UI primitives and wiring them together using documented composition patterns to maintain accessibility and API consistency.

How do I verify correct imports and frontmatter metadata for React UI components?▼

Verifying correct imports and frontmatter metadata for React UI components involves checking the structural usage patterns against documented references to ensure valid component instantiation and styling adherence.

Does this approach work for migrating existing React interfaces to Tailwind-based styling?▼

Yes, this approach works for migrating existing React interfaces to Tailwind-based styling by referencing migration notes and component documentation to accelerate the transition while maintaining accessibility.

Can I use these UI primitives to ensure consistent APIs across different React projects?▼

You can use these UI primitives to ensure consistent APIs across different React projects by following authoritative guidance on component selection, composition, and Tailwind-based styling implementation.

Why are my composed React UI components failing accessibility checks?▼

Composed React UI components may fail accessibility checks if frontmatter metadata is missing, imports are incorrect, or the implementation deviates from established composition and accessibility guidelines.

Related Skills

Explore More Software Engineering Skills→
AbdullahMalik17AbdullahMalik17
9

styling-with-shadcn

Set up shadcn/ui components, forms, and dark mode in Next.js projects.

Community
Intermediate
vmobifystudiovmobifystudio
4

design-system

Enforce design tokens and reusable UI components for iOS and Android.

Community
Intermediate
marcosgcr3marcosgcr3

ui-styling

Create accessible React interfaces with shadcn/ui and Tailwind CSS.

Community
Advanced
mohamed-g-shoaibmohamed-g-shoaib

coss

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

Community
Intermediate