frontend-agent
Создание React UI компонентов
Создает и исправляет React компоненты для приложений Next.js. Реализует паттерны shadcn/ui, адаптивные макеты и доступные пользовательские интерфейсы в соответствии с рекомендациями дизайн-системы.
Скачать ZIP навыка
Загрузить в Claude
Перейдите в Settings → Capabilities → Skills → Upload skill
Включите и начните использовать
Протестировать
Использование «frontend-agent». Создать новую страницу формы контакта с полями имени, email и телефона, используя компоненты shadcn/ui
Ожидаемый результат:
- Created src/app/dashboard/contacts/new/page.tsx with metadata
- Added form fields using shadcn/input and shadcn/label components
- Implemented form validation with error messages
- Added loading state during submission
- Integrated toast notifications for success/error feedback
- Added workspace filtering to any database queries
- Implemented responsive grid layout for mobile and desktop
Использование «frontend-agent». Исправить навигационное меню для работы на мобильных устройствах с гамбургер-меню
Ожидаемый результат:
- Added mobile menu state using useState hook
- Implemented Dialog component from shadcn/ui for mobile menu
- Added responsive breakpoints (md:hidden)
- Ensured keyboard navigation works in mobile view
- Added proper ARIA labels for screen readers
Аудит безопасности
БезопасноThis is a pure documentation skill file containing only instructional content and code examples for frontend development. The SKILL.md file is markdown documentation that guides AI agents on implementing React/Next.js UI components. All static findings are false positives: markdown code fences were misidentified as shell backticks, emojis in comments were misclassified as cryptographic patterns, and legitimate API call examples were flagged as network access. No executable code, no credential access, and no actual file system operations exist in this file.
Факторы риска
🌐 Доступ к сети (5)
📁 Доступ к файловой системе (1)
⚡ Содержит скрипты (1)
⚙️ Внешние команды (86)
Оценка качества
Что вы можете построить
Реализация компонентов
Создание новых React компонентов с использованием паттернов shadcn/ui и рекомендаций дизайн-системы
Исправление UI ошибок
Исправление проблем с адаптивной версткой и добавление состояний загрузки и ошибок на существующих страницах
Страницы новых функций
Создание новых страниц дашборда с правильной навигацией, хлебными крошками и интеграцией данных
Попробуйте эти промпты
Создать новый компонент кнопки в src/components/ui, который следует паттернам shadcn/ui. Включить состояние загрузки и отключенные варианты.
Исправить макет дашборда для корректного отображения на мобильных устройствах. Использовать подход mobile-first с точками прерывания md и lg.
Добавить фильтрацию по workspace_id ко всем Supabase запросам на странице контактов для обеспечения изоляции данных между рабочими пространствами.
Реализовать компонент диалога подтверждения с использованием Dialog из shadcn/ui. Включить уведомление об успехе через toast и обработку ошибок.
Лучшие практики
- Всегда фильтровать запросы к базе данных по workspace_id для изоляции в многопользовательской среде
- Использовать дизайн-токены (bg-bg-card, text-text-primary) вместо общих классов Tailwind
- Реализовывать состояния загрузки и ошибок для предотвращения пустых экранов
Избегать
- Использование общих className как bg-white, text-gray-600 или hover:bg-gray-100
- Создание однородных сеток без адаптивных точек прерывания
- Пропуск фильтрации рабочих пространств в запросах к базе данных