Habilidades ui-handler
🎨

ui-handler

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

UI-Komponenten und Landing-Pages implementieren

Das manuelle Erstellen von UI-Komponenten erfordert erhebliche Zeit. Diese Skill nutzt Shadcn MCP und 21st.dev MCP, um schnell Buttons, Dialoge und komplexe Landing-Page-Bereiche zu generieren.

Soporta: Claude Codex Code(CC)
📊 69 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 "ui-handler". Eine Pricing-Card-Komponente mit Toggle für monatliche und jährliche Abrechnung hinzufügen.

Resultado esperado:

  • Pricing-Card mit monatlich/jährlich Toggle-Switch generiert
  • Zu src/components/ui/pricing-card.tsx hinzugefügt
  • CSS-Variablen für Dark-Mode-Kompatibilität integriert
  • Framer-Motion für sanfte Toggle-Animationen importiert

Auditoría de seguridad

Seguro
v5 • 1/16/2026

This is a prompt-based skill containing only markdown documentation. All 38 static findings are false positives: backticks in markdown are code formatting syntax, not shell commands. No cryptographic algorithms, path traversal, or network calls exist. The skill provides instructions for using Shadcn MCP and 21st.dev MCP tools.

3
Archivos escaneados
242
Líneas analizadas
3
hallazgos
5
Auditorías totales

Factores de riesgo

⚙️ Comandos externos (22)
reference.md:7 reference.md:7 reference.md:8 reference.md:8 reference.md:9 reference.md:11 reference.md:12 reference.md:18 reference.md:19 reference.md:20 reference.md:20 SKILL.md:16 SKILL.md:22 SKILL.md:22 SKILL.md:23 SKILL.md:26 SKILL.md:29 SKILL.md:29 SKILL.md:29 SKILL.md:33 SKILL.md:33 SKILL.md:34
📁 Acceso al sistema de archivos (2)
reference.md:9 skill-report.json:6
🌐 Acceso a red (1)
skill-report.json:6
Auditado por: claude Ver historial de auditorías →

Puntuación de calidad

38
Arquitectura
100
Mantenibilidad
81
Contenido
21
Comunidad
100
Seguridad
91
Cumplimiento de la especificación

Lo que puedes crear

UI-Komponenten hinzufügen

Buttons, Formulare und Dialoge schnell zu deinem React-Projekt mit Shadcn MCP hinzufügen

Landing-Pages generieren

Professionelle SaaS-Landing-Pages mit Hero-Sektionen mit 21st.dev MCP erstellen

Theme-Konsistenz wahren

Themes über die gesamte App hinweg mit CSS-Variablen und Shadcn MCP anwenden und aktualisieren

Prueba estos prompts

Button-Komponente hinzufügen 
Eine Button-Komponente mit Shadcn MCP hinzufügen. Ich brauche einen Primary-Button mit Icon-Unterstützung und Loading-State.
Hero-Sektion erstellen 
Eine moderne SaaS-Hero-Sektion mit dunklem Gradient-Hintergrund, Email-Capture-Formular und responsivem Design mit 21st.dev MCP generieren.
Theme anwenden 
Das App-Theme auf einen neutralen Zinc-Basis mit blauer Primärfarbe mit Shadcn MCP aktualisieren.
Dashboard-Layout erstellen 
Ein Dashboard-Layout mit Header, Sidebar und Hauptinhaltsbereich erstellen. Atoms von @/components/ui verwenden und Komponenten in entsprechenden Verzeichnissen platzieren.

Mejores prácticas

  • Shadcn MCP für grundlegende Atoms verwenden, bevor benutzerdefinierte Komponenten erstellt werden
  • Generierte Sektionen im Verzeichnis src/components/sections/ platzieren
  • Immer semantische Farbvariablen (bg-background, text-primary) für Dark-Mode-Unterstützung verwenden

Evitar

  • Manuelles Kodieren von Komponenten, die in Shadcn oder 21st.dev-Bibliotheken existieren
  • Hartcodierte Farben anstelle von CSS-Variablen verwenden
  • Page-spezifische Komponenten im gemeinsamen ui/-Verzeichnis statt in _components/ erstellen

Preguntas frecuentes

Welche Tools unterstützt dieser Skill?
Shadcn MCP für Atoms und 21st.dev MCP für komplexe Sektionen. Beide müssen in deiner Umgebung konfiguriert sein.
Welche React-Frameworks funktionieren mit diesem Skill?
Next.js, React und andere React-basierte Frameworks mit Tailwind CSS und shadcn/ui.
Kann ich benutzerdefiniertes CSS anstelle von Tailwind verwenden?
Dieser Skill ist für Tailwind CSS optimiert. Benutzerdefiniertes CSS erfordert manuelle Eingriffe nach der Komponentengenerierung.
Sind meine Projektdaten sicher?
Ja. Dieser Skill generiert nur Komponenten-Code. Er liest, überträgt oder speichert keine Projektdaten extern.
Komponenten werden nicht korrekt generiert
Sicherstellen, dass Shadcn MCP und 21st.dev MCP korrekt konfiguriert sind. Prüfen, ob dein Projekt shadcn/ui initialisiert hat.
Wie unterscheidet sich dies von der manuellen Shadcn-Installation?
Dieser Skill automatisiert den Komponentenauswahl- und Generierungsprozess durch AI-Prompts. Die manuelle Installation erfordert CLI-Befehle und mehr Schritte.

Detalles del desarrollador

Licencia

MIT

Repositorio

https://github.com/AayushBaniya2006/blinkfund/tree/main/.claude/skills/ui-handler

Ref.

main

Estructura de archivos

📄 reference.md

📄 SKILL.md