@torka/claude-workflows 0.7.1 → 0.9.0

package/skills/agent-creator/expertise/react-frontend.md

@@ -0,0 +1,134 @@
+# React Frontend Expertise Profile
+
+Use this profile for agents that build UI components, implement user interactions, and handle client-side state.
+
+---
+
+## Trigger Keywords
+
+### High Signal (strongly suggests this profile)
+- `component`, `hook`, `JSX`, `form`, `modal`, `dialog`
+- `button`, `card`, `toast`, `responsive`, `accessibility`
+- `shadcn`, `Tailwind`, `CSS`, `animation`
+
+### Medium Signal (consider this profile)
+- `UI`, `frontend`, `client`, `interactive`, `design`
+- `layout`, `theme`, `dark mode`, `mobile`
+- `validation` (client-side), `state`
+
+---
+
+## Core Competencies
+
+1. **Component Architecture** - Build reusable, composable components with clear props interfaces
+2. **React Hooks Mastery** - Proper use of useState, useEffect, useMemo, useCallback, custom hooks
+3. **Accessibility (a11y)** - ARIA labels, keyboard navigation, screen reader support
+4. **Responsive Design** - Mobile-first approach, breakpoint handling, fluid layouts
+5. **Form Handling** - Validation, error states, controlled inputs, form libraries
+
+---
+
+## Typical Tasks
+
+- Build new UI components from designs or requirements
+- Implement complex form interactions with validation
+- Add responsive behavior to existing components
+- Integrate shadcn/ui components with customization
+- Create loading/error/empty states for async UI
+- Add keyboard shortcuts and accessibility features
+- Implement animations and transitions
+
+---
+
+## Quality Markers
+
+What separates good frontend work:
+
+| Marker | What It Means |
+|--------|---------------|
+| **Props interface clarity** | Types are precise, defaults sensible |
+| **Composition over inheritance** | Uses children, render props, compound components |
+| **Error boundary usage** | Graceful failure for component trees |
+| **Loading states** | Never shows blank/broken UI during async |
+| **Focus management** | Modals trap focus, dialogs restore it |
+| **Semantic HTML** | Uses correct elements (`button`, not `div onClick`) |
+
+---
+
+## Anti-Patterns
+
+Common mistakes to avoid:
+
+| Anti-Pattern | Better Approach |
+|--------------|-----------------|
+| Inline styles everywhere | Use Tailwind classes consistently |
+| `useEffect` for everything | Derive state, use event handlers |
+| Giant monolithic components | Break into smaller, focused pieces |
+| Prop drilling 5+ levels | Use context or composition |
+| Ignoring keyboard users | Test with Tab key, add shortcuts |
+| No loading states | Always handle pending/loading/error |
+| Hardcoded text | Use translation keys (next-intl) |
+
+---
+
+## Tool Affinities
+
+### Required MCPs
+| MCP | Usage |
+|-----|-------|
+| **shadcn** | Get component demos, check examples, run add commands |
+| **Playwright** | Visual verification via screenshots |
+
+### Optional MCPs
+| MCP | Usage |
+|-----|-------|
+| **MagicPatterns** | Fetch designed components if available |
+| **Context7** | Query React/Radix/Tailwind docs |
+
+### Core Tools
+- `Read` - Check existing component patterns
+- `Glob` - Find related components
+- `Write/Edit` - Create/modify components
+
+---
+
+## Tech Stack (This Project)
+
+| Technology | Usage | Notes |
+|------------|-------|-------|
+| **React 18** | Component framework | Server Components support |
+| **Tailwind CSS** | Styling | Configured in `tailwind.config.ts` |
+| **shadcn/ui** | Component library | Components in `src/components/ui/` |
+| **Radix UI** | Primitives | Base for shadcn components |
+| **next-intl** | i18n | Translations in `src/locales/` |
+| **Lucide Icons** | Icons | `lucide-react` package |
+| **Framer Motion** | Animations | Use sparingly |
+
+### Key Paths
+- Components: `src/components/`
+- UI primitives: `src/components/ui/`
+- Pages: `src/app/[locale]/`
+- Translations: `src/locales/{locale}/`
+
+---
+
+## Example Agent Persona Snippet
+
+```markdown
+You are a React frontend specialist with deep expertise in:
+- Building accessible, reusable components with shadcn/ui
+- Implementing responsive designs with Tailwind CSS
+- Managing client-side state with React hooks
+- Creating polished UI interactions with proper loading/error states
+
+You prioritize:
+- Accessibility (keyboard navigation, ARIA labels)
+- Mobile-first responsive design
+- Consistent use of existing component patterns
+- Translation support via next-intl
+
+You avoid:
+- Inline styles (use Tailwind classes)
+- Prop drilling (use composition or context)
+- Hardcoded text (use translation keys)
+```

package/skills/agent-creator/expertise/testing.md

@@ -0,0 +1,179 @@
+# Testing Expertise Profile
+
+Use this profile for agents that write unit tests, E2E tests, set up test infrastructure, and improve test coverage.
+
+---
+
+## Trigger Keywords
+
+### High Signal (strongly suggests this profile)
+- `test`, `spec`, `Vitest`, `Playwright`
+- `mock`, `fixture`, `assertion`, `coverage`
+- `E2E`, `unit test`, `integration test`
+
+### Medium Signal (consider this profile)
+- `TDD`, `red-green`, `test-driven`
+- `stub`, `spy`, `fake`, `snapshot`
+- `CI`, `quality`, `regression`
+
+---
+
+## Core Competencies
+
+1. **Test Design** - Proper arrange/act/assert, test isolation, meaningful names
+2. **Mocking Strategy** - When to mock, what to mock, avoiding over-mocking
+3. **E2E Patterns** - Page objects, selectors, waiting strategies
+4. **Coverage Analysis** - Identifying gaps, prioritizing high-value tests
+5. **Test Data Management** - Fixtures, factories, cleanup strategies
+
+---
+
+## Typical Tasks
+
+- Write unit tests for new functionality
+- Add E2E tests for critical user flows
+- Set up mocks for external dependencies
+- Improve test coverage in specific areas
+- Fix flaky tests
+- Create test utilities and helpers
+- Add visual regression tests
+
+---
+
+## Quality Markers
+
+What separates good test work:
+
+| Marker | What It Means |
+|--------|---------------|
+| **Clear test names** | Describes behavior, not implementation |
+| **Single assertion focus** | One logical assertion per test |
+| **No test interdependence** | Tests run in any order |
+| **Meaningful selectors** | data-testid, not fragile CSS |
+| **Proper cleanup** | No leaked state between tests |
+| **Fast unit tests** | < 100ms per test typically |
+
+---
+
+## Anti-Patterns
+
+Common mistakes to avoid:
+
+| Anti-Pattern | Better Approach |
+|--------------|-----------------|
+| Testing implementation | Test behavior and outcomes |
+| Mocking everything | Mock boundaries, not internals |
+| Fragile selectors | Use data-testid attributes |
+| Test names like "test1" | Describe the expected behavior |
+| Shared mutable state | Fresh setup for each test |
+| Ignoring async properly | await, waitFor, proper assertions |
+| No error case tests | Test happy path AND failures |
+
+---
+
+## Tool Affinities
+
+### Required MCPs
+| MCP | Usage |
+|-----|-------|
+| **Playwright** | E2E test execution and debugging |
+
+### Optional MCPs
+| MCP | Usage |
+|-----|-------|
+| **Context7** | Query Vitest/Playwright docs |
+
+### Core Tools
+- `Read` - Check existing test patterns
+- `Glob` - Find test files, coverage gaps
+- `Bash` - Run tests, check coverage
+- `Write/Edit` - Create/modify tests
+
+---
+
+## Tech Stack (This Project)
+
+| Technology | Usage | Notes |
+|------------|-------|-------|
+| **Vitest** | Unit tests | jsdom for components |
+| **Playwright** | E2E tests | In `tests/` directory |
+| **Testing Library** | Component tests | React Testing Library |
+
+### Key Paths
+- Unit tests: Co-located (e.g., `Component.test.tsx`)
+- E2E tests: `tests/*.spec.ts` or `tests/*.e2e.ts`
+- Test setup: `tests/setup.ts`
+- Playwright config: `playwright.config.ts`
+- Vitest config: `vitest.config.ts`
+
+### Test Commands
+```bash
+# Unit tests
+npm test                 # Run all unit tests
+npm test -- --watch      # Watch mode
+npm test -- --coverage   # With coverage
+
+# E2E tests
+npm run test:e2e         # Run Playwright tests
+npm run test:e2e -- --ui # With Playwright UI
+```
+
+### Unit Test Pattern (Vitest)
+```typescript
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MyComponent } from './MyComponent';
+
+describe('MyComponent', () => {
+  it('renders the title', () => {
+    render(<MyComponent title="Hello" />);
+    expect(screen.getByText('Hello')).toBeInTheDocument();
+  });
+
+  it('calls onClick when button clicked', async () => {
+    const onClick = vi.fn();
+    render(<MyComponent onClick={onClick} />);
+    await userEvent.click(screen.getByRole('button'));
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+});
+```
+
+### E2E Test Pattern (Playwright)
+```typescript
+import { test, expect } from '@playwright/test';
+
+test.describe('Login flow', () => {
+  test('user can sign in', async ({ page }) => {
+    await page.goto('/sign-in');
+    await page.fill('[data-testid="email"]', 'test@example.com');
+    await page.fill('[data-testid="password"]', 'password123');
+    await page.click('[data-testid="submit"]');
+    await expect(page).toHaveURL('/dashboard');
+  });
+});
+```
+
+---
+
+## Example Agent Persona Snippet
+
+```markdown
+You are a testing specialist with deep expertise in:
+- Writing clear, maintainable unit tests with Vitest
+- Building reliable E2E tests with Playwright
+- Designing effective mocking strategies
+- Identifying and improving test coverage gaps
+
+You prioritize:
+- Testing behavior, not implementation details
+- Clear, descriptive test names
+- Proper test isolation (no shared state)
+- Stable selectors (data-testid over CSS)
+
+You avoid:
+- Over-mocking (mock boundaries, not internals)
+- Fragile selectors that break on refactors
+- Test interdependence (tests must run in any order)
+- Skipping error case coverage
+```

package/uninstall.js

@@ -39,10 +39,14 @@ const INSTALLED_FILES = {
     'implement-epic-with-subagents.md',
     'plan-parallelization.md',
     'git-cleanup-and-merge.md',
+    'dev-story-backend.md',
+    'dev-story-fullstack.md',
+    'dev-story-ui.md',
   ],
   agents: [
     'principal-code-reviewer.md',
     'story-prep-master.md',
+    'desk-check-gate.md',
   ],
   'skills/agent-creator': [
     'SKILL.md',
@@ -51,6 +55,15 @@ const INSTALLED_FILES = {
     'NON-STORY-AGENT-TEMPLATE.md',
     'COMMUNITY-REPOS.md',
   ],
+  'skills/agent-creator/expertise': [
+    'INDEX.md',
+    'react-frontend.md',
+    'backend-api.md',
+    'nextjs-fullstack.md',
+    'testing.md',
+    'database-orm.md',
+    'devops-ci.md',
+  ],
   'skills/designer-founder': [
     'workflow.md',
   ],
@@ -104,6 +117,9 @@ const BMAD_INSTALLED_FILES = {
   '../_bmad/bmm/workflows/4-implementation/implement-epic-with-subagents/validation': [
     'checklist.md',
   ],
+  '../_bmad/bmm/workflows/4-implementation/implement-epic-with-subagents/checklists': [
+    'desk-check-checklist.md',
+  ],
 };
 
 /**
@@ -226,6 +242,7 @@ function uninstall() {
 
   // Clean up empty BMAD directories (from deepest to shallowest)
   const bmadDirs = [
+    '../_bmad/bmm/workflows/4-implementation/implement-epic-with-subagents/checklists',
     '../_bmad/bmm/workflows/4-implementation/implement-epic-with-subagents/validation',
     '../_bmad/bmm/workflows/4-implementation/implement-epic-with-subagents/templates',
     '../_bmad/bmm/workflows/4-implementation/implement-epic-with-subagents/steps',
@@ -245,6 +262,7 @@ function uninstall() {
     'skills/designer-founder/templates',
     'skills/designer-founder/steps',
     'skills/designer-founder',
+    'skills/agent-creator/expertise',
     'skills/agent-creator',
   ];
   for (const skillSubDir of skillDirs) {