Habilidades frontend-ui-dark-ts
📦

frontend-ui-dark-ts

Seguro ⚡ Contiene scripts⚙️ Comandos externos🌐 Acceso a red📁 Acceso al sistema de archivos

Crea UIs de React con Tema Oscuro

Crea aplicaciones React modernas con tema oscuro usando Tailwind CSS, efectos de glassmorfismo y animaciones fluidas con Framer Motion para paneles de control y paneles de administración.

Soporta: Claude Codex Code(CC)
📊 71 Adecuado
1

Descargar el ZIP de la skill

2

Subir en Claude

Ve a Configuración → Capacidades → Skills → Subir skill

3

Activa y empieza a usar

Pruébalo

Usando "frontend-ui-dark-ts". Crea un componente de botón con tema oscuro y fondo púrpura de marca

Resultado esperado:

Un componente de botón usando bg-brand con hover:bg-brand-hover, estilos apropiados de focus ring y tamaño amigable para táctil

Usando "frontend-ui-dark-ts". Construye una barra lateral con efecto de panel glassmórfico

Resultado esperado:

Una barra lateral usando la clase glass-panel con backdrop-blur-lg, fondo oscuro y estilo de borde sutil

Usando "frontend-ui-dark-ts". Añade una animación fade-in a un componente modal

Resultado esperado:

Modal con opacidad inicial 0, animado a opacidad 1, usando Framer Motion con transición easeOut de 0.3s

Auditoría de seguridad

Seguro
v1 • 2/25/2026

Static 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.

1
Archivos escaneados
594
Líneas analizadas
4
hallazgos
1
Auditorías totales

Factores de riesgo

⚡ Contiene scripts (1)
SKILL.md:135
⚙️ Comandos externos (53)
SKILL.md:16 SKILL.md:17 SKILL.md:18 SKILL.md:19 SKILL.md:20 SKILL.md:21 SKILL.md:22 SKILL.md:23 SKILL.md:27-33 SKILL.md:33-37 SKILL.md:37-68 SKILL.md:68-76 SKILL.md:76-112 SKILL.md:112-118 SKILL.md:118-130 SKILL.md:130-134 SKILL.md:134-233 SKILL.md:233-237 SKILL.md:237-244 SKILL.md:244-248 SKILL.md:248-400 SKILL.md:400-404 SKILL.md:404-418 SKILL.md:418-422 SKILL.md:422-441 SKILL.md:441-447 SKILL.md:447-491 SKILL.md:491-495 SKILL.md:495-515 SKILL.md:515-521 SKILL.md:521-526 SKILL.md:526-530 SKILL.md:530-536 SKILL.md:536-540 SKILL.md:540-556 SKILL.md:556-562 SKILL.md:562-563 SKILL.md:563-564 SKILL.md:564-565 SKILL.md:565-566 SKILL.md:566-567 SKILL.md:567-573 SKILL.md:573-574 SKILL.md:574-575 SKILL.md:575-576 SKILL.md:576-577 SKILL.md:577-578 SKILL.md:578-579 SKILL.md:579-580 SKILL.md:580-581 SKILL.md:581-582 SKILL.md:582-583 SKILL.md:583-584
🌐 Acceso a red (3)
SKILL.md:96 SKILL.md:97 SKILL.md:103
📁 Acceso al sistema de archivos (4)
SKILL.md:256 SKILL.md:264 SKILL.md:272 SKILL.md:280
Auditado por: claude

Puntuación de calidad

38
Arquitectura
100
Mantenibilidad
87
Contenido
25
Comunidad
100
Seguridad
96
Cumplimiento de la especificación

Lo que puedes crear

Construye un panel de administración con modo oscuro

Crea un panel de administración profesional con navegación por barra lateral, tablas de datos e indicadores de estado usando patrones de tema oscuro.

Diseña una interfaz de visualización de datos

Construye un dashboard rico en datos con tarjetas glassmórficas, transiciones suaves y tokens de color personalizados para visualización de datos.

Implementa una landing page moderna

Crea una landing page elegante con secciones animadas, modales con superposición de vidrio y micro-interacciones pulidas.

Prueba estos prompts

Configuración Básica de Tema Oscuro 
Usa la skill frontend-ui-dark-ts para configurar un nuevo proyecto React con configuración de tema oscuro de Tailwind CSS. Incluye colores de marca personalizados, fondos neutros y tokens de color de texto.
Componente de Tarjeta de Vidrio 
Crea un componente de tarjeta glassmórfica usando los patrones de frontend-ui-dark-ts. Incluye backdrop blur, bordes sutiles y colores apropiados para tema oscuro.
Transiciones de Página Animadas 
Implementa transiciones de página suaves usando Framer Motion. Usa las variantes fade-in y slide-up de la skill frontend-ui-dark-ts para cambios de ruta.
Diseño Completo de Dashboard 
Construye un diseño completo de dashboard con app shell, navegación por barra lateral, cabecera de página y tarjetas de vidrio responsivas. Incluye insignias de estado y tokens de color para visualización de datos.

Mejores prácticas

  • Usa tokens de color semánticos (text-primary, text-secondary) en lugar de colores codificados para mayor mantenibilidad
  • Aplica efectos de vidrio con moderación - el uso excesivo puede reducir legibilidad y rendimiento
  • Prueba las animaciones en dispositivos reales - se deben respetar las preferencias de reducción de movimiento

Evitar

  • Evita usar fondos negros puros - usa colores neutral-bg con ratios de contraste apropiados
  • No apliques efecto de vidrio a todos los elementos - resérvalo para superficies elevadas y superposiciones
  • Evita complejidad excesiva en animaciones que impacte la carga de página o capacidad de respuesta de interacción

Preguntas frecuentes

¿Funciona con Create React App o solo con Vite?
La skill usa características específicas de Vite como env() para safe areas. Para CRA, necesitarías ajustar la configuración de Tailwind y las variables CSS.
¿Puedo usar colores personalizados en lugar del púrpura de marca predeterminado?
Sí, modifica los colores de marca en tailwind.config.js para que coincidan con tu sistema de diseño.
¿Los efectos de vidrio funcionan en todos los navegadores?
Los efectos de vidrio requieren soporte de backdrop-filter. Los navegadores antiguos mostrarán un fondo sólido en su lugar.
¿Cómo añado más variantes de animación?
Define nuevas variantes en la sección de Patrones de Animación y añade keyframes correspondientes a tailwind.config.js.
¿Puedo usar esto con TypeScript?
Sí, la skill incluye ejemplos en TypeScript y la configuración es compatible con JavaScript.
¿Es compatible esta skill con Claude Code y Codex?
Sí, esta skill soporta las herramientas claude, codex y claude-code.

Detalles del desarrollador

Autor

sickn33

Licencia

MIT

Repositorio

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/frontend-ui-dark-ts

Ref.

main

Estructura de archivos

📄 SKILL.md