Communitygithub.com

UI/UX Pro Max

Verwende diesen Skill immer für UI- und UX-Richtung, Design-System-Entscheidungen, Landing Pages, Dashboards, Komponenten-Stil oder stack-spezifische Frontend-Implementierung in React, Next.js, Remix, Svelte, SvelteKit, Astro, Vue, Nuxt, Expo Router, React Native, Flutter, SwiftUI, Jetpack Compose und shadcn.

Was ist UX Pro Max?

Der Skill 'UI/UX Pro Max' wandelt vage UI-Anfragen in ein durchdachtes Design-System und stack-spezifische Implementierungsrichtlinien um. Er unterstützt 16 gängige Frontend-Stack wie React, Next.js, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose und viele mehr. Der Workflow umfasst die Klassifizierung der UI-Aufgabe, die Auswahl des richtigen Stacks über eine Routing-Datei, die Generierung eines Design-Systems sowie das Laden stack-spezifischer Leitfäden. Abschließend wird das Ergebnis anhand einer Checkliste auf Qualität geprüft. Der Skill betont Zugänglichkeit, Reaktionsfähigkeit und Produktionsreife – er vermeidet generische KI-Ausgaben und orientiert sich am tatsächlichen Produktkontext.

Funktioniert mit~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/Anhvu1107/all-agent-skill/tree/HEAD/.agent/skills/ui-ux-pro-max
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Was macht UX Pro Max?

Selektive Leseregel

Beginne mit:

  • references/usage-routing.md
  • references/quality-checklist.md

Lade dann nur die vererbten Dokumente, Skripte, Assets oder Beispiele, die zur tatsächlichen Aufgabe des Benutzers passen.

Selektive Leseregel

Beginne mit:

  • references/senior-master-standard.md
  • references/stack-routing.md
  • references/design-review-checklist.md

Verwende zuerst references/stack-routing.md, um die relevanteste Stack-Datendatei auszuwählen und irrelevante Framework-Anleitungen zu vermeiden.

Zweck

Wandle vage UI-Anfragen in ein durchdachtes Design-System plus Implementierungsrichtlinien um, die zum tatsächlichen Frontend-Stack passen.

Verwende diesen Skill, wenn

  • der Benutzer nach einer Seite, Komponente, einem Dashboard, einer Landing Page, einem Redesign, einer Überarbeitung, einem Design-System oder einer visuellen Frontend-Richtung fragt
  • die Aufgabe Typografie, Farbe, Abstände, Hierarchie, Bewegung, Barrierefreiheit oder stack-spezifische UI-Implementierung umfasst
  • du generische, KI-typische Frontend-Ausgaben vermeiden und dennoch etwas Praktisches liefern möchtest

Datenabdeckung

Dieser Skill enthält jetzt kuratierte, durchsuchbare Anleitungen für 16 Stacks:

  • html-tailwind
  • react
  • nextjs
  • remix
  • astro
  • vue
  • nuxtjs
  • nuxt-ui
  • svelte
  • sveltekit
  • shadcn
  • expo-router
  • react-native
  • flutter
  • swiftui
  • jetpack-compose

Arbeitsablauf

  1. Klassifiziere die UI-Aufgabe.
    • Landing Page, Dashboard, App-Shell, Feature-Oberfläche, Komponenten-System oder Redesign
  2. Wähle den Stack.
    • Verwende references/stack-routing.md, wenn der Stack impliziert, aber nicht benannt ist.
  3. Generiere das Design-System.
    • Führe das gebündelte Suchwerkzeug mit --design-system aus.
  4. Lade die stack-spezifischen Richtlinien.
    • Führe eine Stacksuche für das Framework und den Produkttyp durch.
  5. Überprüfe vor der Fertigstellung.
    • Verwende references/design-review-checklist.md.

Befehle

Vom Repository-Stammverzeichnis aus:

python .agent/skills/ui-ux-pro-max/scripts/search.py "b2b analytics dashboard" --design-system -p "Northstar"
python .agent/skills/ui-ux-pro-max/scripts/search.py "dashboard tables filters" --stack remix
python .agent/skills/ui-ux-pro-max/scripts/search.py "routing navigation optimistic forms" --stack sveltekit

Wenn du dich bereits im Skill-Ordner befindest, verwende python scripts/search.py ....

Regeln

  • Standardmäßig den tatsächlichen Produktkontext verwenden, nicht den gerade angesagten Stil.
  • Die Stack-Richtlinien an das verwendete Framework anpassen, bevor eigene Muster erfunden werden.
  • Zugängliche, responsive, produktionsreife UI bevorzugen gegenüber hübschen, aber fragilen Demos.
  • Falls du in einem bestehenden Design-System arbeitest, bestehende Muster beibehalten, bevor eine neue Richtung eingeführt wird.

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches 007: Security audit, hardening, threat modeling (STRIDE/PASTA), Red/Blue Team, OWASP checks, code review, incident response, and infrastructure security for any project.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Agentfolio: Skill for discovering and researching autonomous AI agents, tools, and ecosystems using the AgentFolio directory.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Animejs Animation: Advanced JavaScript animation library skill for creating complex, high-performance web animations.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Astropy: Astropy is the core Python package for astronomy, providing essential functionality for astronomical research and data analysis.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Astro: Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Emotional ARC Designer: One sentence - what this skill does and when to invoke it

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Fixing Motion Performance: Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches I18n Localization: Internationalization and localization patterns.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Interactive Portfolio: Expert in building portfolios that actually land jobs and clients - not just showing work, but creating memorable experiences.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches JQ: Expert jq usage for JSON querying, filtering, transformation, and pipeline integration.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Landing Page Generator: Generates high-converting Next.js/React landing pages with Tailwind CSS.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches LEX: Centralized ''Truth Engine'' for cross-jurisdictional legal context (US, EU, CA) and contract scaffolding.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Magic Animator: AI-powered animation tool for creating motion in logos, UI, icons, and social media assets.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Makepad Animation: CRITICAL: Use for Makepad animation system.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Nextjs APP Router Patterns: Comprehensive patterns for Next.js 14+ App Router architecture, Server Components, and modern full-stack React development.

Anhvu1107/all-agent-skill

ALWAYS use this when the user mentions Nextjs Best Practices, asks to build, debug, review, document, automate, test, configure, migrate, or make decisions in this domain, or the task clearly depends on Nextjs Best Practices; scope: Next.js App Router principles. Apply the bundled workflow, references, scripts, Senior Master standard, and Codex strict review gate before final output.

Anhvu1107/all-agent-skill

description: ALWAYS use this when the work is specifically about modern Next.js or React architecture, data flow, rendering strategy, routing, or performance-sensitive frontend behavior.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches Nextjs Supabase Auth: Expert integration of Supabase Auth with Next.js App Router

Anhvu1107/all-agent-skill

ALWAYS use this when the task involves reading, extracting, splitting, merging, rotating, creating, validating, OCR-ing, form-filling, or otherwise producing or modifying PDF files.

Anhvu1107/all-agent-skill

ALWAYS use this when the request matches React Nextjs Development: React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community