frontend-ui-dark-ts
Создание тёмных React-интерфейсов
Создавайте современные тёмные React-приложения с Tailwind CSS, эффектами стекломорфизма и плавной анимацией Framer Motion для панелей мониторинга и административных интерфейсов.
Descargar el ZIP de la skill
Subir en Claude
Ve a Configuración → Capacidades → Skills → Subir skill
Activa y empieza a usar
Pruébalo
Usando "frontend-ui-dark-ts". Создать тёмный компонент кнопки с фирменным фиолетовым фоном
Resultado esperado:
Компонент кнопки с использованием bg-brand и hover:bg-brand-hover, правильными стилями фокусного кольца и удобными для касания размерами
Usando "frontend-ui-dark-ts". Создать боковую панель с эффектом стекломорфизма
Resultado esperado:
Боковая панель с использованием класса glass-panel, backdrop-blur-lg, тёмным фоном и тонкой стилизацией границ
Usando "frontend-ui-dark-ts". Добавить анимацию появления к модальному окну
Resultado esperado:
Модальное окно с начальной непрозрачностью 0, анимацией до непрозрачности 1, используя Framer Motion с переходом 0.3s easeOut
Auditoría de seguridad
SeguroStatic analysis flagged 69 potential issues, all of which are false positives. The flagged patterns (shell commands, hardcoded URLs, path traversal, weak crypto) are actually documentation examples and code templates in SKILL.md. No malicious code or security risks detected. This is a legitimate frontend UI skill for building dark-themed React applications.
Factores de riesgo
⚡ Contiene scripts (1)
⚙️ Comandos externos (53)
🌐 Acceso a red (3)
📁 Acceso al sistema de archivos (4)
Puntuación de calidad
Lo que puedes crear
Создание тёмной панели мониторинга
Создайте профессиональную административную панель с боковой навигацией, таблицами данных и индикаторами состояния, используя паттерны тёмной темы.
Проектирование интерфейса визуализации данных
Создайте информационную панель со стекломорфными карточками, плавными переходами и кастомными цветовыми токенами для визуализации данных.
Реализация современной посадочной страницы
Создайте стильную посадочную страницу с анимированными секциями, стеклянными модальными окнами и отполированными микро-интеракциями.
Prueba estos prompts
Используйте навык frontend-ui-dark-ts для настройки нового React-проекта с конфигурацией тёмной темы Tailwind CSS. Включите кастомные брендовые цвета, нейтральные фоны и токены цветов текста.
Создайте стекломорфный компонент карточки, используя паттерны frontend-ui-dark-ts. Включите размытие фона, тонкие границы и правильные цвета тёмной темы.
Реализуйте плавные переходы между страницами с помощью Framer Motion. Используйте варианты fade-in и slide-up из навыка frontend-ui-dark-ts для изменений маршрутов.
Создайте полный макет панели мониторинга с app shell, боковой навигацией, заголовком страницы и адаптивными стеклянными карточками. Включите значки состояния и цветовые токены для визуализации данных.
Mejores prácticas
- Используйте семантические цветовые токены (text-primary, text-secondary) вместо жёстко заданных цветов для удобства поддержки
- Применяйте стеклянные эффекты дозированно — чрезмерное использование может снизить читаемость и производительность
- Тестируйте анимацию на реальных устройствах — следует учитывать предпочтения уменьшения движения
Evitar
- Избегайте использования чисто чёрных фонов — используйте цвета neutral-bg с правильными коэффициентами контраста
- Не применяйте стеклянный эффект ко всем элементам — используйте его для приподнятых поверхностей и оверлеев
- Избегайте чрезмерной сложности анимации, которая влияет на загрузку страницы или отзывчивость взаимодействия
Preguntas frecuentes
Работает ли это с Create React App или только с Vite?
Можно ли использовать кастомные цвета вместо фирменного фиолетового по умолчанию?
Работают ли стеклянные эффекты во всех браузерах?
Как добавить больше вариантов анимации?
Можно ли использовать это с TypeScript?
Совместим ли этот навык с Claude Code и Codex?
Detalles del desarrollador
Autor
sickn33Licencia
MIT
Repositorio
https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/frontend-ui-dark-tsRef.
main
Estructura de archivos
📄 SKILL.md