backend-ui-design
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.
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.
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.