skills.rest
GedMarc
GedMarcCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

angular-awesome-theming

Applies Tailwind-style utility classes and design tokens to style web components.

2|1|Updated Jun 4, 2025
Search Tags:#theming#layout#components#angular#design-tokens#web-awesome#css-custom-properties
One-click install
npx skills add https://github.com/GedMarc/angular-awesome --skill angular-awesome-theming
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-awesome-theming
Source: https://github.com/GedMarc/angular-awesome/tree/main/skills/angular-awesome-theming
Command: npx skills add https://github.com/GedMarc/angular-awesome --skill angular-awesome-theming

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Applying consistent branding and fine-grained visual customization to Web Awesome components wrapped by Angular directives can be fragmented and time-consuming; developers need a predictable way to override defaults, apply semantic variants, and control layout without changing component internals.

Core Features & Use Cases

  • Design tokens & variants: Use semantic variant, appearance, and size tokens to apply brand colors and intent-driven styles across components.
  • CSS custom properties & parts: Override internal spacing, colors, and dimensions via CSS custom properties and style shadow DOM internals with exported ::part selectors.
  • Layout utilities: Compose responsive UIs with attribute-based utilities like waStack, waCluster, waGrid, waGap, waAlignItems, waSplit, waFlank, and waFrame to control spacing and alignment.
  • Use Case: Apply a company color palette to all wa-button instances, adjust toast widths and gaps globally, and arrange cards in a responsive grid using the provided layout classes.

Quick Start

Apply a brand color palette and adjust component spacing by updating CSS custom properties and using layout utilities like waStack and wa-gap classes.

Frequently Asked Questions about angular-awesome-theming

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

FAQPage Schema
What is the best way to customize shadow DOM internals in Angular web components?▼

The best way to customize shadow DOM internals in Angular is by targeting exported ::part selectors and overriding CSS custom properties to adjust internal spacing, colors, and dimensions without changing component internals.

Does this Angular theming approach work with Web Awesome layout utilities?▼

Yes, this Angular theming approach works with Web Awesome layout utilities by applying attribute-based directives like waStack, waCluster, and waGrid to compose responsive UIs and control spacing and alignment.

How do I apply a brand color palette to all wa-button instances in Angular?▼

To apply a brand color palette to all wa-button instances, you use semantic variant and appearance design tokens to apply intent-driven styles and update CSS custom properties globally across the Angular application.

Why are my CSS custom property overrides not affecting Web Awesome components in Angular?▼

CSS custom property overrides may not affect Web Awesome components if the Web Awesome assets are not properly loaded into the Angular application, or if the shadow DOM internals require targeting exported ::part selectors instead.

Related Skills

Explore More Software Engineering Skills→
GedMarcGedMarc
2

angular-awesome

Wrap Web Awesome wa-* components as Angular 20+ directives with typed inputs and outputs.

Community
Intermediate
davidrrowleydavidrrowley

frontend-ui-dark-ts

Create dark-themed React UIs with Tailwind CSS and Framer Motion.

Community
Intermediate
spallempatispallempati

angular-directives

Generate custom Angular directives for DOM manipulation and component interactions.

Community
Intermediate
JmarquesJmarques

webawesome-design

Designs UI layouts/themes using Web Awesome components and utilities with custom CSS for specific cases.

Community
Advanced