lwc-css-and-styling
Styling LWC components — SLDS design tokens, --slds-c-* component styling hooks, scoped CSS via shadow DOM, ::part() for restyling base components, light DOM (lwc:render-mode='light'), and the usual gotchas (CSS doesn't pierce shadow boundaries, !important fights specificity, SLDS upgrades break hand-rolled selectors). NOT for SLDS Blueprints/icon usage (use lwc/lwc-slds-icons) or Aura styling (Aura is deprecated).
Best use case
lwc-css-and-styling is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Styling LWC components — SLDS design tokens, --slds-c-* component styling hooks, scoped CSS via shadow DOM, ::part() for restyling base components, light DOM (lwc:render-mode='light'), and the usual gotchas (CSS doesn't pierce shadow boundaries, !important fights specificity, SLDS upgrades break hand-rolled selectors). NOT for SLDS Blueprints/icon usage (use lwc/lwc-slds-icons) or Aura styling (Aura is deprecated).
Teams using lwc-css-and-styling should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/lwc-css-and-styling/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How lwc-css-and-styling Compares
| Feature / Agent | lwc-css-and-styling | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Styling LWC components — SLDS design tokens, --slds-c-* component styling hooks, scoped CSS via shadow DOM, ::part() for restyling base components, light DOM (lwc:render-mode='light'), and the usual gotchas (CSS doesn't pierce shadow boundaries, !important fights specificity, SLDS upgrades break hand-rolled selectors). NOT for SLDS Blueprints/icon usage (use lwc/lwc-slds-icons) or Aura styling (Aura is deprecated).
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# LWC CSS and Styling
LWC components render inside a shadow DOM by default. Component
CSS is scoped to the component — it does not bleed in or out.
SLDS classes work everywhere because the framework injects them
globally; everything else stops at the shadow boundary. This is
the single fact that determines every styling decision.
The typical confusion: a developer wants to change the background
color of a `lightning-button`. They write
`lightning-button .slds-button { background: red; }` and see no
effect. The reason is the `.slds-button` class lives inside the
button's shadow DOM. Five years ago the answer was a `/deep/`
selector or `::shadow`, both since deprecated. The current answer
is **SLDS styling hooks** — `--slds-c-button-color-background:
red` — which the base components consume from the consumer's CSS
custom property cascade.
For cases where there is no styling hook for the property you
need, the toolbox has three more options: `::part()` (where
the base component exposes a part), light DOM
(`static renderMode = 'light'`), or a slot (let the consumer
render their own element). Each has tradeoffs. Reaching for
`!important` or for the SLDS internal class name is the wrong
answer almost always — the next SLDS upgrade renames the class
and the styling vanishes.
## Recommended Workflow
1. **Read the component's "Styling Hooks" tab in the Component
Library before writing CSS.** Most base components document a
list of `--slds-c-*-color-*`, `--slds-c-*-spacing-*`,
`--slds-c-*-radius-*` properties they consume. If the property
you need has a hook, set it and stop.
2. **If no hook exists, check `::part()` exposure.** Some base
components (newer ones especially) expose internal elements via
`::part(name)`. Style them with
`lightning-foo::part(bar) { ... }`.
3. **For your own components, prefer SLDS classes over hand-rolled
styles.** `class="slds-card"` is admin-portable, theme-aware,
and survives SLDS upgrades. Custom CSS is a maintenance ratchet.
4. **Use design tokens (`--lwc-colorBrand`, `--slds-g-color-*`)
instead of literal hex codes.** The user might have High
Contrast mode on, the org might be themed via
`LightningExperienceTheme`, the page might be in a community
with a different brand color.
5. **Reach for light DOM only when shadow DOM is the bottleneck.**
`static renderMode = 'light'` removes the shadow boundary —
the component participates in global CSS. It also forfeits
encapsulation; another component's `.button` rule will hit
yours. Use for small layout components, never for shared base.
6. **Never use `!important` in a base-component override.** It
binds the override to the current SLDS internal-class name.
When SLDS updates, your override fails silently and the user
sees the default style.
7. **Write CSS in `*.css` next to the JS, not inline `style=`.**
Inline styles bypass the design-token cascade and are harder
to override per-theme.
## What This Skill Does Not Cover
| Topic | See instead |
|---|---|
| SLDS icon usage and `lightning-icon` | `lwc/lwc-slds-icons` |
| Aura styling | Aura is deprecated for new development |
| Custom Lightning App theming | `admin/branding-themes` |
| Experience Cloud / Community CSS | `lwc/lwc-community-styling` |Related Skills
lwc-styling-hooks
Use when theming Lightning base components or custom LWCs with SLDS Styling Hooks — CSS custom properties such as `--slds-c-button-color-background`, `--slds-g-color-brand-base-50`, and `--sds-c-*` — across app, page, component, or Experience Cloud scopes, including SLDS 2 (2e) migration via SLDS Validator / Linter and dark-mode surface work. Triggers: 'how to theme lightning-button', 'custom color without overriding slds classes', 'slds 2 migration for lwc', '--slds-c-button-color-background doesn't work', 'experience cloud brand color in lwc', 'dark mode lwc base components'. NOT for raw CSS overrides that target SLDS internal class names — those break on upgrade — and NOT for Experience Cloud theme designer work broader than styling hooks (palette pickers, custom CSS files, branding sets, theme layouts).
xss-and-injection-prevention
Use when writing or reviewing Visualforce pages, Apex controllers, or LWC components that output user-supplied data, build dynamic queries, or construct HTTP responses. Triggers: 'XSS in Visualforce', 'SOQL injection vulnerability', 'how to encode output in Apex', 'JSENCODE Visualforce', 'open redirect prevention'. NOT for Apex CRUD/FLS enforcement (use soql-security or apex-crud-and-fls), NOT for Shield encryption (use shield-encryption-key-management), NOT for AppExchange security review process (use secure-coding-review-checklist).
visualforce-security-and-modernization
Use when hardening or modernizing legacy Visualforce pages — covers the platform CSRF token model and when disabling it is a security regression, view state encryption guarantees and the 170 KB ceiling, FLS/CRUD enforcement gaps on `<apex:outputField>` and on getters that return sObjects, `<apex:includeScript>` interaction with the org Content Security Policy, hosting LWC inside a VF page via `lightning:container` / `lightning-out`, and the retire-vs-harden-vs-leave-alone decision for an inventory of legacy pages. Triggers: 'should I rewrite this Visualforce page in LWC', 'CSRF protection disabled on Visualforce page is that safe', 'community user sees a field they should not on a Visualforce page', 'view state encryption is that enough for sensitive data', 'how do I host an LWC inside a Visualforce page', 'apex:dynamicComponent and apex:actionFunction safe to keep'. NOT for greenfield Visualforce architecture (use apex/visualforce-fundamentals — controller types, view state pattern selection, PDF rendering); NOT for Visualforce email template authoring (use apex/visualforce-email-templates if/when that skill is authored); NOT for general Apex security review across triggers and async (use apex/soql-security and security/secure-coding-review-checklist).
transaction-security-policies
Transaction Security policy creation and configuration: condition builder, enhanced policies, enforcement actions (block, MFA, notification, end session), real-time monitoring mode, and policy troubleshooting. NOT for Event Monitoring log analysis or Shield Event Monitoring setup (use event-monitoring). NOT for Apex testing or debug-log analysis.
sso-saml-troubleshooting
Diagnosing broken SAML SSO into Salesforce — IdP-initiated vs SP-initiated flows, signing-certificate validity / expiry, NameID format mismatches, RelayState handling, audience / entityId / issuer mismatches, clock skew, the SAML Assertion Validator in Setup, the Login History debug log, and the My Domain prerequisite for SSO. Covers the standard diagnostic loop: read the SAML response, identify which check failed, fix at the IdP or SP. NOT for OAuth / OpenID Connect SSO (see security/oauth-openid-troubleshooting), NOT for setting up SSO from scratch (see security/sso-saml-setup).
shield-kms-byok-setup
Configure Shield Platform Encryption with customer-supplied (BYOK) or customer-held (Cache-Only Key Service) tenant secrets, rotate them, and recover. NOT for Classic Encryption or field masking.
shield-event-log-retention-strategy
Use when designing Salesforce Shield Event Monitoring retention, SIEM routing, and storage-tier strategy — which event types to keep, for how long, where, and how to answer audit queries across hot/warm/cold tiers. Triggers: 'shield event log retention', 'route event monitoring to splunk', 'how long to keep login history', 'siem salesforce integration', 'event monitoring storage tier'. NOT for enabling Shield (see salesforce-shield-deployment).
session-management-and-timeout
Use this skill when configuring session timeout values, concurrent session limits, session IP locking, or logout behavior in Salesforce. Covers org-wide session settings, profile-level overrides, Connected App session policies, and Metadata API SecuritySettings deployment. NOT for OAuth token refresh flows, login IP ranges, or MFA/identity-provider configuration.
session-high-assurance-policies
Enforce step-up authentication for sensitive pages/objects using High Assurance session level and login flow policies. NOT for initial MFA enrollment UX.
service-account-credential-rotation
Use when designing credential rotation for integration users, connected apps, named credentials, and OAuth client secrets in Salesforce. Covers rotation cadence, zero-downtime handover, secret storage, and detection of stale credentials. Triggers: 'rotate integration user password', 'connected app secret rotation', 'named credential rotation', 'stale service account', 'zero downtime secret rotation'. NOT for end-user password policies.
security-incident-response
When to use: active or suspected Salesforce org compromise, unauthorized access investigation, attacker containment, forensic evidence collection from EventLogFile/LoginHistory, session revocation, OAuth token cleanup, eradication of attacker persistence, and post-incident recovery verification. Trigger keywords: org compromised, suspicious login, attacker access, session revocation, forensic investigation, breach response, event log forensics, login anomaly investigation, incident response runbook. Does NOT cover general security setup, permission set design, field-level security configuration, or proactive security hardening — those are separate skills. NOT for general security setup.
security-health-check
Use when running, interpreting, or acting on Salesforce Security Health Check results — reading the score, understanding risk categories, evaluating specific settings, creating or importing a custom baseline, querying the Tooling API programmatically, or planning remediation from findings. Triggers: 'security health check score', 'health check failing settings', 'custom baseline', 'remediate health check findings', 'fix risk'. NOT for org hardening implementation, permission model design, or broad baseline config beyond what Health Check directly measures.