skills.rest
TomekNocon
TomekNoconCOMMUNITY
Explore all skills by this author →
GitHub

backend-ui-design

Designs backend interfaces using @open-mercato/ui/backend reusable components and frontmatter-driven metadata.

Updated Apr 11, 2026
Search Tags:#consistency#forms#ui-design#data-tables#admin-pages#backend-ui
One-click install
npx skills add https://github.com/TomekNocon/open-logistico --skill backend-ui-design-tomeknocon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: backend-ui-design
Source: https://github.com/TomekNocon/open-logistico/tree/main/packages/create-app/agentic/shared/ai/skills/backend-ui-design
Command: npx skills add https://github.com/TomekNocon/open-logistico --skill backend-ui-design-tomeknocon

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 core UI components to ensure uniform look and feel across admin pages.
  • Enforce data-dense, keyboard-navigable layouts for backoffice workstreams.
  • Provide clear, guided patterns for admin dashboards, CRUD forms, data tables, and detail views.

Quick Start

Import the backend UI components from @open-mercato/ui and compose a standard Page with a header and body for administrative screens.

Frequently Asked Questions about backend-ui-design

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

FAQPage Schema
How do I design consistent admin pages and backoffice interfaces?▼

Build consistent admin UIs by reusing core backend components like Page, PageHeader, PageBody, DataTable, and CrudForm from the @open-mercato/ui library to maintain uniform visual and behavioral parity across backoffice modules.

What components should I use for data tables and CRUD forms in a backend dashboard?▼

Use the DataTable and CrudForm components provided by @open-mercato/ui/backend to construct data-dense, keyboard-navigable CRUD pages and detail views for your administrative workstreams.

Can I use this approach to build data-dense, keyboard-navigable backoffice layouts?▼

Yes, this approach enforces data-dense, keyboard-navigable layouts specifically designed for backoffice workstreams, ensuring high efficiency for users managing administrative tasks and complex data tables.

Do I need a specific component library to maintain visual consistency across backend modules?▼

Yes, you must use the @open-mercato/ui component library. It provides the core backend components and frontmatter-driven metadata needed to ensure uniform look and feel across all cross-module backoffice interfaces.

How do I structure API references when building backoffice UIs?▼

Structure API references by utilizing a dedicated references folder for API documentation alongside frontmatter-driven metadata, ensuring your backend interfaces remain organized and maintainable across administrative modules.

Related Skills

Explore More Design & Creative Skills→
comeritocomerito

backend-ui-design

Design backend admin pages with @open-mercato/ui components and layouts.

Official
Intermediate
matchojeckimatchojecki
1

backend-ui-design

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

Community
Advanced
mgd34msumgd34msu
4

yup

Validate JavaScript and TypeScript data structures using Yup schemas.

Community
Intermediate
drshk5drshk5

backend-ui-design

Design backend admin interfaces using the @open-mercato/ui component library.

Community
Intermediate