| 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. Use when this capability is needed. |
| metadata | {"author":"cozy"} |
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
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
- 89+ 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.
import 'cozy-ui/dist/cozy-ui.utils.min.css'
@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.
import { CozyTheme } from 'cozy-ui/transpiled/react/providers/CozyTheme'
<CozyTheme variant="light">
<App />
</CozyTheme>
Workflow
- Identify whether the task is component selection, CSS utility usage, theming, or implementation review.
- 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.
- Prefer cozy-ui exports over raw Material-UI components when a Cozy wrapper exists.
- Preserve existing app conventions and imports; do not migrate import style unless required.
- 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
skills/cozy-ui-reference/
SKILL.md
references/
components.md
css-classes.md
Additional Resources
Source: cozy/cozy-ui — distributed by TomeVault.
