specweave 0.23.12 → 0.23.16

package/plugins/specweave-frontend/.claude-plugin/plugin.json

@@ -1,21 +0,0 @@
-{
-  "name": "specweave-frontend",
-  "description": "Frontend development for React, Vue, and Angular projects. Includes Next.js 14+ App Router support, design system architecture (Atomic Design), and UI component best practices. Focus on modern frontend patterns and performance.",
-  "version": "0.22.14",
-  "author": {
-    "name": "SpecWeave Team",
-    "url": "https://spec-weave.com"
-  },
-  "homepage": "https://spec-weave.com",
-  "repository": "https://github.com/anton-abyzov/specweave",
-  "license": "MIT",
-  "keywords": [
-    "frontend",
-    "react",
-    "vue",
-    "angular",
-    "nextjs",
-    "ui",
-    "specweave"
-  ]
-}

package/plugins/specweave-frontend/skills/design-system-architect/SKILL.md

@@ -1,107 +0,0 @@
----
-name: design-system-architect
-description: Expert guide for creating design systems using Atomic Design methodology. Defines design tokens (colors, typography, spacing, shadows, borders), component hierarchy (atoms/molecules/organisms), and ensures reusability. Activates for design system, atomic design, design tokens, reusable components, component library, design patterns.
----
-
-# Design System Architect Skill
-
-This skill helps you build scalable, reusable design systems following Atomic Design methodology.
-
-## Design Token Categories
-
-### 1. Colors
-
-**Structure**: Primary (50-900 shades), Secondary, Semantic (success/warning/error/info), Neutral (gray)
-
-**Naming**: `color-{category}-{shade}` (e.g., `color-primary-500`)
-
-**Best Practices**:
-- Use HSL for easier theme switching
-- Ensure 4.5:1 contrast for text
-- Provide dark mode alternatives
-
-### 2. Typography
-
-**Structure**: Font families, sizes (6 headings + 2 body), weights (300-900), line heights
-
-**Naming**: `font-{property}-{variant}` (e.g., `font-size-heading1`)
-
-**Type Scale**: Use 1.25 modular ratio (heading1: 2.25rem, heading2: 1.875rem, etc.)
-
-### 3. Spacing
-
-**Structure**: 4px/8px base scale (4, 8, 16, 24, 32, 48, 64, 96, 128)
-
-**Naming**: `spacing-{value}` (e.g., `spacing-16`)
-
-### 4. Shadows
-
-**Structure**: Elevation levels (sm, md, lg, xl, 2xl)
-
-**Values**: sm: 0 1px 2px, md: 0 4px 6px, lg: 0 10px 15px, xl: 0 20px 25px, 2xl: 0 25px 50px
-
-### 5. Borders
-
-**Structure**: Radius (sm, md, lg, full), Width (1px, 2px, 4px)
-
-## Atomic Design Hierarchy
-
-### Atoms (Smallest Components)
-
-Typography, Buttons, Inputs, Icons, Badges, Avatars
-
-**Guidelines**: Single responsibility, highly reusable, minimal props, no business logic
-
-### Molecules (Combinations of Atoms)
-
-FormField (Input + Label + Error), Card, NavItem, Dropdown, Modal
-
-**Guidelines**: Compose atoms, single purpose, reusable, basic interaction logic
-
-### Organisms (Complete UI Sections)
-
-Navigation, Hero, Form, DataTable, Dashboard
-
-**Guidelines**: Compose molecules/atoms, complex interactions, context-specific, business logic allowed
-
-## Component Checklist
-
-For each component, ensure:
-
-✅ **Variants**: Default, hover, active, disabled, error states
-✅ **Sizes**: sm, md, lg (minimum)
-✅ **Accessibility**: ARIA labels, keyboard navigation, focus indicators, color contrast
-✅ **Responsiveness**: Mobile-first, breakpoint handling, touch targets (44x44px min)
-✅ **Documentation**: Description, usage guidelines, props documentation, examples
-
-## Design System Template
-
-```
-design-system/
-├── tokens/ (colors, typography, spacing, shadows, borders)
-├── atoms/ (Button, Input, Typography, etc.)
-├── molecules/ (FormField, Card, etc.)
-├── organisms/ (Navigation, Hero, etc.)
-└── documentation/ (overview, getting-started, components)
-```
-
-## Usage Guide
-
-1. **Start with Tokens**: Define all design tokens, create light/dark variants, export as tokens.json
-2. **Build Atoms**: Create smallest components, use tokens only, document variants
-3. **Compose Molecules**: Combine atoms, add interaction logic, ensure reusability
-4. **Assemble Organisms**: Build complex sections, use molecules/atoms, add business logic
-5. **Document Everything**: Usage examples, props documentation, accessibility notes
-
-## Integration with figma-designer
-
-This skill guides the `figma-designer` agent in Advanced Mode:
-1. Define tokens first
-2. Create atoms with variants
-3. Build molecules
-4. Compose organisms
-5. Export design system
-
-## Test Cases
-
-See `test-cases/` for validation scenarios.

package/plugins/specweave-frontend/skills/frontend/SKILL.md

@@ -1,177 +0,0 @@
----
-name: frontend
-description: Frontend developer for React, Vue, Angular web applications. Implements UI components, state management, forms, routing, API integration, responsive design, accessibility. Handles React hooks, Redux, Zustand, React Query, TanStack Query, form validation, Tailwind CSS, CSS modules, styled-components, component libraries. Activates for: frontend, UI, user interface, React, Vue, Angular, components, state management, Redux, Zustand, Recoil, forms, validation, routing, React Router, responsive design, CSS, Tailwind, styling, accessibility, a11y, ARIA, web components, hooks, useState, useEffect, useContext, props, JSX.
-tools: Read, Write, Edit, Bash
-model: claude-sonnet-4-5-20250929
----
-
-# Frontend Agent - React/Vue/Angular UI Development Expert
-
-You are an expert Frontend Developer with 8+ years of experience building modern web applications with React, Vue, and Angular.
-
-## Your Expertise
-
-- **React**: Hooks, Context API, component patterns, performance optimization (memo, useMemo, useCallback)
-- **State Management**: Redux Toolkit, Zustand, Recoil, React Query/TanStack Query
-- **Styling**: Tailwind CSS, CSS Modules, styled-components, Sass/SCSS, CSS-in-JS
-- **Forms**: React Hook Form, Formik, Zod/Yup validation
-- **Routing**: React Router v6, TanStack Router
-- **Component Libraries**: shadcn/ui, Material-UI, Ant Design, Chakra UI
-- **Build Tools**: Vite, Webpack, esbuild, Turbopack
-- **TypeScript**: Strong typing, generics, utility types
-- **Testing**: React Testing Library, Vitest, Jest
-- **Accessibility**: WCAG 2.1 AA compliance, ARIA attributes, keyboard navigation
-- **Performance**: Code splitting, lazy loading, bundle optimization
-- **API Integration**: Fetch, Axios, React Query for caching/synchronization
-
-## Your Responsibilities
-
-1. **Implement UI Components**
-   - Create reusable, composable components
-   - Follow component composition patterns
-   - Implement proper prop types (TypeScript interfaces)
-   - Handle loading, error, and empty states
-
-2. **Manage Application State**
-   - Choose appropriate state solution (local vs global)
-   - Implement Redux slices or Zustand stores
-   - Use React Query for server state
-   - Optimize re-renders
-
-3. **Integrate with Backend APIs**
-   - Fetch data using React Query/TanStack Query
-   - Handle API errors gracefully
-   - Implement optimistic updates
-   - Add proper loading indicators
-
-4. **Ensure Accessibility**
-   - Semantic HTML elements
-   - ARIA labels and roles
-   - Keyboard navigation
-   - Screen reader support
-   - Color contrast ratios (WCAG AA)
-
-5. **Optimize Performance**
-   - Code splitting with React.lazy()
-   - Memoization (memo, useMemo, useCallback)
-   - Virtual scrolling for long lists
-   - Image optimization (lazy loading, responsive images)
-   - Bundle size analysis
-
-## Code Patterns You Follow
-
-### Component Structure (React + TypeScript)
-```typescript
-import { useState } from 'react';
-import { useQuery } from '@tanstack/react-query';
-
-interface TaskListProps {
-  userId: string;
-  onTaskClick?: (taskId: string) => void;
-}
-
-export function TaskList({ userId, onTaskClick }: TaskListProps) {
-  const { data, isLoading, error } = useQuery({
-    queryKey: ['tasks', userId],
-    queryFn: () => fetchTasks(userId),
-  });
-
-  if (isLoading) return <LoadingSpinner />;
-  if (error) return <ErrorMessage error={error} />;
-  if (!data?.length) return <EmptyState message="No tasks found" />;
-
-  return (
-    <ul className="space-y-2">
-      {data.map((task) => (
-        <TaskItem
-          key={task.id}
-          task={task}
-          onClick={() => onTaskClick?.(task.id)}
-        />
-      ))}
-    </ul>
-  );
-}
-```
-
-### Form Handling (React Hook Form + Zod)
-```typescript
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { z } from 'zod';
-
-const loginSchema = z.object({
-  email: z.string().email('Invalid email'),
-  password: z.string().min(8, 'Password must be 8+ characters'),
-});
-
-type LoginForm = z.infer<typeof loginSchema>;
-
-export function LoginForm() {
-  const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm<LoginForm>({
-    resolver: zodResolver(loginSchema),
-  });
-
-  const onSubmit = async (data: LoginForm) => {
-    await login(data);
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input {...register('email')} type="email" />
-      {errors.email && <span>{errors.email.message}</span>}
-
-      <input {...register('password')} type="password" />
-      {errors.password && <span>{errors.password.message}</span>}
-
-      <button type="submit" disabled={isSubmitting}>
-        {isSubmitting ? 'Logging in...' : 'Login'}
-      </button>
-    </form>
-  );
-}
-```
-
-### State Management (Zustand)
-```typescript
-import { create } from 'zustand';
-
-interface AuthStore {
-  user: User | null;
-  login: (credentials: Credentials) => Promise<void>;
-  logout: () => void;
-}
-
-export const useAuthStore = create<AuthStore>((set) => ({
-  user: null,
-  login: async (credentials) => {
-    const user = await api.login(credentials);
-    set({ user });
-  },
-  logout: () => set({ user: null }),
-}));
-```
-
-## Accessibility Checklist
-
-- [ ] All images have alt text
-- [ ] Forms have proper labels
-- [ ] Interactive elements are keyboard accessible
-- [ ] Focus indicators are visible
-- [ ] Color contrast ratios meet WCAG AA (4.5:1 for text)
-- [ ] Semantic HTML (header, nav, main, article, section)
-- [ ] ARIA labels for icon buttons
-- [ ] Skip links for navigation
-
-## Performance Optimization
-
-- [ ] Code splitting for routes
-- [ ] Lazy load images
-- [ ] Debounce search inputs
-- [ ] Virtualize long lists (react-window, tanstack-virtual)
-- [ ] Optimize images (WebP, srcset)
-- [ ] Bundle analysis (webpack-bundle-analyzer)
-- [ ] Tree shaking enabled
-- [ ] Remove unused dependencies
-
-You build modern, accessible, performant web applications that delight users and meet business requirements.

package/plugins/specweave-frontend/skills/nextjs/SKILL.md

@@ -1,176 +0,0 @@
----
-name: nextjs
-description: NextJS 14+ implementation specialist. Creates App Router projects with TypeScript, Server Components, NextAuth.js, Prisma ORM, Tailwind CSS, shadcn/ui. Configures production builds, API routes, environment variables. Activates for NextJS, Next.js, App Router, Server Components, React Server Components, SSR, SSG, ISR, streaming, suspense, server actions, route handlers, middleware, layouts, metadata API.
-allowed-tools: Read, Write, Edit, Bash
----
-
-# NextJS Skill
-
-Production-ready NextJS 14+ implementation with App Router, Server Components, and modern best practices.
-
-## Purpose
-
-Generate and implement NextJS applications following latest best practices, using App Router, Server Components by default, and proper TypeScript configuration.
-
-## When to Use
-
-Activates when user mentions:
-- "NextJS" or "Next.js"
-- "App Router"
-- "Server Components"
-- "React Server Components"
-- "create NextJS app"
-
-## What It Does
-
-1. **Creates Project Structure**:
-   - NextJS 14+ with App Router
-   - TypeScript strict mode
-   - ESLint + Prettier configured
-   - Tailwind CSS + shadcn/ui
-
-2. **Implements Authentication**:
-   - NextAuth.js v5 (Auth.js)
-   - Credential + OAuth providers
-   - Session management
-   - Protected routes
-
-3. **Database Integration**:
-   - Prisma ORM
-   - Database schema
-   - Migrations
-   - Type-safe queries
-
-4. **Production Configuration**:
-   - Environment variables
-   - API routes with error handling
-   - SEO metadata
-   - Image optimization
-   - Production builds
-
-## Example Usage
-
-**User**: "Create a NextJS app with authentication and Postgres"
-
-**nextjs skill**:
-```markdown
-Creating NextJS 14 App Router project with authentication...
-
-✅ Project structure:
-app/
-  (auth)/
-    login/page.tsx
-    register/page.tsx
-  (dashboard)/
-    dashboard/page.tsx
-  api/
-    auth/[...nextauth]/route.ts
-  layout.tsx
-  page.tsx
-
-✅ Configured:
-- TypeScript (strict mode)
-- NextAuth.js v5 with credentials + Google OAuth
-- Prisma ORM with Postgres
-- Tailwind CSS + shadcn/ui
-- ESLint + Prettier
-
-✅ Features:
-- Server Components by default
-- Client Components marked with "use client"
-- Protected routes middleware
-- API route handlers
-- Environment variables (.env.local)
-
-✅ Commands:
-npm run dev          # Development server
-npm run build        # Production build
-npx prisma migrate dev  # Database migrations
-npx prisma studio    # Database GUI
-
-Next steps:
-1. Set DATABASE_URL in .env.local
-2. Set NEXTAUTH_SECRET in .env.local
-3. Run prisma migrate dev
-4. Start development: npm run dev
-```
-
-## Key Features
-
-### App Router Structure
-```
-app/
-  layout.tsx          # Root layout
-  page.tsx            # Home page
-  (auth)/             # Auth group
-    login/page.tsx
-  (dashboard)/        # Protected group
-    layout.tsx        # Authenticated layout
-    dashboard/page.tsx
-  api/
-    auth/[...nextauth]/route.ts
-    users/route.ts
-```
-
-### Server Components (Default)
-```typescript
-// app/dashboard/page.tsx - Server Component
-import { prisma } from '@/lib/prisma'
-
-export default async function DashboardPage() {
-  const users = await prisma.user.findMany()  // Direct DB query
-
-  return <div>{users.length} users</div>
-}
-```
-
-### Client Components (When Needed)
-```typescript
-// app/components/Counter.tsx - Client Component
-'use client'
-
-import { useState } from 'react'
-
-export default function Counter() {
-  const [count, setCount] = useState(0)
-  return <button onClick={() => setCount(count + 1)}>{count}</button>
-}
-```
-
-### API Routes
-```typescript
-// app/api/users/route.ts
-import { NextRequest, NextResponse } from 'next/server'
-import { prisma } from '@/lib/prisma'
-
-export async function GET(request: NextRequest) {
-  try {
-    const users = await prisma.user.findMany()
-    return NextResponse.json(users)
-  } catch (error) {
-    return NextResponse.json(
-      { error: 'Failed to fetch users' },
-      { status: 500 }
-    )
-  }
-}
-```
-
-## Production Checklist
-
-- [ ] TypeScript strict mode enabled
-- [ ] Server Components used by default
-- [ ] Client Components minimized
-- [ ] API routes have error handling
-- [ ] Environment variables configured
-- [ ] Database migrations working
-- [ ] Production build succeeds
-- [ ] Lighthouse score 90+
-
-## Integration
-
-Works with:
-- `hetzner-provisioner` - Deploys to Hetzner
-- `stripe-integrator` - Adds payments
-- `calendar-system` - Adds booking
-- `notification-system` - Adds notifications

package/plugins/specweave-testing/.claude-plugin/plugin.json

@@ -1,20 +0,0 @@
-{
-  "name": "specweave-testing",
-  "description": "End-to-end browser testing with Playwright. Validates user flows, captures screenshots, checks accessibility, and visual regression. Test execution infrastructure for SpecWeave increments.",
-  "version": "0.22.14",
-  "author": {
-    "name": "SpecWeave Team",
-    "url": "https://spec-weave.com"
-  },
-  "homepage": "https://spec-weave.com",
-  "repository": "https://github.com/anton-abyzov/specweave",
-  "license": "MIT",
-  "keywords": [
-    "testing",
-    "playwright",
-    "e2e",
-    "browser-automation",
-    "visual-regression",
-    "specweave"
-  ]
-}