skills.rest
oguzhan18
oguzhan18COMMUNITY
Explore all skills by this author →
WebsiteGitHub

angular-cdk

Guide Angular Component Dev Kit usage for overlays, drag-drop, and virtual scrolling.

6|1|Updated Feb 18, 2026
Search Tags:#accessibility#angular#drag-drop#overlay#cdk#virtual-scroll
One-click install
npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-cdk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-cdk
Source: https://github.com/oguzhan18/angular-ecosystem-skills/tree/main/skills/angular-cdk
Command: npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-cdk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The angular-cdk skill provides concise, version-aware guidance to build accessible, performant, and composable UI primitives using Angular's Component Dev Kit, reducing time spent researching API changes and implementation patterns.

Core Features & Use Cases

  • API Change Awareness & Migration: Highlights recent version-specific changes, deprecations, and recommended replacements to ease upgrades.
  • Component Patterns & Integration: Concrete examples for overlays, portals, drag-and-drop, virtual scrolling, focus management, and responsive layout breakpoints for building custom UI primitives.
  • Accessibility & Best Practices: Accessibility utilities and focus management patterns for screen-reader friendly modals, tooltips, and interactive regions.
  • Use Case: Implement an accessible dropdown backed by Overlay and Portal, add drag-and-drop between lists, or replace large DOM lists with a virtual scroll viewport for performance.

Quick Start

Use the angular-cdk skill to get best-practice guidance and copy-paste-ready examples for implementing overlays, drag-and-drop, portals, and virtual scrolling in an Angular 21 project.

Frequently Asked Questions about angular-cdk

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

FAQPage Schema
How do I build an accessible dropdown using Angular CDK overlay and portal?▼

Angular CDK overlays and portals project content into floating panels for modals or dropdowns, while a11y utilities manage focus trapping and screen-reader announcements to ensure the UI remains accessible.

What is the best way to add drag-and-drop between lists in Angular?▼

The best way to add drag-and-drop in Angular is using the CDK drag-drop module, which provides concrete patterns and code examples for transferring items between connected lists while maintaining event-driven state synchronization.

When should I use virtual scroll instead of rendering a full DOM list in Angular?▼

Use Angular CDK virtual scroll for large DOM lists to render only visible viewport items, significantly improving rendering performance by reducing the number of nodes the browser processes during scrolling.

Does Angular CDK provide utilities for responsive layout breakpoints?▼

Yes, Angular CDK includes layout utilities that observe viewport size changes and trigger responsive breakpoints, allowing components to adapt their composition and behavior dynamically across different screen sizes.

How do I track API changes and deprecations when upgrading Angular CDK?▼

Track Angular CDK API changes by referencing version-aware guidance that highlights recent deprecations and recommended replacements, easing migrations across Angular versions with concrete code examples and updated component patterns.

Why does focus management matter for Angular CDK modals and tooltips?▼

Focus management matters for Angular CDK modals and tooltips because a11y utilities ensure focus is trapped within overlays and restored correctly, keeping interactive regions accessible for keyboard and screen-reader navigation.

Related Skills

Explore More Software Engineering Skills→
lubusINlubusIN
48

frappe-project-triage

Identify Frappe project type, installed apps, version, and tooling.

Official
Intermediate
oborchersoborchers
28

accessibility

Review web interfaces for WCAG 2.2 AA accessibility compliance.

Community
Intermediate
cuongtl1992cuongtl1992
10

angular-reactivity

Coordinate Angular signals with RxJS streams for UI state and async data flows.

Community
Advanced
yw662yw662
6

rikka

Build reactive web components with TC39 Signals and native custom elements.

Community
Advanced