backend-ui-design-codex
Installation
SKILL.md
This skill guides creation of consistent, production-grade backend/backoffice interfaces using the established @open-mercato/ui component library. All implementations must leverage existing components to maintain visual and behavioral consistency across modules.
For complete component documentation, see references/ui-components.md. Pair this skill with packages/ui/AGENTS.md and packages/ui/src/backend/AGENTS.md for the current design-system and backend-host rules.
Design Principles
Backend UI prioritizes usability, consistency, and productivity over creative expression:
- Consistency First: Every page should feel like part of the same application. Use established patterns.
- Component Reuse: Never create custom implementations when a shared component exists.
- Data Density: Admin users need information-rich interfaces. Optimize for scanning and quick actions.
- Keyboard Navigation: Support Cmd/Ctrl+Enter for primary actions, Escape to cancel, and standard shortcuts.
- Clear Hierarchy: Page → Section → Content. Use PageHeader, PageBody, and consistent spacing.
- Design System Discipline: Use semantic status tokens and the shared backend primitives (
StatusBadge,Alert,FormField,SectionHeader,CollapsibleSection,EmptyState). No hardcoded status colors or arbitrary text sizes.
Required Component Library
ALWAYS import from @open-mercato/ui. Reference the component documentation at .ai/specs/SPEC-001-2026-01-21-ui-reusable-components.md.