Claude MarketplacesSubmit
oguzhan18 avatar

Angular Cdk

oguzhan18/angular-ecosystem-skills

This is your go-to when building custom Angular components that need drag and drop, overlays, virtual scrolling, or accessibility features without the Material Design styling. Version 21 brings signal-based APIs and native popover support for overlays, which is a solid modernization. The examples cover the essentials: setting up overlay positioning for tooltips and dropdowns, handling drag events between lists, virtualizing long lists for performance, and using portals for dynamic content injection. If you're rolling your own component library or need Material-like behavior with custom styling, CDK gives you the primitives without the opinions. The accessibility module alone is worth knowing for focus trapping and screen reader announcements.

skills.sh installs
201
GitHub stars
7
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add oguzhan18/angular-ecosystem-skills --skill angular-cdk --agent claude-code

Installs into .claude/skills of the current project.

Files

@angular/cdk (Component Dev Kit)

Version: 21.0.3 (Feb 2026) Tags: Accessibility, Drag & Drop, Overlay, Virtual Scroll, Portal

References: Docs — official CDK documentation • GitHub • API

API Changes

This section documents recent version-specific API changes.

  • NEW: CDK overlays now use browser's built-in popovers for improved accessibility source

  • NEW: Angular 19 signal-based APIs — Modern signal integration for CDK components

  • NEW: Improved focus management — Better cdkTrapFocus and cdkFocusRegion support

  • NEW: Drag & Drop improvements — Enhanced item copying between lists

  • DEPRECATED: Legacy overlay strategies — Prefer scroll strategy configuration over deprecated approaches

Best Practices

  • Use CDK for custom UI components — Build your own components without Material styling
import { OverlayModule } from '@angular/cdk/overlay';
import { PortalModule } from '@angular/cdk/portal';
SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/oguzhan18/angular-ecosystem-skills
Categories
Frontend Development, Cloud & Infrastructure
First seen
Jun 3, 2026

More from oguzhan18/angular-ecosystem-skills

All 45

Recommended

More Frontend Development
1oguzhan18 avatarangular-componentsoguzhan18/angular-ecosystem-skillsALWAYS use when working with Angular Components, component architecture, @Component decorator, inputs, outputs, or component design patterns.182skills.sh installs
2cloudai-x avatarvercel-react-best-practicescloudai-x/claude-workflow-v2React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js c178skills.sh installs
3oguzhan18 avatarangular-cypressoguzhan18/angular-ecosystem-skillsALWAYS use when testing Angular applications with Cypress, E2E testing, or component testing in Angular.172skills.sh installs
4bobmatnyc avatarnextjs-env-variablesbobmatnyc/claude-mpm-skillsNext.js environment variable management with file precedence, variable types, and deployment configurations. Use when configuring Next.js applications, managing153skills.sh installs
5vercel-labs avatarjson-render-react-nativevercel-labs/json-renderReact Native renderer for json-render that turns JSON specs into native mobile UIs. Use when working with @json-render/react-native, building React Native UIs f142skills.sh installs
6mindverse avatarsecondme-nextjsmindverse/second-me-skills基于配置和需求生成 Next.js 项目，支持 --quick 快速模式跳过 PRD 阶段122skills.sh installs