Claude Code Skills·Claude Skills·The open SKILL.md registry for Claude
ClaudSkills / Growth & Marketing / conversion

Lwc Styling Hooks

Category: Growth & Marketing  ·  Sub-category: conversion  ·  Last updated:
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).
Security AStatic scan found no risk patternsHow grading works ›

About this skill (catalog notes)

Lwc Styling Hooks includes pricing or quota commentary. At roughly 1,894 words the SKILL.md is on the longer end of the catalog distribution.

Original author
Pranav Nagrecha
Indexed lastmod
Catalog position
Growth & Marketing · conversion
Indexed related skills
10

How Lwc Styling Hooks fits the catalog

Lwc Styling Hooks sits in the Growth & Marketing category under the conversion sub-topic in the ClaudSkills catalog. There are 10 related skills indexed alongside it; comparing a few before installing usually reveals which fits your workflow best.

These notes are auto-generated from features detected in the SKILL.md file and from this catalog's structure — they aren't part of the source repository.

From the source SKILL.md

Use this skill when you need to change the appearance of a Salesforce base component or a custom LWC and you want that change to survive SLDS upgrades, respect Experience Cloud branding, and avoid fighting the shadow DOM. SLDS Styling Hooks are the public API for theming on the Lightning platform — everything else is implementation detail.

What this skill does

Lwc Styling Hooks is a community-contributed Claude Code skill in the conversion sub-category. It ships as a SKILL.md file that Claude Code auto-discovers under ~/.claude/skills/lwc-styling-hooks/ and loads when your prompt matches the skill's trigger.

When to invoke it: 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'.

Who uses this skill

The Lwc Styling Hooks Claude Code skill is built for growth marketers, product-led growth teams, founders running experiments, and performance marketing teams. It's part of ClaudSkills (also referred to as Claude Skills or Claude Code Skills) — the open community-curated registry of 146,000+ SKILL.md files for Anthropic's Claude Code agent and the wider Claude ecosystem (Claude API, Claude Agent SDK).

How to install

Free

Manual install (2 steps)

mkdir -p ~/.claude/skills/lwc-styling-hooks
curl -L https://claudskills.com/skills/lwc-styling-hooks/SKILL.md \
  -o ~/.claude/skills/lwc-styling-hooks/SKILL.md

Or just download SKILL.md directly and drop it into ~/.claude/skills/lwc-styling-hooks/. Claude Code auto-discovers it on next session.

Skills live at ~/.claude/skills/lwc-styling-hooks/SKILL.md on macOS/Linux, or %USERPROFILE%\.claude\skills\lwc-styling-hooks\SKILL.md on Windows. See the full install guide for step-by-step instructions.

Telegram

📱 Install from your phone or desktop Telegram

Open @claudskills_bot on Telegram, tap Open Desktop App, and the desktop app installs this skill for you. Or share the bot link with a colleague — they get the same one-tap install. Learn more →

Pro

One-click install via the desktop app

The ClaudSkills desktop app installs any skill directly into ~/.claude/skills/ with one click — no terminal required. Pro starts at $9/mo or $149 lifetime.

Pro

For the full experience including quality scoring and one-click install features for each skill — upgrade to Pro.

See pricing → Download desktop app

Frequently asked questions

How do I install the Lwc Styling Hooks Claude Code skill?
Install via the ClaudSkills desktop app (one click) or copy SKILL.md from the source repository to ~/.claude/skills/lwc-styling-hooks/SKILL.md and restart Claude Code. Both flows are detailed at claudskills.com/install/.
What does the Lwc Styling Hooks skill do?
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).
Is this skill free to install?
Yes. ClaudSkills is an open registry — every skill keeps its source repository's license, and manual install via copy is free. ClaudSkills Pro ($9/mo, $79/yr, or $149 one-time) adds one-click install via the desktop app and a multi-signal Quality Score.
When should I use the Lwc Styling Hooks skill?
Use Lwc Styling Hooks when your Claude Code task falls under the Growth & Marketing category — specifically in the conversion area. Claude Code auto-discovers installed skills and invokes the right one based on the task description, so you can also ask Claude directly (e.g. "use Lwc Styling Hooks" or describe the task and let Claude pick). Browse related skills at /category/growth/.
What is a Claude Code skill and how does the Lwc Styling Hooks skill fit in?
A Claude Code skill is a SKILL.md file that lives under ~/.claude/skills/<name>/ and tells the Claude Code CLI agent how to perform a specific task (instructions, prompts, allowed tools). Skills are auto-discovered at session start. Lwc Styling Hooks is one of 67,000+ skills indexed in the open ClaudSkills catalog, classified under the Growth & Marketing category. Learn more at /learn/what-is-a-claude-skill/.

Attribution & license

Cite this skill

If you reference this skill in a blog post, paper, or documentation, you can cite it as:

APA
Pranav Nagrecha. (2026). Lwc Styling Hooks [Claude Code skill]. ClaudSkills. https://claudskills.com/skills/lwc-styling-hooks/
BibTeX
@misc{lwc-styling-hooks-2026,
  author    = {Pranav Nagrecha},
  title     = {Lwc Styling Hooks [Claude Code skill]},
  year      = {2026},
  publisher = {ClaudSkills},
  url       = {https://claudskills.com/skills/lwc-styling-hooks/}
}

Embed this skill

Promote, attribute, or link this skill from your own README, blog post, or documentation. All three snippets are free to use — no sign-up, no API key. More distribution surfaces →

Badge
[![ClaudSkills](https://claudskills.com/badge/lwc-styling-hooks.svg)](https://claudskills.com/skills/lwc-styling-hooks/?utm_source=badge&utm_medium=readme&utm_campaign=skill_badge)
<script>
<script src="https://claudskills.com/embed/lwc-styling-hooks.js" async></script>
<iframe>
<iframe src="https://claudskills.com/embed/lwc-styling-hooks.html" width="100%" height="160" frameborder="0" loading="lazy" title="ClaudSkills: Lwc Styling Hooks"></iframe>

Security scan

Grade A · scanned 2026-07-06 — free static scan against the OWASP Agentic Skills Top 10.

No risk patterns were found in any of the ten OWASP-aligned categories. How grading works ›

Show this grade on your repo (click to copy):

[![Security: A](https://img.shields.io/badge/Security-A-2e7d32)](https://claudskills.com/skills/lwc-styling-hooks/#security)

Free. No spam. Unsubscribe in one click.

More Growth & Marketing skills

Browse all Growth & Marketing skills in the ClaudSkills registry, or explore these other picks from the same category:

Browse all Growth & Marketing skills → Top 100 skills
Part of ClaudSkills — the open registry for Claude Skills & Claude Code Skills.  ·  What's New  ·  Install guide  ·  About  ·  llms.txt

Part of Acreator Store — Adam Lankamer's AI tools: PerfectStudio · Ucaption · UTagger · AutoXPoster · TestYourSkills · AutomationFlows · Au Naturel · Telegram @acreatorstore

Categories

Use cases

Popular tags

Learn

Site