frontend-responsive
Mobile-First responsive Designs umsetzen
Também disponível em: EIS-ITS
Responsive Weboberflächen zu bauen, die auf allen Gerätegrößen funktionieren, ist ohne klare Richtlinien schwierig. Diese Skill gibt KI-Assistenten konkrete Anleitung zur Umsetzung von Mobile-First-Responsive-Designs mit fluiden Layouts, Breakpoints und touchfreundlichen Mustern.
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-responsive". Create a responsive button component for mobile devices
Resultado esperado:
- Button mit mindestens 44x44px Tap-Target für Touch-Barrierefreiheit
- Responsives Padding mit rem-Einheiten (z. B. py-3 px-6)
- Schriftgröße, die passend skaliert (z. B. text-base oder text-lg)
- Aktivzustands-Feedback mit visueller Touch-Anzeige
- Mobile-First-Basisstile mit responsiven Overrides
A utilizar "frontend-responsive". Build a responsive navigation menu
Resultado esperado:
- Hamburger-Menü-Implementierung für mobile Viewports
- Horizontale Linkliste sichtbar auf Desktop-Breakpoints
- CSS-Transition für Öffnen- und Schließen-Zustände des Menüs
- Touchfreundliche Tap-Targets für Menüpunkte
- Korrekte z-index-Schichtung für das mobile Menü-Overlay
A utilizar "frontend-responsive". Create a responsive card grid layout
Resultado esperado:
- Einspaltiges Layout auf Mobilgeräten (<640px)
- Zweispaltiges Layout auf Tablets (640px-1024px)
- Drei- bis vierspaltiges Layout auf Desktop (>1024px)
- Fluide Kartenbreiten mit Prozentwerten oder Flex-Basis
- Responsiver Gap-Abstand, der sich an den Viewport anpasst
Auditoria de Segurança
SeguroAll 46 static findings are false positives caused by pattern-matching without semantic context. The skill is pure markdown documentation with no executable code. False positives include hash values flagged as C2/crypto, CSS units (rem, em) flagged as cryptographic references, Tailwind breakpoints (md, lg) flagged, markdown backticks flagged as shell execution, and documentation keywords flagged as reconnaissance. The existing security audit confirms: 'Pure markdown-based skill containing only instructional guidance... No executable code, network access, filesystem operations, or external command execution capabilities detected.'
Fatores de risco
🌐 Acesso à rede (1)
📁 Acesso ao sistema de arquivos (4)
⚙️ Comandos externos (2)
Pontuação de qualidade
O Que Você Pode Construir
Responsive React-Komponenten erstellen
React-Komponenten mit responsiven Layouts erstellen oder anpassen, die sich nahtlos an jede Bildschirmgröße anpassen.
Tailwind-Responsive-Patterns implementieren
Tailwind-CSS-Responsive-Utilities und Breakpoints anwenden, um Weboberflächen mit Mobile-First-Ansatz zu gestalten.
Touch-Interaktionen optimieren
Touchfreundliche Oberflächen mit passenden Größen, Abständen und interaktiven Elementen für mobile Nutzer gestalten.
Tente Estes Prompts
Erstelle eine responsive Card-Komponente, die auf Mobilgeräten, Tablets und Desktop-Bildschirmen korrekt angezeigt wird.
Baue ein responsives Navigationsmenü, das auf Mobilgeräten ein Hamburger-Menü und auf dem Desktop horizontale Links zeigt.
Erstelle eine responsive Bildverarbeitung, die sich an unterschiedliche Bildschirmgrößen und Auflösungen anpasst.
Baue ein responsives Dashboard-Layout mit Grid, das auf Mobilgeräten 1 Spalte, auf Tablets 2 und auf dem Desktop 4 zeigt.
Melhores Práticas
- Mit mobilen Styles starten und Breakpoints für größere Bildschirme mit einem min-width-Ansatz hinzufügen
- Relative Einheiten (rem, em) für Größen verwenden, um Nutzer-Schriftpräferenzen und Skalierung zu respektieren
- Sicherstellen, dass alle interaktiven Elemente mindestens 44x44px Tap-Targets für Touch-Barrierefreiheit haben
Evitar
- Feste Pixelbreiten statt fluider Prozentsätze oder max-width-Beschränkungen verwenden
- Inhalte auf Mobilgeräten ausblenden, statt sie für kleinere Bildschirme anzupassen
- Vergessen, Tap-Targets und Abstände interaktiver Elemente auf echten Geräten zu testen