Was macht Interaktives Zustandssystem?
Zweck
Die Fähigkeit „Interaktives Zustandssystem
Entwerfen und dokumentieren Sie das visuelle Verhalten von UI-Elementen während der Benutzerinteraktion (Hover, Fokus, Aktiv, Deaktiviert usw.), um Benutzerfreundlichkeit und Barrierefreiheit zu gewährleisten.
Diese Fähigkeit bietet ein Framework zur Definition einheitlicher interaktiver Zustände für UI-Komponenten. Sie stellt sicher, dass jedes interaktive Element (Schaltflächen, Links, Eingabefelder, Karten) klares, konsistentes und barrierefreies visuelles Feedback über alle Interaktionsmodi (Maus, Tastatur, Touch) hinweg erhält. Das System beseitigt Unklarheiten für Entwickler und garantiert ein hochwertiges, reaktionsschnelles Gefühl für den Endbenutzer. Es unterstützt Designsysteme, UI-Bibliotheken und Audits bestehender Websites auf „tote“ oder nicht reagierende Interaktionen. Die Fähigkeit legt Entscheidungsregeln fest, wie Fokusindikatoren einen Kontrast von mindestens 3:1 aufweisen müssen und nie vollständig verdeckt werden dürfen (WCAG 2.2 SC 2.4.11). Außerdem optimiert sie für Touch-Geräte, indem sie sicherstellt, dass aktive Zustände sofortiges Feedback geben und Berührungsziele mindestens 24x24px (bevorzugt 44x44px) gemäß WCAG 2.2 SC 2.5.8 messen. Die Ausgabe umfasst eine Zustandsmatrix, Interaktionsrichtlinien und eine Spezifikation zur Barrierefreiheit mit expliziten Definitionen für Fokusringe und visuelle Hinweise für die Tastaturnutzung.
npx skills add https://github.com/coastdigitalgroup/coastai-skills/tree/HEAD/website-design/interactive-state-systemDie Fähigkeit „Interaktives Zustandssystem
This repo contains 20 individual skills — each has its own dedicated page.
Design and implement a systematic framework for progressive disclosure using accordions, ensuring structural integrity, visual affordances, and accessibility across different content densities and devices.
Design and implement a systematic framework for long-form content, managing readability, vertical rhythm, and information density to ensure a superior reading experience.
Design and implement a systematic framework for informational elements that communicate state (Badges) and categorization (Tags) with clarity and accessibility.
Design and implement a systematic framework for non-overlay notifications, managing global announcements and contextual inline alerts to communicate system states without interrupting the user's flow.
Design and implement a systematic, asymmetrical bento-grid layout framework to organize diverse content types cohesively while maintaining strict visual hierarchy, logical focus order, and responsive flexibility.
Design a responsive, mobile-first bottom navigation bar and persistent action dock system for mobile websites and web applications, establishing spatial anchors, tab bar anatomy, badge indicators, thumb-zone ergonomics, safe area inset handling, active/inactive state contrast, and desktop responsive adaptation rules.
Design a mobile-first bottom sheet overlay system with configurable detents, drag affordances, safe area padding, responsive desktop modal/popover adaptation, and WCAG AA accessibility compliance.
Design and implement a systematic framework for secondary navigation trails that provide orientation, context, and one-click access to parent levels in deep information architectures.
Design and implement a systematic framework for buttons and interactive triggers, managing visual hierarchy, variant logic, and action grouping to ensure clear intent and accessible interaction.
Design a systematic framework for date and time selection, managing calendar grids, range pickers, and scheduling interfaces to ensure precision and accessibility.
Design and implement a systematic framework for modular content containers that maintain hierarchy, structural integrity, and action alignment across variable content and responsive viewports.
Design and implement a systematic framework for horizontal discovery components, managing navigation affordances, scroll behavior, and accessibility to ensure effective content density without compromising usability.
Design a systematic, highly accessible, and developer-friendly UI layout framework for code blocks, snippet showcases, multi-file code tabs, line-highlighting, diff views, and syntax token contrast in technical documentation and developer platforms.
Design a systematic framework for global command menus (Cmd+K panels) that combines keyboard-driven navigation, command execution, and shortcut discovery into an accessible, responsive overlay.
Design and implement a systematic framework for threaded conversations, managing nesting depths, action hierarchies, and community signaling to foster engagement and readability.
Design and implement a systematic framework for side-by-side comparison interfaces, managing high attribute density and responsive complexity to support informed decision-making.
Design and implement a systematic framework for user privacy, managing consent banners, preference centers, and persistent privacy controls to balance legal compliance with user trust.
Design and implement a systematic, highly accessible, and responsive visual layout framework for conversational chat widgets, live chat boxes, and chatbot panels that ensures clear message scannability, native focus flow, and seamless mobile keyboard adaptation.
Design a systematic, accessible, and high-conversion framework for custom select dropdowns and comboboxes, defining anatomy, states, search-filtering, and responsive mobile-adaptive patterns.
Design and implement a systematic color palette that ensures WCAG 2.2 accessibility compliance. Trigger this skill when asked to define brand colors, create UI themes, or establish a visual system for a website.
ElevenLabs text-to-speech with mac-style say UX.
Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.
Capture and automate macOS UI with the Peekaboo CLI.
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".
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.
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".