frontend-ui-dark-ts
Build Dark-Themed React UIs
Create modern dark-themed React applications with Tailwind CSS, glassmorphism effects, and smooth Framer Motion animations for dashboards and admin panels.
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
Ative e comece a usar
Testar
A utilizar "frontend-ui-dark-ts". Create a dark-themed button component with brand purple background
Resultado esperado:
A button component using bg-brand with hover:bg-brand-hover, proper focus ring styles, and touch-friendly sizing
A utilizar "frontend-ui-dark-ts". Build a sidebar with glassmorphic panel effect
Resultado esperado:
A sidebar using glass-panel class with backdrop-blur-lg, dark background, and subtle border styling
A utilizar "frontend-ui-dark-ts". Add a fade-in animation to a modal component
Resultado esperado:
Modal with initial opacity 0, animate to opacity 1, using Framer Motion with 0.3s easeOut transition
Auditoria de Segurança
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.
Fatores de risco
⚡ Contém scripts (1)
⚙️ Comandos externos (53)
🌐 Acesso à rede (3)
📁 Acesso ao sistema de arquivos (4)
Pontuação de qualidade
O Que Você Pode Construir
Build a dark-mode admin dashboard
Create a professional admin panel with sidebar navigation, data tables, and status indicators using the dark theme patterns.
Design a data visualization interface
Build a data-rich dashboard with glassmorphic cards, smooth transitions, and custom color tokens for data visualization.
Implement a modern landing page
Create a sleek landing page with animated sections, glass overlay modals, and polished micro-interactions.
Tente Estes Prompts
Use the frontend-ui-dark-ts skill to set up a new React project with Tailwind CSS dark theme configuration. Include custom brand colors, neutral backgrounds, and text color tokens.
Create a glassmorphic card component using the frontend-ui-dark-ts patterns. Include backdrop blur, subtle borders, and proper dark theme colors.
Implement smooth page transitions using Framer Motion. Use the fade-in and slide-up variants from the frontend-ui-dark-ts skill for route changes.
Build a complete dashboard layout with app shell, sidebar navigation, page header, and responsive glass cards. Include status badges and data visualization color tokens.
Melhores Práticas
- Use semantic color tokens (text-primary, text-secondary) instead of hardcoded colors for maintainability
- Apply glass effects sparingly - overuse can reduce readability and performance
- Test animations on actual devices - reduce motion preferences should be respected
Evitar
- Avoid using pure black backgrounds - use neutral-bg colors with proper contrast ratios
- Do not apply glass effect to all elements - reserve for elevated surfaces and overlays
- Avoid excessive animation complexity that impacts page load or interaction responsiveness
Perguntas Frequentes
Does this work with Create React App or only Vite?
Can I use custom colors instead of the default brand purple?
Do the glass effects work in all browsers?
How do I add more animation variants?
Can I use this with TypeScript?
Is this skill compatible with Claude Code and Codex?
Detalhes do Desenvolvedor
Autor
sickn33Licença
MIT
Repositório
https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/frontend-ui-dark-tsReferência
main
Estrutura de arquivos
📄 SKILL.md