skills.rest
IgniteUI
IgniteUIOFFICIAL
Explore all skills by this author →
WebsiteGitHub

update-component-styles

Update component styles across themes using the SCSS to Lit CSS workflow.

169|10|Updated May 12, 2021
Search Tags:#theming#storybook#scss#css-variables#transpile#component-styles#lit-css
One-click install
npx skills add https://github.com/IgniteUI/igniteui-webcomponents --skill update-component-styles
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: update-component-styles
Source: https://github.com/IgniteUI/igniteui-webcomponents/tree/main/.github/skills/update-component-styles
Command: npx skills add https://github.com/IgniteUI/igniteui-webcomponents --skill update-component-styles

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Update component styling following the project's SCSS workflow and theming system to ensure consistency across components and themes.

Core Features & Use Cases

  • Maintain base styles and theme-specific overrides across multiple themes (bootstrap, material, fluent, indigo) plus light/dark variants.
  • Identify and modify the correct SCSS files (base, shared, light/dark) and ensure proper transpilation to CSS.js as part of the build process.
  • Validate changes with Storybook and documentation, ensuring CSS parts and custom properties are exposed and testable.

Quick Start

Update the target component's styles to align with the SCSS to Lit CSS workflow and theming system.

Frequently Asked Questions about update-component-styles

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

FAQPage Schema
How do I update component styles across multiple themes using SCSS?▼

To update component styles across multiple themes, modify the base, shared, and theme-specific SCSS files, then transpile them to Lit CSS to ensure consistent light and dark mode theming.

What is the SCSS to Lit CSS workflow for component styling?▼

The SCSS to Lit CSS workflow involves modifying base and theme-specific SCSS files for light and dark modes, then transpiling the SCSS into CSS.js files to maintain consistent component theming.

How do I verify component style changes in Storybook?▼

You verify component style changes in Storybook by transpiling the modified SCSS to CSS.js and checking that the CSS parts and custom properties are properly exposed and testable across all themes.

Does this component styling workflow support bootstrap, material, fluent, and indigo themes?▼

Yes, the component styling workflow supports maintaining base styles and theme-specific overrides across bootstrap, material, fluent, and indigo themes, including both light and dark variants.

Why are my component styles not syncing across light and dark modes?▼

Component styles may not sync across light and dark modes if the correct shared and theme-specific SCSS files are not identified or if the SCSS to CSS.js transpilation step was not completed.

Can I use CSS variables to maintain consistent theming across components?▼

Yes, the workflow exposes and validates CSS custom properties and parts through Storybook, ensuring that CSS variables maintain consistent theming across all components and theme variants.

Related Skills

Explore More Software Engineering Skills→
sheldrappssheldrapps

add-ui-component

Create reusable UI components in the @sheldrapps/ui-theme package with SCSS and validation.

Community
Intermediate
mahg-esmahg-es
3

theme-design

Design CSS theme systems with design tokens, color palettes, and typography scales.

Official
Intermediate
alkalisummeralkalisummer
1

design-system

Define design tokens, component architecture, and accessibility standards for web applications.

Community
Advanced
jiaiyanjiaiyan
21

element-plus-dark-mode

Implement and customize dark mode in Element Plus applications with CSS variables or SCSS overrides.

Community
Intermediate