mirror of https://github.com/forcedotcom/afv-library.git synced 2026-08-07 16:04:41 +08:00

@W-21965936@ Add applying and validating SLDS skills to afv-library (#187 )

* feat: add SLDS applying and auditing quality skills

Two new skills for SLDS v2 compliance:
- applying-slds: guides artifact selection, styling hooks, utilities, icons
- auditing-slds-quality: scored quality audit with linter + static analysis

Made-with: Cursor

* refactor: rename auditing-slds-quality skill to validating-slds

Renames the skill directory and updates all references in
applying-slds/SKILL.md and applying-slds/checklists.md.

Made-with: Cursor

* fix: improve accuracy and add manual review gate across SLDS skills

Correct hook families, badge modifiers, and severity levels; add a
manual review gate to validating-slds so automated grades alone cannot
declare production readiness; make analyze-quality.cjs portable with
explicit --hooks-index flag; remove dead parseYaml code; add version
field to all three skill frontmatters.

Made-with: Cursor

* chore: retrigger CI

Made-with: Cursor

* fix: quote YAML descriptions and improve color hook disambiguation

- Quote description frontmatter in all three skills for valid YAML
  (inner double quotes now escaped)
- Strengthen Step 4 directive: MUST read color-hooks guide before
  choosing a hook — linter suggestions are unranked
- Add surface vs surface-container disambiguation table
- Add accent hook context table and state progression
- Add standalone-component exception for surface classification
- Add modal background example to examples.md
- Remove redundant brand-button example (covered by new context table)

Made-with: Cursor

2026-04-26 21:03:14 +05:30

3.6 KiB

Raw Blame History

title

description

summary

artifact_type

domain

topic

content_format

complexity

audience

tasks

refs

Layout - Global Spacing & Component Connection

Global spacing management and seamless component connections.

Core Classes

Class	Purpose
`slds-has-buffer`	Applies consistent global margin using `--slds-g-spacing-3` token
`slds-has-full-bleed`	Removes all margins to create full-bleed layouts
`slds-has-bottom-magnet`	Removes bottom margin and border radius to connect with element below
`slds-has-top-magnet`	Removes top margin and border radius to connect with element above

Common Patterns

Standard Buffer Spacing

<!-- Apply consistent spacing around cards -->
<div class="slds-card slds-has-buffer">
  <div class="slds-card__header">Card with buffer margin</div>
  <div class="slds-card__body">Content has global spacing on all sides</div>
</div>

Full-Bleed Hero Section

<!-- Remove margins for edge-to-edge layouts -->
<div class="slds-page-header slds-has-full-bleed">
  <div class="slds-page-header__row">
    <div class="slds-page-header__col-title">Full-width header with no margins</div>
  </div>
</div>

Connected Card Components

<!-- Connect two cards vertically without gap -->
<div class="slds-card slds-has-bottom-magnet">
  <div class="slds-card__header">First Card</div>
  <div class="slds-card__body">This card connects to the one below</div>
</div>
<div class="slds-card slds-has-top-magnet">
  <div class="slds-card__header">Second Card</div>
  <div class="slds-card__body">Appears seamlessly connected to card above</div>
</div>

Multiple Connected Components

<!-- Chain multiple cards together -->
<div class="slds-box slds-has-bottom-magnet">
  <h2>Section Header</h2>
</div>
<div class="slds-card slds-has-top-magnet slds-has-bottom-magnet">
  <div class="slds-card__body">Middle card connected on both sides</div>
</div>
<div class="slds-box slds-has-top-magnet">
  <p>Footer content</p>
</div>

Combined Buffer and Magnet

<!-- Use buffer with magnet for special layouts -->
<div class="slds-card slds-has-buffer slds-has-bottom-magnet">
  <div class="slds-card__body">Card with side margins but connected below</div>
</div>
<div class="slds-card slds-has-top-magnet slds-has-buffer">
  <!-- Special case: removes bottom margin, border-radius, top border, and box-shadow -->
  <div class="slds-card__body">Connected card with modified buffer behavior</div>
</div>

Best Practices

✅ Use slds-has-buffer on cards and boxes for consistent component spacing ✅ Apply magnet utilities to Cards, Page Headers, and Box components ✅ Use slds-has-bottom-magnet on the top component and slds-has-top-magnet on the bottom component ✅ Use slds-has-full-bleed for hero sections and full-width backgrounds

❌ Avoid using magnet utilities on non-card-like elements ❌ Do not mix magnet utilities with custom margin styles ❌ Never apply slds-has-full-bleed to components that need spacing ❌ Do not use magnet utilities when visual separation is needed

3.6 KiB Raw Blame History