angular-cdk-integration
Build Angular CDK UI Components
Angular teams need consistent patterns for CDK interactions. This skill gives reusable guidance for drag-drop, overlays, virtual scrolling, clipboard, accessibility, and platform detection.
Install with my Agent
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Review the Skillstore skill "angular-cdk-integration" from https://skillstore.io/skills/7spade-angular-cdk-integration.md and its manifest at https://skillstore.io/api/skills/7spade-angular-cdk-integration/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Your Agent should still show its plan and request any confirmation required by the security policy.
Agent-readable resources
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
Test it
Using "angular-cdk-integration". Design a drag-and-drop task board with three status columns.
Expected outcome:
A component plan with CDK drop lists, draggable task cards, transfer handling, and placeholder styling guidance.
Using "angular-cdk-integration". Add a contextual menu to an Angular button.
Expected outcome:
An overlay approach with a connected position strategy, transparent backdrop, portal attachment, and disposal steps.
Using "angular-cdk-integration". Review whether virtual scrolling fits my task list.
Expected outcome:
A recommendation covering list size, item height, scrolling viewport setup, and accessibility considerations.
Security Audit
SafeAll static findings are false positives caused by Markdown code fences, TypeScript template literals, documentation links, sample URLs, and Angular CDK UI examples. No evidence found of shell command execution, malicious networking, system reconnaissance, prompt injection, or data exfiltration intent.
Risk Factors
⚙️ External commands (19)
🌐 Network access (4)
Share & cite this report
Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.
Copy report link
https://skillstore.io/skills/7spade-angular-cdk-integration/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown badge
[](https://skillstore.io/skills/7spade-angular-cdk-integration?utm_source=security_passport_badge)HTML badge
<a href="https://skillstore.io/skills/7spade-angular-cdk-integration?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/7spade-angular-cdk-integration/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Embed card
<iframe src="https://skillstore.io/embed/skills/7spade-angular-cdk-integration.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Academic citations (APA · BibTeX · CFF)
APA citation
7Spade. (2026). angular-cdk-integration security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/7spade-angular-cdk-integration/audits/6BibTeX citation
@techreport{7spade-7spade-angular-cdk-integration-2026,
author = {7Spade},
title = {angular-cdk-integration security audit report (audit version 6)},
institution = {Skillstore},
year = {2026},
number = {6},
url = {https://skillstore.io/skills/7spade-angular-cdk-integration/audits/6},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "angular-cdk-integration security audit report (audit version 6)"
version: "unspecified"
type: report
authors:
- name: "7Spade"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/7spade-angular-cdk-integration/audits/6"
identifiers:
- type: other
value: "skillstore:7spade-angular-cdk-integration:audit:6"
description: "Skillstore immutable audit report identifier"
Skillstore Score
Why this score Evidence Confidence: HighWhat You Can Build
Create Interactive Task Boards
Build drag-and-drop workflow boards for task movement across status columns.
Improve Large List Performance
Use virtual scrolling patterns to render long task lists with better responsiveness.
Standardize CDK Usage
Review component designs against import, cleanup, accessibility, and mobile behavior guidance.
Try These Prompts
Use this skill to design an Angular CDK drag-and-drop component for a simple task board.
Use this skill to add an Angular CDK overlay menu with backdrop closing and proper cleanup.
Use this skill to convert a large Angular task list to CDK virtual scrolling while preserving item templates.
Use this skill to review my Angular CDK feature plan for cleanup, accessibility, mobile behavior, and UI-layer boundaries.
Best Practices
- Import only the Angular CDK modules needed by each standalone component.
- Dispose overlays and subscriptions when the interaction closes or the component is destroyed.
- Test keyboard, screen reader, and touch behavior for every interactive CDK feature.
Avoid
- Do not place Angular CDK UI logic inside services or repositories.
- Do not create overlays without close behavior and cleanup logic.
- Do not use virtual scrolling when variable item heights make the viewport inaccurate.