ux-antipatterns
Use when reviewing, building, or refactoring frontend UI — components, pages, forms, or interactive flows. Triggers on code review, pull requests, and new feature implementation involving user-facing interfaces.
Full skill instructions
Scan frontend code for patterns that cause user frustration.
Before checking individual rules, internalize these. They are the "why" behind every item below.
| # | Axiom | One-liner |
|---|---|---|
| 1 | Acknowledge every action | Every user action must produce visible feedback within 100ms, even if the result takes seconds. |
| 2 | Never destroy user input | Not on error, not on navigation, not on timeout, not on refresh. |
| 3 | State survives the unexpected | Refresh, double-clicks or double submits, network loss — code must handle edge cases. |
| 4 | Most recent intent wins | Stale responses must never overwrite a newer user action. |
| 5 | Explain every constraint | If it's disabled, say why. If it failed, say how to fix it. If it succeeded, say what happened. |
| 6 | Don't fight the platform | Browser conventions, OS gestures, native controls, and accessibility APIs encode billions of hours of UX research. |
| # | Category | User Harm |
|---|---|---|
| 1 | Layout Stability | Click target moves; wrong thing clicked. |
| 2 | Feedback & Responsiveness | Action feels ignored; user retries, waits, or loses trust that the system is working. |
| 3 | Error Handling & Recovery | User is stuck with no way forward; input destroyed; problem unsolvable without guessing. |
| 4 | Forms & Input Interference | Platform fights the user's typing; data mangled, basic editing broken. |
| 5 | Focus | User is typing and the UI yanks them elsewhere. |
| 6 | Notifications, Interruptions & Dialogs | User's flow broken; attention taxed by noise; forced to parse ambiguous choices under pressure. |
| 7 | Navigation, Routing & State Persistence | User can't go back; context evaporates on refresh or redirect. |
| 8 | Scroll & Viewport | Content unreachable or unstable; user fights the interface to see what they came for. |
| 9 | Timing, Debounce & Race Conditions | Actions fire twice, responses arrive stale, sessions expire mid-task; system behaves unpredictably under normal use. |
| 10 | Accessibility as UX | Entire interaction modes broken — keyboard users can't navigate, touch users locked out. |
| 11 | Visual Layering & Rendering | UI elements overlap, clip, or hide each other; controls become unreachable. |
| 12 | Mobile & Viewport-Specific | Keyboard covers input, layout jumps on scroll, tap targets unresponsive; basic mobile interaction degraded. |
| 13 | Cumulative Decay & Long-Term UX | App degrades over time; preferences lost, performance rots, stale experiments create inconsistencies. |
| User complaint / code smell | Category |
|---|---|
| "Button does nothing when I click it" | 2. Feedback & Responsiveness |
| "I clicked the wrong thing — it moved" | 1. Layout Stability |
| "I lost my form data" | 4. Forms & Input Interference |
| "It says 'Something went wrong' with no explanation" | 3. Error Handling & Recovery |
| "The page jumped while I was typing" | 5. Focus |
| "I got the same notification 5 times" | 6. Notifications & Dialogs |
| "I logged in and it forgot where I was going" | 7. Navigation & State Persistence |
| "I scrolled back and lost my place" | 8. Scroll & Viewport |
| "My order was placed twice" | 9. Timing & Race Conditions |
| "I was filling out a form and it logged me out" | 9. Timing & Race Conditions |
| "I clicked delete and it just... deleted it" | 6. Notifications & Dialogs |
| "It's been loading for 2 minutes with no progress bar" | 2. Feedback & Responsiveness |
| "I can't use this with my keyboard" | 10. Accessibility as UX |
| "The dropdown is hidden behind the modal" | 11. Visual Layering |
| "The keyboard covers the input on my phone" | 12. Mobile & Viewport-Specific |
| "The app gets slower over time" | 13. Cumulative Decay |
key prop remounts, Next.js loading states, or SvelteKit form actions may handle anti-patterns at the framework level. Understand the framework before flagging.
Comprehensive DevOps and deployment workflow that orchestrates infrastructure automation, CI/CD pipelines, container orchestration, and cloud deployment. Handles everything from infrastructure as code and pipeline setup to monitoring, scaling, and disaster recovery.
Integrate avnu SDK for Starknet DeFi: token swaps with best-price routing, DCA recurring buys, native staking, gasless transactions via paymaster, and market data. Use when building Starknet trading, DEX aggregation, or DeFi automation features.
发布内容和文章到 X (Twitter)。支持带图片的普通推文和 X Articles（长文）。使用真实的 Chrome 和 CDP 来绕过自动化检测。
Master orchestrator for generating Ralph Wiggum-compatible prompts. Analyzes task requirements and routes to appropriate generator (single-task, multi-task, project, or research). Use when you need to create any Ralph loop prompt and want automatic selection of the right generator.
Use when the user asks to compare branches, analyze git diffs, review changes between branches, update specifications based on code changes, or analyze what changed. Triggers on keywords like "compare branches", "git diff", "what changed", "branch comparison", "code changes", "spec update".
Build high-performance FastAPI applications with async routes, validation, dependency injection, security, and automatic API documentation. Use when developing modern Python APIs with async support, automatic OpenAPI documentation, and high performance requirements.
Enables Claude to manage Zendesk Chat conversations, support tickets, and customer service operations
Mine transcripts for knowledge - decisions, learnings, failures, patterns. Triggers: "forge insights", "mine transcripts", "extract knowledge".
Track product analytics and user behavior with Mixpanel's event-based platform.
OCPP protocol reference for EV charging infrastructure development. Covers OCPP 2.0.1 and OCPP 1.6J. Use when working with OCPP messages, charging station code, CSMS/Central System backends, smart charging, transaction handling, or EV charging protocols. Activates on keywords: OCPP, charging stat...
Gather scattered ideas into organized GitHub issues. The bee collects pollen from every flower, checks if the hive already has it, and carefully deposits new work in the comb for later. Never edits code—only organizes the work ahead. Use when creating issues from TODOs or planning work.
Comprehensive best practices for React Native and Expo applications. Contains rules across multiple categories covering performance, animations, UI patterns, and platform-specific optimizations.
Generate, edit, and beat-sync AI video with leading models in one workspace.
The world's fastest calendar for remote work
Transform Your Design with AI Designer by ImgCreator.ai
Revolutionizing Video Production with AI-Powered Creativity
Extend an image past the frame and let AI fill the new aspect ratio.
Discover your celebrity doppelgänger with StarByFace!
ChainClarity explains 700+ crypto whitepapers in plain English, with layered summaries, comparisons, research tools, alerts, and a $4.99 Pro plan.
Opus.ai: Revolutionize Your Web Experience