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

saleor-dashboard-microcopy

Standardizes helper text, card subtitles, and inline links in Saleor Dashboard React components.

1.0k|1.2k|Updated Jun 19, 2019
Search Tags:#microcopy#ui patterns#react-intl#reAct#Design tokens#helper text#saleor-dashboard
One-click install
npx skills add https://github.com/saleor/saleor-dashboard --skill saleor-dashboard-microcopy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: saleor-dashboard-microcopy
Source: https://github.com/saleor/saleor-dashboard/tree/main/.claude/skills/saleor-dashboard-microcopy
Command: npx skills add https://github.com/saleor/saleor-dashboard --skill saleor-dashboard-microcopy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent helper text, hint styling, and inline links across Saleor Dashboard cards lead to visual drift and poor UX. This Skill codifies the exact patterns for subheaders, hints, optional labels, and microcopy links so every card looks and behaves the same.

Core Features & Use Cases

  • Subtitle and hint patterns: Enforces DashboardCard.Subtitle with fontSize={3} and color="default2" for all helper text, with defined placement rules above, below, or inside card content.
  • MicrocopyLink for inline links: Provides rules for embedding links inside hint sentences using inherit color and size, medium weight, and hover-only underline instead of accent-colored Link components.
  • Optional labels and fixed-at-creation helpers: Standardizes DetailSettingsCardTitle optional props and "Fixed at creation" copy for locked identity fields.
  • Use Case: When adding a hint under a shipping zone card that links to the warehouses configuration page, use this Skill to produce correctly styled subtitle copy with a MicrocopyLink and proper i18n message definitions.

Quick Start

Ask the assistant to add a styled hint with an inline link under a DashboardCard title following the saleor-dashboard-microcopy patterns.

Frequently Asked Questions about saleor-dashboard-microcopy

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

FAQPage Schema
How do I add helper text under a card title in Saleor Dashboard?▼

Use DashboardCard.Subtitle with fontSize={3} and color="default2" placed directly under DashboardCard.Title inside the header. Wrap the copy in FormattedMessage with messages defined via defineMessages.

How do I add an inline link inside hint text in React?▼

Use the MicrocopyLink component from @dashboard/components/MicrocopyLink instead of the accent Link. It inherits the parent subtitle color and font size, uses medium font weight, and shows an underline only on hover.

What is the difference between MicrocopyLink and Link in Saleor Dashboard?▼

MicrocopyLink is for links embedded inside gray hint sentences, inheriting color and size. Link with color="secondary" is preferred for card or sidebar navigation, while the default primary Link is reserved for rare accent-blue emphasis.

How do I mark a field as optional in Saleor Dashboard forms?▼

Use DetailSettingsCardTitle with the optional prop, which renders DetailSettingsOptionalLabel beside the title. For field helper text, use commonMessages.optionalField; never append "(optional)" to the title string.

When should I use a hint with a link instead of an inline create modal?▼

Prefer a hint plus a link to the configuration page when backend constraints make in-context creation fragile, such as a warehouse needing to share a channel with the shipping zone. State the constraint in the subtitle copy and link to the full create flow.

Related Skills

Explore More Software Engineering Skills→
finsilabsfinsilabs
44

saleor-development

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

Official
Intermediate
mdmagnuson-creatormdmagnuson-creator

screenshot

Capture Playwright screenshots of web pages in light and dark themes.

Community
Intermediate
JustineDevsJustineDevs

lemonsqueezy-ui-skills

Provide a Lemonsqueezy-inspired UI design system with color tokens and Inter font.

Community
Intermediate
VSF-QC-TTSVSF-QC-TTS

minimalist-ui

Generate ultra-minimalist editorial web interfaces with warm monochrome palettes and custom typography.

Official
Advanced