菜单
Designs user experiences and interfaces grounded in research. Use when creating user journeys, wireframes, prototypes, or improving usability. Use for information architecture, interaction design, accessibility audits, design system creation, and developer handoff.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/oakoss/agent-skills --skill ux-designer命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Self-hosted TypeScript auth framework with social auth, 2FA, passkeys, organizations, RBAC, and 15+ plugins. Supports Drizzle/Prisma/Kysely adapters. Self-hosted alternative to Clerk/Auth.js. Use when: configuring auth, adding plugins, social OAuth, multi-tenant SaaS, organizations with teams and RBAC, two-factor authentication (TOTP/OTP/backup codes), email verification, password reset flows, session management, rate limiting, CSRF and cookie security, Expo/mobile, D1 adapter errors, TanStack Start integration, additionalFields bugs, admin plugin, migrating from NextAuth, migrating from Clerk, migrating from Supabase Auth, or troubleshooting auth issues.
Create agent skills following the Agent Skills open standard. Use when building new skills for Claude Code, Cursor, Gemini CLI, or other agents. Use for skill structure, SKILL.md authoring, frontmatter configuration, progressive disclosure, reference files, validation, and distribution.
Infrastructure as code with OpenTofu (open-source Terraform fork) and Pulumi. Covers OpenTofu HCL syntax, providers, resources, data sources, modules, state management with remote backends, workspaces, importing existing infrastructure, plan/apply workflow, variable management, output values, provisioners, and state encryption (OpenTofu-exclusive). Includes Pulumi TypeScript/Python SDKs, stack management, component resources, config/secrets, state backends, policy as code, and automation API. Common patterns for multi-environment setups, module composition, CI/CD integration, drift detection, and secret management. Use when writing or reviewing HCL configurations, managing cloud infrastructure state, migrating from Terraform to OpenTofu, building Pulumi programs in TypeScript or Python, setting up multi-environment IaC pipelines, or implementing state encryption.
正在显示 SKILL.md
基于 SOC 职业分类
| name | ux-designer |
| description | Designs user experiences and interfaces grounded in research. Use when creating user journeys, wireframes, prototypes, or improving usability. Use for information architecture, interaction design, accessibility audits, design system creation, and developer handoff. |
| license | MIT |
| metadata | {"author":"oakoss","version":"1.0"} |
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.
| 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 |
| 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 |
| 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 |
Task agent to plan card sorting, tree testing, and usability test sessionsExplore agent to verify WCAG 2.2 AA compliance across all screens using automated toolsPlan agent to define color scales, typography hierarchy, spacing grid, and component library structure