Globales Ranking · von 601 Skills
ux-designer AI Agent Skill
Quellcode ansehen: oakoss/agent-skills
SafeInstallation
npx skills add oakoss/agent-skills --skill ux-designer 37
Installationen
UX Designer
Overview
Designs intuitive, accessible user experiences grounded in research rather than personal preference. Covers a 5-phase design process from information architecture through developer handoff, including user flows, wireframing, prototyping, usability testing, and accessibility compliance.
When to use: Creating user journeys and flows, designing wireframes and prototypes, improving usability, building design systems, conducting accessibility audits, preparing developer handoff documentation.
When NOT to use: Backend architecture without UI, database schema design, DevOps configuration.
Quick Reference
| Phase | Goal | Key Deliverables |
|---|---|---|
| Information Architecture | Organize content and functionality | Site map, navigation design, labeling taxonomy |
| User Flows | Map paths users take to complete tasks | Flow diagrams, happy path, error states, edge cases |
| Wireframing | Create low-fidelity layouts | Lo-fi/mid-fi/hi-fi wireframes, layout patterns |
| Prototyping and Testing | Create interactive prototypes and test | Clickable prototype, usability test results |
| UI Design and Handoff | Production-ready designs | Design specs, component states, responsive layouts |
Key UX Principles
- Consistency -- use familiar patterns; do not reinvent standard UI elements
- Feedback -- confirm user actions with success messages and loading states
- Error Prevention -- design to prevent errors, not just handle them
- Recognition Over Recall -- show options rather than requiring memory
- Flexibility -- support both novice and expert users with shortcuts and defaults
Design Patterns Summary
| Pattern | Key Rules |
|---|---|
| Forms | Label above field, inline validation, one column, group related fields |
| Navigation | Current page highlighted, breadcrumbs for depth, max 7 top nav items |
| Empty States | Explain why empty, provide clear next action, use illustration or icon |
| Loading States | Skeleton screens over spinners, progress indicators, optimistic UI |
Common Mistakes
| Mistake | Correct Pattern |
|---|---|
| Designing based on personal preference instead of user research | Ground every design decision in user research, card sorting, or usability test data |
| Skipping empty, loading, and error state designs | Design all states for every screen: default, loading, empty, error, and success |
| Using placeholder text as form labels | Place labels above fields; placeholders disappear on input and fail accessibility |
| Ignoring keyboard navigation and focus states | Test Tab order, visible focus indicators, and ARIA labels for all interactive elements |
| Designing a single layout for all screen sizes | Create separate responsive layouts for mobile, tablet, and desktop breakpoints |
| Not testing with real users before development | Conduct usability testing with 5+ participants on interactive prototypes |
Delegation
- User research and testing: Use
Taskagent to plan card sorting, tree testing, and usability test sessions - Accessibility audit: Use
Exploreagent to verify WCAG 2.2 AA compliance across all screens using automated tools - Design system architecture: Use
Planagent to define color scales, typography hierarchy, spacing grid, and component library structure
References
- Design Process -- 5-phase UX process, information architecture, user flows, wireframing, prototyping, and handoff
- Visual Design Fundamentals -- color theory, typography scales, spacing systems, visual hierarchy, dark mode, and responsive patterns
- Accessibility Guide -- WCAG 2.2 AA compliance, keyboard navigation, screen readers, color contrast, and audit checklists
- Tools and Resources -- design tools, prototyping platforms, testing services, and accessibility checkers
Installationen
Sicherheitsprüfung
Quellcode ansehen
oakoss/agent-skills
Mehr aus dieser Quelle
EU-Hosted Inference API Power your AI Agents with
the best open-source models.
Drop-in OpenAI-compatible API. No data leaves Europe.
Explore Inference APIGLM
GLM 5
$1.00 / $3.20
per M tokens
Kimi
Kimi K2.5
$0.60 / $2.80
per M tokens
MiniMax
MiniMax M2.5
$0.30 / $1.20
per M tokens
Qwen
Qwen3.5 122B
$0.40 / $3.00
per M tokens
So verwenden Sie diesen Skill
Install ux-designer by running npx skills add oakoss/agent-skills --skill ux-designer in your project directory. Führen Sie den obigen Installationsbefehl in Ihrem Projektverzeichnis aus. Die Skill-Datei wird von GitHub heruntergeladen und in Ihrem Projekt platziert.
Keine Konfiguration erforderlich. Ihr KI-Agent (Claude Code, Cursor, Windsurf usw.) erkennt installierte Skills automatisch und nutzt sie als Kontext bei der Code-Generierung.
Der Skill verbessert das Verständnis Ihres Agenten für ux-designer, und hilft ihm, etablierte Muster zu befolgen, häufige Fehler zu vermeiden und produktionsreifen Code zu erzeugen.
Was Sie erhalten
Skills sind Klartext-Anweisungsdateien — kein ausführbarer Code. Sie kodieren Expertenwissen über Frameworks, Sprachen oder Tools, das Ihr KI-Agent liest, um seine Ausgabe zu verbessern. Das bedeutet null Laufzeit-Overhead, keine Abhängigkeitskonflikte und volle Transparenz: Sie können jede Anweisung vor der Installation lesen und prüfen.
Kompatibilität
Dieser Skill funktioniert mit jedem KI-Coding-Agenten, der das skills.sh-Format unterstützt, einschließlich Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider und anderen Tools, die projektbezogene Kontextdateien lesen. Skills sind auf Transportebene framework-agnostisch — der Inhalt bestimmt, für welche Sprache oder welches Framework er gilt.
Made in Europe Chat with 100+ AI Models in one App.
Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.
