saleor-dashboard-entity-detail

Standardizes entity detail page layouts and components in the Saleor Dashboard React codebase.

1.0k|1.2k|Updated Jun 19, 2019
One-click install
npx skills add https://github.com/saleor/saleor-dashboard --skill saleor-dashboard-entity-detail
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: saleor-dashboard-entity-detail
Source: https://github.com/saleor/saleor-dashboard/tree/main/.claude/skills/saleor-dashboard-entity-detail
Command: npx skills add https://github.com/saleor/saleor-dashboard --skill saleor-dashboard-entity-detail

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Entity detail pages in Saleor Dashboard (channels, products, collections, shipping zones, warehouses, customers) drift into inconsistent layouts, card chrome, and component choices. This Skill provides the design language and component conventions for refactoring or building these pages consistently.

Core Features & Use Cases

  • Page anatomy conventions: Defines the DetailPageLayout structure with TopNav, content sections, right sidebar, and Savebar composition.
  • Component selection rules: Maps Detail*, Assign*, Savebar*, and Setup* component families to their correct surfaces, including DetailSettingsCard, DetailSettingToggleRow, FixedAtCreationField, and AssignableList* primitives.
  • Use Case: When refactoring a channel details page, use this Skill to decide between DetailPageSectionLayout with section nav versus DetailPageContent, place SEO last in the main column, and render immutable currency fields with FixedAtCreationField instead of a disabled Combobox.

Quick Start

Refactor the collection detail page in src/collections to follow the entity detail conventions using DetailPageLayout, DetailSettingsCard sections, and a sidebar AssignListCard.

Frequently Asked Questions about saleor-dashboard-entity-detail

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

FAQPage Schema
How do I structure an entity detail page in Saleor Dashboard?

Use DetailPageLayout with TopNav, a main content column ordered as identity settings, primary content, then SEO last, a right sidebar for membership assigns, and a Savebar. Add DetailPageSectionLayout with DetailSectionNav only when the page has four or more scroll sections.

What component should I use for settings cards on Saleor detail pages?

Use DetailSettingsCard for primary settings sections in the main column; it owns title typography, an optional intro band, and a headerEnd slot that coerces buttons to small size. Do not use SettingsSection, which belongs to Configuration hubs.

How do I show fields that cannot change after creation in Saleor Dashboard?

Use FixedAtCreationField, which renders a disabled Input with a lock icon and a required helper text explaining the alternative. Never use a disabled Combobox or Select, since the chevron implies the field is editable.

When should I use DetailPageSectionLayout versus DetailPageContent?

Use DetailPageSectionLayout with a section nav rail when the page has four or more scroll targets, as on channel details. Use DetailPageContent for simpler single-column pages like collections or gift cards, and never nest DetailPageContent inside DetailPageSectionLayout.

When should I not use this entity detail pattern in Saleor Dashboard?

Do not apply these conventions to Configuration hubs such as Orders settings, Tax, or Site settings; those use the Settings* components in src/components/Settings/. The entity detail language targets daily-workflow models like channels, products, and warehouses.