a468e96a71
* chore: bump version to v0.8.0
* chore: update version to 0.7.1 instead of 0.8.0
* docs: expand comparison table with Oh My OpenCode and additional features
* backup: development context before reorganization
* refactor(context): reorganize development folder
- Remove 7 duplicate files (ui/design files exist in ui/web/)
- Remove 2 redundant READMEs (use navigation.md instead)
- Move react-patterns.md to frontend/react/
- Create frontend/react/navigation.md
- Update 4 navigation files (development, ui, frontend, frontend/react)
- Update developer profile (4 path changes: ui-styling-standards, design-systems, design-assets, animation-patterns)
- Update 3 core context files (visual-development.md, design-iteration.md, file-locations.md)
Result: 29 context files (down from 36), no duplicates, clean structure
Refs: REORGANIZATION_PLAN.md, REORGANIZATION_SUMMARY.md
* docs(context): add frontend delegation guide
- Create when-to-delegate.md with clear decision criteria
- Decision matrix for when to delegate vs. handle directly
- Common patterns and examples
- Red flags and green flags
- Frontend-specialist capabilities reference
- Update frontend and development navigation files
Helps orchestrators decide when to delegate UI work to frontend-specialist subagent.
* feat: enhance developer and advanced profiles with UI, development, and system builder context
- Developer profile: Add UI/UX patterns, development principles, design systems, React patterns, animation patterns, styling standards, and design assets
- Full profile: Add same UI/development context as developer profile for consistency
- Advanced profile: Add comprehensive system builder context including templates, guides, context system standards, and repository management context
- Update profile descriptions to reflect new capabilities
- All context files verified to exist and are properly referenced
* fix: remove duplicate context entries with incorrect paths
- Remove duplicate design-assets, ui-styling-standards, clean-code, animation-patterns, design-systems, react-patterns, and api-design entries that pointed to wrong paths
- Remove non-existent development-readme and mastra-ai-readme entries
- Keep only correct entries with proper file paths
- All registry paths now validated and correct
* feat: add add-context command to registry and all profiles
- Register add-context command in registry.json
- Add command:add-context to all 5 profiles (essential, developer, business, full, advanced)
- Update add-context.md to mention external-context files in .tmp/ directory
- Fix command dependencies to use context IDs instead of full paths
- All registry paths and dependencies validated
* feat: enhance add-context with external context file management
- Add Stage 0: Detect external context files in .tmp/
- Offer options to extract, manage, or harvest external files
- Extract patterns from external context files for use in project intelligence
- Provide management options: update, remove, clean, or harvest
- Add examples showing external context extraction and management
- Update troubleshooting with external context file handling
- Integrate with /context harvest command for permanent context organization
* fix: comprehensive context system audit and restructuring
- Fix 6 command documentation inconsistencies in add-context.md
* Correct /add-context vs /context harvest command references
* Simplify Stage 0 workflow from 4 to 2 options
* Update examples to match actual behavior
* Remove non-existent operations from delegation section
* Fix troubleshooting Q&A section
- Restructure registry.json with 4 major improvements
* Replace 31 duplicate 'navigation' IDs with unique IDs per subfolder
- core-navigation, development-navigation, openagents-repo-navigation, etc.
* Add context:openagents-repo/* to developer and full profiles
- Developers now have repo-specific guides and examples
* Remove context:to-be-consumed/* from essential, developer, business, full
- Keep only in advanced profile for system builders
* Properly scope mastra-ai context via wildcard patterns
Validation Results:
- Registry: 220/220 paths valid, 0 missing dependencies
- Profiles: All appropriately scoped with no duplicate IDs
- Standards: MVI compliance, frontmatter, structure verified
- No regressions: All tests passing
Fixes issues with context organization, command consistency, and profile coverage.
* feat: add premium dark UI design system context
- Add comprehensive quick start guide for premium dark UI
- Add visual reference guide with ASCII diagrams
- Includes color palette, components, layouts, and best practices
- Provides glassmorphism and radial glow patterns
- Complete with accessibility guidelines and responsive design
- Ready-to-use code snippets and templates
* docs: update design navigation with premium dark UI guides
* fix: Clean up agent YAML frontmatter and add standards
Fixed YAML frontmatter issues in 18 agent files:
- Removed duplicate YAML keys (e.g., read: true followed by read: {})
- Removed orphaned list items without parent keys
- Fixed field names (permission: → permissions:)
- Removed extra --- delimiter blocks in content
- Cleaned up comments and invalid OpenCode fields
Changes:
- 14 subagent files fixed (core, code, development, system-builder)
- 4 primary/meta agent files fixed (openagent, opencoder, repo-manager, eval-runner)
- Net reduction: 439 lines removed, 116 lines added (cleaner YAML)
Added agent standards documentation:
- .opencode/context/openagents-repo/standards/agent-frontmatter.md
- .opencode/context/openagents-repo/standards/subagent-structure.md
- .opencode/context/openagents-repo/standards/navigation.md
- Updated main navigation.md with standards section
All files follow MVI principles (<200 lines) and document the 5 common
YAML mistakes that were fixed.
Fixes subagent recognition issues where agents were registered as 'all'
mode instead of 'subagent' mode due to malformed YAML.
---------
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
26 KiB
26 KiB
Premium Dark UI - Visual Reference
Quick visual guide for the premium dark aesthetic.
COLOR SWATCHES
┌─────────────────────────────────────────────────────────┐
│ BACKGROUNDS │
├─────────────────────────────────────────────────────────┤
│ #0a0f0d ████████ Deep Dark (Main) │
│ #000000 ████████ Pure Black (Alternate) │
└─────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────┐
│ ACCENT │
├─────────────────────────────────────────────────────────┤
│ #80cca5 ████████ Mint Green (Primary) │
│ #6bb890 ████████ Darker Green (Hover) │
└─────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────┐
│ GLASS │
├─────────────────────────────────────────────────────────┤
│ rgba(255,255,255,0.02) ░░░░░░░░ Glass Background │
│ rgba(255,255,255,0.10) ▒▒▒▒▒▒▒▒ Glass Border │
└─────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────┐
│ TEXT │
├─────────────────────────────────────────────────────────┤
│ #ffffff ████████ Headings (White) │
│ #cbd5e1 ████████ Body (Slate-300) │
│ #94a3b8 ████████ Muted (Slate-400) │
└─────────────────────────────────────────────────────────┘
TYPOGRAPHY HIERARCHY
┌─────────────────────────────────────────────────────────┐
│ H1 - Page Title │
│ text-4xl md:text-6xl (36px → 60px) │
│ font-bold, text-white, mb-8 │
├─────────────────────────────────────────────────────────┤
│ H2 - Section Title │
│ text-3xl md:text-5xl (30px → 48px) │
│ font-bold, text-white, mb-6 │
├─────────────────────────────────────────────────────────┤
│ H3 - Subsection │
│ text-2xl md:text-4xl (24px → 36px) │
│ font-bold, text-white, mb-4 │
├─────────────────────────────────────────────────────────┤
│ Body - Large │
│ text-lg (18px) │
│ text-slate-300 │
├─────────────────────────────────────────────────────────┤
│ Body - Regular │
│ text-base (16px) │
│ text-slate-300 │
├─────────────────────────────────────────────────────────┤
│ Body - Small │
│ text-sm (14px) │
│ text-slate-400 │
└─────────────────────────────────────────────────────────┘
COMPONENT ANATOMY
Glass Card
┌─────────────────────────────────────────────────────────┐
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
│ ░ ┌─────────────────────────────────────────────┐ ░ │
│ ░ │ border-white/10 │ ░ │
│ ░ │ rounded-2xl │ ░ │
│ ░ │ │ ░ │
│ ░ │ Content goes here │ ░ │
│ ░ │ backdrop-blur-xl │ ░ │
│ ░ │ │ ░ │
│ ░ └─────────────────────────────────────────────┘ ░ │
│ ░ ░ │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
└─────────────────────────────────────────────────────────┘
bg-white/[0.02] (very subtle)
Button
┌──────────────────────────────────────┐
│ px-8 py-4 │
│ ┌────────────────────────────────┐ │
│ │ Button Text │ │ ← text-white
│ └────────────────────────────────┘ │
│ rounded-full │
│ bg-[#80cca5] │
└──────────────────────────────────────┘
Radial Glow
┌─────────────────────────────────────────────────────────┐
│ │
│ ╭───────────╮ │
│ ╱ ╲ │
│ ╱ ╲ │
│ ╱ Radial Glow ╲ │
│ ╱ (#80cca5) ╲ │
│ │ opacity: 0.15 │ │
│ ╲ 600px × 600px ╱ │
│ ╲ ╱ │
│ ╲ ╱ │
│ ╲ ╱ │
│ ╰───────────╯ │
│ │
│ ┌─────────────────────────┐ │
│ │ Content (z-10) │ │
│ │ Sits above glow │ │
│ └─────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘
LAYOUT PATTERNS
Hero Section
┌─────────────────────────────────────────────────────────┐
│ │
│ [Radial Glow] │
│ │
│ ┌─────────────────────┐ │
│ │ H1 Title │ │
│ │ with Accent │ │
│ └─────────────────────┘ │
│ │
│ ┌─────────────────────┐ │
│ │ Subtitle text │ │
│ └─────────────────────┘ │
│ │
│ ┌─────────────────────┐ │
│ │ [CTA Button] │ │
│ └─────────────────────┘ │
│ │
│ max-w-4xl mx-auto text-center │
└─────────────────────────────────────────────────────────┘
Feature Grid (3 columns)
┌─────────────────────────────────────────────────────────┐
│ │
│ ┌─────────────────────┐ │
│ │ Section Title │ │
│ └─────────────────────┘ │
│ │
│ ┌───────────┐ ┌───────────┐ ┌───────────┐ │
│ │ ░░░░░░░░░ │ │ ░░░░░░░░░ │ │ ░░░░░░░░░ │ │
│ │ ░ Card 1 ░ │ │ ░ Card 2 ░ │ │ ░ Card 3 ░ │ │
│ │ ░░░░░░░░░ │ │ ░░░░░░░░░ │ │ ░░░░░░░░░ │ │
│ └───────────┘ └───────────┘ └───────────┘ │
│ │
│ grid md:grid-cols-3 gap-8 │
└─────────────────────────────────────────────────────────┘
CTA Section
┌─────────────────────────────────────────────────────────┐
│ │
│ [Radial Glow] │
│ │
│ ┌─────────────────────┐ │
│ │ H2 Title │ │
│ └─────────────────────┘ │
│ │
│ ┌─────────────────────────────┐ │
│ │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │
│ │ ░ ░ │ │
│ │ ░ [Email Input] ░ │ │
│ │ ░ ░ │ │
│ │ ░ [Submit Button] ░ │ │
│ │ ░ ░ │ │
│ │ ░░░░░░░░░░░░░░░░░░░░░░░░░░░ │ │
│ └─────────────────────────────┘ │
│ Glass Card (p-12) │
│ │
│ max-w-3xl mx-auto │
└─────────────────────────────────────────────────────────┘
SPACING SCALE
┌─────────────────────────────────────────────────────────┐
│ Tailwind │ Pixels │ Usage │
├─────────────────────────────────────────────────────────┤
│ py-4 │ 16px │ Small spacing │
│ py-8 │ 32px │ Medium spacing │
│ py-12 │ 48px │ Large spacing │
│ py-24 │ 96px │ Section spacing │
├─────────────────────────────────────────────────────────┤
│ px-4 │ 16px │ Mobile padding │
│ px-8 │ 32px │ Card padding │
│ px-12 │ 48px │ Large card padding │
├─────────────────────────────────────────────────────────┤
│ gap-4 │ 16px │ Small gaps │
│ gap-8 │ 32px │ Medium gaps │
│ gap-12 │ 48px │ Large gaps │
└─────────────────────────────────────────────────────────┘
RESPONSIVE BREAKPOINTS
Mobile (< 768px)
┌─────────────────────────┐
│ │
│ Content │
│ Stacked │
│ Full Width │
│ │
└─────────────────────────┘
Desktop (> 1024px)
┌─────────────────────────────────────┐
│ │
│ Content │
│ 3 Columns │
│ │
└─────────────────────────────────────┘
Breakpoint Classes:
sm:- 640px (small tablets)md:- 768px (tablets)lg:- 1024px (laptops)xl:- 1280px (desktops)
HOVER STATES
Button Hover
Normal State:
┌────────────────┐
│ bg-[#80cca5] │
│ shadow-lg │
└────────────────┘
Hover State:
┌────────────────┐
│ bg-[#6bb890] │ ← Darker green
│ shadow-xl │ ← Larger shadow
└────────────────┘
Card Hover
Normal State:
┌────────────────┐
│ bg-white/[0.02]│
│ border-white/10│
└────────────────┘
Hover State:
┌────────────────┐
│ bg-white/[0.04]│ ← Slightly brighter
│ border-[#80cca5]/30 │ ← Green tint
│ scale-[1.02] │ ← Subtle scale
└────────────────┘
LAYERING & DEPTH
┌─────────────────────────────────────────────────────────┐
│ Layer 1 (Background) │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ bg-[#0a0f0d] │ │
│ │ │ │
│ │ Layer 2 (Glass Card) │ │
│ │ ┌─────────────────────────────────┐ │ │
│ │ │ bg-white/[0.02] │ │ │
│ │ │ backdrop-blur-xl │ │ │
│ │ │ │ │ │
│ │ │ Layer 3 (Nested Glass) │ │ │
│ │ │ ┌─────────────────────┐ │ │ │
│ │ │ │ bg-white/[0.02] │ │ │ │
│ │ │ │ border-white/10 │ │ │ │
│ │ │ └─────────────────────┘ │ │ │
│ │ │ │ │ │
│ │ └─────────────────────────────────┘ │ │
│ │ │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘
GLOW POSITIONING
Centered Glow:
┌─────────────────────────────────────┐
│ │
│ ╭───────╮ │
│ ╱ ╲ │
│ ╱ ╲ │
│ ╱ Glow ╲ │
│ │ │ │
│ ╲ ╱ │
│ ╲ ╱ │
│ ╲ ╱ │
│ ╰───────╯ │
│ │
└─────────────────────────────────────┘
Corner Glow:
┌─────────────────────────────────────┐
│ ╭───────╮ │
│ ╱ ╲ │
│ │ Glow │ │
│ ╲ ╱ │
│ ╰───────╯ │
│ │
│ │
│ │
│ │
└─────────────────────────────────────┘
ANIMATION TIMING
Fast (200ms)
├─ Button color changes
└─ Link hover
Medium (300ms)
├─ Card hover effects
└─ Form focus states
Slow (700ms)
├─ Image zoom
├─ Scroll reveals
└─ Page transitions
Easing: Use ease-in-out or default ease for smooth transitions.
CONTRAST RATIOS
┌─────────────────────────────────────────────────────────┐
│ Combination │ Ratio │ WCAG Level │
├─────────────────────────────────────────────────────────┤
│ White on #0a0f0d │ 21:1 │ AAA ✅ │
│ Slate-300 on #0a0f0d │ 12.6:1 │ AAA ✅ │
│ #80cca5 on #0a0f0d │ 7.8:1 │ AAA ✅ │
│ Slate-400 on #0a0f0d │ 6.2:1 │ AA Large Text ⚠️ │
└─────────────────────────────────────────────────────────┘
GLOW SIZES
Small (400px):
╭─────╮
╱ ╲
│ Glow │
╲ ╱
╰─────╯
Medium (600px):
╭───────╮
╱ ╲
╱ Glow ╲
│ │
╲ ╱
╲ ╱
╰───────╯
Large (800px):
╭─────────╮
╱ ╲
╱ ╲
│ Glow │
╲ ╱
╲ ╱
╰─────────╯
Usage:
- Small: Subtle accents, corner glows
- Medium: Standard sections
- Large: Hero sections, important CTAs
FORM STATES
Input States
Normal:
┌────────────────────────────────────┐
│ border-[#80cca5]/20 │
│ bg-slate-900/50 │
└────────────────────────────────────┘
Focus:
┌────────────────────────────────────┐
│ ring-2 ring-[#80cca5] │ ← Green ring
│ border-transparent │
└────────────────────────────────────┘
Error:
┌────────────────────────────────────┐
│ border-red-500 │
│ ring-2 ring-red-500/50 │
└────────────────────────────────────┘
ICON SIZES
▪ size-4 (16px) ▪
▪ size-6 (24px) ▪
▪ size-8 (32px) ▪
▪ size-10 (40px) ▪
▪ size-12 (48px) ▪
Usage:
size-4: Inline icons, badgessize-6: Button iconssize-10-12: Feature icons, decorative
SHADOW SCALE
sm: shadow-sm ▁
md: shadow ▂
lg: shadow-lg ▃
xl: shadow-xl ▄
2xl: shadow-2xl ▅
Usage:
shadow-lg: Default for cardsshadow-xl: Hover state for cardsshadow-2xl: Modals, dropdowns
QUICK REFERENCE CARD
┌─────────────────────────────────────────────────────────┐
│ PREMIUM DARK UI - CHEAT SHEET │
├─────────────────────────────────────────────────────────┤
│ Background: #0a0f0d or black │
│ Text: white (headings), slate-300 (body) │
│ Accent: #80cca5 (green) │
│ Glass: bg-white/[0.02], backdrop-blur-xl │
│ Borders: border-white/10 │
│ Spacing: Multiples of 4 (4, 8, 12, 24, 48, 96) │
│ Rounded: rounded-2xl (cards), rounded-full (buttons)│
│ Shadows: shadow-lg (default), shadow-xl (hover) │
│ Transitions: duration-300 (default) │
│ Glow: 600px, opacity 0.15 (default) │
└─────────────────────────────────────────────────────────┘
DONE! 🎨
Use this visual reference alongside the Quick Start Guide for fast implementation.