mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-08-03 13:44:09 +08:00
119dc668d5
* 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
84 lines
3.8 KiB
Markdown
84 lines
3.8 KiB
Markdown
# Validation Checklists
|
|
|
|
Run through these checks before finalizing any SLDS-authored component. Check IDs align with the validating-slds skill's quality-checks.md.
|
|
|
|
|
|
## Theming & Styling (T-series)
|
|
|
|
Code produced by this skill should score high on T-series checks.
|
|
|
|
| Check | What to verify | Audit ID |
|
|
|-------|---------------|----------|
|
|
| **Hook fallbacks** | Every `var(--slds-g-*)` has a fallback value | T002 |
|
|
| **Surface pairing** | `surface-*` bg paired with `on-surface-*` text | T010 |
|
|
| **Container pairing** | `surface-container-*` bg paired with `on-surface-*` text | T011 |
|
|
| **Accent pairing** | `accent-*` bg paired with `on-accent-*` text | T012 |
|
|
| **Feedback pairing** | Feedback colors paired with correct text hooks | T013 |
|
|
| **Spacing hooks** | Spacing uses `var(--slds-g-spacing-*)` or utility classes | T020 |
|
|
| **No magic pixels** | No arbitrary `px` values for spacing | T021 |
|
|
| **Font family hooks** | `font-family` uses `var(--slds-g-font-family-*)` | T030 |
|
|
| **Font size hooks** | `font-size` uses `var(--slds-g-font-scale-*)` or `var(--slds-g-font-size-base)` -- NOT `var(--slds-g-font-size-N)` | T031 |
|
|
| **Font weight hooks** | `font-weight` uses `var(--slds-g-font-weight-*)` | T032 |
|
|
| **Shadow hooks** | Shadows use `var(--slds-g-shadow-*)` | T040 |
|
|
| **Border radius hooks** | Border radius uses `var(--slds-g-radius-*)` | T041 |
|
|
| **Color hooks numbered** | Every `--slds-g-color-*` hook ends in a number (no bare `on-surface`, `on-accent`, etc.) | T050 |
|
|
| **No invented hooks** | Every hook referenced actually exists in `metadata/hooks-index.json` | T051 |
|
|
| **No hardcoded colors** | No hex, rgb, or named colors (linter also catches this) | linter |
|
|
| **No class overrides** | No `.slds-*` class overrides (linter also catches this) | linter |
|
|
| **No deprecated tokens** | No `--lwc-*` tokens (linter also catches this) | linter |
|
|
|
|
---
|
|
|
|
## Code Quality (Q-series)
|
|
|
|
| Check | What to verify | Audit ID |
|
|
|-------|---------------|----------|
|
|
| **No !important** | No `!important` declarations | Q001 |
|
|
| **No inline styles** | No `style="..."` in HTML | Q002 |
|
|
| **Custom class prefix** | Custom classes use `my-*`, `c-*`, or namespace prefix | Q010 |
|
|
| **No dynamic SLDS class manipulation** | Avoid `.classList.add/remove/toggle('slds-*')` patterns in JS | Q012 |
|
|
| **No magic numbers** | All numeric values have clear purpose | Q020 |
|
|
|
|
---
|
|
|
|
## Component Usage (C-series)
|
|
|
|
| Check | What to verify | Audit ID |
|
|
|-------|---------------|----------|
|
|
| **LBC inputs** (LWC) | Use `<lightning-input>` not `<input>` | C001 |
|
|
| **LBC buttons** (LWC) | Use `<lightning-button>` not `<button>` | C002 |
|
|
| **LBC icons** (LWC) | Use `<lightning-icon>` not custom SVG | C003 |
|
|
| **Blueprint structure** | Cards use `slds-card`, modals use `slds-modal`, etc. | C010-C013 |
|
|
|
|
---
|
|
|
|
## Accessibility Reminders (A-series)
|
|
|
|
Deep accessibility is owned by the **accessibility skill**. These are minimal reminders to nudge agents.
|
|
|
|
| Check | What to verify | Audit ID |
|
|
|-------|---------------|----------|
|
|
| **Icon alt text** | All `<lightning-icon>` have `alternative-text` (empty string for decorative) | A004 |
|
|
| **Image alt text** | All `<img>` have `alt` attribute | A005 |
|
|
| **Color not sole indicator** | Status uses icon or text too, not just color | A030 |
|
|
| **No outline:none** | Don't remove focus outline without replacement | A021 |
|
|
|
|
For full WCAG compliance, apply the accessibility skill after authoring.
|
|
|
|
---
|
|
|
|
## Quick Validation Script
|
|
|
|
Run the SLDS linter to catch the most common issues automatically:
|
|
|
|
```bash
|
|
npx @salesforce-ux/slds-linter@latest lint .
|
|
```
|
|
|
|
The linter catches:
|
|
- `slds/class-override` -- overriding SLDS classes
|
|
- `slds/lwc-token-to-slds-hook` -- deprecated tokens
|
|
- `slds/no-hardcoded-values` -- hardcoded colors/spacing
|
|
|
|
Everything above the linter line must be checked manually or by the auditing skill.
|