ab85419cdb
Integrate interaction design techniques into DESIGN_PRINCIPLES.md
...
Expand Part 4 (Interaction Design) with:
- Inferring intent (mousedown preloading, proximity detection)
- Interaction metaphors (physical analogies, consistency rules)
- Ergonomic interactions (hit area expansion, thumb zones)
- Contained gestures (pointer capture, drag threshold, state machine)
Expand Part 5 (Motion & Animation) with:
- Spring physics (stiffness/damping/mass, rubber band, iOS projection)
- Motion choreography (blur layers, stagger, crossfade icons, morph)
- High-frequency actions (instant menus, skip rapid animations)
- Gesture lifecycle (START/MOVE/END, jump() vs set(), useTransform)
Add Part 11 (Code Patterns Library):
- useMotionValue vs useState, grid stacking, clip-path reveals
- scroll fading, overflow clip, React key remounting, layoutId
Enhance Part 9 with Interface Robustness Checklist
Add Interaction Pattern Quick Reference table (18 scenarios)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com >
2026-01-21 18:51:16 -05:00
6c94f6b03e
Remove project-local skill (moved to global)
...
Skill installed globally at ~/.claude/skills/interaction-design/
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com >
2026-01-21 10:40:02 -05:00
4098c1347c
Add comprehensive interaction design skill
...
Created a complete Claude skill for UI interaction design including:
- 8 core principles (inferring intent, interaction metaphors, ergonomic
interactions, simulating physics, motion choreography, responsive
interfaces, contained gestures, drawing inspiration)
- Code patterns library with Motion React, springs, gestures
- Testing and quality checklists
- Quick reference table for common situations
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com >
2026-01-21 10:38:01 -05:00
e9223cc698
Refactor DESIGN_PRINCIPLES.md with comprehensive updates
...
- Add URL state reflection and destructive action principles
- Enhance typography with proper ellipsis, curly quotes, tabular-nums
- Add dark mode setup with color-scheme and theme-color meta
- Add Content Handling section (truncation, flex children, images)
- Major Forms overhaul: autocomplete attrs, input modes, anti-patterns
- Add Touch & Pointer section (touch-action, overscroll-behavior)
- Replace easing section with comprehensive Easing Blueprint
- Add Frequency Principle for animation decisions
- Add Spring Animations and Animation Performance sections
- Enhance Accessibility with keyboard nav and focus-visible patterns
- Add Part 7: Performance Patterns (virtualization, layout thrashing)
- Add Part 8: Content & Copy (writing style, i18n with Intl APIs)
- Add Part 9: Anti-Patterns Checklist for design review
- Enhance Quick Decision Framework with animation decision tree
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com >
2026-01-20 16:37:43 -05:00
e0fa4d1d12
Update README with interactive feedback documentation
...
- Added step-by-step feedback overlay instructions in Usage
- Added dedicated "Interactive Feedback" section explaining Figma-style commenting
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com >
2026-01-18 15:27:21 -05:00
879e659d8f
Fix FeedbackOverlay UX: CSS isolation and button overlap ( #2 )
...
Two UX fixes:
1. **Contrast Issue**: Textarea text was invisible on some backgrounds
- Added CSS isolation with injected <style> element using !important
- Uses `all: revert` to reset inherited page styles
- Guarantees dark text (#1f2937) on white background
2. **Button Overlap**: Toggle and submit buttons conflicted spatially
- Toggle button now hidden when sidebar is active
- Added "✕ Exit" button to sidebar header instead
- Clean single control area, no overlap
Comment panel remains floating near click (Figma-style).
Also fixed lint issues:
- Converted localStorage loading to lazy initialization
- Removed unused hoveredElement variable
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com >
2026-01-18 15:11:41 -05:00
d9e8c7dea9
Add comprehensive README
2026-01-14 20:55:34 -05:00
b2e4e5f7e7
design-and-refine v0.1.0
2026-01-14 20:45:55 -05:00
0xdesign