skills.rest
e-picsa
e-picsaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

UI & Theming Guide

Guides Tailwind CSS theming and Angular Material component usage in Angular apps.

8|3|Updated Jun 8, 2019
Search Tags:#theming#frontend#angular#tailwind css#CSS variables#component guidelines#angular material
One-click install
npx skills add https://github.com/e-picsa/picsa-apps --skill ui-theming-guide-e-picsa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: UI & Theming Guide
Source: https://github.com/e-picsa/picsa-apps/tree/main/.agent/skills/ui-theming
Command: npx skills add https://github.com/e-picsa/picsa-apps --skill ui-theming-guide-e-picsa

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Inconsistent color usage and outdated Angular Material selectors break dynamic theming and client branding across apps. This Skill enforces semantic color tokens and modern Material v21 component APIs so UI code stays theme-aware and consistent. ## Core Features & Use Cases - Semantic Color Enforcement: Directs use of primary, secondary, black, and white tokens mapped to CSS variables for dynamically themed elements like buttons, headers, and links. - Angular Material v21 Guidelines: Mandates standalone, MDC-based components such as matButton, matIconButton, mat-icon, and MatFormField with matInput, while flagging legacy selectors like mat-raised-button. - Use Case: When building a settings page, use this Skill to write <button matButton="filled" color="primary">Save Changes</button> instead of hardcoding bg-blue-600, ensuring the button adapts to client branding themes. ## Quick Start Review my Angular component template and update it to follow the Tailwind theming and Angular Material v21 guidelines.

Frequently Asked Questions about UI & Theming Guide

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

FAQPage Schema
How do I use Tailwind CSS with Angular Material components?▼

Use Tailwind for layout, spacing, and typography around Material components, while relying on Material's native theming like color="primary" for component state. Avoid hardcoding Tailwind colors such as bg-blue-600 on themed elements.

What colors should I use for themed UI elements in Tailwind?▼

Use semantic tokens primary, secondary, black, and white for themed elements like buttons, headers, and links. These map to CSS variables such as var(--color-primary), allowing the theme to change dynamically for client branding.

Which Angular Material button selectors are deprecated in v21?▼

Legacy selectors mat-raised-button, mat-stroked-button, mat-flat-button, and mat-icon-button should be avoided. Use the modern matButton attribute with variants like matButton="filled", and matIconButton for icon buttons.

Can I use standard Tailwind colors like gray-200 or red-500?▼

Yes, standard Tailwind colors are allowed for neutrals and status indicators such as borders, backgrounds, and alerts where strict theming is not required. The custom configuration extends the default Tailwind palette.

Where is the shared Tailwind configuration located?▼

The shared Tailwind configuration is located at libs/theme/src/tailwind.config.js. It extends the default palette and defines which CSS variables are mapped to theme.extend.colors.

Related Skills

Explore More Software Engineering Skills→
thehivegroup-aithehivegroup-ai

angular-tailwind-standards

Integrate Tailwind CSS with Angular components using CSS-first styling.

Official
Intermediate
Owl-ListenerOwl-Listener
2.0k

color-system

Generate scalable color systems with tonal scales and AA/AAA contrast mappings.

Community
Advanced
anhnq-labanhnq-lab

dark-mode-polisher

Audit and fix dark mode inconsistencies in the CIC ERP application.

Community
Intermediate
DevanBDevanB

Frontend CSS

Enforce Tailwind utility classes and design system tokens in CSS files.

Community
Basic