skills.rest
jason23452
jason23452COMMUNITY
Explore all skills by this author →
GitHub

coss-particles

Indexes 484 copy-paste-ready coss UI particle patterns with JSON manifest URLs for React projects.

Updated Jun 28, 2026
Search Tags:#frontend#react#ui components#copy-paste#ui kit#coss#pattern index
One-click install
npx skills add https://github.com/jason23452/my-skill --skill coss-particles-jason23452
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: coss-particles
Source: https://github.com/jason23452/my-skill/tree/main/frontend/ui-kit/coss-particles
Command: npx skills add https://github.com/jason23452/my-skill --skill coss-particles-jason23452

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Finding the right pre-built UI component pattern for a React project often means browsing documentation sites manually. This Skill provides a searchable index of 484 coss UI particles across 52 component types, each with a direct JSON URL containing the full source code. ## Core Features & Use Cases - Particle Discovery: Search 484 copy-paste-ready UI patterns organized by 52 component types such as button, calendar, dialog, combobox, and input-group. - JSON Manifest Access: Fetch complete particle source code from URLs following the pattern https://coss.com/ui/r/<particle-name>.json. - Use Case: While building a React + Vite app with coss installed, you need a date picker with presets. Describe the UI, locate the matching particle in the date-picker section, fetch its JSON, and adapt the code into your feature. ## Quick Start Ask the AI to find a coss particle for a form with validation and fetch its JSON source code.

Frequently Asked Questions about coss-particles

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

FAQPage Schema
How do I find and use coss UI particles in a React project?▼

Describe the UI you need, search the particle index by component type and description, then fetch the particle's JSON URL to get its full source code. Adapt the fetched code to fit your project's feature structure.

What is the JSON URL format for coss particles?▼

Each particle has a JSON manifest at https://coss.com/ui/r/<particle-name>.json, for example https://coss.com/ui/r/p-accordion-1.json. Fetching this URL returns the complete source code of the particle.

Does coss-particles work without the coss UI kit installed?▼

No, particles are built on coss primitives and require coss UI components already installed in the project. It is intended for React or React-Vite frontends after the base coss UI kit is selected or installed.

How many coss particles and component types are available?▼

The index contains 484 particles across 52 component types, including button, calendar, combobox, dialog, drawer, input-group, select, slider, and toast. You can also browse them visually at coss.com/ui/particles.

How is the coss particle index updated?▼

Run the generator script from the coss repo root with node apps/ui/scripts/generate-particle-index.cjs. Particle source files live in the coss repo at apps/ui/registry/default/particles/.

Related Skills

Explore More Software Engineering Skills→
cosscomcosscom
10.4k

coss-particles

Index and retrieve COSS UI particles via JSON manifests.

Official
Basic
MARUCIEMARUCIE
1

solution-testing

Write Playwright E2E tests, smoke tests, and Gherkin BDD feature files for critical user journeys.

Community
Intermediate
sami-abdulsami-abdul
3

frontend-code

Generate frontend code connecting UI components to real backend APIs.

Community
Intermediate
mahou-labsmahou-labs
1

coss

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

Official
Intermediate