plcode-darwin-arm64 2.1.0

package/.plcode/skill/experimental/animate/SKILL.md

@@ -0,0 +1,204 @@
+---
+name: animate
+description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight.
+category: design
+args:
+  - name: target
+    description: The feature or component to animate (optional)
+    required: false
+user-invokable: true
+---
+
+Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight.
+
+## MANDATORY PREPARATION
+
+### Context Gathering (Do This First)
+
+You cannot do a great job without having necessary context, such as target audience (critical), desired use-cases (critical), brand personality/tone (playful vs serious, energetic vs calm), and performance constraints.
+
+Attempt to gather these from the current thread or codebase.
+
+1. If you don't find _exact_ information and have to infer from existing design and functionality, you MUST STOP and {{ask_instruction}} whether you got it right.
+2. Otherwise, if you can't fully infer or your level of confidence is medium or lower, you MUST {{ask_instruction}} clarifying questions first to complete your context.
+
+Do NOT proceed until you have answers. Guessing leads to inappropriate or excessive animation.
+
+### Use frontend-design skill
+
+Use the frontend-design skill for design principles and anti-patterns. Do NOT proceed until it has executed and you know all DO's and DON'Ts.
+
+---
+
+## Assess Animation Opportunities
+
+Analyze where motion would improve the experience:
+
+1. **Identify static areas**:
+   - **Missing feedback**: Actions without visual acknowledgment (button clicks, form submission, etc.)
+   - **Jarring transitions**: Instant state changes that feel abrupt (show/hide, page loads, route changes)
+   - **Unclear relationships**: Spatial or hierarchical relationships that aren't obvious
+   - **Lack of delight**: Functional but joyless interactions
+   - **Missed guidance**: Opportunities to direct attention or explain behavior
+
+2. **Understand the context**:
+   - What's the personality? (Playful vs serious, energetic vs calm)
+   - What's the performance budget? (Mobile-first? Complex page?)
+   - Who's the audience? (Motion-sensitive users? Power users who want speed?)
+   - What matters most? (One hero animation vs many micro-interactions?)
+
+If any of these are unclear from the codebase, {{ask_instruction}}
+
+**CRITICAL**: Respect `prefers-reduced-motion`. Always provide non-animated alternatives for users who need them.
+
+## Plan Animation Strategy
+
+Create a purposeful animation plan:
+
+- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?)
+- **Feedback layer**: Which interactions need acknowledgment?
+- **Transition layer**: Which state changes need smoothing?
+- **Delight layer**: Where can we surprise and delight?
+
+**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments.
+
+## Implement Animations
+
+Add motion systematically across these categories:
+
+### Entrance Animations
+
+- **Page load choreography**: Stagger element reveals (100-150ms delays), fade + slide combinations
+- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects)
+- **Content reveals**: Scroll-triggered animations using intersection observer
+- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management
+
+### Micro-interactions
+
+- **Button feedback**:
+  - Hover: Subtle scale (1.02-1.05), color shift, shadow increase
+  - Click: Quick scale down then up (0.95 → 1), ripple effect
+  - Loading: Spinner or pulse state
+- **Form interactions**:
+  - Input focus: Border color transition, slight scale or glow
+  - Validation: Shake on error, check mark on success, smooth color transitions
+- **Toggle switches**: Smooth slide + color transition (200-300ms)
+- **Checkboxes/radio**: Check mark animation, ripple effect
+- **Like/favorite**: Scale + rotation, particle effects, color transition
+
+### State Transitions
+
+- **Show/hide**: Fade + slide (not instant), appropriate timing (200-300ms)
+- **Expand/collapse**: Height transition with overflow handling, icon rotation
+- **Loading states**: Skeleton screen fades, spinner animations, progress bars
+- **Success/error**: Color transitions, icon animations, gentle scale pulse
+- **Enable/disable**: Opacity transitions, cursor changes
+
+### Navigation & Flow
+
+- **Page transitions**: Crossfade between routes, shared element transitions
+- **Tab switching**: Slide indicator, content fade/slide
+- **Carousel/slider**: Smooth transforms, snap points, momentum
+- **Scroll effects**: Parallax layers, sticky headers with state changes, scroll progress indicators
+
+### Feedback & Guidance
+
+- **Hover hints**: Tooltip fade-ins, cursor changes, element highlights
+- **Drag & drop**: Lift effect (shadow + scale), drop zone highlights, smooth repositioning
+- **Copy/paste**: Brief highlight flash on paste, "copied" confirmation
+- **Focus flow**: Highlight path through form or workflow
+
+### Delight Moments
+
+- **Empty states**: Subtle floating animations on illustrations
+- **Completed actions**: Confetti, check mark flourish, success celebrations
+- **Easter eggs**: Hidden interactions for discovery
+- **Contextual animation**: Weather effects, time-of-day themes, seasonal touches
+
+## Technical Implementation
+
+Use appropriate techniques for each animation:
+
+### Timing & Easing
+
+**Durations by purpose:**
+
+- **100-150ms**: Instant feedback (button press, toggle)
+- **200-300ms**: State changes (hover, menu open)
+- **300-500ms**: Layout changes (accordion, modal)
+- **500-800ms**: Entrance animations (page load)
+
+**Easing curves (use these, not CSS defaults):**
+
+```css
+/* Recommended - natural deceleration */
+--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* Smooth, refined */
+--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); /* Slightly snappier */
+--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Confident, decisive */
+
+/* AVOID - feel dated and tacky */
+/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */
+/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */
+```
+
+**Exit animations are faster than entrances.** Use ~75% of enter duration.
+
+### CSS Animations
+
+```css
+/* Prefer for simple, declarative animations */
+- transitions for state changes
+- @keyframes for complex sequences
+- transform + opacity only (GPU-accelerated)
+```
+
+### JavaScript Animation
+
+```javascript
+/* Use for complex, interactive animations */
+- Web Animations API for programmatic control
+- Framer Motion for React
+- GSAP for complex sequences
+```
+
+### Performance
+
+- **GPU acceleration**: Use `transform` and `opacity`, avoid layout properties
+- **will-change**: Add sparingly for known expensive animations
+- **Reduce paint**: Minimize repaints, use `contain` where appropriate
+- **Monitor FPS**: Ensure 60fps on target devices
+
+### Accessibility
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+**NEVER**:
+
+- Use bounce or elastic easing curves—they feel dated and draw attention to the animation itself
+- Animate layout properties (width, height, top, left)—use transform instead
+- Use durations over 500ms for feedback—it feels laggy
+- Animate without purpose—every animation needs a reason
+- Ignore `prefers-reduced-motion`—this is an accessibility violation
+- Animate everything—animation fatigue makes interfaces feel exhausting
+- Block interaction during animations unless intentional
+
+## Verify Quality
+
+Test animations thoroughly:
+
+- **Smooth at 60fps**: No jank on target devices
+- **Feels natural**: Easing curves feel organic, not robotic
+- **Appropriate timing**: Not too fast (jarring) or too slow (laggy)
+- **Reduced motion works**: Animations disabled or simplified appropriately
+- **Doesn't block**: Users can interact during/after animations
+- **Adds value**: Makes interface clearer or more delightful
+
+Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right.

package/.plcode/skill/experimental/application-performance-performance-optimization/SKILL.md

@@ -0,0 +1,158 @@
+---
+name: application-performance-performance-optimization
+description: "Optimize end-to-end application performance with profiling, observability, and backend/frontend tuning. Use when coordinating performance optimization across the stack."
+category: backend
+risk: unknown
+source: community
+date_added: "2026-02-27"
+---
+
+Optimize application performance end-to-end using specialized performance and optimization agents:
+
+[Extended thinking: This workflow orchestrates a comprehensive performance optimization process across the entire application stack. Starting with deep profiling and baseline establishment, the workflow progresses through targeted optimizations in each system layer, validates improvements through load testing, and establishes continuous monitoring for sustained performance. Each phase builds on insights from previous phases, creating a data-driven optimization strategy that addresses real bottlenecks rather than theoretical improvements. The workflow emphasizes modern observability practices, user-centric performance metrics, and cost-effective optimization strategies.]
+
+## Use this skill when
+
+- Coordinating performance optimization across backend, frontend, and infrastructure
+- Establishing baselines and profiling to identify bottlenecks
+- Designing load tests, performance budgets, or capacity plans
+- Building observability for performance and reliability targets
+
+## Do not use this skill when
+
+- The task is a small localized fix with no broader performance goals
+- There is no access to metrics, tracing, or profiling data
+- The request is unrelated to performance or scalability
+
+## Instructions
+
+1. Confirm performance goals, constraints, and target metrics.
+2. Establish baselines with profiling, tracing, and real-user data.
+3. Execute phased optimizations across the stack with measurable impact.
+4. Validate improvements and set guardrails to prevent regressions.
+
+## Safety
+
+- Avoid load testing production without approvals and safeguards.
+- Roll out performance changes gradually with rollback plans.
+
+## Phase 1: Performance Profiling & Baseline
+
+### 1. Comprehensive Performance Profiling
+
+- Use Task tool with subagent_type="performance-engineer"
+- Prompt: "Profile application performance comprehensively for: $ARGUMENTS. Generate flame graphs for CPU usage, heap dumps for memory analysis, trace I/O operations, and identify hot paths. Use APM tools like DataDog or New Relic if available. Include database query profiling, API response times, and frontend rendering metrics. Establish performance baselines for all critical user journeys."
+- Context: Initial performance investigation
+- Output: Detailed performance profile with flame graphs, memory analysis, bottleneck identification, baseline metrics
+
+### 2. Observability Stack Assessment
+
+- Use Task tool with subagent_type="observability-engineer"
+- Prompt: "Assess current observability setup for: $ARGUMENTS. Review existing monitoring, distributed tracing with OpenTelemetry, log aggregation, and metrics collection. Identify gaps in visibility, missing metrics, and areas needing better instrumentation. Recommend APM tool integration and custom metrics for business-critical operations."
+- Context: Performance profile from step 1
+- Output: Observability assessment report, instrumentation gaps, monitoring recommendations
+
+### 3. User Experience Analysis
+
+- Use Task tool with subagent_type="performance-engineer"
+- Prompt: "Analyze user experience metrics for: $ARGUMENTS. Measure Core Web Vitals (LCP, FID, CLS), page load times, time to interactive, and perceived performance. Use Real User Monitoring (RUM) data if available. Identify user journeys with poor performance and their business impact."
+- Context: Performance baselines from step 1
+- Output: UX performance report, Core Web Vitals analysis, user impact assessment
+
+## Phase 2: Database & Backend Optimization
+
+### 4. Database Performance Optimization
+
+- Use Task tool with subagent_type="database-cloud-optimization::database-optimizer"
+- Prompt: "Optimize database performance for: $ARGUMENTS based on profiling data: {context_from_phase_1}. Analyze slow query logs, create missing indexes, optimize execution plans, implement query result caching with Redis/Memcached. Review connection pooling, prepared statements, and batch processing opportunities. Consider read replicas and database sharding if needed."
+- Context: Performance bottlenecks from phase 1
+- Output: Optimized queries, new indexes, caching strategy, connection pool configuration
+
+### 5. Backend Code & API Optimization
+
+- Use Task tool with subagent_type="backend-development::backend-architect"
+- Prompt: "Optimize backend services for: $ARGUMENTS targeting bottlenecks: {context_from_phase_1}. Implement efficient algorithms, add application-level caching, optimize N+1 queries, use async/await patterns effectively. Implement pagination, response compression, GraphQL query optimization, and batch API operations. Add circuit breakers and bulkheads for resilience."
+- Context: Database optimizations from step 4, profiling data from phase 1
+- Output: Optimized backend code, caching implementation, API improvements, resilience patterns
+
+### 6. Microservices & Distributed System Optimization
+
+- Use Task tool with subagent_type="performance-engineer"
+- Prompt: "Optimize distributed system performance for: $ARGUMENTS. Analyze service-to-service communication, implement service mesh optimizations, optimize message queue performance (Kafka/RabbitMQ), reduce network hops. Implement distributed caching strategies and optimize serialization/deserialization."
+- Context: Backend optimizations from step 5
+- Output: Service communication improvements, message queue optimization, distributed caching setup
+
+## Phase 3: Frontend & CDN Optimization
+
+### 7. Frontend Bundle & Loading Optimization
+
+- Use Task tool with subagent_type="frontend-developer"
+- Prompt: "Optimize frontend performance for: $ARGUMENTS targeting Core Web Vitals: {context_from_phase_1}. Implement code splitting, tree shaking, lazy loading, and dynamic imports. Optimize bundle sizes with webpack/rollup analysis. Implement resource hints (prefetch, preconnect, preload). Optimize critical rendering path and eliminate render-blocking resources."
+- Context: UX analysis from phase 1, backend optimizations from phase 2
+- Output: Optimized bundles, lazy loading implementation, improved Core Web Vitals
+
+### 8. CDN & Edge Optimization
+
+- Use Task tool with subagent_type="cloud-infrastructure::cloud-architect"
+- Prompt: "Optimize CDN and edge performance for: $ARGUMENTS. Configure CloudFlare/CloudFront for optimal caching, implement edge functions for dynamic content, set up image optimization with responsive images and WebP/AVIF formats. Configure HTTP/2 and HTTP/3, implement Brotli compression. Set up geographic distribution for global users."
+- Context: Frontend optimizations from step 7
+- Output: CDN configuration, edge caching rules, compression setup, geographic optimization
+
+### 9. Mobile & Progressive Web App Optimization
+
+- Use Task tool with subagent_type="frontend-mobile-development::mobile-developer"
+- Prompt: "Optimize mobile experience for: $ARGUMENTS. Implement service workers for offline functionality, optimize for slow networks with adaptive loading. Reduce JavaScript execution time for mobile CPUs. Implement virtual scrolling for long lists. Optimize touch responsiveness and smooth animations. Consider React Native/Flutter specific optimizations if applicable."
+- Context: Frontend optimizations from steps 7-8
+- Output: Mobile-optimized code, PWA implementation, offline functionality
+
+## Phase 4: Load Testing & Validation
+
+### 10. Comprehensive Load Testing
+
+- Use Task tool with subagent_type="performance-engineer"
+- Prompt: "Conduct comprehensive load testing for: $ARGUMENTS using k6/Gatling/Artillery. Design realistic load scenarios based on production traffic patterns. Test normal load, peak load, and stress scenarios. Include API testing, browser-based testing, and WebSocket testing if applicable. Measure response times, throughput, error rates, and resource utilization at various load levels."
+- Context: All optimizations from phases 1-3
+- Output: Load test results, performance under load, breaking points, scalability analysis
+
+### 11. Performance Regression Testing
+
+- Use Task tool with subagent_type="performance-testing-review::test-automator"
+- Prompt: "Create automated performance regression tests for: $ARGUMENTS. Set up performance budgets for key metrics, integrate with CI/CD pipeline using GitHub Actions or similar. Create Lighthouse CI tests for frontend, API performance tests with Artillery, and database performance benchmarks. Implement automatic rollback triggers for performance regressions."
+- Context: Load test results from step 10, baseline metrics from phase 1
+- Output: Performance test suite, CI/CD integration, regression prevention system
+
+## Phase 5: Monitoring & Continuous Optimization
+
+### 12. Production Monitoring Setup
+
+- Use Task tool with subagent_type="observability-engineer"
+- Prompt: "Implement production performance monitoring for: $ARGUMENTS. Set up APM with DataDog/New Relic/Dynatrace, configure distributed tracing with OpenTelemetry, implement custom business metrics. Create Grafana dashboards for key metrics, set up PagerDuty alerts for performance degradation. Define SLIs/SLOs for critical services with error budgets."
+- Context: Performance improvements from all previous phases
+- Output: Monitoring dashboards, alert rules, SLI/SLO definitions, runbooks
+
+### 13. Continuous Performance Optimization
+
+- Use Task tool with subagent_type="performance-engineer"
+- Prompt: "Establish continuous optimization process for: $ARGUMENTS. Create performance budget tracking, implement A/B testing for performance changes, set up continuous profiling in production. Document optimization opportunities backlog, create capacity planning models, and establish regular performance review cycles."
+- Context: Monitoring setup from step 12, all previous optimization work
+- Output: Performance budget tracking, optimization backlog, capacity planning, review process
+
+## Configuration Options
+
+- **performance_focus**: "latency" | "throughput" | "cost" | "balanced" (default: "balanced")
+- **optimization_depth**: "quick-wins" | "comprehensive" | "enterprise" (default: "comprehensive")
+- **tools_available**: ["datadog", "newrelic", "prometheus", "grafana", "k6", "gatling"]
+- **budget_constraints**: Set maximum acceptable costs for infrastructure changes
+- **user_impact_tolerance**: "zero-downtime" | "maintenance-window" | "gradual-rollout"
+
+## Success Criteria
+
+- **Response Time**: P50 < 200ms, P95 < 1s, P99 < 2s for critical endpoints
+- **Core Web Vitals**: LCP < 2.5s, FID < 100ms, CLS < 0.1
+- **Throughput**: Support 2x current peak load with <1% error rate
+- **Database Performance**: Query P95 < 100ms, no queries > 1s
+- **Resource Utilization**: CPU < 70%, Memory < 80% under normal load
+- **Cost Efficiency**: Performance per dollar improved by minimum 30%
+- **Monitoring Coverage**: 100% of critical paths instrumented with alerting
+
+Performance optimization target: $ARGUMENTS