skills.rest
saleor
saleorOFFICIAL
Explore all skills by this author →
Website𝕏@getsaleorGitHub

saleor-dashboard-detail-pages

Standardizes Saleor Dashboard entity detail pages with layout, metadata modal, and TopNav conventions.

1.0k|1.2k|Updated Jun 19, 2019
Search Tags:#Refactoring#saleor#Dashboard#reAct#graphqL#detail pages#metadata dialog
One-click install
npx skills add https://github.com/saleor/saleor-dashboard --skill saleor-dashboard-detail-pages
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: saleor-dashboard-detail-pages
Source: https://github.com/saleor/saleor-dashboard/tree/main/.claude/skills/saleor-dashboard-detail-pages
Command: npx skills add https://github.com/saleor/saleor-dashboard --skill saleor-dashboard-detail-pages

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Saleor Dashboard entity detail pages (products, customers, warehouses, collections) often drift into inconsistent layouts, inline metadata forms, and ad-hoc header actions. This Skill codifies the conventions for building or refactoring those detail views so every entity page follows the same structure.

Core Features & Use Cases

  • Detail page layout conventions: Prescribes DetailPageLayout, DetailPageSectionLayout with DetailSectionNav, and DetailGroupBox foldable sections instead of the legacy Accordion.
  • Metadata in header modal: Provides a checklist and reference implementations for moving inline <Metadata> forms into a TopNav.MetadataButton plus an entity-specific MetadataDialog wired through URL dialog state.
  • TopNav action ordering: Defines the standard header action set (metadata button, translations, menu with extensions and delete last) and actionsGap usage.
  • Use Case: When refactoring a customer detail page, follow the checklist to add a view-metadata URL action, create a CustomerMetadataDialog, remove inline metadata from the update submit, and align the TopNav buttons.

Quick Start

Ask the assistant to refactor a Saleor Dashboard entity detail page to move its metadata into a header modal following this skill's checklist.

Frequently Asked Questions about saleor-dashboard-detail-pages

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

FAQPage Schema
How do I move metadata out of a Saleor Dashboard detail page form?▼

Add a "view-metadata" action to the entity URL dialog union, create an entity-specific MetadataDialog using the shared MetadataDialog component, and trigger it from TopNav.MetadataButton. Remove the inline Metadata component and skip metadata in the update submit handler.

How do I build a detail page with scroll section navigation in Saleor Dashboard?▼

Use DetailPageSectionLayout with DetailSectionNav when the page has four or more scroll sections. The nav rail takes 25% width with a 10rem minimum, and you must not nest DetailPageContent inside it since that component is for single-column pages only.

Should create views use the metadata dialog pattern too?▼

No. Create views keep the inline Metadata component in the page content and use createMetadataCreateHandler after the entity mutation, because no entity id exists yet. The header modal pattern applies only to edit views.

What component replaces the legacy Accordion for foldable sections?▼

Use DetailGroupBox with a Title2 heading for expandable sections such as advanced settings or rate rows. The legacy @dashboard/components/Accordion should not be introduced in new UI.

How should fixed-at-creation fields be displayed on detail pages?▼

Use the FixedAtCreationField pattern: a disabled Input with a lock icon and a "Fixed at creation" helper message. Never use a disabled Combobox for these fields.

Related Skills

Explore More Software Engineering Skills→
finsilabsfinsilabs
44

saleor-development

Develop and extend Saleor commerce platform via GraphQL API and webhooks.

Official
Intermediate
microsoftmicrosoft
4.9k

testing-anti-patterns

Detects and corrects common testing anti-patterns involving mocks and test-only production code.

Official
Intermediate
saleorsaleor
1.6k

saleor-paper-storefront

Guides development of the Saleor Paper Next.js 16 storefront across caching, checkout, and product pages.

Official
Advanced
HLND2THLND2T
60

find-CGameResourceService_BuildResourceManifest-AND-CGameResourceService_m_pEntitySystem

Locate CGameResourceService_BuildResourceManifest and its m_pEntitySystem offset in CS2 binaries.

Official
Advanced