plcode-linux-x64-baseline 2.1.0

package/.plcode/context/ui/web/design-systems.md

@@ -0,0 +1,395 @@
+<!-- Context: development/design-systems | Priority: high | Version: 1.0 | Updated: 2025-12-09 -->
+
+# Design Systems
+
+## Overview
+
+This context file provides reusable design system patterns, theme templates, and color systems for frontend design work. Use these as starting points for creating cohesive, professional UI designs.
+
+## Quick Reference
+
+**Color Format**: OKLCH (perceptually uniform color space)
+**Theme Variables**: CSS custom properties (--variable-name)
+**Font Sources**: Google Fonts
+**Responsive**: All designs must be mobile-first responsive
+
+---
+
+## Theme Patterns
+
+### Neo-Brutalism Style
+
+**Characteristics**: 90s web design aesthetic, bold borders, flat shadows, high contrast
+
+**Use Cases**:
+
+- Retro/vintage applications
+- Bold, statement-making interfaces
+- Art/creative portfolios
+- Playful consumer apps
+
+**Theme Template**:
+
+```css
+:root {
+  /* Colors - High contrast, bold */
+  --background: oklch(1 0 0);
+  --foreground: oklch(0 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0 0 0);
+  --primary: oklch(0.6489 0.237 26.9728);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.968 0.211 109.7692);
+  --secondary-foreground: oklch(0 0 0);
+  --muted: oklch(0.9551 0 0);
+  --muted-foreground: oklch(0.3211 0 0);
+  --accent: oklch(0.5635 0.2408 260.8178);
+  --accent-foreground: oklch(1 0 0);
+  --destructive: oklch(0 0 0);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0 0 0);
+  --input: oklch(0 0 0);
+  --ring: oklch(0.6489 0.237 26.9728);
+
+  /* Chart colors */
+  --chart-1: oklch(0.6489 0.237 26.9728);
+  --chart-2: oklch(0.968 0.211 109.7692);
+  --chart-3: oklch(0.5635 0.2408 260.8178);
+  --chart-4: oklch(0.7323 0.2492 142.4953);
+  --chart-5: oklch(0.5931 0.2726 328.3634);
+
+  /* Sidebar */
+  --sidebar: oklch(0.9551 0 0);
+  --sidebar-foreground: oklch(0 0 0);
+  --sidebar-primary: oklch(0.6489 0.237 26.9728);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.5635 0.2408 260.8178);
+  --sidebar-accent-foreground: oklch(1 0 0);
+  --sidebar-border: oklch(0 0 0);
+  --sidebar-ring: oklch(0.6489 0.237 26.9728);
+
+  /* Typography */
+  --font-sans: DM Sans, sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: Space Mono, monospace;
+
+  /* Border radius - Sharp corners */
+  --radius: 0px;
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  /* Shadows - Bold, offset shadows */
+  --shadow-2xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.5);
+  --shadow-xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.5);
+  --shadow-sm: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 1px 2px -1px hsl(0 0% 0% / 1);
+  --shadow: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 1px 2px -1px hsl(0 0% 0% / 1);
+  --shadow-md: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 2px 4px -1px hsl(0 0% 0% / 1);
+  --shadow-lg: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 4px 6px -1px hsl(0 0% 0% / 1);
+  --shadow-xl: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 8px 10px -1px hsl(0 0% 0% / 1);
+  --shadow-2xl: 4px 4px 0px 0px hsl(0 0% 0% / 2.5);
+
+  /* Spacing */
+  --tracking-normal: 0em;
+  --spacing: 0.25rem;
+}
+```
+
+---
+
+### Modern Dark Mode Style
+
+**Characteristics**: Clean, minimal, professional (Vercel/Linear aesthetic)
+
+**Use Cases**:
+
+- SaaS applications
+- Developer tools
+- Professional dashboards
+- Enterprise applications
+- Modern web apps
+
+**Theme Template**:
+
+```css
+:root {
+  /* Colors - Subtle, professional */
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+
+  /* Chart colors - Monochromatic blues */
+  --chart-1: oklch(0.81 0.1 252);
+  --chart-2: oklch(0.62 0.19 260);
+  --chart-3: oklch(0.55 0.22 263);
+  --chart-4: oklch(0.49 0.22 264);
+  --chart-5: oklch(0.42 0.18 266);
+
+  /* Sidebar */
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+
+  /* Typography - System fonts */
+  --font-sans:
+    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+    "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+  /* Border radius - Rounded */
+  --radius: 0.625rem;
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  /* Shadows - Subtle, soft */
+  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
+  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
+  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
+  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
+  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
+
+  /* Spacing */
+  --tracking-normal: 0em;
+  --spacing: 0.25rem;
+}
+```
+
+---
+
+## Typography System
+
+### Recommended Font Families
+
+**Monospace Fonts** (Code, technical interfaces):
+
+- JetBrains Mono
+- Fira Code
+- Source Code Pro
+- IBM Plex Mono
+- Roboto Mono
+- Space Mono
+- Geist Mono
+
+**Sans-Serif Fonts** (UI, body text):
+
+- Inter
+- Roboto
+- Open Sans
+- Poppins
+- Montserrat
+- Outfit
+- Plus Jakarta Sans
+- DM Sans
+- Geist
+- Space Grotesk
+
+**Display/Decorative Fonts**:
+
+- Oxanium
+- Architects Daughter
+
+**Serif Fonts** (Editorial, formal):
+
+- Merriweather
+- Playfair Display
+- Lora
+- Source Serif Pro
+- Libre Baskerville
+
+### Font Loading
+
+Always use Google Fonts for consistency and reliability:
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+```
+
+---
+
+## Color System Guidelines
+
+### OKLCH Color Space
+
+Use OKLCH for perceptually uniform colors:
+
+- **L** (Lightness): 0-1 (0 = black, 1 = white)
+- **C** (Chroma): 0-0.4 (saturation)
+- **H** (Hue): 0-360 (color angle)
+
+**Format**: `oklch(L C H)`
+
+**Example**: `oklch(0.6489 0.2370 26.9728)` = vibrant orange
+
+### Color Palette Rules
+
+1. **Avoid Bootstrap Blue**: Unless explicitly requested, avoid generic blue (#007bff)
+2. **Semantic Colors**: Use meaningful color names (--primary, --destructive, --success)
+3. **Contrast**: Ensure WCAG AA compliance (4.5:1 for text)
+4. **Consistency**: Use theme variables, not hardcoded colors
+
+### Background/Foreground Pairing
+
+**Rule**: Background should contrast with content
+
+- Light component → Dark background
+- Dark component → Light background
+- Ensures visibility and visual hierarchy
+
+---
+
+## Shadow System
+
+### Shadow Scales
+
+Shadows create depth and hierarchy:
+
+- `--shadow-2xs`: Minimal elevation (1-2px)
+- `--shadow-xs`: Subtle lift (2-3px)
+- `--shadow-sm`: Small cards (3-4px)
+- `--shadow`: Default elevation (4-6px)
+- `--shadow-md`: Medium cards (6-8px)
+- `--shadow-lg`: Modals, dropdowns (8-12px)
+- `--shadow-xl`: Floating panels (12-16px)
+- `--shadow-2xl`: Maximum elevation (16-24px)
+
+### Shadow Styles
+
+**Soft Shadows** (Modern):
+
+```css
+box-shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1);
+```
+
+**Hard Shadows** (Neo-brutalism):
+
+```css
+box-shadow: 4px 4px 0px 0px hsl(0 0% 0% / 1);
+```
+
+---
+
+## Spacing System
+
+### Base Unit
+
+Use `--spacing: 0.25rem` (4px) as base unit
+
+### Scale
+
+- 1x = 0.25rem (4px)
+- 2x = 0.5rem (8px)
+- 3x = 0.75rem (12px)
+- 4x = 1rem (16px)
+- 6x = 1.5rem (24px)
+- 8x = 2rem (32px)
+- 12x = 3rem (48px)
+- 16x = 4rem (64px)
+
+---
+
+## Border Radius System
+
+### Radius Scales
+
+```css
+--radius-sm: calc(var(--radius) - 4px);
+--radius-md: calc(var(--radius) - 2px);
+--radius-lg: var(--radius);
+--radius-xl: calc(var(--radius) + 4px);
+```
+
+### Common Values
+
+- **Sharp** (Neo-brutalism): `--radius: 0px`
+- **Subtle** (Modern): `--radius: 0.375rem` (6px)
+- **Rounded** (Friendly): `--radius: 0.625rem` (10px)
+- **Pill** (Buttons): `--radius: 9999px`
+
+---
+
+## Usage Guidelines
+
+### When to Use Each Theme
+
+**Neo-Brutalism**:
+
+- ✅ Creative/artistic projects
+- ✅ Retro/vintage aesthetics
+- ✅ Bold, statement-making designs
+- ❌ Enterprise/corporate applications
+- ❌ Accessibility-critical interfaces
+
+**Modern Dark Mode**:
+
+- ✅ SaaS applications
+- ✅ Developer tools
+- ✅ Professional dashboards
+- ✅ Enterprise applications
+- ✅ Accessibility-critical interfaces
+
+### Customization
+
+1. Start with a base theme template
+2. Adjust primary/accent colors for brand
+3. Modify radius for desired feel
+4. Adjust shadows for depth preference
+5. Test contrast ratios for accessibility
+
+---
+
+## Best Practices
+
+✅ **Use CSS custom properties** for all theme values
+✅ **Test in light and dark modes** if applicable
+✅ **Validate color contrast** (WCAG AA minimum)
+✅ **Use semantic color names** (--primary, not --blue)
+✅ **Load fonts from Google Fonts** for reliability
+✅ **Apply consistent spacing** using the spacing scale
+✅ **Test responsive behavior** at all breakpoints
+
+❌ **Don't hardcode colors** in components
+❌ **Don't use generic blue** (#007bff) without reason
+❌ **Don't mix color formats** (stick to OKLCH)
+❌ **Don't skip contrast testing**
+❌ **Don't use too many font families** (2-3 max)
+
+---
+
+## References
+
+- [OKLCH Color Picker](https://oklch.com/)
+- [Google Fonts](https://fonts.google.com/)
+- [WCAG Contrast Checker](https://webaim.org/resources/contrastchecker/)
+- [Tailwind CSS Colors](https://tailwindcss.com/docs/customizing-colors)

package/.plcode/context/ui/web/navigation.md

@@ -0,0 +1,116 @@
+# Web UI Context
+
+**Purpose**: Web-based UI patterns, animations, styling standards, and React component design
+
+**Last Updated**: 2026-01-07
+
+---
+
+## Quick Navigation
+
+### Core Files
+
+| File                                               | Description                                               | Priority |
+| -------------------------------------------------- | --------------------------------------------------------- | -------- |
+| [animation-patterns.md](animation-patterns.md)     | CSS animations, transitions, micro-interactions           | high     |
+| [ui-styling-standards.md](ui-styling-standards.md) | CSS frameworks, Tailwind patterns, styling best practices | high     |
+| [react-patterns.md](react-patterns.md)             | Modern React patterns, hooks, component design            | high     |
+| [design-systems.md](design-systems.md)             | Design system principles and component libraries          | medium   |
+| [design-assets.md](design-assets.md)               | Icons, fonts, images, and asset management                | medium   |
+
+### Subcategories
+
+| Subcategory | Description                                        | Path                                         |
+| ----------- | -------------------------------------------------- | -------------------------------------------- |
+| **design/** | Advanced design patterns (scrollytelling, effects) | [design/navigation.md](design/navigation.md) |
+
+---
+
+## Loading Strategy
+
+### For general web UI work:
+
+1. Load `ui-styling-standards.md` (CSS frameworks, Tailwind)
+2. Load `react-patterns.md` (component patterns)
+3. Reference `animation-patterns.md` (if animations needed)
+
+### For animation work:
+
+1. Load `animation-patterns.md` (CSS animations, transitions)
+2. Reference `design/` subcategory for advanced patterns
+
+### For scroll animations:
+
+1. Navigate to `design/` subcategory
+2. Load scroll-linked animation guides
+
+---
+
+## Scope
+
+This subcategory covers:
+
+- ✅ CSS animations and transitions
+- ✅ Tailwind CSS and utility-first styling
+- ✅ React component patterns and hooks
+- ✅ Design systems and component libraries
+- ✅ Icon libraries and web fonts
+- ✅ Scroll-linked animations (scrollytelling)
+- ✅ Canvas-based rendering
+- ✅ Framer Motion patterns
+
+---
+
+## File Summaries
+
+### animation-patterns.md
+
+CSS animations, micro-interactions, and UI transitions. Covers timing standards, easing functions, button/card interactions, modals, loading states, and accessibility.
+
+**Key topics**: Animation micro-syntax, 60fps performance, reduced motion, chat UI animations
+
+### ui-styling-standards.md
+
+CSS framework usage, Tailwind CSS patterns, responsive design, and styling best practices.
+
+**Key topics**: Utility-first CSS, component styling, responsive breakpoints, dark mode
+
+### react-patterns.md
+
+Modern React patterns including functional components, hooks, state management, and performance optimization.
+
+**Key topics**: Custom hooks, context API, code splitting, memoization
+
+### design-systems.md
+
+Design system principles, component libraries, and maintaining consistency across applications.
+
+**Key topics**: Design tokens, component APIs, documentation, versioning
+
+### design-assets.md
+
+Managing icons, fonts, images, and other design assets in web applications.
+
+**Key topics**: Icon libraries (Lucide, Font Awesome), web fonts, image optimization
+
+---
+
+## Related Categories
+
+- `ui/terminal/` - Terminal UI patterns
+- `development/` - General development patterns
+- `product/` - Product design and UX strategy
+
+---
+
+## Used By
+
+**Agents**: frontend-specialist, design-specialist, ui-developer, react-developer, animation-expert
+
+---
+
+## Statistics
+
+- Core files: 5
+- Subcategories: 1 (design/)
+- **Total context files**: 5 + design subcategory