Animierte ShadCN-Oberflächen erstellen
Teams benötigen konsistente UI-Muster, ohne gängige Animationen immer wieder neu zu erstellen. Dieser Skill bietet ShadCN- und Framer Motion-Beispiele für Cards, Listen, Dialoge, Übergänge und Ladezustände.
Kopieren Sie diese Anfrage in Ihren Agent. Sie enthält die maßgebliche Skill-Seite und das Manifest.
Review the Skillstore skill "shadcn-framer" from https://skillstore.io/skills/barnhardt-enterprises-inc-shadcn-framer.md and its manifest at https://skillstore.io/api/skills/barnhardt-enterprises-inc-shadcn-framer/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Ihr Agent sollte weiterhin seinen Plan anzeigen und alle von der Sicherheitsrichtlinie verlangten Bestätigungen anfordern.
Verwenden Sie diese Links, wenn ein KI-Agent, Crawler oder Skript sauberen Kontext benötigt, statt die vollständige Seite zu lesen.
„shadcn-framer“ wird verwendet. Animation zu einer Profil-Card hinzufügen.
Erwartetes Ergebnis:
„shadcn-framer“ wird verwendet. Eine animierte Liste für Benachrichtigungen erstellen.
Erwartetes Ergebnis:
„shadcn-framer“ wird verwendet. Einen Ladezustand verbessern.
Erwartetes Ergebnis:
The static analyzer flagged Markdown code fences and a JSX template literal as Ruby shell backtick execution. Review of SKILL.md found setup notes and UI component examples only, with no hidden execution logic, prompt injection, credential access, or data exfiltration intent.
Teile den versionierten Bewertungsbericht, das neutrale Badge, die Einbettungskarte und Zitate. Skillstore berichtet Nachweise, ohne zu entscheiden, ob dieser Skill sicher ist.
https://skillstore.io/skills/barnhardt-enterprises-inc-shadcn-framer/audits/10?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/barnhardt-enterprises-inc-shadcn-framer?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/barnhardt-enterprises-inc-shadcn-framer?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/barnhardt-enterprises-inc-shadcn-framer/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/barnhardt-enterprises-inc-shadcn-framer.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Barnhardt-Enterprises-Inc. (2026). shadcn-framer security audit report (audit version 10) [Author version unspecified]. Skillstore. https://skillstore.io/skills/barnhardt-enterprises-inc-shadcn-framer/audits/10@techreport{barnhardt-enterprises-inc-barnhardt-enterprises-inc-shadcn-framer-2026,
author = {Barnhardt-Enterprises-Inc},
title = {shadcn-framer security audit report (audit version 10)},
institution = {Skillstore},
year = {2026},
number = {10},
url = {https://skillstore.io/skills/barnhardt-enterprises-inc-shadcn-framer/audits/10},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "shadcn-framer security audit report (audit version 10)"
version: "unspecified"
type: report
authors:
- name: "Barnhardt-Enterprises-Inc"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/barnhardt-enterprises-inc-shadcn-framer/audits/10"
identifiers:
- type: other
value: "skillstore:barnhardt-enterprises-inc-shadcn-framer:audit:10"
description: "Skillstore immutable audit report identifier"
Erweitere bestehende ShadCN Cards, Buttons und Dialoge mit praktischen Framer Motion-Mustern.
Wandle einfache Bewegungsanforderungen in React-Komponentenmuster für Listen, Dialoge und Seitenübergänge um.
Erstelle glaubwürdige animierte Oberflächenzustände schnell in der frühen Produktentwicklung.
Zeige mir, wie ich ShadCN UI initialisiere und Button-, Card- und Dialog-Komponenten für meine React-App hinzufüge.
Nutze diesen Skill, um eine ShadCN Card mit sanftem Fade-in und Hover-Effekt für eine Profilzusammenfassung zu planen.
Erstelle ein animiertes Listenmuster mit Framer Motion variants, gestaffelten Elementen und stabilen keys für diese Elemente: [describe items].
Refaktorisiere dieses Modal zu einem ShadCN Dialog mit AnimatePresence-Eingangs- und Ausgangsanimationen, während das Barrierefreiheitsverhalten erhalten bleibt: [paste component].
Lizenz
MIT
Skillstore-Revision
r1
Versionshinweis
Der Autor hat keine Version angegeben.
Repository
https://github.com/Barnhardt-Enterprises-Inc/quetrex-claude/tree/main/skills/shadcn-framerRef.
0519034dad657fb1f7706e0550e962beeda73fdf
Aktualität der Wartung
21.7.2026
Nutzung
9 Downloads · 245 Aufrufe
Dateistruktur
📄 SKILL.md
Visuelles Frontend-Design verbessern
Generische Frontend-Bildschirme sehen oft ähnlich aus und verfehlen den Markenfokus. Dieser Skill leitet Entscheidungen zu Typografie, Farbe, Bewegung und Tiefe für klarere Interfaces.
Workflows für testgetriebene Entwicklung durchsetzen
Teams überspringen Tests häufig oder schreiben sie erst nach der Implementierung. Dieser Skill führt Claude, Codex und Claude Code durch eine Test-first-Umsetzung.
Code auf Sicherheitsrisiken prüfen
Sicherheitssensibler Code wird leicht mit versteckten Schwachstellen in Authentifizierung, Eingabeverarbeitung und Secrets ausgeliefert. Diese Skill stellt Claude, Codex und Claude Code strukturierte Sicherheitsreferenzen und Scanner-Anleitungen für sicherere Reviews bereit.
Striktes TypeScript sicher schreiben
TypeScript-Projekte können in unsichere Muster abrutschen, die Laufzeitfehler verbergen. Diese Skill leitet Claude, Codex und Claude Code zu strengerer Typverwendung, klareren Fehlern und sichererem Narrowing an.
AI-Coding-Quality-Gates durchsetzen
KI-gestütztes Programmieren kann Tests, Sicherheitsprüfungen und Release-Kriterien übersehen. Diese Skill gibt Claude, Codex und Claude Code eine gestufte Checkliste für eine sicherere Auslieferung.
Barrierefreie ShadCN-UI-Komponenten erstellen
React-Teams benötigen konsistente ShadCN-Muster für Formulare, Dialoge, Tabellen und barrierefreie Steuerelemente. Diese Skill führt Claude, Codex und Claude Code zu Radix-Komponenten, Tailwind-Utilities und Validierungspraktiken.
Fullstack-Apps mit Senior-Anleitung erstellen
von alirezarezvani
Fullstack-Projekte benötigen oft ein konsistentes Setup, Architekturentscheidungen und Qualitätsprüfungen. Dieser Skill bietet Skripte und Referenzen für Arbeiten mit React, Next.js, Node.js, GraphQL und PostgreSQL.
React View Transitions implementieren
von vercel-labs
React View Transitions lassen sich leicht falsch platzieren, was zu unbemerkten oder störenden Animationen führt. Dieser Skill unterstützt Entscheidungen zu Animationen für Routen, Suspense, Listen und Shared Elements.
Produktionsreife Frontend-Funktionen entwickeln
von davila7
Frontend-Teams benötigen projektübergreifend einheitliche Leitlinien für React und Next.js. Dieser Skill bietet Referenz-Workflows, Qualitätspraktiken und Hilfsskripte für die Frontend-Analyse.
Next.js-Performance optimieren
von Atman36
Next.js-Anwendungen können durch große Bundles, schwaches Caching und nicht optimierte Medien langsam werden. Dieser Skill führt Claude, Codex und Claude Code durch gezielte Performance-Verbesserungen für Produktions-Apps.
React- und Next.js-Performance optimieren
von vercel-labs
React- und Next.js-Apps verlieren oft durch Waterfalls, große Bundles und vermeidbare Re-Renderings an Geschwindigkeit. Diese Skill gibt Agenten konkrete Regeln für sicherere, performanceorientierte Änderungen.
shadcn/ui-Oberflächen in Next.js erstellen
von Asmayaseen
React-Teams benötigen konsistente UI-Muster, die mit modernem Next.js funktionieren. Dieser Skill bietet Anleitungen zur Einrichtung von shadcn/ui, Komponentenbeispiele, Formularvalidierung, Tabellen, Sidebars und Muster für den Dunkelmodus.