UI-UX-Specialist

Design mobile note-taking interfaces with Material You theming and gesture-driven interactions.

18|3|Updated Dec 14, 2025
One-click install
npx skills add https://github.com/SaadhJawwadh/Note-taking --skill ui-ux-specialist-saadhjawwadh
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: UI-UX-Specialist
Source: https://github.com/SaadhJawwadh/Note-taking/tree/main/.agent/skills/UI-UX-Specialist
Command: npx skills add https://github.com/SaadhJawwadh/Note-taking --skill ui-ux-specialist-saadhjawwadh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps teams build premium, highly responsive app screens with cohesive Material You theming and smooth micro-interactions, so users immediately feel clarity, tactility, and trust in every action.

Core Features & Use Cases

  • Tactile, responsive UI: Immediate feedback with ripples, elevation, and subtle motion tied to user intent.
  • Dynamic Material You theming: Aggressive color derivation using ColorScheme seeding and surface mapping for consistent light/dark blending.
  • Unified view architectures: Multi-modal layouts for collections (list, grid, staggered/masonry, Kanban) and organized settings via ExpansionTile.
  • Advanced gestures & micro-interactions: Gesture-driven actions like swipe, drag-and-drop, and snappy transitions (e.g., OpenContainer).
  • Interaction design for safety & clarity: Snackbar Undo patterns after destructive/curating actions and careful handling of empty states, overflow, and rich previews.
  • Session-based UX security patterns: UI-level implementation guidance for session lock behavior and utility bypasses.

Quick Start

Apply the UI-UX Specialist skill to design a new note-list screen with Material You colors, smooth transitions, and swipe/drag interactions that include an immediate Undo snackbar on destructive actions.

Frequently Asked Questions about UI-UX-Specialist

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement Material You theming with dynamic ColorScheme seeding for mobile interfaces?

To create a tactile note-list screen, apply responsive layouts, smooth OpenContainer transitions, and swipe or drag-and-drop gestures. Include an immediate Undo snackbar after destructive actions to ensure interaction safety and clarity.

How do I add an Undo snackbar to destructive swipe actions in a mobile app?

Implement Snackbar Undo patterns after destructive or curating actions like swipe-to-delete. This provides immediate feedback, allowing users to reverse actions safely while maintaining clear empty-state handling and overflow management.

Can I refactor collection views into Kanban and masonry layouts using this approach?

Yes, unified view architectures support refactoring collection views into multi-modal layouts including list, grid, staggered masonry, and Kanban modes. This organizes settings via ExpansionTile and ensures consistent typography and spacing.

What is the best way to design micro-interactions and gesture-driven actions for mobile apps?

Advanced gestures and micro-interactions involve swipe, drag-and-drop, and snappy transitions tied to user intent. Designing these requires immediate feedback with ripples, elevation, and subtle motion for a premium, responsive feel.

How do I handle empty states and overflow when building responsive note-taking interfaces?

Careful handling of empty states and overflow involves designing clear empty-state messaging and rich previews. This is integrated with frictionless interaction patterns and unified view architectures to ensure users navigate confidently.

Do I need specific dependencies to implement session lock behavior and UI-level security patterns?

No specific dependencies are required. The approach provides UI-level implementation guidance for session lock behavior and utility bypasses, integrating session-based UX security patterns directly into the interface design workflow.