plcode-darwin-x64 2.1.0

package/.plcode/skill/experimental/frontend-ui-animator/references/component-checklist.md

@@ -0,0 +1,161 @@
+# Component Animation Checklist
+
+Use this template to audit and plan animations for a project.
+
+---
+
+## Project Analysis Template
+
+### 1. Project Structure Scan
+
+```bash
+# Pages to analyze
+app/
+├── page.tsx              # Homepage
+├── about/page.tsx        # About page
+├── services/page.tsx     # Services page
+└── contact/page.tsx      # Contact page
+
+# Components to analyze
+components/
+├── ui/                   # Base UI components
+├── sections/             # Page sections
+└── layout/               # Layout components
+```
+
+### 2. Technical Setup Check
+
+| Item                           | Status | Notes                          |
+| ------------------------------ | ------ | ------------------------------ |
+| Tailwind config has keyframes  | ☐      | Check `theme.extend.keyframes` |
+| Tailwind config has animations | ☐      | Check `theme.extend.animation` |
+| Framer Motion installed        | ☐      | Check `package.json`           |
+| GSAP installed                 | ☐      | Check `package.json`           |
+| Reduced motion CSS exists      | ☐      | Check `globals.css`            |
+
+---
+
+## Animation Audit Table
+
+### Priority 1: Hero / First Impression
+
+| Component       | Current State | Proposed Animation            | Trigger     | Effort |
+| --------------- | ------------- | ----------------------------- | ----------- | ------ |
+| Hero heading    | Static        | Fade + slide up, word-by-word | Load        | Low    |
+| Hero subtext    | Static        | Fade in with delay            | Load        | Low    |
+| Hero CTA button | Static        | Fade in + hover lift          | Load/Hover  | Low    |
+| Hero image      | Static        | Scale in or ken burns         | Load        | Medium |
+| Hero background | Static        | Gradient shift or parallax    | Load/Scroll | Medium |
+
+### Priority 2: Hover Interactions
+
+| Component        | Current State | Proposed Animation       | Trigger | Effort |
+| ---------------- | ------------- | ------------------------ | ------- | ------ |
+| Navigation links | Basic hover   | Underline slide or color | Hover   | Low    |
+| Buttons (all)    | Basic hover   | Lift + shadow            | Hover   | Low    |
+| Cards            | Basic hover   | Scale + shadow           | Hover   | Low    |
+| Images in cards  | Static        | Zoom on parent hover     | Hover   | Low    |
+| Social icons     | Basic hover   | Scale + color            | Hover   | Low    |
+
+### Priority 3: Content Reveal (Scroll)
+
+| Component        | Current State | Proposed Animation  | Trigger | Effort |
+| ---------------- | ------------- | ------------------- | ------- | ------ |
+| Section headings | Static        | Fade + slide up     | Scroll  | Medium |
+| Feature cards    | Static        | Staggered fade in   | Scroll  | Medium |
+| Testimonials     | Static        | Slide in from sides | Scroll  | Medium |
+| Stats/Numbers    | Static        | Count up animation  | Scroll  | High   |
+| Images           | Static        | Fade + scale        | Scroll  | Medium |
+
+### Priority 4: Background / Atmosphere
+
+| Component           | Current State | Proposed Animation | Trigger | Effort |
+| ------------------- | ------------- | ------------------ | ------- | ------ |
+| Page background     | Solid color   | Gradient mesh      | Always  | Low    |
+| Section dividers    | Static        | Wave or curve      | Always  | Low    |
+| Decorative elements | Static        | Float              | Always  | Low    |
+| Noise/grain overlay | None          | Subtle texture     | Always  | Low    |
+
+### Priority 5: Navigation / Transitions
+
+| Component         | Current State     | Proposed Animation       | Trigger      | Effort |
+| ----------------- | ----------------- | ------------------------ | ------------ | ------ |
+| Navbar            | Static            | Scroll-based blur/shadow | Scroll       | Medium |
+| Mobile menu       | Instant show/hide | Slide in from right      | Click        | Medium |
+| Page transitions  | None              | Fade or clip reveal      | Route change | High   |
+| Scroll to section | Instant jump      | Smooth scroll            | Click        | Low    |
+
+---
+
+## Implementation Phases
+
+### Phase 1: Quick Wins (1-2 hours)
+
+Focus on CSS-only animations that require no new dependencies:
+
+- [ ] Add base keyframes to Tailwind config
+- [ ] Add reduced-motion support to globals.css
+- [ ] Hero section fade-in animations
+- [ ] Button hover effects (all buttons)
+- [ ] Card hover effects (scale + shadow)
+- [ ] Navbar scroll effect
+
+### Phase 2: Scroll Reveals (2-3 hours)
+
+Add IntersectionObserver-based animations:
+
+- [ ] Create `useScrollReveal` hook
+- [ ] Section headings reveal
+- [ ] Feature/service cards staggered reveal
+- [ ] Testimonials reveal
+- [ ] Footer content reveal
+
+### Phase 3: Enhanced Effects (3-4 hours)
+
+More complex animations:
+
+- [ ] Hero text letter/word animation
+- [ ] Image zoom on card hover
+- [ ] Marquee for logos/partners
+- [ ] Flashlight effect on cards (if applicable)
+- [ ] Mobile menu slide animation
+
+### Phase 4: Polish (Optional, 2+ hours)
+
+Advanced effects requiring more effort:
+
+- [ ] Page transitions (Framer Motion)
+- [ ] Number count-up animations
+- [ ] Parallax backgrounds
+- [ ] Border beam effects on CTAs
+- [ ] Custom cursor effects
+
+---
+
+## Animation Token Reference
+
+Use consistent timing and easing across the project:
+
+| Token             | Value                             | Use Case                   |
+| ----------------- | --------------------------------- | -------------------------- |
+| `duration-fast`   | 150ms                             | Micro-interactions, hovers |
+| `duration-normal` | 300ms                             | Standard transitions       |
+| `duration-slow`   | 500ms                             | Reveals, entrances         |
+| `duration-slower` | 800ms                             | Hero animations            |
+| `ease-out`        | cubic-bezier(0, 0, 0.2, 1)        | Entrances                  |
+| `ease-in-out`     | cubic-bezier(0.4, 0, 0.2, 1)      | Continuous                 |
+| `ease-spring`     | cubic-bezier(0.34, 1.56, 0.64, 1) | Bouncy effects             |
+
+---
+
+## Quality Checklist
+
+Before marking animation implementation complete:
+
+- [ ] All animations respect `prefers-reduced-motion`
+- [ ] No layout shifts (CLS) caused by animations
+- [ ] Animations don't block user interaction
+- [ ] Stagger delays are reasonable (not too slow)
+- [ ] Hover states have appropriate transition duration
+- [ ] Mobile performance is acceptable (test on real device)
+- [ ] Animations enhance, not distract from content

package/.plcode/skill/experimental/frontend-ui-animator/references/tailwind-presets.md

@@ -0,0 +1,404 @@
+# Tailwind Animation Presets
+
+Copy-paste ready configurations for `tailwind.config.ts`.
+
+---
+
+## Complete Animation Config
+
+Add to `theme.extend` in your Tailwind config:
+
+```ts
+// tailwind.config.ts
+import type { Config } from "tailwindcss"
+
+const config: Config = {
+  // ... other config
+  theme: {
+    extend: {
+      // ... other extensions
+
+      keyframes: {
+        // === FADE ANIMATIONS ===
+        "fade-in": {
+          from: { opacity: "0" },
+          to: { opacity: "1" },
+        },
+        "fade-out": {
+          from: { opacity: "1" },
+          to: { opacity: "0" },
+        },
+        "fade-slide-in": {
+          from: {
+            opacity: "0",
+            transform: "translateY(20px)",
+            filter: "blur(4px)",
+          },
+          to: {
+            opacity: "1",
+            transform: "translateY(0)",
+            filter: "blur(0)",
+          },
+        },
+        "fade-slide-in-right": {
+          from: {
+            opacity: "0",
+            transform: "translateX(20px)",
+          },
+          to: {
+            opacity: "1",
+            transform: "translateX(0)",
+          },
+        },
+        "fade-slide-in-left": {
+          from: {
+            opacity: "0",
+            transform: "translateX(-20px)",
+          },
+          to: {
+            opacity: "1",
+            transform: "translateX(0)",
+          },
+        },
+
+        // === SCALE ANIMATIONS ===
+        "scale-in": {
+          from: {
+            opacity: "0",
+            transform: "scale(0.9)",
+          },
+          to: {
+            opacity: "1",
+            transform: "scale(1)",
+          },
+        },
+        "scale-out": {
+          from: {
+            opacity: "1",
+            transform: "scale(1)",
+          },
+          to: {
+            opacity: "0",
+            transform: "scale(0.9)",
+          },
+        },
+
+        // === SLIDE ANIMATIONS ===
+        "slide-up": {
+          from: { transform: "translateY(100%)" },
+          to: { transform: "translateY(0)" },
+        },
+        "slide-down": {
+          from: { transform: "translateY(-100%)" },
+          to: { transform: "translateY(0)" },
+        },
+        "slide-left": {
+          from: { transform: "translateX(100%)" },
+          to: { transform: "translateX(0)" },
+        },
+        "slide-right": {
+          from: { transform: "translateX(-100%)" },
+          to: { transform: "translateX(0)" },
+        },
+
+        // === CLIP-PATH REVEALS ===
+        "clip-reveal-right": {
+          from: { clipPath: "inset(0 100% 0 0)" },
+          to: { clipPath: "inset(0 0 0 0)" },
+        },
+        "clip-reveal-left": {
+          from: { clipPath: "inset(0 0 0 100%)" },
+          to: { clipPath: "inset(0 0 0 0)" },
+        },
+        "clip-reveal-up": {
+          from: { clipPath: "inset(100% 0 0 0)" },
+          to: { clipPath: "inset(0 0 0 0)" },
+        },
+        "clip-reveal-down": {
+          from: { clipPath: "inset(0 0 100% 0)" },
+          to: { clipPath: "inset(0 0 0 0)" },
+        },
+
+        // === CONTINUOUS ANIMATIONS ===
+        marquee: {
+          from: { transform: "translateX(0)" },
+          to: { transform: "translateX(-50%)" },
+        },
+        "marquee-reverse": {
+          from: { transform: "translateX(-50%)" },
+          to: { transform: "translateX(0)" },
+        },
+        float: {
+          "0%, 100%": { transform: "translateY(0)" },
+          "50%": { transform: "translateY(-10px)" },
+        },
+        "pulse-soft": {
+          "0%, 100%": { opacity: "1" },
+          "50%": { opacity: "0.7" },
+        },
+        "spin-slow": {
+          from: { transform: "rotate(0deg)" },
+          to: { transform: "rotate(360deg)" },
+        },
+        blink: {
+          "0%, 100%": { opacity: "1" },
+          "50%": { opacity: "0" },
+        },
+
+        // === BACKGROUND ANIMATIONS ===
+        "gradient-shift": {
+          "0%, 100%": { backgroundPosition: "0% 50%" },
+          "50%": { backgroundPosition: "100% 50%" },
+        },
+        kenburns: {
+          from: { transform: "scale(1)" },
+          to: { transform: "scale(1.1)" },
+        },
+
+        // === SPECIAL EFFECTS ===
+        ripple: {
+          from: {
+            width: "0",
+            height: "0",
+            opacity: "0.5",
+          },
+          to: {
+            width: "200px",
+            height: "200px",
+            opacity: "0",
+          },
+        },
+        "beam-rotate": {
+          to: { transform: "rotate(360deg)" },
+        },
+        shimmer: {
+          from: { backgroundPosition: "-200% 0" },
+          to: { backgroundPosition: "200% 0" },
+        },
+      },
+
+      animation: {
+        // === FADE ===
+        "fade-in": "fade-in 0.5s ease-out both",
+        "fade-out": "fade-out 0.3s ease-out both",
+        "fade-slide-in": "fade-slide-in 0.6s ease-out both",
+        "fade-slide-in-right": "fade-slide-in-right 0.5s ease-out both",
+        "fade-slide-in-left": "fade-slide-in-left 0.5s ease-out both",
+
+        // === SCALE ===
+        "scale-in": "scale-in 0.3s ease-out both",
+        "scale-out": "scale-out 0.2s ease-in both",
+
+        // === SLIDE ===
+        "slide-up": "slide-up 0.5s ease-out both",
+        "slide-down": "slide-down 0.5s ease-out both",
+        "slide-left": "slide-left 0.5s ease-out both",
+        "slide-right": "slide-right 0.5s ease-out both",
+
+        // === CLIP REVEAL ===
+        "clip-reveal-right": "clip-reveal-right 0.8s ease-out both",
+        "clip-reveal-left": "clip-reveal-left 0.8s ease-out both",
+        "clip-reveal-up": "clip-reveal-up 0.8s ease-out both",
+        "clip-reveal-down": "clip-reveal-down 0.8s ease-out both",
+
+        // === CONTINUOUS ===
+        marquee: "marquee 30s linear infinite",
+        "marquee-fast": "marquee 15s linear infinite",
+        "marquee-slow": "marquee 45s linear infinite",
+        "marquee-reverse": "marquee-reverse 30s linear infinite",
+        float: "float 3s ease-in-out infinite",
+        "pulse-soft": "pulse-soft 2s ease-in-out infinite",
+        "spin-slow": "spin-slow 8s linear infinite",
+        blink: "blink 1s step-end infinite",
+
+        // === BACKGROUND ===
+        "gradient-shift": "gradient-shift 15s ease infinite",
+        kenburns: "kenburns 20s ease-out forwards",
+
+        // === SPECIAL ===
+        ripple: "ripple 0.6s ease-out forwards",
+        "beam-rotate": "beam-rotate 2s linear infinite",
+        shimmer: "shimmer 2s linear infinite",
+      },
+    },
+  },
+}
+
+export default config
+```
+
+---
+
+## Global CSS Additions
+
+Add to `globals.css`:
+
+```css
+/* === REDUCED MOTION === */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* === UTILITY CLASSES === */
+
+/* Stagger delay utilities */
+.stagger-1 {
+  animation-delay: 100ms;
+}
+.stagger-2 {
+  animation-delay: 200ms;
+}
+.stagger-3 {
+  animation-delay: 300ms;
+}
+.stagger-4 {
+  animation-delay: 400ms;
+}
+.stagger-5 {
+  animation-delay: 500ms;
+}
+.stagger-6 {
+  animation-delay: 600ms;
+}
+.stagger-7 {
+  animation-delay: 700ms;
+}
+.stagger-8 {
+  animation-delay: 800ms;
+}
+
+/* Pause animation on hover (for marquees) */
+.hover-pause:hover {
+  animation-play-state: paused;
+}
+
+/* Marquee mask for fade edges */
+.marquee-mask {
+  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
+}
+
+/* Button beam effect base */
+.btn-beam {
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-beam::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: 1px solid transparent;
+  border-radius: inherit;
+  background: linear-gradient(90deg, transparent, hsl(var(--primary)), transparent) border-box;
+  mask:
+    linear-gradient(#fff 0 0) padding-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.btn-beam:hover::before {
+  opacity: 1;
+  animation: beam-rotate 2s linear infinite;
+}
+
+/* Shimmer skeleton effect */
+.shimmer {
+  background: linear-gradient(
+    90deg,
+    hsl(var(--muted)) 0%,
+    hsl(var(--muted-foreground) / 0.1) 50%,
+    hsl(var(--muted)) 100%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 2s linear infinite;
+}
+```
+
+---
+
+## Minimal Config (Quick Start)
+
+If you need just the essentials:
+
+```ts
+keyframes: {
+  'fade-slide-in': {
+    from: { opacity: '0', transform: 'translateY(20px)' },
+    to: { opacity: '1', transform: 'translateY(0)' },
+  },
+  'scale-in': {
+    from: { opacity: '0', transform: 'scale(0.95)' },
+    to: { opacity: '1', transform: 'scale(1)' },
+  },
+  'marquee': {
+    from: { transform: 'translateX(0)' },
+    to: { transform: 'translateX(-50%)' },
+  },
+},
+animation: {
+  'fade-slide-in': 'fade-slide-in 0.5s ease-out both',
+  'scale-in': 'scale-in 0.3s ease-out both',
+  'marquee': 'marquee 30s linear infinite',
+},
+```
+
+---
+
+## Usage Examples
+
+### Hero Section
+
+```tsx
+<section className="relative">
+  <h1 className="animate-fade-slide-in">Welcome</h1>
+  <p className="animate-fade-slide-in stagger-1">Subtitle text</p>
+  <button className="animate-fade-slide-in stagger-2 hover:-translate-y-0.5 hover:shadow-lg transition-all">
+    Get Started
+  </button>
+</section>
+```
+
+### Card Grid with Stagger
+
+```tsx
+<div className="grid grid-cols-3 gap-6">
+  {cards.map((card, i) => (
+    <div
+      key={card.id}
+      className="animate-fade-slide-in hover:scale-[1.02] hover:shadow-xl transition-all"
+      style={{ animationDelay: `${i * 100}ms` }}
+    >
+      {card.content}
+    </div>
+  ))}
+</div>
+```
+
+### Logo Marquee
+
+```tsx
+<div className="overflow-hidden marquee-mask">
+  <div className="flex gap-8 animate-marquee hover-pause">
+    {[...logos, ...logos].map((logo, i) => (
+      <img key={i} src={logo} className="h-8 w-auto" />
+    ))}
+  </div>
+</div>
+```
+
+### Button with Effects
+
+```tsx
+<button className="btn-beam px-6 py-3 rounded-full bg-primary text-primary-foreground hover:-translate-y-0.5 hover:shadow-lg transition-all">
+  Contact Us
+</button>
+```

package/.plcode/skill/experimental/frontend-ui-integration/SKILL.md

@@ -0,0 +1,79 @@
+---
+name: frontend-ui-integration
+description: Implement or extend a user-facing workflow in a web application, integrating with existing backend APIs. Use when the feature is primarily a UI/UX change backed by existing APIs, affects only the web frontend, and requires following design system, routing, and testing conventions.
+category: design
+---
+
+# Skill: Frontend UI integration
+
+## Purpose
+
+Implement or extend a user-facing workflow in our primary web application, integrating with **existing backend APIs** and following our **design system, routing, and testing conventions**.
+
+## When to use this skill
+
+- The feature is primarily a **UI/UX change** backed by one or more existing APIs.
+- The backend contracts, auth model, and core business rules **already exist**.
+- The change affects **only** the web frontend (no schema or service ownership changes).
+
+## Inputs
+
+- **Feature description**: short narrative of the user flow and outcomes.
+- **Relevant APIs**: endpoints, request/response types, and links to source definitions.
+- **Target routes/components**: paths, component names, or feature modules.
+- **Design references**: Figma links or existing screens to mirror.
+- **Guardrails**: performance limits, accessibility requirements, and any security constraints.
+
+## Out of scope
+
+- Creating new backend services or changing persistent data models.
+- Modifying authentication/authorization flows.
+- Introducing new frontend frameworks or design systems.
+
+## Conventions
+
+- **Framework**: React with TypeScript.
+- **Routing**: use the existing router and route layout patterns.
+- **Styling**: use the in-house design system components (Buttons, Inputs, Modals, Toasts, etc.).
+- **State management**: prefer the existing state libraries (e.g., React Query, Redux, Zustand) and follow established patterns.
+
+## Required behavior
+
+1. Implement the UI changes with **strong typing** for all props and API responses.
+2. Handle loading, empty, error, and success states using existing primitives.
+3. Ensure the UI is **keyboard accessible** and screen-reader friendly.
+4. Respect feature flags and rollout mechanisms where applicable.
+
+## Required artifacts
+
+- Updated components and hooks in the appropriate feature module.
+- **Unit tests** for core presentation logic.
+- **Integration or component tests** for the new flow (e.g., React Testing Library, Cypress, Playwright) where the repo already uses them.
+- Minimal **CHANGELOG or PR description text** summarizing the behavior change (to be placed in the PR, not this file).
+
+## Implementation checklist
+
+1. Locate the relevant feature module and existing components.
+2. Confirm the backend APIs and types, updating shared TypeScript types if needed.
+3. Implement the UI, wiring in API calls via the existing data layer.
+4. Add or update tests to cover the new behavior and edge cases.
+5. Run the required validation commands (see below).
+
+## Verification
+
+Run the following (adjust commands to match the project):
+
+- `pnpm lint`
+- `pnpm test -- --runInBand --watch=false`
+- `pnpm typecheck` (if configured separately)
+
+The skill is complete when:
+
+- All tests, linters, and type checks pass.
+- The new UI behaves as specified across normal, error, and boundary cases.
+- No unrelated files or modules are modified.
+
+## Safety and escalation
+
+- If the requested change requires backend contract changes, **stop** and request a backend-focused task instead.
+- If design references conflict with existing accessibility standards, favor accessibility and highlight the discrepancy in the PR description.