backend-ui-design

Standardize backend UIs using @open-mercato/ui components like Page, DataTable, and CrudForm.

1|2|Updated Apr 12, 2026
One-click install
npx skills add https://github.com/matchojecki/logistiko-celny --skill backend-ui-design-matchojecki
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: backend-ui-design
Source: https://github.com/matchojecki/logistiko-celny/tree/main/packages/create-app/agentic/shared/ai/skills/backend-ui-design
Command: npx skills add https://github.com/matchojecki/logistiko-celny --skill backend-ui-design-matchojecki

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Design and implement consistent backend/backoffice interfaces using the @open-mercato/ui component library. All implementations must use existing components for visual and behavioral consistency.

Core Features & Use Cases

  • Reuse Page, PageHeader, PageBody, DataTable, CrudForm and other backend UI primitives to ensure uniform layouts across admin screens.
  • Provide data-dense, keyboard-accessible backoffice pages with standardized spacing, typography, and navigation patterns.
  • Serve as a single source of truth for UI conventions across backoffice apps, including forms, lists, detail views, and settings.

Quick Start

Start by scaffolding a CRUD page using the backend UI components from @open-mercato/ui to ensure consistent backoffice design.

Frequently Asked Questions about backend-ui-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is the best way to build consistent admin dashboards and CRUD pages?

The best way to build consistent admin dashboards is to use a shared component library with standardized UI primitives. This approach ensures uniform layouts across backoffice screens using pre-built Page, PageHeader, DataTable, and CrudForm elements.

How do I standardize backend UI components across multiple applications?

You standardize backend UI components by implementing a shared UI pattern library across your apps. This enforces consistent spacing, typography, and navigation patterns for all data tables, forms, and detail views.

Does this admin UI approach support keyboard navigation and accessible design?

Yes, this admin UI approach supports keyboard navigation and accessible design. It emphasizes data-dense, keyboard-accessible backoffice pages to ensure usability across all CRUD interfaces and settings screens.

Can I scaffold CRUD pages quickly using a predefined component library?

Yes, you can scaffold CRUD pages quickly using predefined backend UI components. Starting with shared Page and CrudForm primitives ensures consistent backoffice design and rapid development of data tables and detail views.

What components are available for building data tables and backoffice forms?

Available components for building data tables and backoffice forms include Page, PageHeader, PageBody, DataTable, and CrudForm. These backend UI primitives provide a single source of truth for visual and behavioral consistency.

Why should I use a shared UI pattern for backoffice interfaces instead of custom code?

You should use a shared UI pattern for backoffice interfaces to avoid visual fragmentation and ensure behavioral consistency. Reusing standard components for lists, detail views, and settings eliminates layout drift across admin apps.