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

3.1 KiB

Raw Blame History

Premium Dark UI - Advanced

Animations, accessibility, and checklists for premium dark UI.

Animations

Hover Effects

// Card hover
<div className="transition-all duration-300 hover:scale-[1.02]">
  Card content
</div>

// Button hover
<button className="transition-colors duration-200 hover:bg-[#6bb890]">
  Button
</button>

// Image hover
<img className="transition-transform duration-700 hover:scale-105" />

Scroll Reveal

// npm install react-intersection-observer
import { useInView } from 'react-intersection-observer'

function Component() {
  const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.1 })
  
  return (
    <div 
      ref={ref}
      className={`transition-all duration-700 ${
        inView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'
      }`}
    >
      Content
    </div>
  )
}

Accessibility

Color Contrast

White on #0a0f0d: 21:1 (AAA) ✅
slate-300 on #0a0f0d: 12.6:1 (AAA) ✅
#80cca5 on #0a0f0d: 7.8:1 (AAA) ✅

Focus States

<button className="focus:ring-2 focus:ring-[#80cca5] focus:outline-none">
  Button
</button>

Semantic HTML

<nav>
  <ul>
    <li><a href="#">Link</a></li>
  </ul>
</nav>

Quick Wins (Instant Premium Feel)

Replace all backgrounds with #0a0f0d
Use only white and slate-300 for text
Make all CTAs #80cca5 green
Add backdrop-blur-xl to all cards
Use rounded-2xl for cards, rounded-full for buttons
Add one radial glow to hero section
Increase padding (py-24 for sections, p-8 for cards)
Add hover effects to all interactive elements

Common Mistakes

❌ DON'T:

Use light backgrounds (bg-white, bg-slate-100)
Use dark: variants (this is dark-only)
Mix multiple accent colors
Use high-opacity glass (bg-white/50)
Skip backdrop blur on glass elements
Use small padding (looks cramped)
Forget hover states
Ignore mobile layout

✅ DO:

Stick to the color palette
Use consistent spacing (multiples of 4)
Add subtle animations
Test on mobile first
Keep glass opacity low
Use radial glows sparingly
Maintain high contrast for text

Final Checklist

Before launching, verify:

All backgrounds are #0a0f0d or black
All headings are text-white
All body text is text-slate-300
All CTAs are #80cca5 green
All cards have backdrop-blur-xl
All cards use bg-white/[0.02]
All buttons have hover states
All forms have focus states
Spacing uses multiples of 4
Mobile layout tested
Radial glows are subtle (not overwhelming)
No light mode variants (dark:)
Contrast ratios meet WCAG AA minimum

Time to premium: 30-60 minutes Maintenance: Easy (4 components, 1 color palette) Scalability: High (reusable components)

3.1 KiB Raw Blame History