ng-alain-component-development
Создание корпоративных UI компонентов ng-alain
Создание корпоративного Angular UI требует знания компонентов ng-alain, тем оформления и паттернов. Этот навык предоставляет готовые примеры кода для ST таблиц, SF форм, ACL разрешений и адаптивных макетов, следующих лучшим практикам Angular.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「ng-alain-component-development」を使用しています。 Create an ST table component for displaying orders with order ID, customer name, total amount, status badge, and date columns
期待される結果:
- Сгенерирован OrderTableComponent с конфигурацией ST колонок
- Добавлена пагинация с выбором размера страницы
- Включены значки статуса (pending, processing, shipped, delivered)
- Добавлены кнопки действий Edit и Delete с диалогами подтверждения
- Настроена сортировка по колонкам суммы и даты
「ng-alain-component-development」を使用しています。 Build a user settings form using SF with username, email, timezone select, and notification preferences checkbox
期待される結果:
- Создана SFSchema с конфигурациями полей
- Добавлена валидация формата email
- Реализована асинхронная загрузка данных часовых поясов
- Включен checkbox для email уведомлений
- Настроен обработчик события изменения формы
セキュリティ監査
安全Pure documentation skill containing only markdown content with inline TypeScript code examples for ng-alain component development reference. No executable code, file system access, network calls, or command execution. Previous audit correctly classified as safe. Static findings are false positives from pattern matching without semantic context.
リスク要因
🌐 ネットワークアクセス (4)
📁 ファイルシステムへのアクセス (1)
⚙️ 外部コマンド (28)
品質スコア
作れるもの
Компоненты корпоративной панели управления
Создание информационно насыщенных панелей управления с таблицами, карточками статистики и адаптивными макетами с использованием компонентов ng-zorro.
Управление формами и данными
Создание сложных форм с валидацией схем, асинхронными выпадающими списками и интеграцией модальных окон для CRUD операций.
Системы контроля доступа
Реализация видимости UI на основе ролей с использованием ACL директив и сервисов разрешений в корпоративных приложениях.
これらのプロンプトを試す
Create an ST table component with pagination that displays a list of users with columns for ID, name, email, status, and actions.
Create an SF schema form for a task management system with fields for title, description, status dropdown, priority radio buttons, assignee async select, due date picker, and tags input.
Create Angular component with ACL permissions that shows Create, Edit, and Delete buttons only when users have the corresponding task:create, task:edit, and task:delete permissions.
Build a complete task management page with page header, breadcrumb navigation, responsive statistics cards for task counts, and an ST table with filter, sort, and action buttons.
ベストプラクティス
- Используйте SHARED_IMPORTS для консолидации общих импортов модулей ng-zorro и @delon между компонентами
- Реализуйте адаптивные точки останова (nzXs, nzSm, nzMd, nzLg) для mobile-first макетов
- Добавляйте корректные ARIA метки и атрибуты доступности для навигации с клавиатуры
回避
- Избегайте жесткого кодирования магических чисел для ширины колонок - используйте адаптивные точки останова
- Не пропускайте состояния загрузки во время асинхронной загрузки данных
- Избегайте смешивания template-driven и reactive форм без четкого разделения