skills.rest
angryracoon
angryracoonCOMMUNITY
Explore all skills by this author →
GitHub

design-systems-slds-validate

Score Lightning Web Components for SLDS compliance and production readiness.

Updated Jun 17, 2026
Search Tags:#theming#code review#accessibility#quality audit#slds#lwc#scorecard
One-click install
npx skills add https://github.com/angryracoon/ARIEF-VISEO-DEV-ORG --skill design-systems-slds-validate
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-systems-slds-validate
Source: https://github.com/angryracoon/ARIEF-VISEO-DEV-ORG/tree/main/.agents/skills/design-systems-slds-validate
Command: npx skills add https://github.com/angryracoon/ARIEF-VISEO-DEV-ORG --skill design-systems-slds-validate

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill removes the guesswork from reviewing Lightning Web Components by turning SLDS compliance and production-readiness checks into a structured quality scorecard.

Core Features & Use Cases

  • Automated SLDS audit: Runs a score-based review of component styling, accessibility attributes, and component usage patterns.
  • Supplementary static analysis: Checks CSS, HTML, and JavaScript for issues the linter may miss, including hook fallback usage, focus indicators, inline styles, and native element choices.
  • Manual review gate: Adds human judgment for loading states, error states, empty states, disabled states, semantic HTML, and blueprint compliance.
  • Use case: A developer can review a component before code review or release and quickly see whether it is ready to ship or still needs fixes.

Quick Start

Ask the skill to audit your LWC component and return an SLDS quality scorecard with the top issues and recommendation.

Frequently Asked Questions about design-systems-slds-validate

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

FAQPage Schema
How do I audit Lightning Web Components for SLDS compliance before shipping?▼

To audit Lightning Web Components for SLDS compliance, generate a production readiness scorecard that evaluates CSS, HTML, and JavaScript files. The process requires SLDS linter results, static analysis, accessibility checks, and a manual review gate to yield fix recommendations.

What does an SLDS production readiness scorecard check for in LWC code?▼

An SLDS production readiness scorecard checks LWC code for styling, accessibility attributes, and usage patterns. It validates hook pairing, focus indicators, inline styles, native element choices, and manually reviews loading, error, empty, and disabled states for semantic HTML and blueprint compliance.

Do I need SLDS linter results to perform a component quality audit?▼

Yes, SLDS linter results are required to perform a component quality audit. The scoring process uses linter results as a baseline, then applies supplementary static analysis across CSS, HTML, and JavaScript files to catch issues the linter misses, followed by a manual review gate.

How do I check LWC accessibility attributes and hook fallback usage?▼

To check LWC accessibility attributes and hook fallback usage, run supplementary static analysis on component files. This analysis identifies missing focus indicators, inline styles, improper native element choices, and validates hook pairing to ensure full SLDS compliance before code review.

What is the best way to compare before-and-after SLDS quality scores for code review?▼

The best way to compare before-and-after SLDS quality scores for code review is to run a structured scorecard audit on both Lightning Web Component versions. This evaluates CSS, HTML, and JavaScript changes across static analysis and manual review gates to quantify production readiness improvements.

Related Skills

Explore More Software Engineering Skills→
padjeipadjei

design-systems-slds-validate

Validate Lightning Web Components for SLDS compliance and generate a detailed scorecard.

Community
Advanced
uzh-bfuzh-bf
41

web-design-guidelines

Audit HTML, CSS, and JavaScript UI code against Web Interface Guidelines.

Official
Basic
saitocosaitoco

review

Coordinate acceptance criteria verification and multi-perspective reviews on GitHub pull requests.

Official
Advanced
hayatoschayatosc
1

web-design-guidelines

Review HTML, CSS, and JavaScript files against Web Interface Guidelines and accessibility rules.

Community
Intermediate