material-component-dev
Создание React-компонентов FlowGram с соблюдением лучших практик
Создание React-компонентов для FlowGram требует следования определенным паттернам и соглашениям. Этот навык направляет Claude Code через полный рабочий процесс разработки компонентов с TypeScript, Semi UI и тестированием в Storybook.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "material-component-dev". Создай новый компонент ColorPicker для выбора цветов в схемах форм.
Résultat attendu:
Я создам компонент ColorPicker, следуя соглашениям FlowGram. Сначала я создам структуру директорий в packages/materials/form-materials/src/components/color-picker/ с основным файлом компонента, использующим Semi UI ColorPicker, правильными интерфейсами TypeScript, именованными экспортами, затем добавлю его в основные экспорты index. Наконец, я создам историю Storybook в apps/demo-materials/src/stories/components/ для демонстрации использования компонента.
Utilisation de "material-component-dev". Добавь историю для существующего компонента DataTable, показывающую пагинацию и сортировку.
Résultat attendu:
Я создам полную историю Storybook в apps/demo-materials/src/stories/components/data-table.stories.tsx. История будет включать демо-компонент, который управляет состоянием для пагинации и сортировки, демонстрировать DataTable с примерами данных и включать правильную конфигурацию Meta с описанием компонента и тегами для autodocs.
Audit de sécurité
SûrThis skill is a pure documentation guide for React component development. All static findings are false positives from markdown documentation containing example commands, local URLs, and relative import paths. No executable code or security risks present.
Score de qualité
Ce que vous pouvez construire
Создание нового компонента материала формы
Создание нового переиспользуемого компонента формы для FlowGram с правильными типами TypeScript, интеграцией Semi UI и документацией Storybook, следующей соглашениям проекта.
Добавление компонента с интеграцией редактора кода
Разработка компонентов, интегрирующих JSON или редакторы кода из внутренних пакетов FlowGram с правильной типобезопасностью и обработкой ошибок.
Генерация документации Storybook
Создание полной документации историй Storybook, демонстрирующих использование компонента с интерактивными примерами и правильной конфигурацией метаданных.
Essayez ces prompts
Создай новый компонент DataPicker в пакете form-materials, который позволяет пользователям выбирать поля данных из схемы.
Создай историю Storybook для компонента SchemaValidator с примерами, показывающими успешную валидацию и состояния ошибок.
Создай компонент QueryBuilder, который использует JsonCodeEditor из внутренних пакетов и валидирует формат JSON Schema v7.
Исправь ошибки TypeScript в компоненте FormBuilder. Ошибка говорит, что тип IJsonSchema не найден, а React ссылается на глобальный UMD.
Bonnes pratiques
- Всегда используйте именованные экспорты вместо экспортов по умолчанию, чтобы обеспечить tree shaking и улучшить оптимизацию бандла.
- Импортируйте React явно во всех файлах компонентов, чтобы избежать ошибок ссылки на глобальный UMD в TypeScript.
- Держите свойства компонентов минимальными и сфокусированными на основной функциональности, а не добавляйте избыточные опции конфигурации.
Éviter
- Не создавайте отдельные npm-пакеты для отдельных компонентов. Храните все компоненты в пакете form-materials.
- Избегайте использования внешних типов json-schema. Всегда импортируйте IJsonSchema из внутренних пакетов.
- Не пишите unit-тесты для компонентов. Используйте вместо этого Storybook для ручного тестирования и проверки.