Baseline Ui
Skill Verifiziert AktivValidiert Animationsdauern, erzwingt die Typografieskala, prüft die Barrierefreiheit von Komponenten und verhindert Anti-Patterns im Layout von Tailwind CSS-Projekten. Verwenden Sie dies beim Erstellen von UI-Komponenten, beim Überprüfen von CSS-Dienstprogrammen, beim Stylen von React-Ansichten oder beim Erzwingen von Designkonsistenz.
Um UI-Inkonsistenzen zu verhindern und qualitativ hochwertige, zugängliche Schnittstellen sicherzustellen, indem eine strenge Reihe von Design- und Entwicklungsregeln in Tailwind CSS-Projekten durchgesetzt wird.
Funktionen
- Validiert Animationsdauern und -eigenschaften
- Erzwingt Typografieskala und Rendering
- Prüft Komponenten-Barrierefreiheit und Barrierefreiheits-Primitive
- Verhindert gängige Layout-Anti-Patterns
- Stellt die Einhaltung von Tailwind CSS-Standardwerten und Best Practices sicher
Anwendungsfälle
- Anwenden von UI-Einschränkungen auf neue UI-Entwicklungsaufgaben
- Überprüfen von CSS-Dienstprogrammen und Komponenten-Code auf Compliance
- Stylen von React-Ansichten mit einem konsistenten Designsystem
- Durchsetzen von Designkonsistenz in einem Projekt
Nicht-Ziele
- Durchführung allgemeiner Code-Linting-Aufgaben außerhalb von UI-Best-Practices
- Verwaltung von Projekt-Abhängigkeiten oder Build-Prozessen
- Generieren von UI-Komponenten von Grund auf ohne Benutzereingabe
Installation
npx skills add ibelick/ui-skillsFührt das Vercel skills CLI (skills.sh) via npx aus — benötigt Node.js lokal und mindestens einen installierten skills-kompatiblen Agent (Claude Code, Cursor, Codex, …). Setzt voraus, dass das Repo dem agentskills.io-Format folgt.
Qualitätspunktzahl
VerifiziertVertrauenssignale
Ähnliche Erweiterungen
Color Audit
100Color-only audit to extract, evaluate, and recommend improvements for the project's color system
Epic Design
99Build immersive, cinematic 2.5D interactive websites using scroll storytelling, parallax depth, text animations, and premium scroll effects — no WebGL required. Use this skill for any web design task: landing pages, product sites, hero sections, scroll animations, parallax, sticky sections, section overlaps, floating products between sections, clip-path reveals, text that flies in from sides, words that light up on scroll, curtain drops, iris opens, card stacks, bleed typography, and any site that should feel cinematic or premium. Trigger on phrases like "make it feel alive", "Apple-style animation", "sections that overlap", "product rises between sections", "immersive", "scrollytelling", or any scroll-driven visual effect. Covers 45+ techniques across 8 categories. Always inspects, judges, and plans assets before coding. Use aggressively for ANY web design task.
Android Design Guidelines
100Material Design 3- und Android-Plattformrichtlinien. Verwenden Sie dies beim Erstellen von Android-Apps mit Jetpack Compose oder XML-Layouts, bei der Implementierung von Material You, Navigation oder Barrierefreiheit. Löst bei Aufgaben aus, die sich auf Android UI, Compose-Komponenten, dynamische Farben oder die Einhaltung von Material Design beziehen.
Setup Tailwind Typescript
100Configure Tailwind CSS with TypeScript in a Next.js or React project. Covers installation, configuration, custom theme extensions, component patterns, and type-safe styling utilities. Use when adding Tailwind CSS to an existing TypeScript project, customizing the Tailwind theme for a project's design system, setting up type-safe component styling patterns, or configuring Tailwind plugins and extensions.
Review Ux Ui
99Review user experience and interface design using Nielsen's heuristics, WCAG 2.1 accessibility guidelines, keyboard and screen reader audit, user flow analysis, cognitive load assessment, and form usability evaluation. Use when conducting a usability review before release, assessing WCAG 2.1 accessibility compliance, evaluating user flows for efficiency, reviewing form design, or performing a heuristic evaluation of an existing interface.
Impeccable
99Verwenden Sie dies, wenn der Benutzer ein Frontend-Interface entwerfen, neu gestalten, formen, kritisieren, prüfen, polieren, klären, destillieren, härten, optimieren, anpassen, animieren, einfärben, extrahieren oder anderweitig verbessern möchte. Deckt Websites, Landingpages, Dashboards, Produkt-UI, App-Shells, Komponenten, Formulare, Einstellungen, Onboarding und leere Zustände ab. Umfasst UX-Bewertung, visuelle Hierarchie, Informationsarchitektur, kognitive Last, Barrierefreiheit, Leistung, responsives Verhalten, Theming, Anti-Patterns, Typografie, Schriften, Abstände, Layout, Ausrichtung, Farbe, Bewegung, Mikrointeraktionen, UX-Texte, Fehlerzustände, Randfälle, i18n und wiederverwendbare Designsysteme oder Tokens. Verwenden Sie es auch für langweilige Designs, die mutiger oder ansprechender werden sollen, laute Designs, die leiser werden sollen, Live-Browser-Iterationen an UI-Elementen oder ambitionierte visuelle Effekte, die technisch außergewöhnlich wirken sollen. Nicht für reine Backend- oder Nicht-UI-Aufgaben.