contextual-ui-adaptation

name	contextual-ui-adaptation
description	Adapt user interfaces automatically based on device, viewport, user preferences, and contextual signals.

Skill: Contextual UI Adaptation

Category: UI/UX Engineering Priority: Medium

---

Description

This skill enables DevinOS to adapt interfaces based on context: device type, viewport size, user preferences (reduced motion, dark mode), and optional behavioral signals. It produces responsive, accessible, and context-aware UI decisions without manual per-breakpoint tweaking.

Purpose

To enhance user experience by making applications more usable, responsive, and respectful of user preferences and environmental constraints.

Trigger

Use this skill when:

• A user asks for an adaptive or responsive interface.
• You need to support multiple devices or screen sizes.
• You are implementing dark mode, reduced motion, or accessibility preferences.
• The UI should change based on user behavior or environment (e.g., low bandwidth).

Context

• Target devices and breakpoints.
• Existing design system and tokens.
• User preference APIs (prefers-color-scheme, prefers-reduced-motion, etc.).
• Performance budget and network conditions.
• Privacy constraints when collecting behavioral signals.

Workflow

1. Identify context signals. List the signals that matter: viewport, input type, color scheme, motion preference, network, optional behavior analytics.
2. Design adaptation rules. Define how the UI changes for each signal (e.g., simplified layout on mobile, dark mode at night, reduced motion when requested).
3. Implement responsive layout. Use CSS media queries, container queries, or framework utilities (Tailwind, styled-components).
4. Implement preference adaptation. Use matchMedia and CSS feature queries for color scheme and motion.
5. Add behavioral adaptation (optional). Use anonymized, privacy-preserving signals to adjust defaults (e.g., frequent mobile users see a bottom nav).
6. Test across contexts. Verify rendering on multiple viewports and with different preference settings.
7. Document. Record the adaptation rules and any privacy considerations.

Examples

Good: Responsive dashboard with preference awareness

User Input: "Build a dashboard that works on desktop and mobile, respects dark mode and reduced motion, and uses a bottom nav on small screens."

Agent Action:

1. Implements responsive grid with breakpoints for desktop, tablet, mobile.
2. Adds dark mode support using prefers-color-scheme and a theme toggle.
3. Respects prefers-reduced-motion for animations.
4. Switches navigation to a bottom bar on mobile.
5. Tests all combinations and documents behavior.

Bad: Emotion-driven UI without consent or evidence

User Input: "Change the UI based on the user's emotional state from the camera."

Agent Action:

1. Rejects the approach unless explicit, opt-in consent and a validated emotion-detection model are provided.
2. Explains privacy, accuracy, and ethical risks.
3. Offers a safer alternative: adapt based on explicit user preferences or device context.

Anti-patterns

• Adapting UI based on sensitive or unverified signals without consent.
• Hiding critical functionality on small screens without an alternative path.
• Ignoring user preferences like prefers-reduced-motion.
• Making assumptions about users based on device type alone.
• Collecting behavioral data without privacy safeguards.

Verification

• The UI adapts correctly across target breakpoints.
• Dark mode and reduced motion preferences are respected.
• No critical features are hidden without an accessible alternative.
• Privacy and consent are documented for any behavioral signals.
• Tests cover multiple viewport and preference combinations.
• Cross-skill references are used (UI/UX Pro Max, Frontend, Accessibility).

Cross Skill References

• UI/UX Pro Max: Responsive design, motion design, accessibility.
• Frontend Engineering: Media queries, container queries, React hooks.
• Accessibility: Reduced motion, color contrast, keyboard navigation.
• AI-Driven Design System: Token-based theming for context changes.
• Performance Optimization: Adaptation for low bandwidth or low-end devices.

References

• Tailwind CSS Responsive Design: https://tailwindcss.com/docs/responsive-design
• MDN prefers-color-scheme: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
• MDN prefers-reduced-motion: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
• React Responsive: https://www.npmjs.com/package/react-responsive