Agent skill · software engineering · aiskillstore
angular-cdk-integration
Create components using Angular CDK utilities including drag-drop, overlay, portal, scrolling, a11y, clipboard, and platform detection for ng-events project
Why this skill is useful
Provides specific Angular CDK utilities and patterns for implementing complex UI components that the AI wouldn't reliably generate on its own.
What it needs
Requires @angular/cdk installed locally. About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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 2. Overlay (@angular/cdk/overlay) Purpose: Create floating panels and popups 3. Virtual Scrolling (@angular/cdk/scrolling) Purpose: Efficiently render large lists 4. Clipboard (@angular/cdk/clipboard) Purpose: Copy text to clipboard 5. Platform Detection (@angular/cdk/platform) Purpose: Detect browser and platform capabilities Integration Checklist When using Angular CDK: [ ] Import specific CDK modules (not full @angular/cdk) [ ] Use standalone components with CDK directives [ ] Implement proper cleanup (subscriptions, overlays) [ ] Test accessibility with screen readers [ ] Handle mobile/touch interactions [ ] Consider performance (virtual scrolling for lists >100 items) [ ] Integrate with Blueprint multi-tenancy when needed [ ] Follow three-layer architecture (CDK in UI layer only) Best Practices DO ✅ Use CDK for complex UI interactions Leverage virtual scrolling for large datasets Use overlay service for tooltips/menus Detect platform for feature support Clean up overlays and portals on destroy DON'T ❌ Use CDK in services or repositories (UI layer only) Create overlays without disposal logic Skip accessibility considerations Ignore mobile touch events References Angular CDK Documentation Drag and Drop Guide Virtual Scrolling Guide --- Vers …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/angular-cdk-integration