skills.rest
open-mercato
open-mercatoOFFICIAL
Explore all skills by this author →
WebsiteGitHub

backend-ui-design-codex

Guides creation of backend admin interfaces using the @open-mercato/ui component library.

1.7k|382|Updated Sep 10, 2025
Search Tags:#crud#Forms#Design system#open-mercato#Admin panel#DataTable#backend ui
One-click install
npx skills add https://github.com/open-mercato/open-mercato --skill backend-ui-design-codex
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: backend-ui-design-codex
Source: https://github.com/open-mercato/open-mercato/tree/main/.ai/skills/codex/backend-ui-design
Command: npx skills add https://github.com/open-mercato/open-mercato --skill backend-ui-design-codex

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Building backend and backoffice pages often leads to inconsistent custom tables, forms, and notifications across modules. This Skill enforces a single design system so every admin page in an Open Mercato project uses the same shared components, patterns, and interaction conventions.

Core Features & Use Cases

  • Component-driven page construction: Mandates CrudForm for forms, DataTable for lists, flash() for notifications, and Page/PageHeader/PageBody layout primitives from @open-mercato/ui.
  • Implementation checklist and anti-patterns: Provides a pre-flight checklist (keyboard shortcuts, loading/error/empty states, truncation, severity badges) and a list of anti-patterns such as custom tables, alert() calls, and hardcoded colors.
  • API and custom-field integration patterns: Shows how to wire pages to backends via apiCall/createCrud/updateCrud helpers and how to render dynamic custom fields in forms, columns, and filters.
  • Use Case: When adding a new CRUD module (e.g., an inventory items admin page), follow this Skill to assemble a FilterBar + DataTable list view, a dialog with an embedded CrudForm, and flash-based feedback without writing any bespoke UI.

Quick Start

Ask the agent to create a backend CRUD page for a new module following the backend UI design guidelines, using DataTable for the list and CrudForm for the create/edit dialog.

Frequently Asked Questions about backend-ui-design-codex

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

FAQPage Schema
How do I build a backend CRUD page with @open-mercato/ui?▼

Compose the page from Page, PageHeader, and PageBody, render lists with DataTable plus FilterBar, and build forms with CrudForm. Use flash() for notifications and apiCall or createCrud/updateCrud helpers for server communication.

How do I show a form inside a dialog in Open Mercato?▼

Place a CrudForm inside the Dialog primitive's DialogContent and set embedded={true} on the form. Add the class [&_.grid]:!grid-cols-1 to DialogContent for a single-column layout, and support Cmd/Ctrl+Enter to submit and Escape to cancel.

What components should I use for tables and forms in Open Mercato admin pages?▼

Always use DataTable for tabular data and CrudForm for forms; custom implementations are explicitly listed as anti-patterns. Pair them with TruncatedCell, BooleanIcon, EnumBadge, and RowActions for consistent cell rendering and row actions.

Does @open-mercato/ui support dynamic custom fields in forms and tables?▼

Yes. Utilities like useCustomFieldDefinitions, buildCustomFieldFormFields, buildCustomFieldColumns, and collectCustomFieldValues generate form fields, table columns, and submitted values from entity custom field definitions.

When should I create a new component instead of using @open-mercato/ui?▼

Only when no existing component covers the use case, the pattern will be reused across three or more modules, and it is approved for the shared library. New components should be added to @open-mercato/ui rather than kept inside a single module.

Related Skills

Explore More Software Engineering Skills→
matchojeckimatchojecki
1

backend-ui-design

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

Community
Advanced
kibertoadkibertoad
1

register-module

Register a module in the shell host application with duplicate and dependency validation.

Community
Intermediate
bingeli1379bingeli1379
2

tailwind-best-practices

Enforce Tailwind CSS best practices for design-system alignment in Mastra Playground UI.

Community
Advanced
vtexdocsvtexdocs
39

vtex-io-react-apps

Builds VTEX IO React components for storefront blocks and admin panels using interfaces.json and GraphQL data fetching via useQuery.

Official
Advanced