npm - @harness-engineering/cli - Versions diffs - 1.23.2 → 1.24.0 - Mend

@harness-engineering/cli 1.23.2 → 1.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4116) hide show

package/dist/agents/skills/claude-code/astro-view-transitions/SKILL.md ADDED Viewed

@@ -0,0 +1,168 @@
+# Astro View Transitions
+> Animate page navigations with native browser View Transitions API, persist interactive islands across pages, and hook into the transition lifecycle.
+## When to Use
+- You want smooth animated transitions between pages without building a SPA
+- You need a persistent element (audio player, cart widget, sticky header) that survives page navigation without re-mounting
+- You are implementing shared-element transitions where a thumbnail morphs into a hero image on the next page
+- You need to run JavaScript before or after a page swap (re-initialize analytics, trigger animations)
+- You are debugging a flash of unstyled content or a broken transition and need to understand the lifecycle events
+## Instructions
+1. Add the `<ViewTransitions />` component to your layout's `<head>`. This is the only thing needed to enable Astro's router and transition support:
+```astro
+---
+// src/layouts/BaseLayout.astro
+import { ViewTransitions } from 'astro:transitions';
+---
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <ViewTransitions />
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>
+```
+2. Use `transition:name` to create a shared-element transition between two pages. The value must be unique on the page and match on both the source and destination page:
+```astro
+<!-- Blog index: thumbnail -->
+<img src={post.cover} transition:name={`cover-${post.slug}`} alt="" />
+<!-- Blog post: hero image — same transition:name value -->
+<img src={post.data.cover} transition:name={`cover-${post.slug}`} class="hero" alt="" />
+```
+3. Control the animation style with `transition:animate`. Built-in animations are `fade` (default), `slide`, `morph`, and `none`:
+```astro
+<!-- Slide in from the right -->
+<main transition:animate="slide">
+  <slot />
+</main>
+<!-- Suppress animation on a specific element -->
+<nav transition:animate="none">...</nav>
+```
+4. Use `transition:persist` to keep an element alive across page navigations, preventing remount and preserving state:
+```astro
+<!-- Audio player that continues playing across pages -->
+<audio-player transition:persist="audio-player" src={streamUrl} />
+<!-- React island that keeps its internal state -->
+<ShoppingCart client:load transition:persist />
+```
+5. Listen to Astro's transition lifecycle events on `document` to run code at specific moments:
+```javascript
+// src/scripts/analytics.js
+document.addEventListener('astro:page-load', () => {
+  // Fires after every page load, including the initial one
+  // Re-initialize scripts that rely on DOM presence
+  initAnalytics();
+});
+document.addEventListener('astro:before-swap', (e) => {
+  // e.newDocument is the incoming Document object
+  // Mutate it before the swap — add/remove classes, inject elements
+});
+document.addEventListener('astro:after-swap', () => {
+  // DOM has been replaced — re-query elements
+  highlightActiveNavLink();
+});
+```
+6. Handle the `astro:page-load` event instead of `DOMContentLoaded` for any script that must run on every navigation. `DOMContentLoaded` only fires on hard page loads:
+```javascript
+// Wrong: only fires on initial load
+document.addEventListener('DOMContentLoaded', init);
+// Correct: fires on both initial load and every view transition
+document.addEventListener('astro:page-load', init);
+```
+7. Opt individual links out of view transitions with `data-astro-reload`:
+```astro
+<!-- Forces a full page reload for this link -->
+<a href="/admin" data-astro-reload>Admin Panel</a>
+```
+8. Use `transition:animate` with a custom animation object for full control:
+```typescript
+import { fade } from 'astro:transitions';
+// Custom duration
+const slowFade = fade({ duration: '0.8s' });
+```
+```astro
+<main transition:animate={slowFade}>...</main>
+```
+## Details
+Astro View Transitions is built on the browser-native View Transitions API (Chrome 111+, with a fallback for other browsers). When `<ViewTransitions />` is present, Astro intercepts link clicks, fetches the next page's HTML in the background, and performs a DOM swap — without a full page reload. This is what enables the cross-document transitions.
+**How the swap works:**
+1. User clicks a link
+2. Astro fetches the destination page's HTML
+3. `astro:before-preparation` fires (you can cancel here)
+4. Astro prepares the new document in memory
+5. `astro:before-swap` fires — `e.newDocument` is available for mutation
+6. Browser performs the View Transition swap (screenshot old state → animate to new state)
+7. `astro:after-swap` fires — DOM is now the new page
+8. `astro:page-load` fires — transition animation is complete
+**`transition:persist` with framework components:**
+When a `client:load` island has `transition:persist`, Astro moves the existing DOM node to the new page instead of unmounting and remounting it. The island's JavaScript state (React state, Vue reactive data) is preserved. This is how you build a music player or a persistent chat widget.
+**Fallback for unsupported browsers:**
+Astro provides an automatic fallback for browsers that do not support the native View Transitions API. By default it uses `animate` (CSS animation fallback). Set `fallback="none"` to disable the fallback entirely, or `fallback="swap"` for an instant DOM swap with no animation.
+```astro
+<ViewTransitions fallback="none" />
+```
+**Performance considerations:**
+View Transitions prefetch the next page on hover (configurable). This means navigation latency is typically near-zero. However, the transition itself is GPU-accelerated via the browser — avoid complex CSS transforms on transitioned elements that could cause paint storms.
+**Scroll behavior:**
+By default, Astro scrolls to the top on navigation (matching full-page-load behavior). Override this with `transition:animate` options or by listening to `astro:after-swap` and calling `window.scrollTo()` manually.
+## Source
+https://docs.astro.build/en/guides/view-transitions
+## Process
+1. Read the instructions and examples in this document.
+2. Apply the patterns to your implementation, adapting to your specific context.
+3. Verify your implementation against the details and edge cases listed above.
+## Harness Integration
+- **Type:** knowledge — this skill is a reference document, not a procedural workflow.
+- **No tools or state** — consumed as context by other skills and agents.
+## Success Criteria
+- The patterns described in this document are applied correctly in the implementation.
+- Edge cases and anti-patterns listed in this document are avoided.

package/dist/agents/skills/claude-code/astro-view-transitions/skill.yaml ADDED Viewed

@@ -0,0 +1,45 @@
+name: astro-view-transitions
+version: '1.0.0'
+description: Implement smooth page transitions and persistent islands using Astro View Transitions API
+cognitive_mode: advisory-guide
+type: knowledge
+tier: 3
+triggers:
+  - manual
+platforms:
+  - claude-code
+  - gemini-cli
+  - cursor
+  - codex
+tools: []
+paths:
+  - 'astro.config.*'
+  - '**/*.astro'
+  - '**/src/pages/**'
+  - '**/src/content/**'
+related_skills:
+  - astro-component-pattern
+  - astro-routing-pattern
+  - astro-islands-architecture
+stack_signals:
+  - astro
+  - typescript
+keywords:
+  - view-transitions
+  - page-transitions
+  - ViewTransitions
+  - transition:animate
+  - transition:name
+  - transition:persist
+  - astro:before-preparation
+  - astro:page-load
+  - morph
+  - slide
+  - fade
+metadata:
+  author: docs.astro.build
+  upstream: 'docs.astro.build/en/guides/view-transitions'
+state:
+  persistent: false
+  files: []
+depends_on: []

package/dist/agents/skills/claude-code/check-mechanical-constraints/skill.yaml CHANGED Viewed

@@ -8,6 +8,8 @@ triggers:
 platforms:
   - claude-code
   - gemini-cli
+  - cursor
+  - codex
 tools:
   - Bash
   - Read

package/dist/agents/skills/claude-code/cleanup-dead-code/skill.yaml CHANGED Viewed

@@ -7,6 +7,8 @@ triggers:
 platforms:
   - claude-code
   - gemini-cli
+  - cursor
+  - codex
 tools:
   - Bash
   - Read

package/dist/agents/skills/claude-code/css-animation-pattern/SKILL.md ADDED Viewed

@@ -0,0 +1,143 @@
+# CSS Animation Pattern
+> Create performant CSS animations with Tailwind transitions, keyframe utilities, and motion-safe considerations
+## When to Use
+- Adding hover/focus transitions to interactive elements
+- Animating element entrance (fade in, slide up)
+- Building loading spinners and skeleton screens
+- Creating micro-interactions that improve UX
+## Instructions
+1. Use `transition-*` utilities for property transitions (hover, focus, state changes).
+2. Use `animate-*` utilities for keyframe animations (continuous motion, entrance effects).
+3. Only animate `transform` and `opacity` for 60fps performance — avoid animating `width`, `height`, `margin`, or `top`.
+4. Respect user preferences: use `motion-safe:` prefix so animations only play when the user has not enabled "reduce motion".
+5. Keep animations short (150-300ms for transitions, 500-1000ms for entrances).
+6. Define custom keyframes in `tailwind.config.ts` for project-specific animations.
+```tsx
+// Transitions — state-based property changes
+function Button({ children }: { children: React.ReactNode }) {
+  return (
+    <button className="
+      bg-blue-600 text-white px-4 py-2 rounded-md
+      transition-all duration-200 ease-in-out
+      hover:bg-blue-700 hover:shadow-lg hover:-translate-y-0.5
+      active:translate-y-0 active:shadow-md
+      focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2
+    ">
+      {children}
+    </button>
+  );
+}
+// Entrance animation with motion-safe
+function FadeIn({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="motion-safe:animate-fade-in motion-reduce:opacity-100">
+      {children}
+    </div>
+  );
+}
+// Built-in Tailwind animations
+<div className="animate-spin h-8 w-8 border-4 border-blue-600 border-t-transparent rounded-full" />
+<div className="animate-pulse bg-gray-200 h-4 rounded" />
+<div className="animate-bounce text-2xl">👇</div>
+```
+```typescript
+// tailwind.config.ts — custom animations
+const config: Config = {
+  theme: {
+    extend: {
+      keyframes: {
+        'fade-in': {
+          '0%': { opacity: '0', transform: 'translateY(10px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        'slide-in-right': {
+          '0%': { transform: 'translateX(100%)' },
+          '100%': { transform: 'translateX(0)' },
+        },
+        'scale-in': {
+          '0%': { opacity: '0', transform: 'scale(0.95)' },
+          '100%': { opacity: '1', transform: 'scale(1)' },
+        },
+      },
+      animation: {
+        'fade-in': 'fade-in 0.5s ease-out forwards',
+        'slide-in-right': 'slide-in-right 0.3s ease-out',
+        'scale-in': 'scale-in 0.2s ease-out',
+      },
+    },
+  },
+};
+```
+## Details
+**Performance-safe properties:** The browser can animate `transform` and `opacity` on the GPU (compositor layer) without triggering layout recalculation. Animating other properties causes reflow:
+| Safe (GPU)                             | Unsafe (reflow)                  |
+| -------------------------------------- | -------------------------------- |
+| `transform` (translate, scale, rotate) | `width`, `height`                |
+| `opacity`                              | `margin`, `padding`              |
+| `filter`                               | `top`, `left`, `right`, `bottom` |
+|                                        | `border-width`, `font-size`      |
+**Transition utilities:**
+- `transition` — all properties (color, background, border, shadow, transform, opacity)
+- `transition-colors` — only color-related properties
+- `transition-transform` — only transform
+- `transition-opacity` — only opacity
+- `duration-*` — 75, 100, 150, 200, 300, 500, 700, 1000
+- `ease-*` — linear, in, out, in-out
+**Motion accessibility:** Always use `motion-safe:` for decorative animations. Users with vestibular disorders can enable "reduce motion" in their OS settings:
+```tsx
+<div className="motion-safe:animate-fade-in motion-reduce:opacity-100">
+  Content appears instantly for motion-sensitive users
+</div>
+```
+**Staggered animations** (with custom properties):
+```tsx
+{
+  items.map((item, i) => (
+    <div
+      key={item.id}
+      className="motion-safe:animate-fade-in"
+      style={{ animationDelay: `${i * 100}ms` }}
+    >
+      {item.name}
+    </div>
+  ));
+}
+```
+## Source
+https://tailwindcss.com/docs/animation
+## Process
+1. Read the instructions and examples in this document.
+2. Apply the patterns to your implementation, adapting to your specific context.
+3. Verify your implementation against the details and edge cases listed above.
+## Harness Integration
+- **Type:** knowledge — this skill is a reference document, not a procedural workflow.
+- **No tools or state** — consumed as context by other skills and agents.
+## Success Criteria
+- The patterns described in this document are applied correctly in the implementation.
+- Edge cases and anti-patterns listed in this document are avoided.

package/dist/agents/skills/claude-code/css-animation-pattern/skill.yaml ADDED Viewed

@@ -0,0 +1,43 @@
+name: css-animation-pattern
+version: '1.0.0'
+description: Create performant CSS animations with Tailwind transitions and keyframe utilities
+cognitive_mode: advisory-guide
+type: knowledge
+tier: 3
+triggers:
+  - manual
+platforms:
+  - claude-code
+  - gemini-cli
+  - cursor
+  - codex
+tools: []
+paths:
+  - 'tailwind.config.*'
+  - '**/*.tsx'
+  - '**/*.css'
+related_skills:
+  - css-tailwind-pattern
+  - css-performance-patterns
+  - css-component-variants
+  - design-motion-principles
+  - design-transitions-timing
+  - design-micro-interactions
+stack_signals:
+  - tailwind
+  - css
+  - typescript
+keywords:
+  - animation
+  - transition
+  - keyframes
+  - motion
+  - hover
+  - transform
+metadata:
+  author: community
+  upstream: 'tailwindcss/docs/animation'
+state:
+  persistent: false
+  files: []
+depends_on: []

package/dist/agents/skills/claude-code/css-component-variants/SKILL.md ADDED Viewed

@@ -0,0 +1,147 @@
+# Component Variants with CVA
+> Build type-safe component variants with class-variance-authority for consistent, composable styling APIs
+## When to Use
+- Components with multiple visual variants (size, color, shape)
+- Building a design system with enforced variant combinations
+- Replacing complex conditional className logic with declarative APIs
+- Wanting TypeScript autocompletion and validation for component style props
+## Instructions
+1. Install `class-variance-authority`: `npm install class-variance-authority`.
+2. Define variants with `cva()` — base classes first, then variant definitions.
+3. Use `defaultVariants` to avoid requiring every prop.
+4. Use `compoundVariants` for styles that apply only when specific variant combinations are active.
+5. Extract the variant props type with `VariantProps<typeof variantFn>` for TypeScript.
+6. Combine with `tailwind-merge` (via `cn()` helper) to allow className overrides.
+```typescript
+// components/button.tsx
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+const buttonVariants = cva(
+  // Base styles — always applied
+  'inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        primary: 'bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-500',
+        secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 focus-visible:ring-gray-500',
+        destructive: 'bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500',
+        ghost: 'hover:bg-gray-100 hover:text-gray-900',
+        link: 'text-blue-600 underline-offset-4 hover:underline',
+      },
+      size: {
+        sm: 'h-8 px-3 text-xs',
+        md: 'h-10 px-4 text-sm',
+        lg: 'h-12 px-6 text-base',
+        icon: 'h-10 w-10',
+      },
+    },
+    compoundVariants: [
+      // Ghost + sm gets tighter padding
+      { variant: 'ghost', size: 'sm', className: 'px-2' },
+    ],
+    defaultVariants: {
+      variant: 'primary',
+      size: 'md',
+    },
+  }
+);
+interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+function Button({ className, variant, size, ...props }: ButtonProps) {
+  return (
+    <button
+      className={cn(buttonVariants({ variant, size }), className)}
+      {...props}
+    />
+  );
+}
+export { Button, buttonVariants };
+```
+```typescript
+// Usage
+<Button>Default Primary Medium</Button>
+<Button variant="destructive" size="lg">Delete Account</Button>
+<Button variant="ghost" size="sm">Cancel</Button>
+<Button className="w-full">Full Width Override</Button>
+```
+## Details
+**The cn() helper** combines `clsx` and `tailwind-merge` for safe class merging:
+```typescript
+// lib/utils.ts
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+```
+**Why cva over conditional strings:** Without cva:
+```typescript
+// Messy, error-prone, no type safety
+className={`btn ${variant === 'primary' ? 'bg-blue-600 text-white' : ''} ${variant === 'secondary' ? 'bg-gray-100' : ''} ${size === 'lg' ? 'h-12 px-6' : 'h-10 px-4'}`}
+```
+**compoundVariants:** Apply classes only when a specific combination of variants is active. Useful for design exceptions:
+```typescript
+compoundVariants: [
+  { variant: 'primary', size: 'lg', className: 'text-lg font-bold' },
+  { variant: 'destructive', size: 'sm', className: 'font-bold' },
+],
+```
+**Extending variants:** If a component wraps another, extend its variants:
+```typescript
+const alertVariants = cva('rounded-lg p-4 border', {
+  variants: {
+    severity: {
+      info: 'bg-blue-50 border-blue-200 text-blue-800',
+      warning: 'bg-yellow-50 border-yellow-200 text-yellow-800',
+      error: 'bg-red-50 border-red-200 text-red-800',
+    },
+  },
+  defaultVariants: { severity: 'info' },
+});
+```
+**shadcn/ui pattern:** shadcn/ui uses this exact pattern (cva + cn + VariantProps) for all components. If you are building a component library, this is the industry standard approach.
+## Source
+https://cva.style/docs
+## Process
+1. Read the instructions and examples in this document.
+2. Apply the patterns to your implementation, adapting to your specific context.
+3. Verify your implementation against the details and edge cases listed above.
+## Harness Integration
+- **Type:** knowledge — this skill is a reference document, not a procedural workflow.
+- **No tools or state** — consumed as context by other skills and agents.
+## Success Criteria
+- The patterns described in this document are applied correctly in the implementation.
+- Edge cases and anti-patterns listed in this document are avoided.

package/dist/agents/skills/claude-code/css-component-variants/skill.yaml ADDED Viewed

@@ -0,0 +1,42 @@
+name: css-component-variants
+version: '1.0.0'
+description: Build type-safe component variants with cva (class-variance-authority)
+cognitive_mode: advisory-guide
+type: knowledge
+tier: 3
+triggers:
+  - manual
+platforms:
+  - claude-code
+  - gemini-cli
+  - cursor
+  - codex
+tools: []
+paths:
+  - '**/*.tsx'
+  - '**/*.jsx'
+  - '**/components/**'
+related_skills:
+  - css-tailwind-pattern
+  - css-tailwind-merge
+  - css-custom-components
+  - design-component-anatomy
+  - design-atomic-design
+  - design-consistency
+stack_signals:
+  - tailwind
+  - css
+  - typescript
+keywords:
+  - cva
+  - variants
+  - class-variance-authority
+  - component-variants
+  - type-safe-styles
+metadata:
+  author: community
+  upstream: 'cva/docs'
+state:
+  persistent: false
+  files: []
+depends_on: []