feat: integrate monaco-languageclient v10 with NWScript LSP
Replace hand-rolled LSP client (lspClient.ts, useLspClient.ts) with monaco-languageclient v10 extended mode using @typefox/monaco-editor-react. NWScript TextMate grammar from the LSP submodule provides syntax highlighting. Full LSP features: completion, hover, diagnostics, go-to-definition, signature help — all wired through WebSocket to the nwscript-language-server. LSP server patches: fix workspaceFolders null assertion crash, handle missing workspace/configuration gracefully, derive rootPath from rootUri when null, guard tokenizer getRawTokenContent against undefined tokens. Backend fixes: WebSocket routing changed to noServer mode so /ws, /ws/lsp, and /ws/terminal/* don't conflict. TLK index loaded at startup (41,927 entries from nwn-haks/layonara.tlk.json). Workspace routes get proper try/catch. writeConfig creates parent directories. setupClone ensures workspace structure. Frontend: GffEditor and AreaEditor rewritten with inline styles and TLK resolution for CExoLocString fields. EditorTabs rewritten with lucide icons. Tab content hydrates from API on refresh. Setup wizard gets friendly error messages. SimpleEditor/SimpleDiffEditor for non-LSP editor uses. Vite config updated for monaco-vscode-api compatibility.
This commit is contained in:
plenarius
@@ -0,0 +1,175 @@
|
||||
---
|
||||
name: animate
|
||||
description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.
|
||||
version: 2.1.1
|
||||
user-invocable: true
|
||||
argument-hint: "[target]"
|
||||
---
|
||||
|
||||
Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight.
|
||||
|
||||
## MANDATORY PREPARATION
|
||||
|
||||
Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: performance constraints.
|
||||
|
||||
---
|
||||
|
||||
## Assess Animation Opportunities
|
||||
|
||||
Analyze where motion would improve the experience:
|
||||
|
||||
1. **Identify static areas**:
|
||||
- **Missing feedback**: Actions without visual acknowledgment (button clicks, form submission, etc.)
|
||||
- **Jarring transitions**: Instant state changes that feel abrupt (show/hide, page loads, route changes)
|
||||
- **Unclear relationships**: Spatial or hierarchical relationships that aren't obvious
|
||||
- **Lack of delight**: Functional but joyless interactions
|
||||
- **Missed guidance**: Opportunities to direct attention or explain behavior
|
||||
|
||||
2. **Understand the context**:
|
||||
- What's the personality? (Playful vs serious, energetic vs calm)
|
||||
- What's the performance budget? (Mobile-first? Complex page?)
|
||||
- Who's the audience? (Motion-sensitive users? Power users who want speed?)
|
||||
- What matters most? (One hero animation vs many micro-interactions?)
|
||||
|
||||
If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer.
|
||||
|
||||
**CRITICAL**: Respect `prefers-reduced-motion`. Always provide non-animated alternatives for users who need them.
|
||||
|
||||
## Plan Animation Strategy
|
||||
|
||||
Create a purposeful animation plan:
|
||||
|
||||
- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?)
|
||||
- **Feedback layer**: Which interactions need acknowledgment?
|
||||
- **Transition layer**: Which state changes need smoothing?
|
||||
- **Delight layer**: Where can we surprise and delight?
|
||||
|
||||
**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments.
|
||||
|
||||
## Implement Animations
|
||||
|
||||
Add motion systematically across these categories:
|
||||
|
||||
### Entrance Animations
|
||||
- **Page load choreography**: Stagger element reveals (100-150ms delays), fade + slide combinations
|
||||
- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects)
|
||||
- **Content reveals**: Scroll-triggered animations using intersection observer
|
||||
- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
|
||||
|
||||
### Micro-interactions
|
||||
- **Button feedback**:
|
||||
- Hover: Subtle scale (1.02-1.05), color shift, shadow increase
|
||||
- Click: Quick scale down then up (0.95 → 1), ripple effect
|
||||
- Loading: Spinner or pulse state
|
||||
- **Form interactions**:
|
||||
- Input focus: Border color transition, slight scale or glow
|
||||
- Validation: Shake on error, check mark on success, smooth color transitions
|
||||
- **Toggle switches**: Smooth slide + color transition (200-300ms)
|
||||
- **Checkboxes/radio**: Check mark animation, ripple effect
|
||||
- **Like/favorite**: Scale + rotation, particle effects, color transition
|
||||
|
||||
### State Transitions
|
||||
- **Show/hide**: Fade + slide (not instant), appropriate timing (200-300ms)
|
||||
- **Expand/collapse**: Height transition with overflow handling, icon rotation
|
||||
- **Loading states**: Skeleton screen fades, spinner animations, progress bars
|
||||
- **Success/error**: Color transitions, icon animations, gentle scale pulse
|
||||
- **Enable/disable**: Opacity transitions, cursor changes
|
||||
|
||||
### Navigation & Flow
|
||||
- **Page transitions**: Crossfade between routes, shared element transitions
|
||||
- **Tab switching**: Slide indicator, content fade/slide
|
||||
- **Carousel/slider**: Smooth transforms, snap points, momentum
|
||||
- **Scroll effects**: Parallax layers, sticky headers with state changes, scroll progress indicators
|
||||
|
||||
### Feedback & Guidance
|
||||
- **Hover hints**: Tooltip fade-ins, cursor changes, element highlights
|
||||
- **Drag & drop**: Lift effect (shadow + scale), drop zone highlights, smooth repositioning
|
||||
- **Copy/paste**: Brief highlight flash on paste, "copied" confirmation
|
||||
- **Focus flow**: Highlight path through form or workflow
|
||||
|
||||
### Delight Moments
|
||||
- **Empty states**: Subtle floating animations on illustrations
|
||||
- **Completed actions**: Confetti, check mark flourish, success celebrations
|
||||
- **Easter eggs**: Hidden interactions for discovery
|
||||
- **Contextual animation**: Weather effects, time-of-day themes, seasonal touches
|
||||
|
||||
## Technical Implementation
|
||||
|
||||
Use appropriate techniques for each animation:
|
||||
|
||||
### Timing & Easing
|
||||
|
||||
**Durations by purpose:**
|
||||
- **100-150ms**: Instant feedback (button press, toggle)
|
||||
- **200-300ms**: State changes (hover, menu open)
|
||||
- **300-500ms**: Layout changes (accordion, modal)
|
||||
- **500-800ms**: Entrance animations (page load)
|
||||
|
||||
**Easing curves (use these, not CSS defaults):**
|
||||
```css
|
||||
/* Recommended - natural deceleration */
|
||||
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* Smooth, refined */
|
||||
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); /* Slightly snappier */
|
||||
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Confident, decisive */
|
||||
|
||||
/* AVOID - feel dated and tacky */
|
||||
/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */
|
||||
/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */
|
||||
```
|
||||
|
||||
**Exit animations are faster than entrances.** Use ~75% of enter duration.
|
||||
|
||||
### CSS Animations
|
||||
```css
|
||||
/* Prefer for simple, declarative animations */
|
||||
- transitions for state changes
|
||||
- @keyframes for complex sequences
|
||||
- transform + opacity only (GPU-accelerated)
|
||||
```
|
||||
|
||||
### JavaScript Animation
|
||||
```javascript
|
||||
/* Use for complex, interactive animations */
|
||||
- Web Animations API for programmatic control
|
||||
- Framer Motion for React
|
||||
- GSAP for complex sequences
|
||||
```
|
||||
|
||||
### Performance
|
||||
- **GPU acceleration**: Use `transform` and `opacity`, avoid layout properties
|
||||
- **will-change**: Add sparingly for known expensive animations
|
||||
- **Reduce paint**: Minimize repaints, use `contain` where appropriate
|
||||
- **Monitor FPS**: Ensure 60fps on target devices
|
||||
|
||||
### Accessibility
|
||||
```css
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**NEVER**:
|
||||
- Use bounce or elastic easing curves—they feel dated and draw attention to the animation itself
|
||||
- Animate layout properties (width, height, top, left)—use transform instead
|
||||
- Use durations over 500ms for feedback—it feels laggy
|
||||
- Animate without purpose—every animation needs a reason
|
||||
- Ignore `prefers-reduced-motion`—this is an accessibility violation
|
||||
- Animate everything—animation fatigue makes interfaces feel exhausting
|
||||
- Block interaction during animations unless intentional
|
||||
|
||||
## Verify Quality
|
||||
|
||||
Test animations thoroughly:
|
||||
|
||||
- **Smooth at 60fps**: No jank on target devices
|
||||
- **Feels natural**: Easing curves feel organic, not robotic
|
||||
- **Appropriate timing**: Not too fast (jarring) or too slow (laggy)
|
||||
- **Reduced motion works**: Animations disabled or simplified appropriately
|
||||
- **Doesn't block**: Users can interact during/after animations
|
||||
- **Adds value**: Makes interface clearer or more delightful
|
||||
|
||||
Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right.
|
||||
Reference in New Issue
Block a user