OpenWriterControle/plugins/claude-code/scripts/context/ui/web/design/navigation.md
Darren Hinde a8fc9c7715
feat(plugin): enhance context management and skill invocation (#239)
* fix(shellcheck): declare and assign separately in router.sh (SC2155)

* feat(plugin): enhance context management and skill invocation

- Update .context-manifest.json to include profile and detailed source information.
- Revise context-scout.md to clarify context root discovery and navigation.
- Modify commands to replace deprecated skills with updated ones (brainstorming → approach, systematic-debugging → debugger).
- Streamline install-context.md for clarity and remove interactive profile selection.
- Improve oac-status.md to provide a more comprehensive status report.
- Add OAC system paths to session-start.sh for better context management.
- Remove obsolete skills and improve documentation for existing commands.
2026-02-23 12:12:29 +00:00

2.9 KiB


description: "Advanced web UI patterns - scroll animations, visual effects, and interactive design"

Web Design Patterns

Purpose: Advanced web UI patterns - scroll animations, visual effects, and interactive design

Last Updated: 2026-01-31


Quick Navigation

Concepts

File Description Priority
navigation.md Concepts navigation high
scroll-linked-animations.md Scroll-synced image sequences (scrollytelling) high

Examples

File Description Priority
navigation.md Examples navigation high
scrollytelling-headphone.md Full Next.js scroll animation example high

Guides

File Description Priority
navigation.md Guides navigation high
building-scrollytelling-pages.md Complete implementation guide high
premium-dark-ui-visual-reference.md Visual reference for premium dark UI medium

Lookup

File Description Priority
navigation.md Lookup navigation high
scroll-animation-prompts.md AI prompts for generating animation sequences medium

Errors

File Description Priority
(No error files yet)

Loading Strategy

For scroll animation work:

  1. Load concepts/scroll-linked-animations.md (understand technique)
  2. Load lookup/scroll-animation-prompts.md (generate image sequences)
  3. Load examples/scrollytelling-headphone.md (see full code)
  4. Reference guides/building-scrollytelling-pages.md (step-by-step)

For premium dark UI design:

  1. Load guides/premium-dark-ui-visual-reference.md (visual patterns and implementation)

Scope

This subcategory covers:

  • ✅ Scroll-linked animations (scrollytelling)
  • ✅ Canvas-based rendering
  • ✅ Framer Motion patterns
  • ✅ Image sequence generation
  • ✅ Premium dark UI design system
  • ✅ Glassmorphism patterns
  • ⏳ CSS animations (future)
  • ⏳ SVG animations (future)
  • ⏳ WebGL effects (future)

  • ui/web/ - Core web UI patterns (parent directory)
  • ui/web/animation-patterns.md - CSS animations and transitions
  • development/ - General development patterns

Used By

Agents: frontend-specialist, design-specialist, animation-expert

Statistics

  • Concepts: 1 + navigation
  • Examples: 1 + navigation
  • Guides: 6 + navigation
  • Lookup: 1 + navigation
  • Errors: 0
  • Total: 13 files