| 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
- Identify context signals. List the signals that matter: viewport, input type, color scheme, motion preference, network, optional behavior analytics.
- 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).
- Implement responsive layout. Use CSS media queries, container queries, or framework utilities (Tailwind, styled-components).
- Implement preference adaptation. Use
matchMedia and CSS feature queries for color scheme and motion.
- Add behavioral adaptation (optional). Use anonymized, privacy-preserving signals to adjust defaults (e.g., frequent mobile users see a bottom nav).
- Test across contexts. Verify rendering on multiple viewports and with different preference settings.
- 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:
- Implements responsive grid with breakpoints for desktop, tablet, mobile.
- Adds dark mode support using
prefers-color-scheme and a theme toggle.
- Respects
prefers-reduced-motion for animations.
- Switches navigation to a bottom bar on mobile.
- 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:
- Rejects the approach unless explicit, opt-in consent and a validated emotion-detection model are provided.
- Explains privacy, accuracy, and ethical risks.
- 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
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
