cozy-ui-reference

---
name: cozy-ui-reference
description: Build, review, or modify Cozy applications with cozy-ui React components, Material-UI v4 based theming, Cozy design patterns, CSS utility classes, icons, and component APIs. Use when Codex needs to choose cozy-ui components, write imports from cozy-ui, apply Cozy styling utilities, or answer implementation questions about cozy-ui.
---

<!-- Auto-generated by scripts/generate-skill.js — do not edit manually -->

# Cozy UI

Use this skill to build Cozy application interfaces with cozy-ui. Prefer this skill over generic React or Material-UI guidance when the task concerns Cozy apps, Cozy UI components, Cozy CSS utilities, or the Cozy theme.

## Quick Start

```jsx
import { Button, Alert } from 'cozy-ui/transpiled/react'
import { CozyTheme } from 'cozy-ui/transpiled/react/providers/CozyTheme'
import 'cozy-ui/transpiled/react/stylesheet.css'

<CozyTheme variant="light">
  <Alert severity="info">Ready</Alert>
  <Button label="Continue" />
</CozyTheme>
```

## What This Skill Provides

- 88+ React components with examples and extracted props.
- CSS utility classes for spacing, typography, colors, layout, and component-specific classes.
- Cozy theming conventions built on Material-UI v4.
- Import patterns for `cozy-ui/transpiled/react` and `cozy-ui/dist`.

## Quick Reference

### Components

Read `references/components.md` when choosing a component, checking props, or looking for usage examples.

Common starting points:

- Buttons and actions: `Button`, `Buttons`, `IconButton`, `ActionsMenu`, `ActionsBar`.
- Forms: `TextField`, `SelectBox`, `Checkbox`, `Radios`, `Switch`, `SearchBar`, `FileInput`.
- Layout: `Stack`, `Grid`, `Paper`, `Card`, `Container`, `Divider`.
- Feedback: `Alert`, `Banner`, `Snackbar`, `Spinner`, `Skeletons`, `ProgressionBanner`.
- Dialogs and menus: `CozyDialogs`, `Dialog`, `Menu`, `ActionsMenu`.

### CSS Utilities

Read `references/css-classes.md` when using utility classes or legacy CSS patterns.

```js
import 'cozy-ui/dist/cozy-ui.utils.min.css'
```

```stylus
@import 'cozy-ui/stylus/settings'
@import 'cozy-ui/stylus/mixins'
```

### Theme

Wrap app UI with `CozyTheme` when the target app does not already provide it.

```jsx
import { CozyTheme } from 'cozy-ui/transpiled/react/providers/CozyTheme'

<CozyTheme variant="light">
  <App />
</CozyTheme>
```

## Workflow

1. Identify whether the task is component selection, CSS utility usage, theming, or implementation review.
2. Load only the needed reference file:
   - `references/components.md` for React components, imports, examples, and props.
   - `references/css-classes.md` for utility classes and Stylus/CSS usage.
3. Prefer cozy-ui exports over raw Material-UI components when a Cozy wrapper exists.
4. Preserve existing app conventions and imports; do not migrate import style unless required.
5. If adding or changing components inside cozy-ui itself, follow the repository README guidance for component development and tests.

## Specific Tasks

- Choosing and composing Cozy UI components — `references/components.md`
- Checking component props and examples — `references/components.md`
- Applying spacing, typography, color, and utility classes — `references/css-classes.md`
- Using Cozy theme providers and variants — start with this file, then inspect component references when needed
- Reviewing Cozy UI usage in app code — check imports and component APIs against `references/components.md`

## Installed Skill Layout

```text
skills/cozy-ui-reference/
  SKILL.md
  references/
    components.md
    css-classes.md
```

## Additional Resources

- [GitHub Repository](https://github.com/cozy/cozy-ui)
- [Styleguide](https://docs.cozy.io/cozy-ui/)
- [Material-UI v4 Docs](https://v4.mui.com/)