skills.rest
avvale
avvaleOFFICIAL
Explore all skills by this author →
WebsiteGitHub

angular-material-19

Integrate Angular Material 19 components with Material 3 theming and CDK patterns.

1|Updated Jun 20, 2022
Search Tags:#theming#angular#drag-drop#cdk#material-19#angular-material#timepicker
One-click install
npx skills add https://github.com/avvale/aurora-front --skill angular-material-19
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-material-19
Source: https://github.com/avvale/aurora-front/tree/main/.claude/skills/angular-material-19
Command: npx skills add https://github.com/avvale/aurora-front --skill angular-material-19

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams quickly adopt Angular Material 19 by consolidating guidance on components, theming, and CDK patterns, reducing time spent on configuration and trial-and-error.

Core Features & Use Cases

  • Quick-start patterns for integrating Material 19 components, including timepicker, 2D drag-and-drop, and theming with CSS variables.
  • Guidance on building responsive, accessible UIs with Material 3 theming and dialog patterns.
  • Use case: migrate an existing app to Material 19 and implement a dark mode toggle with signals-based patterns.

Quick Start

Install Angular Material 19 in your project, then import and configure modules like MatButtonModule, MatTimepickerModule, and DragDropModule to begin building a Material 19 UI.

Frequently Asked Questions about angular-material-19

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

FAQPage Schema
How do I implement a timepicker in Angular Material 19?▼

You can implement a timepicker in Angular Material 19 by importing MatTimepickerModule into your project. This skill provides quick-start patterns for integrating the timepicker component into Angular forms.

What's the best way to add dark and light theming to an Angular app?▼

The best way to add dark and light theming is using Material 3 theming with CSS variables. This skill provides guidance on implementing a dark mode toggle using signals-based patterns for responsive UI.

How do I set up 2D drag-and-drop in Angular?▼

You set up 2D drag-and-drop by importing DragDropModule from the Angular CDK. This skill encapsulates best practices for applying CDK patterns to enable drag-and-drop functionality in your projects.

Does this Angular Material 19 skill require any external tools beyond npm?▼

No, this skill does not require external tools beyond typical npm or yarn setup. You only need a standard Angular project with @angular/material@19 installed to begin integrating components and theming.

How do I migrate an existing app to Angular Material 19?▼

To migrate an existing app to Angular Material 19, install the updated package and apply Material 3 theming. This skill reduces configuration trial-and-error by consolidating component and dialog patterns.

Related Skills

Explore More Software Engineering Skills→
vreddivreddi

link-workspace-packages

Links workspace packages across npm, yarn, pnpm, and bun monorepos.

Community
Intermediate
trantuddt12trantuddt12

angular-material

Implement Angular Material UI components with theming and accessibility.

Community
Intermediate
danielsogldanielsogl
39

angular-forms

Manage Angular forms with Signal-based, type-safe validation and dynamic models.

Community
Advanced
damntreckydamntrecky
1

webawesome

Provide over 50 accessible web components for React, Vue, Angular, and Svelte.

Community
Basic