# Phoenix Design

> BEM CSS naming conventions for the Phoenix frontend. Use when naming new CSS classes or className assignments in app/src/.

- Skill: `majiayu000/phoenix-design` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/phoenix-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/phoenix-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: Apache-2.0
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/phoenix-design

---


# Phoenix Design System — BEM Naming

## Pattern

```
block             → disclosure, tabs, slider
block__element    → slider__label, dialog__title, search-field__icon
block--modifier   → theme--dark, dropdown--picker
```

## Rules

- **Block**: A standalone component — `disclosure`, `search-field`, `toggle-button`
- **Element**: A part that cannot exist independently — uses `__` separator — `slider__label`, `field__icon`
- **Modifier**: A variant or state — uses `--` separator — `theme--dark`, `dropdown--picker`
- Compound names within a segment use hyphens: `search-field`, `toggle-button`, `dialog__close-button`
- **No prefix** — never add any prefix to class names

## Examples

```tsx
className="search-field"
className="search-field__clear"
className="disclosure__panel"
className="theme--dark"
```