@harness-engineering/cli 1.23.2 → 1.24.0

package/dist/agents/skills/claude-code/css-css-modules/SKILL.md

@@ -0,0 +1,168 @@
+# CSS Modules
+
+> Scope CSS to components with CSS Modules for collision-free class names and co-located styles
+
+## When to Use
+
+- Writing traditional CSS but needing guaranteed scoped class names
+- Projects that prefer CSS files over utility classes
+- Combining with Tailwind for component-specific styles that utilities cannot express
+- Next.js or Vite projects where CSS Modules work out of the box
+
+## Instructions
+
+1. Name files with `.module.css` suffix: `Button.module.css`. The bundler generates unique class names.
+2. Import styles as an object: `import styles from './Button.module.css'`.
+3. Apply classes via the styles object: `className={styles.button}`.
+4. Use `composes` to inherit styles from other classes or modules.
+5. For dynamic classes, use bracket notation: `styles[variant]`.
+6. CSS Modules are locally scoped by default. Use `:global(.class)` to escape scoping.
+
+```css
+/* Button.module.css */
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.primary {
+  composes: button;
+  background-color: var(--color-primary);
+  color: white;
+}
+
+.primary:hover {
+  filter: brightness(1.1);
+}
+
+.secondary {
+  composes: button;
+  background-color: var(--color-gray-100);
+  color: var(--color-gray-900);
+}
+
+.large {
+  padding: 0.75rem 1.5rem;
+  font-size: 1.125rem;
+}
+
+.fullWidth {
+  width: 100%;
+}
+```
+
+```tsx
+// Button.tsx
+import styles from './Button.module.css';
+import clsx from 'clsx';
+
+interface ButtonProps {
+  variant?: 'primary' | 'secondary';
+  size?: 'default' | 'large';
+  fullWidth?: boolean;
+  children: React.ReactNode;
+}
+
+function Button({ variant = 'primary', size = 'default', fullWidth, children }: ButtonProps) {
+  return (
+    <button
+      className={clsx(
+        styles[variant],
+        size === 'large' && styles.large,
+        fullWidth && styles.fullWidth
+      )}
+    >
+      {children}
+    </button>
+  );
+}
+```
+
+## Details
+
+**How it works:** The bundler (Webpack, Vite, Next.js) transforms class names from `.button` to `.Button_button_a1b2c` (component name + class name + hash). This guarantees no collisions between components.
+
+**TypeScript support:** Generate type declarations for CSS Modules:
+
+```bash
+# typed-css-modules
+npm install -D typed-css-modules
+tcm src/
+
+# Or use the Vite plugin
+npm install -D vite-plugin-css-modules-typescript
+```
+
+This creates `.module.css.d.ts` files:
+
+```typescript
+// Button.module.css.d.ts
+declare const styles: {
+  readonly button: string;
+  readonly primary: string;
+  readonly secondary: string;
+  readonly large: string;
+  readonly fullWidth: string;
+};
+export default styles;
+```
+
+**composes keyword:** Inherit styles from other classes:
+
+```css
+.base {
+  padding: 1rem;
+  border-radius: 0.5rem;
+}
+.error {
+  composes: base;
+  border: 2px solid red;
+}
+/* .error gets both base and error styles */
+
+/* Compose from another module */
+.card {
+  composes: surface from './shared.module.css';
+}
+```
+
+**:global escape hatch:** Apply a class globally (useful for overriding library styles):
+
+```css
+.wrapper :global(.third-party-class) {
+  color: red;
+}
+```
+
+**CSS Modules + Tailwind:** Use CSS Modules for complex styles and Tailwind for utilities:
+
+```tsx
+<div className={clsx(styles.card, 'p-4 flex gap-2')}>
+```
+
+**When to use CSS Modules vs Tailwind:** CSS Modules are better for complex pseudo-selectors, animations with many keyframes, and teams that prefer traditional CSS. Tailwind is better for rapid iteration and design consistency.
+
+## Source
+
+https://github.com/css-modules/css-modules
+
+## 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-css-modules/skill.yaml

@@ -0,0 +1,38 @@
+name: css-css-modules
+version: '1.0.0'
+description: Scope CSS to components with CSS Modules for collision-free class names
+cognitive_mode: advisory-guide
+type: knowledge
+tier: 3
+triggers:
+  - manual
+platforms:
+  - claude-code
+  - gemini-cli
+  - cursor
+  - codex
+tools: []
+paths:
+  - '**/*.module.css'
+  - '**/*.module.scss'
+related_skills:
+  - css-tailwind-pattern
+  - css-design-tokens
+  - css-layout-patterns
+stack_signals:
+  - css
+  - typescript
+  - react
+keywords:
+  - css-modules
+  - scoped-styles
+  - module-css
+  - local-scope
+  - class-names
+metadata:
+  author: community
+  upstream: 'css-modules/docs'
+state:
+  persistent: false
+  files: []
+depends_on: []

package/dist/agents/skills/claude-code/css-custom-components/SKILL.md

@@ -0,0 +1,178 @@
+# Custom Styled Components
+
+> Build reusable styled components with Tailwind, CVA variants, and polymorphic prop patterns
+
+## When to Use
+
+- Creating a component library or design system with Tailwind
+- Building components that need variant props AND className overrides
+- Making components that can render as different HTML elements (`as` prop)
+- Structuring a `components/ui/` directory following shadcn/ui patterns
+
+## Instructions
+
+1. Combine CVA (variants) + cn (merge) + forwardRef (DOM access) for every shared component.
+2. Extend the native HTML element's props so consumers can pass any valid attribute.
+3. Always accept and merge `className` so consumers can override styles.
+4. Use `React.forwardRef` for components that wrap native elements (needed for Radix, tooltips, focus management).
+5. Export both the component and its variant function for reuse.
+6. Support the `asChild` pattern (via Radix's `Slot`) for polymorphic rendering.
+
+```tsx
+// components/ui/button.tsx — complete production pattern
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-white hover:bg-destructive/90',
+        outline: 'border border-border bg-background hover:bg-muted/50',
+        secondary: 'bg-muted/30 text-foreground hover:bg-muted/50',
+        ghost: 'hover:bg-muted/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: { variant: 'default', size: 'default' },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
+```
+
+```tsx
+// Usage
+<Button>Default</Button>
+<Button variant="destructive" size="lg">Delete</Button>
+<Button variant="ghost" className="w-full">Full Width Ghost</Button>
+
+{/* asChild — renders as a link, not a button */}
+<Button asChild variant="link">
+  <a href="/docs">Documentation</a>
+</Button>
+```
+
+```tsx
+// components/ui/input.tsx — simple styled wrapper
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-10 w-full rounded-md border border-border bg-background px-3 py-2 text-sm ring-offset-background',
+          'file:border-0 file:bg-transparent file:text-sm file:font-medium',
+          'placeholder:text-muted',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = 'Input';
+
+export { Input };
+```
+
+## Details
+
+**The asChild pattern:** Instead of an `as` prop (which breaks TypeScript), `asChild` uses Radix's `Slot` component to merge props onto the child element. The Button renders as whatever element is its child:
+
+```tsx
+<Button asChild>
+  <Link href="/dashboard">Go to Dashboard</Link>
+</Button>
+// Renders as <a> with all Button styles + Link behavior
+```
+
+**Component file structure:**
+
+```
+components/
+  ui/
+    button.tsx      # CVA + forwardRef + cn
+    input.tsx       # forwardRef + cn
+    dialog.tsx      # Radix Dialog + Tailwind
+    card.tsx        # Compound component (Card, CardHeader, CardContent, CardFooter)
+```
+
+**Compound components:**
+
+```tsx
+function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('rounded-lg border bg-card shadow-sm', className)} {...props} />;
+}
+
+function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />;
+}
+
+function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('p-6 pt-0', className)} {...props} />;
+}
+
+export { Card, CardHeader, CardContent };
+```
+
+**Rules for component APIs:**
+
+- Always extend the native element's HTML attributes
+- Always accept and merge `className`
+- Always use `forwardRef` for DOM elements
+- Use CVA for multi-variant components
+- Use simple `cn()` for single-style components
+
+## Source
+
+https://ui.shadcn.com/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-custom-components/skill.yaml

@@ -0,0 +1,39 @@
+name: css-custom-components
+version: '1.0.0'
+description: Build reusable styled components with Tailwind patterns and prop-driven APIs
+cognitive_mode: advisory-guide
+type: knowledge
+tier: 3
+triggers:
+  - manual
+platforms:
+  - claude-code
+  - gemini-cli
+  - cursor
+  - codex
+tools: []
+paths:
+  - '**/components/**'
+  - '**/ui/**'
+  - '**/*.tsx'
+related_skills:
+  - css-component-variants
+  - css-tailwind-merge
+  - css-tailwind-pattern
+stack_signals:
+  - tailwind
+  - css
+  - typescript
+keywords:
+  - component-library
+  - styled-components
+  - reusable
+  - polymorphic
+  - asChild
+metadata:
+  author: community
+  upstream: 'shadcn-ui/docs'
+state:
+  persistent: false
+  files: []
+depends_on: []

package/dist/agents/skills/claude-code/css-dark-mode/SKILL.md

@@ -0,0 +1,171 @@
+# Dark Mode with Tailwind
+
+> Implement dark mode with Tailwind's dark variant, CSS custom properties, and user preference detection
+
+## When to Use
+
+- Adding dark mode to an existing Tailwind application
+- Supporting system preference detection and manual theme switching
+- Using CSS variables so that one set of utilities works in both themes
+- Persisting the user's theme choice across sessions
+
+## Instructions
+
+1. Choose a strategy: `class` (manual toggle via `.dark` class on `<html>`) or `media` (follows OS preference). Use `class` for manual control.
+2. Define color tokens as CSS variables with light and dark values. Use Tailwind's `dark:` prefix for overrides.
+3. Prefer the CSS variable approach over per-element `dark:` classes — it scales better with many components.
+4. Detect the user's preference with `window.matchMedia('(prefers-color-scheme: dark)')`. Store their choice in localStorage.
+5. Apply the theme class before first paint to prevent flash of wrong theme (FOWT).
+
+```typescript
+// tailwind.config.ts
+const config: Config = {
+  darkMode: 'class', // Enable class-based dark mode
+  // ...
+};
+```
+
+```css
+/* styles/globals.css */
+@layer base {
+  :root {
+    --background: 255 255 255;
+    --foreground: 17 24 39;
+    --card: 249 250 251;
+    --primary: 59 130 246;
+    --muted: 107 114 128;
+    --border: 229 231 235;
+  }
+
+  .dark {
+    --background: 15 23 42;
+    --foreground: 248 250 252;
+    --card: 30 41 59;
+    --primary: 96 165 250;
+    --muted: 148 163 184;
+    --border: 51 65 85;
+  }
+}
+```
+
+```typescript
+// hooks/use-theme.ts
+import { useEffect, useState } from 'react';
+
+type Theme = 'light' | 'dark' | 'system';
+
+export function useTheme() {
+  const [theme, setThemeState] = useState<Theme>(() => {
+    if (typeof window === 'undefined') return 'system';
+    return (localStorage.getItem('theme') as Theme) ?? 'system';
+  });
+
+  useEffect(() => {
+    const root = document.documentElement;
+
+    function applyTheme(t: Theme) {
+      if (t === 'system') {
+        const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        root.classList.toggle('dark', isDark);
+      } else {
+        root.classList.toggle('dark', t === 'dark');
+      }
+    }
+
+    applyTheme(theme);
+
+    // Listen for OS preference changes
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handler = () => {
+      if (theme === 'system') applyTheme('system');
+    };
+    mediaQuery.addEventListener('change', handler);
+    return () => mediaQuery.removeEventListener('change', handler);
+  }, [theme]);
+
+  const setTheme = (t: Theme) => {
+    setThemeState(t);
+    localStorage.setItem('theme', t);
+  };
+
+  return { theme, setTheme };
+}
+```
+
+```tsx
+// Prevent flash of wrong theme — add to <head> in your HTML/layout
+<script
+  dangerouslySetInnerHTML={{
+    __html: `
+  (function() {
+    var theme = localStorage.getItem('theme');
+    if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+      document.documentElement.classList.add('dark');
+    }
+  })();
+`,
+  }}
+/>
+```
+
+## Details
+
+**CSS variable approach vs `dark:` prefix:**
+
+```tsx
+// Per-element dark: classes (verbose, repetitive)
+<div className="bg-white dark:bg-slate-800 text-gray-900 dark:text-gray-100 border-gray-200 dark:border-gray-700">
+
+// CSS variable approach (clean, DRY)
+<div className="bg-background text-foreground border-border">
+// Colors switch automatically via CSS variables
+```
+
+**Approach comparison:**
+
+- **`dark:` prefix:** Simple, no CSS variables needed. Gets verbose with many elements.
+- **CSS variables:** Define once, works everywhere. Best for design systems with many components.
+- **Both:** Use CSS variables for common patterns, `dark:` for one-off overrides.
+
+**Next.js with next-themes:**
+
+```tsx
+import { ThemeProvider } from 'next-themes';
+
+function App({ children }) {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+      {children}
+    </ThemeProvider>
+  );
+}
+```
+
+**Images and dark mode:** Provide dark-mode variants for images, or use CSS filters:
+
+```tsx
+<img className="dark:invert dark:brightness-90" src="/logo.svg" alt="Logo" />
+// Or use next/image with dark mode source
+```
+
+**Testing dark mode:** In browser DevTools, toggle the `dark` class on `<html>`. Or use DevTools > Rendering > Emulate CSS media feature `prefers-color-scheme: dark`.
+
+## Source
+
+https://tailwindcss.com/docs/dark-mode
+
+## 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-dark-mode/skill.yaml

@@ -0,0 +1,41 @@
+name: css-dark-mode
+version: '1.0.0'
+description: Implement dark mode with Tailwind's dark variant and CSS custom properties
+cognitive_mode: advisory-guide
+type: knowledge
+tier: 3
+triggers:
+  - manual
+platforms:
+  - claude-code
+  - gemini-cli
+  - cursor
+  - codex
+tools: []
+paths:
+  - 'tailwind.config.*'
+  - '**/*.css'
+  - '**/*.tsx'
+related_skills:
+  - css-design-tokens
+  - css-tailwind-pattern
+  - css-custom-components
+  - design-dark-mode-color
+  - design-color-accessibility
+stack_signals:
+  - tailwind
+  - css
+  - typescript
+keywords:
+  - dark-mode
+  - dark-variant
+  - theme-switching
+  - color-scheme
+  - prefers-color-scheme
+metadata:
+  author: community
+  upstream: 'tailwindcss/docs/dark-mode'
+state:
+  persistent: false
+  files: []
+depends_on: []