angular-cdk-integrationlisted
Install: claude install-skill aiskillstore/marketplace
# Angular CDK Integration Skill
This skill guides the creation of components and features using Angular CDK (@angular/cdk) utilities in the ng-events construction site management system.
## When to Use This Skill
**Triggers**: "Angular CDK", "drag and drop", "overlay", "portal", "virtual scroll", "accessibility", "clipboard", "platform detection", "CDK utilities"
Use this skill when:
- Implementing drag-and-drop functionality
- Creating overlays, tooltips, or popovers
- Building virtual scrolling lists
- Managing focus and accessibility
- Detecting platform/browser capabilities
- Working with clipboard operations
- Managing scrolling behavior
## Core CDK Modules
### 1. Drag and Drop (@angular/cdk/drag-drop)
**Purpose**: Create draggable elements and drop zones
```typescript
import { Component } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
import { CommonModule } from '@angular/common';
import { CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
@Component({
selector: 'app-task-board',
standalone: true,
imports: [CommonModule, CdkDropList, CdkDrag],
template: `
<div class="task-board">
<div class="column" cdkDropList #todoList="cdkDropList"
[cdkDropListData]="todo"
[cdkDropListConnectedTo]="[inProgressList, doneList]"
(cdkDropListDropped)="drop($event)">
<h3>To Do</h3>
@for (task of todo; track task.id) {
<div cdkDrag class