Quality Review
Audits your components and gives you a score with specific things to fix. Like a code review checklist, automated.
Skill Details
Install this skill
Versionv1.1.0AuthorJorge ArteagaLicenseMITSections9
Works with
Claude CodeCursorWindsurf
Review and score existing Lightning Web Components against the full UI/UX design skills suite. This skill is the enforcement mechanism — it turns design guidelines into actionable feedback.
When to Run
- Before deploying a new LWC component
- When refactoring existing components
- During code review of LWC pull requests
- When the user asks to "review", "audit", "check", or "score" a component
- Periodically across an LWC directory to measure design debt
- Before a demo or PoC presentation (use Demo Readiness mode)
Audit Process
Step 1: Identify Files
Read the component bundle: .js, .html, .css, and .js-meta.xml.
Step 2: Run Three Scoring Passes
| Pass | Skill | Points | Focus |
|---|---|---|---|
| Design | sf-lwc-design | 100 | SLDS 2 hooks, theme-safe styling, migration, structure |
| UX | sf-lwc-ux | 100 | States, accessibility, layout, interactions |
| Styling | sf-lwc-styling | 100 | Utility patterns, composition, fallbacks |
| Check | Points | How to Detect | |
All colors use --slds-g-color- | 10 | Search for hex/rgb/hsl literals not inside var() fallbacks | |
All spacing uses --slds-g-spacing- | 5 | Search for bare px/rem/em in padding/margin/gap | |
All font sizes use --slds-g-font-size- | 5 | Search for bare px/rem in font-size | |
All radii use --slds-g-radius- | 5 | Search for bare px/rem in border-radius | |
| Check | Points | How to Detect | |
| Zero hardcoded color values | 10 | Regex: #[0-9a-fA-F]{3,8} or rgb\( not inside var() fallback position | |
All var() have fallback values | 5 | Regex: var\(--[^,)]+\) (no comma = no fallback) | |
| No inline color styles in HTML | 5 | Search .html for style= containing color, background, border-color | |
| Check | Points | How to Detect | |
No --lwc- tokens | 10 | Search for --lwc- in .css | |
| No deprecated SLDS 1 class names | 5 | Search .html for slds-m-, slds-p- utility classes | |
| Check | Points | How to Detect | |
Uses lightning- base components where appropriate | 10 | Check if custom buttons/inputs/cards duplicate base components | |
| Semantic HTML elements | 5 | Check for bare | |
| Check | Points | How to Detect | |
| Feedback colors match meaning | 10 | error- used for errors, success- for success, not mixed | |
| Surface hierarchy is logical | 5 | surface-1 for primary, surface-container- for nested | |
| Check | Points | How to Detect | |
| Consistent spacing scale | 5 | No mixing of spacing hooks with pixel values | |
| Typography follows scale | 5 | Font sizes from hook scale, not arbitrary values | |
| Check | Points | How to Detect | |
| Loading state exists | 5 | Search .html for isLoading or loading conditional | |
| Empty state exists | 5 | Search .html for empty/no-data conditional with message | |
| Error state exists | 5 | Search .html for error conditional with user-friendly message | |
| Error has retry action | 5 | Error block contains a button/link for recovery | |
| Check | Points | How to Detect | |
| Interactive elements have labels | 8 | All aria-label or visible label | |
| Live regions announced | 5 | Dynamic content areas have role="status" or role="alert" | |
| Keyboard navigation implemented | 7 | onkeydown handler on custom interactive widgets | |
| Focus management on modals/popovers | 5 | Focus moves to opened element, returns on close | |
| Check | Points | How to Detect | |
| Uses CSS Grid or Flexbox | 5 | No float, no position: absolute for layout | |
| No fixed pixel widths | 5 | No width: 300px on content containers | |
| Spacing uses SLDS scale | 5 | Gap/padding/margin from --slds-g-spacing- | |
| Check | Points | How to Detect | |
| Hover states on interactive elements | 5 | :hover rules in CSS for clickable items | |
| Focus-visible styles | 5 | :focus-visible or :focus with outline in CSS | |
| Feedback on actions (toast/inline) | 5 | ShowToastEvent or inline success/error message after mutations | |
| Check | Points | How to Detect | |
Uses | 5 | Slots in .html for extensibility | |
Consistent @api conventions | 5 | Props follow variant, size, label, disabled pattern | |
| Emits CustomEvents (not direct DOM) | 5 | this.dispatchEvent(new CustomEvent(...)) for child-to-parent | |
| Check | Points | How to Detect | |
| Grid/flex with auto-fill or flex-wrap | 5 | auto-fill, auto-fit, or flex-wrap: wrap in CSS | |
| No horizontal overflow at narrow widths | 5 | No fixed-width elements larger than mobile viewport | |
| Check | Points | How to Detect | |
Reusable class names (.util-, .recipe-, or semantic) | 10 | No single-use classes like .thing1, .wrapper2 | |
| No deeply nested selectors (max 2 levels) | 5 | Count selector depth in CSS | |
No !important | 5 | Search for !important in CSS | |
| Check | Points | How to Detect | |
| Classes combine cleanly in HTML | 10 | Multiple utility classes on elements | |
| CSS file is organized (grouped by purpose) | 5 | Related rules are adjacent | |
| No duplicate property declarations | 5 | Same property on same selector | |
| Check | Points | How to Detect | |
No | 5 | Search for * { in CSS | |
| No redundant declarations | 5 | Same property set multiple times on same element | |
| Check | Points | How to Detect | |
| Entry animations on key content | 5 | animation or transition in CSS; staggered reveals | |
| Skeleton/shimmer loading states | 5 | .skeleton or .shimmer classes; pulse/shimmer keyframes | |
| Smooth transitions between states | 5 | transition properties on state-change elements | |
| Check | Points | How to Detect | |
| No "Test" or "Lorem ipsum" data | 5 | Search JS/HTML for test data placeholders | |
| Industry-appropriate labels and values | 5 | KPI labels match the demo vertical | |
| Dates are relative (not hardcoded past dates) | 5 | Search for hardcoded date strings | |
| Check | Points | How to Detect | |
| Component works without record context (preview mode) | 5 | Placeholder/fallback data when no recordId | |
| Configurable via App Builder properties | 5 | meta.xml has meaningful exposed properties | |
| Check | Points | How to Detect | |
| Consistent card heights in layouts | 5 | height: 100% or flex-based height matching | |
| No console errors or warnings | 5 | Clean browser console during component lifecycle | |
| Score | Grade | Meaning | |
| 270-300 | A | Production-ready, exemplary design | |
| 220-269 | B | Good — minor issues to address | |
| 150-219 | C | Needs improvement — several gaps | |
| 100-149 | D | Significant design debt | |
| Below 100 | F | Major redesign required | |
| Score | Rating | Meaning | |
| 40-50 | Demo Ready | Ship it — impressive and polished | |
| 25-39 | Almost Ready | A few tweaks and it's demo-worthy | |
| Below 25 | Needs Work | Missing key polish or realistic data | |
| Skill | Relationship | ||
| sf-lwc-design | Provides the 100-point design rubric | ||
| sf-lwc-ux | Provides the 100-point UX rubric | ||
| sf-lwc-styling | Provides the 100-point styling rubric | ||
| sf-lwc-dataviz | Additional checks for data visualization components | ||
| sf-lwc-mobile | Additional checks for mobile-targeted components | ||
| sf-se-demo-scripts | Demo Readiness audit validates demo-specific polish |
Navigate Data & Quality