@ericrisco/rsc 3.3.1 → 3.5.0

package/skills/ux/upstream/UPSTREAM.json

@@ -0,0 +1,59 @@
+{
+  "ux-designer": {
+    "repo": "szilu/ux-designer-skill",
+    "path": ".",
+    "commit": "c869d32fd8df7bd7fcd1db68e93bd3e89eed5161",
+    "license": "MIT",
+    "copyright": "Copyright (c) 2026 Szilárd Hajba",
+    "note": "GUIDE.md is the upstream SKILL.md with its YAML front matter removed; every other file is copied unmodified.",
+    "files": {
+      "GUIDE.md": "7c0d77afe18cbe3bc25364fdf11e8752c6b100ca4e159ef9c43884db5f72d7dc",
+      "LICENSE": "311bce427930791e38cee5f4e81b83240e8ae2b57629e5fec57e1283769f0912",
+      "references/01-core-principles.md": "6df0640b7c438d1ffe83fa057d22030d7bc58569d97094871b441ded02cdea76",
+      "references/02-laws-of-ux.md": "95cad93c188503434764ceae97ce2fd31d1fbe7521ffd93107653e381d5c9c07",
+      "references/03-accessibility.md": "ad72653487f7a4bb194b86999ee12013aa47cd090a4380d4bf6eb2aec0584ac2",
+      "references/04-visual-design.md": "567fb260d75c70b2c295dfd36f3ed3115f50a0b098409ef24e98dc9202c6f694",
+      "references/05-information-architecture.md": "c4b552783851595166f6aa99cb3486c1b834303c541a35a5d6a82d4b25727425",
+      "references/06-interaction-design.md": "d113a969a2af0fc70765076591b5e7c75ab38088a54713d5a1b65ca13b31d669",
+      "references/07-forms-and-inputs.md": "1b23668b13c5953c35038ce30ff5e8bcbc06a29f7a559c53b7be9ddbe59c9d5a",
+      "references/08-mobile-ux.md": "b8ad95440a69e48540bf10f03d427942a7b53fdfaec28e89ebb5fe9933445909",
+      "references/09-ux-writing.md": "080d74e76827972459ba359456f291bfa014fcaf9fff0fc0e6c7780446eef575",
+      "references/10-user-research.md": "83c1a817a02aa977659bb3c0526db0747f320c204b3e24e33629939e1760544f",
+      "references/11-design-systems.md": "82c4fc83b6b28003d76ecb1b310eed274c6c34f87653e729f33950021e88b006",
+      "references/12a-presence-awareness.md": "46834ec1c85df71982c339ab57cec807d1f4ff1a30da124c80e0f1f7dc6fb65a",
+      "references/12b-conflict-resolution-sync.md": "341abb08b5edeeabdb46437bf041aac8a38d1d77f96aa71642843558888e74c9",
+      "references/13a-canvas-navigation.md": "33025d1b3b5af85ce96071190d83305b34d28093089104f20b4ddb05c45f892b",
+      "references/13b-canvas-objects-performance.md": "9fe50592d1b5e211f2f7f0a9e7e018032530b58421b914afcc977ffccd08dc45",
+      "references/14-ai-ux-patterns.md": "c229438a2e33be662732200089a2b495811a3c8716b7e1d8daa25a23ca3035ea",
+      "references/15-ethical-design.md": "cd9f45ca9955cd19c14a39cc0143265591daf0749d45f54245d5e5a57622543f",
+      "references/16-onboarding.md": "af766e664963847367140c25de25edd308ae8bea21dfa76b790f4f3ca06a60d8",
+      "references/17-notifications.md": "d1bd3d109d3f8a3d16d77149c12cba3bc7032b417c1eea7f279159a49a332265",
+      "references/18-data-visualization.md": "6b2cfdd8f26b8372e09affd06a1881b4e21c3eb87206a63f053c86a52844195b",
+      "references/19-search-ux.md": "0f54a38b36ff83a14d4d3823c99bb09672fc8cee82f78f4359d22a9594bfb600",
+      "references/20-emotional-design.md": "5e8a1eb86c8362b9647d1a08a6fbb1b6fd5308dd5dad8aa63deb8470cad8fda5",
+      "references/21-data-tables.md": "84613ad183fa8fdb68389e2f0cce9b62296be18683ee82b5c9c23fc1dc111225",
+      "references/22-performance-ux.md": "8f9cfdc92398bb33b00720ab9be6199b1ad542706017bb8bb18f5bd3cf12655c",
+      "references/23-internationalization.md": "cafe080ec744cd6bdf10d808bb8111fd9a3b8586351d0a374e30fff8dcbbf5d7",
+      "references/24-voice-and-multimodal.md": "056367b50b8e8deb8e0599792c576371c79e4a89e63bd0c324a6351336c1a5d5",
+      "references/25a-barcode-camera-scanning.md": "4818b00cefbde5d77c351706ba2303f94b2107a170b55bae173928a89d97b31f",
+      "references/25b-barcode-scanner-workflows.md": "2f5ee30906e4e56ed2af867c12c21586672ad3f95462634847b408b763feadeb",
+      "references/25c-barcode-display.md": "9c9c4d52b9537e44bac7457365f1e45b931f6a72699de39a3c04abfe604fc9f1"
+    }
+  },
+  "ux-usability-foundations": {
+    "repo": "hueyexe/frontend-agent-skills",
+    "path": "ux-usability-foundations",
+    "commit": "2841c079dd8a9c634882227194dc42e25227710d",
+    "license": "MIT",
+    "copyright": "Copyright (c) 2026 hueyexe",
+    "note": "GUIDE.md is the upstream SKILL.md with its YAML front matter removed; every other file is copied unmodified. LICENSE is the repository licence.",
+    "files": {
+      "GUIDE.md": "1eafbca92bcd8a23a4ded6d5eade8f0d6cfd6477831c2fff73c84635c149bcb2",
+      "LICENSE": "5701f83f101aae5c7d89a1d44087663bd13187c043f6f2b4dc9b7a5a883db034",
+      "references/anti-patterns.md": "007e85bee463f247f89e58e2cc8bb11e373399bfd4ba7cfb8005385ae807f1a8",
+      "references/checklists.md": "3eea35605918f471d1019502294e08c0e42f70c81d4a4c9e3849cb80573ff833",
+      "references/decision-prompts.md": "741090dda5b23732853ef6fafb19f3102d1f8bfe7022049c7bd4efefd3581713",
+      "references/principle-cards.md": "301e976e5accef00f999e03a2196031122d57a0346e120982f799be82d4f6994"
+    }
+  }
+}

package/skills/ux/upstream/ux-designer/GUIDE.md

@@ -0,0 +1,180 @@
+# UX Designer
+
+Use this skill for three jobs: **reviewing** an interface (a screenshot, a URL, or code), **building** UI, and **advising** on a design decision. You know the general UX canon already. This file gives you the workflows, the numbers, and the calls that are easy to get wrong. The reference files go deeper, so load only the ones the task needs (see the routing table).
+
+## Philosophy
+
+- **Calm over clever.** Motion, color, and density have to help the user understand something. Decoration that only impresses is noise.
+- **Judgment over polish.** Anyone can generate polished UI now, so the value is in correctness, research, and knowing what to leave out.
+- **AI as copilot, not autopilot.** AI assistance is optional, labeled, reversible, and the user stays in control.
+- **Adapt to real needs.** Avoid opaque or manipulative personalization.
+
+## Workflow: Reviewing or auditing a UI
+
+1. **Establish context.** Identify the users, their primary task, the platform, and any stated constraints (brand, design system, legal regime). If there's no context, assume a general audience and say so.
+2. **Look at the real thing.** Render it if you can: take a screenshot or open it in the browser. Walk through the primary task with the keyboard only, and run an automated checker (axe, Lighthouse) when a browser is available. Reading code alone misses contrast, overflow, focus order, and layout at other widths.
+3. **Check at the extremes.** Try 320px width, 200% zoom, a long translated string, empty data, huge data, a slow network, an error state, and `dir="rtl"` if the product is localized.
+4. **Report findings ranked by user impact**, not in checklist order:
+
+   ```
+   [Blocker|Major|Minor] <what is wrong> — <who it hurts and how>
+     Where: <screen/component or file:line>
+     Fix: <concrete change>   Ref: <heuristic / WCAG SC / reference file>
+   ```
+
+   A blocker stops a user from completing the task, or it's a legal accessibility failure. Cite WCAG success criteria by number (for example, 2.4.11 Focus Not Obscured). Skip praise padding. If a pass finds nothing serious, say that plainly.
+
+## Workflow: Building UI
+
+1. **Reuse before inventing.** Look for an existing design system, tokens, component library, and nearby screens. Match them, even where your own taste differs.
+2. **Design every state,** not only the happy path: empty, loading, partial, error, offline, permission-denied, and overflow (long names, 0/1/many items).
+3. **Semantics first.** Start from native elements (`<button>`, `<label>`, `<dialog>`, `<details>`, `<input type=…>`). Add ARIA only when no native element fits.
+4. **Verify by looking.** Render the result. Check it at mobile width, with the keyboard, and in dark mode if the product supports it. Fix what you see and check again.
+
+### Generated-UI defaults to avoid
+
+These are telltale marks of model-generated interfaces. Don't use them unless the brand calls for them:
+- Purple/indigo gradients, glassmorphism, and glow shadows used as default styling
+- Emoji standing in for icons, and decorative icons on every heading or list item
+- A card around everything, nested cards, and every section centered with the same padding
+- Hero sections, testimonials, and marketing filler inside app UI that doesn't need them
+- Lorem-ipsum-perfect sample data: use realistic lengths, names from several locales, and edge cases
+- Buttons that all carry equal visual weight, with no single primary action
+- Gray-on-gray low-contrast "minimal" text
+- Hover-only affordances with no touch or keyboard equivalent
+
+## Core rules
+
+**Visual.** Give each screen one dominant element. Body text is 16px or larger, with 1.4–1.6 line height and 50–75 characters per line. Text contrast is at least 4.5:1, or 3:1 for large text and UI component boundaries. Take all spacing from one 4px or 8px scale.
+
+**Interaction.** Show visible feedback within 100ms. Most UI transitions run 150–300ms, and only large or spatial motion goes up to 500ms. Honor `prefers-reduced-motion`. On mobile, put primary actions in the thumb zone. Never disable a button without saying why.
+
+**Forms.** Put labels above fields and never use placeholder-only labels. Validate on blur and re-validate on input once a field has shown an error. Show errors next to the field and summarize them at submit. Ask only for what you need. Mark whichever set of fields is the minority, required or optional.
+
+**Navigation.** The current location is always visible. Keep the top level scannable: about 5–7 items on desktop and 3–5 in a mobile bottom bar. Miller's 7±2 is a working-memory figure, not a menu rule. On desktop, don't hide primary navigation behind a hamburger.
+
+**Accessibility.** Everything is operable by keyboard, and focus is visible and never hidden behind sticky UI. Every control has an accessible name and role. Color is never the only signal. Images have meaningful alt text, or `alt=""` if they're decorative. Targets are at least 24×24 CSS px (WCAG 2.5.8 AA), with 44pt (iOS) or 48dp (Android) recommended on touch. Treat WCAG 2.2 AA as the legal target. WCAG 3 is still a draft.
+
+**Collaboration.** Show presence (avatars, cursors, selections), make sync and offline state visible, keep undo per client, and state permission levels plainly.
+
+**Canvas.** Zoom around the cursor, not the screen center. Snapping has a toggle. Provide a minimap for large boards, full keyboard navigation, and viewport culling.
+
+**AI.** Label AI content, attribute sources, and provide stop/cancel, edit/regenerate, feedback, and undo for any AI-applied change. Keep a human override.
+
+**Onboarding.** Guide the user to the first real value, not a tour. Make it skippable and never show it again once finished. Empty states give the next action.
+
+**Notifications.** Match visual severity to real severity. Ask for push permission in context, after the user has seen value. Give users per-channel control. Toasts auto-dismiss after 4–8s, except toasts that carry an action, which stay until dismissed (WCAG 2.2.1).
+
+**Ethics.** Accept and reject get equal prominence. Optional consent boxes start unchecked. Cancelling is as easy as signing up. No confirmshaming.
+
+**i18n.** Use logical CSS properties and verify the layout in `dir="rtl"`. Allow 30–40% text expansion and no fixed-width labels. Externalize all strings and keep text out of images. Format dates, numbers, and currency with `Intl`, and handle plurals with ICU rules. Language switchers use endonyms, not flags.
+
+## Decision trees
+
+### Modal vs. side panel vs. full page
+
+```
+Quick confirmation or 1-3 fields?                 → Modal
+Edit details while keeping context visible?
+  narrow content (form, properties, chat)         → Side panel
+  needs width                                     → Full-page overlay with back
+Multi-step: short steps → modal + stepper; long steps / needs reference → full page + stepper
+Creating a complex entity (document, project)?    → Full page
+```
+
+### Notification type
+
+```
+Blocking, must resolve now                        → Modal
+Urgent, non-blocking                              → Banner, persistent until dismissed
+Completed action: success/info                    → Toast, auto-dismiss 4-8s
+Completed action: warning/error or has action     → Toast, manual dismiss
+Background event, same context                    → Badge + inline indicator
+Background event, elsewhere                       → Nav badge (+ optional push)
+System status (maintenance, connectivity)         → Persistent banner
+```
+
+## Reference routing
+
+Load the file when the task touches its topic. Each file opens with a table of contents, so you can jump to the section you need.
+
+| Load when the task involves… | File |
+|---|---|
+| Heuristic evaluation, Nielsen's 10, Gestalt | [references/01-core-principles.md](references/01-core-principles.md) |
+| Fitts, Hick, Jakob, Tesler, peak-end, and similar laws | [references/02-laws-of-ux.md](references/02-laws-of-ux.md) |
+| WCAG 2.2 criteria, ARIA, EAA / legal compliance | [references/03-accessibility.md](references/03-accessibility.md) |
+| Typography, color, spacing, hierarchy, dark mode | [references/04-visual-design.md](references/04-visual-design.md) |
+| Navigation structure, sitemaps, card sorting | [references/05-information-architecture.md](references/05-information-architecture.md) |
+| Modals, tooltips, drag-and-drop, motion timing | [references/06-interaction-design.md](references/06-interaction-design.md) |
+| Form layout, validation, input types, errors | [references/07-forms-and-inputs.md](references/07-forms-and-inputs.md) |
+| Touch targets, gestures, responsive, mobile nav | [references/08-mobile-ux.md](references/08-mobile-ux.md) |
+| Microcopy, error messages, voice and tone | [references/09-ux-writing.md](references/09-ux-writing.md) |
+| Interviews, usability tests, surveys, metrics | [references/10-user-research.md](references/10-user-research.md) |
+| Tokens, component APIs, design system docs | [references/11-design-systems.md](references/11-design-systems.md) |
+| Live cursors, avatars, typing/presence indicators | [references/12a-presence-awareness.md](references/12a-presence-awareness.md) |
+| Conflicts, sync, offline, sharing, version history | [references/12b-conflict-resolution-sync.md](references/12b-conflict-resolution-sync.md) |
+| Canvas zoom, pan, selection, manipulation | [references/13a-canvas-navigation.md](references/13a-canvas-navigation.md) |
+| Canvas layers, snapping, LOD, rendering performance | [references/13b-canvas-objects-performance.md](references/13b-canvas-objects-performance.md) |
+| Chat UI, copilots, agents, generative UI | [references/14-ai-ux-patterns.md](references/14-ai-ux-patterns.md) |
+| Dark patterns, consent, DSA/GDPR UI rules | [references/15-ethical-design.md](references/15-ethical-design.md) |
+| First-run, activation, empty states, checklists | [references/16-onboarding.md](references/16-onboarding.md) |
+| Notification systems, push, toasts, preferences | [references/17-notifications.md](references/17-notifications.md) |
+| Charts, dashboards, accessible data viz | [references/18-data-visualization.md](references/18-data-visualization.md) |
+| Search, autocomplete, filters, zero results | [references/19-search-ux.md](references/19-search-ux.md) |
+| Delight, trust, tone, error recovery emotion | [references/20-emotional-design.md](references/20-emotional-design.md) |
+| Tables, sorting, pagination, bulk actions | [references/21-data-tables.md](references/21-data-tables.md) |
+| Loading, skeletons, optimistic updates, Core Web Vitals | [references/22-performance-ux.md](references/22-performance-ux.md) |
+| Localization, RTL, `Intl`, plurals, text expansion | [references/23-internationalization.md](references/23-internationalization.md) |
+| Voice, multimodal, cross-device input | [references/24-voice-and-multimodal.md](references/24-voice-and-multimodal.md) |
+| Camera barcode/QR scanning on phone or web, viewfinder, QR safety | [references/25a-barcode-camera-scanning.md](references/25a-barcode-camera-scanning.md) |
+| Scan-driven apps: warehouse, POS, healthcare, rugged or wedge scanners, GS1 | [references/25b-barcode-scanner-workflows.md](references/25b-barcode-scanner-workflows.md) |
+| Showing barcodes/QR: tickets, wallet passes, QR login, printed labels | [references/25c-barcode-display.md](references/25c-barcode-display.md) |
+
+## Reference values
+
+| Metric | Value | Source / note |
+|---|---|---|
+| Target size | ≥ 24×24 CSS px (AA); 44pt iOS / 48dp Android | WCAG 2.5.8; Apple HIG; Material |
+| Body text | ≥ 16px, line height 1.4–1.6 | WCAG 1.4.12 tests up to 1.5 |
+| Line length | 50–75 characters | |
+| Text contrast | 4.5:1 normal, 3:1 large (≥ 24px, or ≥ 18.66px bold) | WCAG 1.4.3 |
+| Non-text contrast | 3:1 (UI boundaries, focus rings, icons) | WCAG 1.4.11 |
+| Feedback latency | < 100ms feels instant; > 1s show a spinner; > 10s show progress with cancel | Nielsen response-time limits |
+| Transitions | 150–300ms typical, ≤ 500ms for large motion | Material motion |
+| Loading indicator delay | ~300ms before showing, to avoid flashes | |
+| Toast | 4–8s auto-dismiss (no actions) | |
+| Text expansion | 30–40% (DE/FI/RU), up to 200%+ for short strings | W3C i18n |
+| Working memory | ~4±1 chunks (Cowan); 7±2 (Miller) is dated | |
+| Canvas | cursor updates 50–100ms, 60fps pan/zoom, 2–8px snap threshold, 10%–4000% zoom | Figma-class tools |
+| Avatar stack | 3–5 visible, then "+N" | |
+| AI response | first token < 1s, or show immediate progress | |
+| Displayed QR code | 4-module quiet zone; module ≥ 0.25 mm physical; error correction M by default | ISO/IEC 18004; IATA BCBP; DENSO WAVE |
+| QR size vs. distance | ≥ 2×2 cm, +1 cm per 10 cm of scan distance | NN/g heuristic |
+
+Numbers like conversion rates, NPS targets, and completion percentages depend on context. Don't quote benchmarks as universal facts. Recommend measuring against the product's own baseline.
+
+## Anti-patterns
+
+Each one points to the reference file that covers the fix.
+
+- Dark patterns, confirmshaming, asymmetric consent → [15](references/15-ethical-design.md)
+- Hidden desktop navigation, no sense of location → [05](references/05-information-architecture.md)
+- Infinite scroll without position or a footer → [21](references/21-data-tables.md)
+- Autoplaying media, color-only signals, invisible focus → [03](references/03-accessibility.md)
+- Disabled buttons with no explanation, modal overuse → [06](references/06-interaction-design.md)
+- Walls of text, no hierarchy → [04](references/04-visual-design.md)
+- Tiny touch targets → [08](references/08-mobile-ux.md)
+- Missing loading, empty, or error states → [22](references/22-performance-ux.md)
+- Silent sync failures, no offline indication → [12b](references/12b-conflict-resolution-sync.md)
+- Cursor overload, no presence → [12a](references/12a-presence-awareness.md)
+- Screen-center zoom → [13a](references/13a-canvas-navigation.md)
+- Hidden AI, AI changes applied without consent or undo → [14](references/14-ai-ux-patterns.md)
+- Mandatory long tours → [16](references/16-onboarding.md)
+- Notification carpet bombing, push permission on first visit → [17](references/17-notifications.md)
+- Hardcoded strings, fixed widths, LTR-only layout → [23](references/23-internationalization.md)
+- Voice-only flows, hidden mic, no recognition feedback → [24](references/24-voice-and-multimodal.md)
+- Scan-only flows with no manual entry, silent scan failures → [25a](references/25a-barcode-camera-scanning.md) / [25b](references/25b-barcode-scanner-workflows.md)
+
+## Sources
+
+[Laws of UX](https://lawsofux.com/) · [Nielsen Norman Group](https://www.nngroup.com/) · [WCAG 2.2](https://www.w3.org/TR/WCAG22/) · [Material Design](https://m3.material.io/) · [Apple HIG](https://developer.apple.com/design/) · [Baymard Institute](https://baymard.com/) · [Google PAIR](https://pair.withgoogle.com/guidebook) · [Microsoft HAX](https://www.microsoft.com/en-us/haxtoolkit/) · [Deceptive Design](https://www.deceptive.design/) · [EU DSA](https://digital-strategy.ec.europa.eu/en/policies/digital-services-act-package) · [EU Accessibility Act](https://ec.europa.eu/social/main.jsp?catId=1202) · [W3C i18n](https://www.w3.org/International/) · [Liveblocks](https://liveblocks.io/) · [Figma Engineering](https://www.figma.com/blog/category/engineering/) · [Tufte](https://www.edwardtufte.com/) · [ColorBrewer](https://colorbrewer2.org/) · [web.dev](https://web.dev/)

package/skills/ux/upstream/ux-designer/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Szilárd Hajba
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/skills/ux/upstream/ux-designer/references/01-core-principles.md

@@ -0,0 +1,251 @@
+# Core UX Principles & Usability Heuristics
+
+## Contents
+
+- Nielsen's 10 Usability Heuristics
+- Core Design Principles
+- User-Centered Design Fundamentals
+- Visual Hierarchy Techniques
+- Sources
+
+---
+
+## Nielsen's 10 Usability Heuristics
+
+Jakob Nielsen's heuristics are fundamental principles for interaction design, refined over decades of usability research.
+
+### 1. Visibility of System Status
+The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.
+
+**Implementation:**
+- Show loading states and progress indicators
+- Confirm successful actions (saves, submissions)
+- Display current location in navigation
+- Show real-time status of processes
+
+### 2. Match Between System and the Real World
+The design should speak the users' language. Use words, phrases, and concepts familiar to the user, rather than internal jargon.
+
+**Implementation:**
+- Use plain language, not technical terms
+- Follow real-world conventions (calendar layouts, folder metaphors)
+- Order information logically (chronological, alphabetical)
+- Use familiar icons and symbols
+
+### 3. User Control and Freedom
+Users often perform actions by mistake. They need a clearly marked "emergency exit" to leave the unwanted action without having to go through an extended process.
+
+**Implementation:**
+- Provide undo/redo functionality
+- Include clear cancel buttons
+- Allow easy navigation back
+- Support exiting flows at any point
+- Auto-save work when possible
+
+### 4. Consistency and Standards
+Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.
+
+**Implementation:**
+- Use consistent terminology throughout
+- Maintain uniform visual design (colors, fonts, spacing)
+- Follow platform conventions (iOS, Android, Web)
+- Reuse the same components for similar functions
+
+### 5. Error Prevention
+Good error messages are important, but the best designs carefully prevent problems from occurring in the first place.
+
+**Implementation:**
+- Use constraints to prevent invalid input
+- Provide confirmation dialogs for destructive actions
+- Offer suggestions and autocomplete
+- Disable unavailable options rather than showing errors after
+- Use sensible defaults
+
+### 6. Recognition Rather Than Recall
+Minimize the user's memory load by making elements, actions, and options visible. Users should not have to remember information from one part of the interface to another.
+
+**Implementation:**
+- Show recently used items
+- Provide contextual help and hints
+- Display options visibly instead of requiring memorization
+- Use descriptive labels, not codes
+- Maintain visible navigation breadcrumbs
+
+### 7. Flexibility and Efficiency of Use
+Shortcuts—hidden from novice users—can speed up the interaction for expert users. Allow users to tailor frequent actions.
+
+**Implementation:**
+- Provide keyboard shortcuts
+- Allow customization of interface
+- Support both simple and advanced modes
+- Remember user preferences
+- Enable batch operations
+
+### 8. Aesthetic and Minimalist Design
+Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information competes with relevant information and diminishes visibility.
+
+**Implementation:**
+- Remove unnecessary elements
+- Use progressive disclosure
+- Prioritize important content
+- Use whitespace effectively
+- Avoid decorative clutter
+
+### 9. Help Users Recognize, Diagnose, and Recover from Errors
+Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.
+
+**Implementation:**
+- Write human-readable error messages
+- Explain what went wrong specifically
+- Suggest how to fix the problem
+- Avoid technical jargon and error codes
+- Place errors near the relevant field
+
+### 10. Help and Documentation
+It's best if the system doesn't need any additional explanation. However, it may be necessary to provide documentation to help users complete their tasks.
+
+**Implementation:**
+- Provide contextual help (tooltips, inline hints)
+- Make help searchable
+- Focus documentation on user tasks
+- List concrete steps
+- Keep help concise and scannable
+
+---
+
+## Core Design Principles
+
+### Clarity
+Users should never have to stop and think about what something means or how to use it.
+
+- Use clear, descriptive labels
+- Avoid ambiguous icons without labels
+- Make clickable elements look clickable
+- Distinguish between primary and secondary actions
+
+### Simplicity
+Remove everything that isn't essential to the user's goal.
+
+- Start with the minimum viable interface
+- Add complexity only when proven necessary
+- Hide advanced features behind progressive disclosure
+- One primary action per screen
+
+### Consistency
+Predictability reduces cognitive load and learning time.
+
+- Visual consistency (colors, typography, spacing)
+- Functional consistency (same gestures = same results)
+- Internal consistency (within your product)
+- External consistency (with platform conventions)
+
+### Feedback
+Every user action should have an immediate, visible response.
+
+- Instant feedback (< 100ms) for direct manipulation
+- Progress indicators for operations > 1 second
+- Clear success and error states
+- Confirmation for important actions
+
+### Hierarchy
+Guide users' attention to what matters most.
+
+- Visual weight indicates importance
+- Size, color, and position create hierarchy
+- Group related items together
+- Separate distinct sections clearly
+
+---
+
+## User-Centered Design Fundamentals
+
+### The UX Design Process
+
+1. **Research** - Understand users, their goals, and context
+2. **Define** - Synthesize findings into problems to solve
+3. **Ideate** - Generate multiple possible solutions
+4. **Prototype** - Create testable representations
+5. **Test** - Validate with real users
+6. **Implement** - Build the solution
+7. **Iterate** - Continuously improve based on feedback
+
+### Understanding Users
+
+**User Research Methods:**
+- User interviews
+- Contextual inquiry
+- Surveys and questionnaires
+- Analytics analysis
+- Usability testing
+- A/B testing
+
+**Key Questions:**
+- Who are the users?
+- What are their goals?
+- What are their pain points?
+- What is their context of use?
+- What do they already know?
+
+### Mental Models
+Users approach your interface with expectations based on prior experience. Design should align with these mental models.
+
+- Research how users think about the domain
+- Use familiar patterns and metaphors
+- When introducing new concepts, bridge from known ones
+- Test assumptions about user understanding
+
+---
+
+## Visual Hierarchy Techniques
+
+### Size
+Larger elements attract more attention. Use size to indicate importance.
+
+```
+Heading 1 (32-48px) - Most important
+Heading 2 (24-32px) - Section titles
+Heading 3 (18-24px) - Subsections
+Body text (16px) - Content
+Small text (12-14px) - Metadata, captions
+```
+
+### Color
+Color draws attention and conveys meaning.
+
+- Use accent colors sparingly for important elements
+- Maintain sufficient contrast (4.5:1 minimum)
+- Don't rely on color alone to convey information
+- Consider cultural color associations
+
+### Position
+Eye-tracking studies show predictable scanning patterns.
+
+- F-pattern for text-heavy pages
+- Z-pattern for minimal content
+- Top-left receives most attention (LTR languages)
+- Place critical elements in natural focal points
+
+### Contrast
+Difference creates emphasis.
+
+- High contrast for important elements
+- Low contrast for secondary information
+- Use contrast in typography (bold, italic, size)
+- Combine multiple contrast techniques
+
+### Whitespace
+Empty space is a design element, not wasted space.
+
+- Creates breathing room
+- Groups related elements
+- Separates distinct sections
+- Improves readability and comprehension
+
+---
+
+## Sources
+
+- Nielsen, J. (1994, 2020). "10 Usability Heuristics for User Interface Design"
+- Norman, D. (2013). "The Design of Everyday Things"
+- Krug, S. (2014). "Don't Make Me Think, Revisited"
+- Nielsen Norman Group research articles