Menu
Adapt user interfaces automatically based on device, viewport, user preferences, and contextual signals.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Plan, reason, and verify across multiple levels using multi-step reasoning, tree-of-thought, and structured agent workflows.
Detect and repair security vulnerabilities or operational errors in the agent's own code and environment without manual intervention.
Generate and apply complete design systems from text descriptions or visual examples using AI and modern tooling.
Build and query knowledge graphs automatically to capture relationships between entities, concepts, and project artifacts.
Run agent tasks in isolated, sandboxed environments to prevent malicious or untrusted code from affecting the host system.
Store, retrieve, and evolve contextual and procedural knowledge using vector search, memory layers, and active forgetting.
| name | contextual-ui-adaptation |
| description | Adapt user interfaces automatically based on device, viewport, user preferences, and contextual signals. |
Category: UI/UX Engineering Priority: Medium
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.
To enhance user experience by making applications more usable, responsive, and respectful of user preferences and environmental constraints.
Use this skill when:
prefers-color-scheme, prefers-reduced-motion, etc.).matchMedia and CSS feature queries for color scheme and motion.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:
prefers-color-scheme and a theme toggle.prefers-reduced-motion for animations.User Input: "Change the UI based on the user's emotional state from the camera."
Agent Action:
prefers-reduced-motion.