Создание UI-компонентов Angular CDK
Командам Angular нужны единые шаблоны для взаимодействий CDK. Этот навык предоставляет переиспользуемые рекомендации по drag-drop, оверлеям, виртуальной прокрутке, буферу обмена, доступности и определению платформы.
Скопируйте этот запрос в своего Агента. Он содержит каноническую страницу Skill и манифест.
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.Ваш Агент по-прежнему должен показать план и запросить все подтверждения, требуемые политикой безопасности.
Используйте эти ссылки, когда AI-агенту, crawler или script нужен чистый контекст вместо полной страницы.
Использование «angular-cdk-integration». Спроектируйте доску задач с drag-and-drop и тремя колонками статусов.
Ожидаемый результат:
План компонента с CDK drop lists, перетаскиваемыми карточками задач, обработкой переноса и рекомендациями по стилям placeholder.
Использование «angular-cdk-integration». Добавьте контекстное меню к кнопке Angular.
Ожидаемый результат:
Подход с оверлеем, включающий подключенную стратегию позиционирования, прозрачную подложку, прикрепление портала и шаги освобождения ресурсов.
Использование «angular-cdk-integration». Проверьте, подходит ли виртуальная прокрутка для моего списка задач.
Ожидаемый результат:
Рекомендация, охватывающая размер списка, высоту элемента, настройку viewport прокрутки и соображения доступности.
All 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.
Делитесь версионным отчетом об оценке, нейтральным значком, встраиваемой карточкой и цитатами. Skillstore публикует доказательства, не решая, безопасен ли этот Skill.
https://skillstore.io/skills/7spade-angular-cdk-integration/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/7spade-angular-cdk-integration?utm_source=security_passport_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><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>7Spade. (2026). angular-cdk-integration security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/7spade-angular-cdk-integration/audits/6@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}
}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"
Создавайте workflow-доски с drag-and-drop для перемещения задач между колонками статусов.
Используйте шаблоны виртуальной прокрутки, чтобы отображать длинные списки задач с лучшей отзывчивостью.
Проверяйте дизайны компонентов по рекомендациям для импортов, очистки, доступности и поведения на мобильных устройствах.
Используйте этот навык, чтобы спроектировать Angular CDK drag-and-drop компонент для простой доски задач.
Используйте этот навык, чтобы добавить оверлейное меню Angular CDK с закрытием по подложке и корректной очисткой.
Используйте этот навык, чтобы преобразовать большой список задач Angular в CDK virtual scrolling, сохранив шаблоны элементов.
Используйте этот навык, чтобы проверить мой план функции Angular CDK на очистку, доступность, поведение на мобильных устройствах и границы UI-слоя.
Автор
7SpadeЛицензия
MIT
Ревизия Skillstore
r1
Примечание о версии
Автор не указал версию.
Ссылка
c1fdca50ff516318f65fed0d7f9e82797c5171dc
Актуальность поддержки
24.07.2026
Использование
11 загрузок · 200 просмотров
Структура файлов
📄 SKILL.md
Создавайте надежные AI Skills
Командам, работающим с ИИ, часто нужны повторно используемые рабочие процессы, но им не хватает четкой структуры навыков. Этот навык помогает Claude, Codex и Claude Code планировать, создавать, проверять и упаковывать навыки.
Выбор ролей Azure с минимальными привилегиями
Решения о ролях Azure могут предоставлять слишком широкий доступ, когда требования неясны. Этот навык сопоставляет нужные разрешения с минимальными ролями и рекомендациями по назначению.
Тестирование веб-приложений с Playwright
Изменения во фронтенде требуют проверки в реальном браузере, а не только статических проверок. Этот навык помогает Claude, Codex и Claude Code выполнять тестирование на основе Playwright, отладку, создание скриншотов и проверку консоли.
Создание утилит Angular с @delon/util
Команды Angular часто повторно реализуют логику форматирования данных, клонирования, группировки и браузерных хелперов. Этот навык показывает, как использовать хелперы @delon/util в компонентах ng-alain и рабочих процессов задач.
Подготовка документации, проверенной читателями
Важные документы часто оказываются неэффективными, потому что ключевой контекст остается в голове автора. Этот навык проводит Claude, Codex или Claude Code через сбор контекста, структурированную подготовку черновика, итеративное уточнение и тестирование на читателях.
Создавайте дашборды с диаграммами @delon
Командам Angular нужны согласованные диаграммы, соответствующие шаблонам дашбордов ng-alain. Этот skill предоставляет примеры @delon/chart и рекомендации для распространенных корпоративных визуализаций.
Создавайте более качественные функции SwiftUI
от avdlee
В проектах SwiftUI могут накапливаться устаревшие API, хрупкое состояние и медленные обновления представлений. Этот навык дает сфокусированные рекомендации для современного и поддерживаемого кода SwiftUI.
Улучшение доступности фронтенда
от EIS-ITS
Фронтенд-команды часто упускают требования к клавиатурной навигации, семантике и поддержке экранных дикторов при рутинной работе с UI. Этот навык помогает Claude, Codex и Claude Code применять проверки доступности при создании или редактировании интерфейсов.
Исправление ошибок контрастности Lighthouse
от ZhanlinCui
Сбои аудита контрастности Lighthouse могут скрывать полезные результаты SEO и доступности. Этот навык дает точечные проверки и шаблоны исправления проблем контрастности в CSS.
Обзор основ фронтенд-компонентов
от DanielPodolsky
При фронтенд-ревью часто упускают проблемы архитектуры, состояния, доступности и производительности, пока компоненты не становятся сложными в поддержке. Этот навык проводит Claude, Codex и Claude Code через сфокусированные вопросы чек-листа и паттерны ревью для оценки качества компонентов.
Проверка доступности для скринридеров
от sickn33
Регрессии для скринридеров могут оставаться незаметными при визуальных проверках. Этот навык дает практические шаги тестирования для VoiceOver, NVDA, JAWS и TalkBack.
Обзор основ доступности React
от DanielPodolsky
Интерактивные интерфейсы React часто упускают требования к клавиатурной навигации, подписям и фокусу. Этот навык проводит Claude, Codex и Claude Code через практические проверки WCAG для JSX, форм, навигации и диалогов.