OpenWriterControle/.opencode/context/ui/web/design/navigation.md
Darren Hinde 9a58a03284
fix(context): Add frontmatter to context files with missing metadata (#97)
* feat(context): Add project intelligence system

- Add project-intelligence.md standard (what & why)
- Add project-intelligence-management.md guide (how to manage)
- Add project-intelligence/ folder with 6 context files:
  - navigation.md (quick overview & routes)
  - business-domain.md (business context, users, value)
  - technical-domain.md (stack, architecture, decisions)
  - business-tech-bridge.md (business → technical mapping)
  - decisions-log.md (decision history with context)
  - living-notes.md (active issues, debt, questions)
- Update standards navigation with new entries
- Register all new contexts in registry.json

This enables projects to document and maintain business + technical
context for quick onboarding and lasting project understanding.

* fix(registry): Add project-intelligence to profiles

- Add context:project-intelligence/* to developer, business, full, and advanced profiles
- Ensures project intelligence contexts are included when these profiles are selected

This complements commit c731328 which added the context entries.

* docs(core): refine project intelligence system and deprecate legacy context

* feat(claude): simplify Claude Code integration with unified installer

- Create single install-claude.sh script that auto-converts and installs
- Remove redundant bootstrap-install.sh and install.sh scripts
- Delete stale plugin/ directory (now auto-generated from .opencode/)
- Add Claude Code documentation (agent-skills, create-subagents, hooks, plugins)
- Add installation profiles (essential, developer, business, full, advanced)
- Update README with Claude Code beta feature documentation
- Add component-planning.md workflow context
- Clean up demo files (assets/, src/)
- Update registry with new context entries
- Add gitignore rule for converter/generated/

The new installer:
- Converts agents automatically from .opencode/agent/
- Installs fresh converted agents to ~/.claude/plugins/
- Single command: ./integrations/claude-code/install-claude.sh

* fix: update README to use new install-claude.sh script

The Claude Code integration now uses the unified install-claude.sh script
instead of the removed bootstrap-install.sh and install.sh scripts.

* fix(context): Add frontmatter to context files with missing metadata

- Add YAML frontmatter with description to system-builder-templates
- Add frontmatter to ui/web/design context files
- Fixes validation warnings in validate-component.sh

* fix(registry): Remove orphaned context entries for deleted files

- Remove copywriting-frameworks entry (file moved to content-creation/principles/)
- Remove tone-voice entry (file moved to content-creation/principles/)
2026-01-17 21:29:48 +00:00

2.1 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-07


Quick Navigation

Concepts

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

Examples

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

Guides

File Description Priority
building-scrollytelling-pages.md Complete implementation guide high

Lookup

File Description Priority
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)

Scope

This subcategory covers:

  • ✅ Scroll-linked animations (scrollytelling)
  • ✅ Canvas-based rendering
  • ✅ Framer Motion patterns
  • ✅ Image sequence generation
  • ⏳ 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
  • Examples: 1
  • Guides: 1
  • Lookup: 1
  • Errors: 0
  • Total: 4 files