widgets-ui
Создание декларативных UI-виджетов из JSON
Агенты испытывают трудности с отрисовкой сложных пользовательских интерфейсов. Этот навык позволяет Claude генерировать богатые интерактивные React-компоненты из простых JSON-структур.
Скачать ZIP навыка
Загрузить в Claude
Перейдите в Settings → Capabilities → Skills → Upload skill
Включите и начните использовать
Протестировать
Использование «widgets-ui». Создайте форму входа с полями email и пароля
Ожидаемый результат:
Widget JSON с типом 'ui', asForm установлен в true, содержащий столбец с полем email, полем пароля и кнопкой отправки
Использование «widgets-ui». Сделайте карточку уведомления с бейджем успеха
Ожидаемый результат:
Box-виджет с фоном gradient-ocean, padding 4, radius lg, содержащий заголовок, бейдж успеха и кнопку закрытия
Аудит безопасности
БезопасноAll 34 static findings are false positives from documentation patterns. The external_commands detections are TypeScript code examples in markdown blocks, not executable commands. Network URLs are legitimate project documentation links. No cryptographic weakness exists - flags were triggered by markdown table syntax. This is pure documentation for a React component library with no executable code.
Проблемы низкого риска (1)
Оценка качества
Что вы можете построить
Формы, генерируемые агентом
Claude создаёт динамические многошаговые формы на основе требований пользователя. Агент генерирует JSON-определения виджетов, которые отображаются как полные формы с валидацией.
Карточки визуализации данных
Преобразуйте структурированные данные в визуальные карточки с иконками, бейджами и макетами. Отображайте информацию о рейсах, сведения о продуктах или профили пользователей.
Интерактивные дашборды
Создавайте интерфейсы дашбордов, комбинируя несколько виджетов. Формируйте строки и столбцы кнопок, статистики и отображения данных.
Попробуйте эти промпты
Создайте виджет контактной формы с полями имени, email и сообщения. Добавьте кнопку отправки с вариантом по умолчанию.
Сгенерируйте виджет карточки продукта с фоном gradient-ocean. Включите заголовок продукта, бейдж цены и кнопку покупки.
Создайте виджет статуса рейса, показывающий аэропорты вылета и прибытия в макете строки. Добавьте иконку самолёта между локациями.
Постройте макет столбца с тремя секциями: заголовок с названием, форма с полями email и пароля, и подвал с текстом авторских прав.
Лучшие практики
- Всегда определяйте поле 'type' как 'ui' для корневых виджетов, чтобы обеспечить корректный рендеринг
- Используйте семантические имена для полей форм (email, password, message) для улучшения обработки данных форм
- Комбинируйте макеты box и row/column для создания адаптивных, структурированных интерфейсов
- Используйте предопределённые градиенты, такие как 'gradient-ocean' и 'gradient-sunset', для согласованной стилизации
Избегать
- Не вкладывайте виджеты глубже 4 уровней, так как это усложняет поддержку и снижает производительность
- Избегайте смешивания разных типов макетов (row и column) без явной структурной цели
- Никогда не включайте чувствительные данные в JSON виджета, так как он рендерится на клиенте
- Не используйте пользовательские свойства вне определённой схемы виджета, так как они будут проигнорированы