mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-08-05 23:41:31 +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
85 lines
2.3 KiB
Markdown
85 lines
2.3 KiB
Markdown
# SLDS Metadata
|
|
|
|
Structured data for all SLDS artifacts. Use the search scripts in `../scripts/` or grep directly.
|
|
|
|
Source: `packages/metadata/`
|
|
|
|
---
|
|
|
|
## Files
|
|
|
|
### `blueprints/components/*.yaml` (85 files)
|
|
|
|
One YAML file per SLDS blueprint component. Each contains:
|
|
|
|
- `name`, `description`, `category`
|
|
- `slds_classes.root` -- the BEM root class (e.g., `slds-modal`)
|
|
- `slds_classes.elements[]` -- child element classes with purpose
|
|
- `slds_classes.modifiers[]` -- variant modifier classes with usage guidance
|
|
- `slds_classes.states[]` -- state classes (active, disabled, open, etc.)
|
|
- `accessibility` -- required ARIA roles, attributes, keyboard interactions
|
|
- `example_html` -- reference markup
|
|
|
|
**Search**: `node ../scripts/search-blueprints.js --search "dialog"`
|
|
|
|
**Direct grep**: `grep -rl "category: Overlay" blueprints/components/`
|
|
|
|
### `hooks-index.json` (523 hooks)
|
|
|
|
All SLDS styling hooks with computed values and CSS property mappings.
|
|
|
|
Each hook entry:
|
|
```json
|
|
{
|
|
"token": "--slds-g-color-accent-1",
|
|
"category": "color",
|
|
"value": "#0176d3",
|
|
"properties": ["background-color", "color", "border-color", "fill"]
|
|
}
|
|
```
|
|
|
|
Categories: color (325), font (57), spacing (48), shadow (44), sizing (27), duration (8), radius (6), ratio (5), fontFamily (3)
|
|
|
|
**Search**: `node ../scripts/search-hooks.js --category "color"`
|
|
|
|
**Direct grep**: `grep -i "accent" hooks-index.json`
|
|
|
|
### `icon-metadata.json` (1,732 icons)
|
|
|
|
All SLDS icons with synonyms for semantic search across 5 categories.
|
|
|
|
Each icon entry:
|
|
```json
|
|
{
|
|
"displayName": "add_contact",
|
|
"category": "action",
|
|
"description": "Represents adding a new contact...",
|
|
"synonyms": ["add", "user", "contact", "create", "new", "person", "plus"]
|
|
}
|
|
```
|
|
|
|
Categories: action, custom, doctype, standard, utility
|
|
|
|
**Search**: `node ../scripts/search-icons.js --query "save button"`
|
|
|
|
**Direct grep**: `grep -B1 -A5 '"save"' icon-metadata.json`
|
|
|
|
### `utilities-index.json` (1,147 utilities)
|
|
|
|
All SLDS utility classes organized by category with CSS rules.
|
|
|
|
Each utility entry:
|
|
```json
|
|
{
|
|
"class": "slds-m-bottom_small",
|
|
"css": { "margin-bottom": "0.75rem" },
|
|
"category": "margin"
|
|
}
|
|
```
|
|
|
|
27 categories: grid (80), margin (119), padding (120), sizing (613), color (48), text (24), and more.
|
|
|
|
**Search**: `node ../scripts/search-utilities.js --category "grid"`
|
|
|
|
**Direct grep**: `grep -i "slds-grid" utilities-index.json`
|