afv-library/skills/design-systems-slds-apply/examples.md

Examples

Worked examples showing the SLDS authoring workflow: from intent to artifact selection.

Each example follows the 5-phase workflow from SKILL.md and shows which files were consulted and why.

Example 1: Build a Confirmation Dialog

Phase 1: Understand the Need

• Pattern: Confirmation dialog before a destructive action
• Framework: LWC
• States: Open, confirming (loading), closed

Phase 2: Select the Artifact

Check LBC: LightningModal exists in the Lightning Component Library. Use it.

Also search blueprints (for class reference):

node scripts/search-blueprints.cjs --search "modal"
# Found: Modals (category: Overlay, root: slds-modal)

Read blueprint YAML for class details: assets/blueprints/components/modals.yaml

Key takeaway: LightningModal handles the slds-modal, slds-backdrop, and ARIA attributes automatically. No need to apply blueprint classes manually in LWC.

Phase 3: Apply Styling

Read: references/styling-decision-guide.md

The destructive action button needs error color to signal danger:

node scripts/search-hooks.cjs --prefix "--slds-g-color-error-"
# Found: --slds-g-color-error-1 (#ea001e), --slds-g-color-on-error-1 (#ffffff)

Result: Use variant="destructive" on lightning-button inside the modal footer. The LBC handles the correct SLDS color hooks internally.

For the modal body spacing, use utility classes:

<div class="slds-p-around_medium slds-text-align_center">
  <p>Are you sure you want to delete this record?</p>
</div>

Phase 4: Add Icons

Search: node scripts/search-icons.cjs --query "warning"

Found: utility:warning (score: 100, match: exact)

<lightning-icon
    icon-name="utility:warning"
    alternative-text="Warning"
    variant="error"
    size="small"
    class="slds-m-right_x-small">
</lightning-icon>

Phase 5: Validate (checklists.md)

• No hardcoded colors (using LBC variants + hooks)
• Icon has alternative-text
• Spacing uses utility classes (slds-p-around_medium, slds-m-right_x-small)
• No .slds-* overrides

---

Example 2: Styled Card with Status Badge (Non-LWC)

Phase 1: Understand the Need

• Pattern: A card showing a record with a colored status badge
• Framework: React (not LWC -- no LBCs available)
• States: Active, inactive, pending

Phase 2: Select the Artifact

LBC check: Not applicable (React).

Search blueprints:

node scripts/search-blueprints.cjs --search "card"
# Found: Cards (category: Layout, root: slds-card)

node scripts/search-blueprints.cjs --search "badge"
# Found: Badges (category: Feedback, root: slds-badge)

Read YAMLs:

• assets/blueprints/components/cards.yaml -- classes: slds-card, slds-card__header, slds-card__body, slds-card__footer
• assets/blueprints/components/badges.yaml -- classes: slds-badge, modifiers: slds-badge_lightest, slds-badge_inverse

Phase 3: Apply Styling

Read: references/styling-decision-guide.md

Card background and text use surface hooks. The status is conveyed by badge text plus a custom status accent on the card, rather than invented badge modifiers.

<article class="slds-card my-status-card">
  <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media_center slds-has-flexi-truncate">
      <div class="slds-media__body">
        <h2 class="slds-card__header-title slds-truncate">Account Name</h2>
      </div>
      <div class="slds-no-flex">
        <span class="slds-badge slds-badge_lightest">Active</span>
      </div>
    </header>
  </div>
  <div class="slds-card__body slds-card__body_inner">
    <p>Record details here</p>
  </div>
</article>

Custom styling for a subtle card border:

.my-status-card {
  border-left: 3px solid var(--slds-g-color-accent-1, #0176d3);
}

Note: custom class uses my-* prefix, hook with fallback, no .slds-* overrides.

Phase 4: Add Icons

Search for a standard object icon:

node scripts/search-icons.cjs --query "account" --category "standard"
# Found: standard:account (score: 100, match: exact)

In React (non-LWC), use the SVG blueprint pattern:

<span class="slds-icon_container slds-icon-standard-account" title="Account">
  <svg class="slds-icon slds-icon_small" aria-hidden="true">
    <use xlinkHref="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
  </svg>
  <span class="slds-assistive-text">Account</span>
</span>

Phase 5: Validate

• Card uses exact blueprint classes (slds-card, slds-card__header, etc.)
• Badge uses a real blueprint modifier (slds-badge_lightest), not an invented status variant
• Custom border uses my-* prefix and hook with fallback
• Icon uses slds-assistive-text for accessibility
• No hardcoded colors

---

Example 3: Responsive Data Layout with Hooks

Phase 1: Understand the Need

• Pattern: A responsive grid of metric cards
• Framework: LWC
• States: Loading (spinner), populated, empty (illustration)

Phase 2: Select the Artifact

LBC: lightning-card for each metric card. lightning-spinner for loading.

Search for empty state:

node scripts/search-blueprints.cjs --search "illustration"
# Found: Illustration (category: Media, root: slds-illustration)

Phase 3: Apply Styling

Verify grid and spacing utilities before using them:

node scripts/search-utilities.cjs --search "slds-grid"
# Found: slds-grid (category: grid, css: display: flex)

node scripts/search-utilities.cjs --search "slds-text-heading_large"
# Found: slds-text-heading_large (category: typography)

node scripts/search-utilities.cjs --search "slds-text-body_small"
# Found: slds-text-body_small (category: typography)

Grid layout uses utility classes (see references/utilities-quick-ref.md):

<div class="slds-grid slds-wrap slds-gutters">
  <template for:each={metrics} for:item="metric">
    <div key={metric.id} class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-3">
      <lightning-card title={metric.label}>
        <div class="slds-p-horizontal_small">
          <p class="slds-text-heading_large">{metric.value}</p>
          <p class="slds-text-body_small slds-text-color_weak">{metric.subtitle}</p>
        </div>
      </lightning-card>
    </div>
  </template>
</div>

Custom metric styling with hooks:

.my-metric-value {
  font-size: var(--slds-g-font-scale-6, 2rem);
  font-weight: var(--slds-g-font-weight-7, 700);
  color: var(--slds-g-color-on-surface-3, #181818);
}

.my-metric-trend-up {
  color: var(--slds-g-color-success-1, #2e844a);
}

.my-metric-trend-down {
  color: var(--slds-g-color-error-1, #ea001e);
}

Note: trend colors use semantic feedback hooks (success/error), not hardcoded green/red.

Empty state uses the SLDS illustration blueprint:

<template if:false={hasData}>
  <div class="slds-illustration slds-illustration_small">
    <img src="/img/chatter/Desert.svg" class="slds-illustration__svg" alt="" />
    <div class="slds-text-longform">
      <h3 class="slds-text-heading_medium">No metrics available</h3>
      <p class="slds-text-body_regular">Check back when data is loaded.</p>
    </div>
  </div>
</template>

Phase 4: Add Icons

Trend indicators need icons:

node scripts/search-icons.cjs --query "arrow up"
# Found: utility:arrowup (score: 100)

node scripts/search-icons.cjs --query "arrow down"
# Found: utility:arrowdown (score: 100)

<lightning-icon
    icon-name={metric.trendIcon}
    alternative-text={metric.trendLabel}
    size="xx-small"
    class="slds-m-left_xx-small">
</lightning-icon>

Phase 5: Validate

• Grid uses slds-grid + slds-col + responsive slds-*-size_* classes
• Spacing uses utilities (slds-p-horizontal_small, slds-m-left_xx-small)
• Typography uses utilities (slds-text-heading_large, slds-text-body_small)
• Custom CSS uses my-* prefix and hooks with fallbacks
• Trend colors use semantic hooks (success/error), not hardcoded values
• Empty state uses SLDS illustration blueprint
• Icons have alternative-text