@sylphx/flow 3.6.1 → 3.7.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @sylphx/flow
 
+## 3.7.0 (2026-01-28)
+
+### ✨ Features
+
+- sweep modern UI patterns across all commands ([80f4264](https://github.com/SylphxAI/flow/commit/80f4264e1cf6450d83a09507551740b12be54820))
+- **excellence:** add accessibility and mobile dimensions ([e288eab](https://github.com/SylphxAI/flow/commit/e288eabd53fe9f0eb923f41c9ef1dad8a343724c))
+- add /polish command for modern UI excellence ([040ea22](https://github.com/SylphxAI/flow/commit/040ea2280a7c4a7532caa8ed0b33829f3ec79633))
+
 ## 3.6.1 (2026-01-28)
 
 ### ♻️ Refactoring

package/assets/agents/builder.md

@@ -144,6 +144,9 @@ Vercel CLI, Neon CLI, GitHub CLI
 * Semantic HTML — use correct elements (nav, main, article, section, aside, header, footer)
 * Data presentation must use Data Tables
 * Large datasets require cursor-based pagination, virtualization, and infinite scrolling
+* Modern interactions — inline editing, drag & drop, undo everywhere, keyboard shortcuts
+* Feedback — skeleton loading, optimistic UI, smooth transitions
+* Accessibility — keyboard navigation, screen reader support, WCAG contrast
 
 ## Public-Facing & Exposure
 

package/assets/slash-commands/audit.md

@@ -50,17 +50,28 @@ Scan the entire project for issues. Find problems, don't fix them. Open GitHub i
 
 ### 4. UI/UX Issues
 - Confusing user flows
-- Missing loading states
-- Missing error states
-- Missing empty states
+- Missing loading states (use skeleton, not spinner)
+- Missing error states (with recovery actions)
+- Missing empty states (with guidance)
 - Inconsistent spacing/typography
 - Non-responsive layouts
-- Accessibility violations (contrast, keyboard nav)
+- Accessibility violations (contrast, keyboard nav, screen reader)
 - Missing feedback on user actions
 - Unclear CTAs or labels
 - Information overload
 
-### 5. Product Design
+### 5. Modern UI Patterns (Lack of)
+- No inline editing (everything requires modal/page)
+- No drag & drop where it makes sense
+- No undo capability (destructive actions are permanent)
+- No auto-save (users must remember to save)
+- No keyboard shortcuts for power users
+- No command palette (⌘K) for quick navigation
+- Outdated inputs (dropdowns instead of combobox with search)
+- No optimistic UI (waiting for server on every action)
+- Jarring transitions (no smooth state changes)
+
+### 6. Product Design
 - Unclear value proposition
 - Friction in core user journey
 - Missing onboarding guidance
@@ -70,7 +81,7 @@ Scan the entire project for issues. Find problems, don't fix them. Open GitHub i
 - Power user needs unmet
 - Beginner barriers too high
 
-### 6. Performance
+### 7. Performance
 - Slow page loads
 - Unnecessary re-renders
 - Large bundle sizes
@@ -79,7 +90,7 @@ Scan the entire project for issues. Find problems, don't fix them. Open GitHub i
 - Missing caching opportunities
 - Unoptimized images/assets
 
-### 7. Security
+### 8. Security
 - Exposed secrets or credentials
 - Missing input validation
 - XSS vulnerabilities
@@ -88,7 +99,7 @@ Scan the entire project for issues. Find problems, don't fix them. Open GitHub i
 - Missing rate limiting
 - Overly permissive CORS
 
-### 8. Developer Experience
+### 9. Developer Experience
 - Missing or outdated documentation
 - Unclear setup instructions
 - Flaky or missing tests
@@ -96,7 +107,7 @@ Scan the entire project for issues. Find problems, don't fix them. Open GitHub i
 - Missing type definitions
 - Confusing folder structure
 
-### 9. Public-Facing & Exposure
+### 10. Public-Facing & Exposure
 - **SEO**: Missing/poor title tags, meta descriptions, structured data
 - **Social Sharing**: Missing OG tags, Twitter cards, poor share previews
 - **Landing/Home**: Unclear value prop above the fold, weak CTAs

package/assets/slash-commands/e2e-audit.md

@@ -94,6 +94,16 @@ mcp__playwright__browser_take_screenshot  # Capture evidence
 - Responsive issues
 - Inconsistent styling
 
+### Modern UI Patterns (Test for)
+- Can you edit inline or must open modal/page?
+- Can you drag & drop to reorder?
+- Is there undo after destructive actions?
+- Does it auto-save or require manual save?
+- Do keyboard shortcuts work (⌘K, ⌘S, etc.)?
+- Are loading states smooth (skeleton) or jarring (spinner)?
+- Are transitions animated or instant jumps?
+- Do inputs have search/autocomplete where useful?
+
 ## Browser Tools Reference
 
 ```

package/assets/slash-commands/excellence.md

@@ -44,6 +44,19 @@ Based on this specific project's nature, determine what "excellence" means here.
 - Would users choose this over competitors?
 - Is it intuitive, fast, polished?
 - Are edge cases handled gracefully?
+- Does it feel **modern**? (inline editing, drag & drop, ⌘K, undo everywhere)
+- Or does it feel **dated**? (modal forms, no shortcuts, destructive actions)
+
+### Accessibility & Inclusivity
+- Can everyone use this? Keyboard users? Screen reader users?
+- Does it meet WCAG standards (contrast, focus, labels)?
+- Does it respect user preferences (reduced motion, dark mode)?
+- Is it an afterthought or designed-in from the start?
+
+### Mobile & Responsive
+- Does it work beautifully on all screen sizes?
+- Are touch interactions first-class, not degraded?
+- Is mobile a real use case or an afterthought?
 
 ### Performance
 - Is it best-in-class or just acceptable?

package/assets/slash-commands/polish.md

@@ -0,0 +1,167 @@
+---
+name: polish
+description: Elevate UI from functional to delightful - modern patterns and interactions
+---
+
+# Polish: Elevate UI to Modern Excellence
+
+Transform functional UI into delightful, state-of-the-art interfaces. This is not about fixing bugs — it's about raising the bar from "it works" to "it's a joy to use".
+
+## Philosophy
+
+> **"Reduce user thinking, increase system intelligence."**
+
+Modern UI is:
+- **Direct** — interact with the thing itself, not a separate control
+- **Responsive** — immediate feedback, never leave users wondering
+- **Forgiving** — undo everywhere, mistakes are recoverable
+- **Smart** — anticipate needs, reduce manual input
+- **Fluid** — smooth transitions, not jarring jumps
+
+## Upgrade Dimensions
+
+### 1. Direct Manipulation
+
+**Before → After:**
+- Upload button → Click avatar/image to change
+- Edit button → Click text to edit inline
+- Reorder with arrows → Drag & drop
+- Separate settings page → Contextual controls where needed
+
+**Principle:** Users should manipulate the object itself, not a proxy control.
+
+### 2. Rich Feedback
+
+**Before → After:**
+- Spinner → Skeleton/shimmer loading
+- Submit and wait → Optimistic update (instant, sync in background)
+- Alert box → Toast notification (non-blocking)
+- Page reload → Smooth transition/animation
+- Binary states → Progress indicators with context
+
+**Principle:** Every action should have immediate, visible response.
+
+### 3. Modern Input Patterns
+
+**Before → After:**
+- Text field for tags → Chip/tag input with autocomplete
+- Dropdown select → Combobox with search and create
+- File upload button → Drag & drop zone + paste support
+- Date text input → Visual picker + natural language ("next monday")
+- Manual everything → Smart defaults + auto-complete
+
+**Principle:** Inputs should be as intelligent as possible.
+
+### 4. Information Architecture
+
+**Before → After:**
+- All fields visible → Progressive disclosure (show when needed)
+- Fixed layout → Adaptive layout based on content/task
+- Pagination → Infinite scroll with virtualization
+- Menu diving → Command palette (⌘K) for quick access
+- Nested menus → Flat structure + contextual actions
+
+**Principle:** Show the right information at the right time.
+
+### 5. Trust & Control
+
+**Before → After:**
+- "Are you sure?" dialogs → Undo everywhere (Gmail style)
+- Save button → Auto-save with visible status
+- Silent operations → Visible system status (syncing, saved, offline)
+- Error = dead end → Recovery suggestions + retry options
+- Single version → Version history + restore
+
+**Principle:** Users should feel safe to explore and experiment.
+
+### 6. Visual Polish
+
+**Before → After:**
+- Flat/harsh shadows → Subtle depth (light shadows, blur)
+- Color as decoration → Color as information (status, priority)
+- Uniform text → Clear typography hierarchy
+- Cramped layout → Consistent spacing system (breathing room)
+- Static states → Purposeful motion (guide attention, show relationships)
+
+**Principle:** Visual design should reduce cognitive load, not add to it.
+
+### 7. Power User Enablement
+
+**Before → After:**
+- Mouse only → Keyboard shortcuts for common actions
+- One item at a time → Bulk selection and actions
+- Fixed views → Customizable columns/layouts
+- No way out → Export/import data
+- Hidden features → Discoverable via command palette
+
+**Principle:** Reward expertise without punishing beginners.
+
+### 8. Mobile & Touch
+
+**Before → After:**
+- Desktop-only design → Responsive from the start
+- Click targets → Touch-friendly tap targets (44px+)
+- Hover states only → Touch gestures (swipe, long-press)
+- Desktop modals → Bottom sheets on mobile
+- Mouse precision → Finger-friendly spacing
+
+**Principle:** Touch is not a degraded experience — it's a different one.
+
+## Process
+
+### 1. Audit Current State
+Walk through the UI as a user:
+- Where do I have to click too many times?
+- Where am I waiting without feedback?
+- Where do I feel friction or annoyance?
+- What feels dated compared to best-in-class apps?
+
+### 2. Prioritize by Impact
+Focus on:
+- High-frequency interactions (used daily)
+- Pain points (users complain or work around)
+- First impressions (onboarding, landing)
+
+### 3. Apply Modern Patterns
+For each area:
+- Identify the current pattern
+- Choose the modern equivalent
+- Implement with smooth transitions
+- Ensure accessibility is maintained
+
+### 4. Verify Quality
+- Interactions feel snappy (< 100ms feedback)
+- Animations are smooth (60fps)
+- Works with keyboard navigation
+- Responsive across screen sizes
+- Accessible (screen readers, contrast)
+
+## Reference: Best-in-Class Examples
+
+| Pattern | See How It's Done |
+|---------|-------------------|
+| Command Palette | Linear, Raycast, VS Code (⌘K) |
+| Inline Editing | Notion, Airtable |
+| Drag & Drop | Trello, Figma |
+| Optimistic UI | Twitter/X likes, Gmail send |
+| Skeleton Loading | Facebook, LinkedIn |
+| Tag Input | GitHub labels, Notion tags |
+| Auto-save | Google Docs, Figma |
+
+## Accessibility is Non-Negotiable
+
+Modern ≠ Inaccessible. Every polish must maintain:
+- **Keyboard navigation** — all interactions work without mouse
+- **Screen reader support** — proper ARIA labels, announcements
+- **Reduced motion** — respect `prefers-reduced-motion`
+- **Color contrast** — WCAG AA minimum (4.5:1 text, 3:1 UI)
+- **Focus indicators** — visible, clear focus states
+
+## Remember
+
+* **Polish is not decoration** — it's reducing friction
+* **Motion with purpose** — guide attention, show relationships
+* **Accessibility first** — modern doesn't mean inaccessible
+* **Performance is UX** — slow animations are worse than none
+* **Consistency compounds** — one pattern, used everywhere
+* **Steal from the best** — Linear, Figma, Notion set the bar

package/assets/slash-commands/product.md

@@ -70,7 +70,16 @@ Evaluate product design holistically — from user experience to business impact
 - [ ] **Recovery** — Helpful error messages with solutions?
 - [ ] **Help** — Documentation accessible when needed?
 
-## 4. Accessibility & Inclusivity
+## 4. Modern Interaction Patterns
+
+- **Direct manipulation**: Can users interact with content directly (inline edit, drag to reorder)?
+- **Instant feedback**: Optimistic UI, skeleton loading, smooth transitions?
+- **Power user support**: Keyboard shortcuts, command palette (⌘K)?
+- **Trust**: Undo everywhere, auto-save, visible sync status?
+- **Smart inputs**: Search in dropdowns, autocomplete, paste to upload?
+- Does it feel like a 2025 app or a 2015 form?
+
+## 5. Accessibility & Inclusivity
 
 - Works without mouse (keyboard navigation)?
 - Works with screen readers?
@@ -80,14 +89,14 @@ Evaluate product design holistically — from user experience to business impact
 - Works on old devices/browsers?
 - Internationalization-ready?
 
-## 5. Competitive Edge
+## 6. Competitive Edge
 
 - What do competitors do better? Can we match or exceed?
 - What do we do uniquely well? Is it emphasized?
 - What's missing in the market that we could own?
 - If a user tried competitor after us, would they come back? Why?
 
-## 6. Public-Facing & Exposure
+## 7. Public-Facing & Exposure
 
 - **Landing Page**: Does it convert? Value prop clear in 5 seconds?
 - **SEO**: Are we discoverable? Right keywords targeted?

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sylphx/flow",
-	"version": "3.6.1",
+	"version": "3.7.0",
 	"description": "One CLI to rule them all. Unified orchestration layer for AI coding assistants. Auto-detection, auto-installation, auto-upgrade.",
 	"type": "module",
 	"bin": {