# UI Elements

> Creation rules for AriaCore UI elements, pages, cards, metrics, and detail flows. Trigger: Adding or changing dashboard UI components or connected browsing flows.

- Skill: `itechdev-mx/ui-elements` (Agent Skill)
- Install (CLI): `npx skillmds@latest add itechdev-mx/ui-elements`
- Raw SKILL.md: https://api.skillmd.com/api/skills/itechdev-mx/ui-elements/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- License: Apache-2.0
- Author: ITECHDEV-MX (https://skillmd.com/u/itechdev-mx)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/itechdev-mx/ui-elements

---


## When to Use

Use this skill when:
- Adding a new page or partial to the dashboard
- Creating cards, metrics, tables, lists, or detail views
- Designing connected navigation between related entities

---

## UX Rules

1. Every list item should lead somewhere useful when domain relationships exist.
2. Prefer connected flows: project -> session -> observation -> full detail.
3. Empty states must explain what is missing and what unlocks data.
4. Metrics must reflect real system state, not decorative counters.
5. Detail pages should show metadata, content, and the next relevant links.

---

## Composition Rules

- Use metrics for orientation, not for replacing core content.
- Use cards for browsable entities and tables for dense comparative admin data.
- Avoid nested framed boxes unless they communicate a hierarchy the user needs.
- Keep action controls close to the entity they affect.