claude-autopm 2.8.1 → 2.8.3

package/packages/plugin-devops/scripts/examples/ssh-key-setup.sh

@@ -0,0 +1,74 @@
+#!/usr/bin/env bash
+# SSH key generation and setup with best practices
+# Usage: ./ssh-key-setup.sh [key-name] [email]
+
+set -euo pipefail
+
+KEY_NAME="${1:-id_ed25519}"
+EMAIL="${2:-user@example.com}"
+SSH_DIR="${HOME}/.ssh"
+KEY_PATH="${SSH_DIR}/${KEY_NAME}"
+
+echo "🔐 Setting up SSH key: ${KEY_NAME}..."
+
+# Create .ssh directory if it doesn't exist
+mkdir -p "${SSH_DIR}"
+chmod 700 "${SSH_DIR}"
+
+# Check if key already exists
+if [ -f "${KEY_PATH}" ]; then
+    echo "⚠️  Key already exists: ${KEY_PATH}"
+    read -p "Overwrite? (y/N): " -n 1 -r
+    echo
+    if [[ ! $REPLY =~ ^[Yy]$ ]]; then
+        echo "Aborted."
+        exit 1
+    fi
+fi
+
+# Generate ED25519 key (recommended for security and performance)
+echo "🔑 Generating ED25519 SSH key..."
+ssh-keygen -t ed25519 -C "${EMAIL}" -f "${KEY_PATH}" -N ""
+
+# Set proper permissions
+chmod 600 "${KEY_PATH}"
+chmod 644 "${KEY_PATH}.pub"
+
+echo "✅ SSH key generated successfully"
+echo ""
+echo "📋 Public key:"
+cat "${KEY_PATH}.pub"
+
+# Add to SSH agent
+echo ""
+echo "🔧 Adding key to SSH agent..."
+eval "$(ssh-agent -s)"
+ssh-add "${KEY_PATH}"
+
+# Create/update SSH config
+CONFIG_FILE="${SSH_DIR}/config"
+if [ ! -f "${CONFIG_FILE}" ]; then
+    echo "📝 Creating SSH config file..."
+    cat > "${CONFIG_FILE}" <<EOF
+# SSH Config
+# Use this key by default
+Host *
+    IdentityFile ${KEY_PATH}
+    AddKeysToAgent yes
+    UseKeychain yes
+EOF
+    chmod 600 "${CONFIG_FILE}"
+    echo "✅ SSH config created: ${CONFIG_FILE}"
+fi
+
+echo ""
+echo "✅ SSH key setup complete!"
+echo ""
+echo "📋 Next steps:"
+echo "1. Copy the public key above and add it to:"
+echo "   - GitHub: https://github.com/settings/keys"
+echo "   - GitLab: https://gitlab.com/-/profile/keys"
+echo "   - Your server's ~/.ssh/authorized_keys"
+echo ""
+echo "2. Test the connection:"
+echo "   ssh -T git@github.com"

package/packages/plugin-frameworks/README.md

@@ -0,0 +1,309 @@
+# @claudeautopm/plugin-frameworks
+
+Frontend and backend framework specialists for React, Next.js, Vue, Angular, and more.
+
+**Version**: 2.0.0 | **Schema**: 2.0 | **Context7-Verified**: ✅
+
+Complete frontend and UX framework plugin with Context7-verified React, Tailwind CSS, and Playwright patterns. Production-ready agents with up-to-date best practices from official documentation.
+
+## 📦 Installation
+
+```bash
+# Install the plugin package
+npm install @claudeautopm/plugin-frameworks
+
+# Or install globally
+npm install -g @claudeautopm/plugin-frameworks
+```
+
+## Context7 Integration
+
+This plugin uses Context7 MCP server to ensure all patterns follow the latest official documentation:
+
+**Libraries Verified**:
+- **React**: `/reactjs/react.dev` (2,404 snippets, trust 10.0)
+- **Tailwind CSS**: `/tailwindlabs/tailwindcss.com` (1,769 snippets, trust 10.0)
+- **Playwright**: `/microsoft/playwright` (2,103 snippets, trust 9.9)
+
+All code examples, patterns, and best practices are verified against current official documentation to prevent outdated implementations.
+
+## 🤖 Agents Included
+
+### Frontend Frameworks
+- **react-frontend-engineer** - React application development
+  - React 18+ features (Suspense, Concurrent Mode)
+  - Hooks and custom hook patterns
+  - State management (Context, Redux, Zustand)
+  - Performance optimization
+
+- **react-ui-expert** - React UI component development
+  - Component architecture and patterns
+  - Props and composition patterns
+  - Accessibility (a11y) best practices
+  - Component libraries integration
+
+- **tailwindcss-expert** - Tailwind CSS styling
+  - Utility-first CSS approach
+  - Custom theme configuration
+  - Responsive design patterns
+  - Plugin development
+
+### Design & UX
+- **ux-design-expert** - User experience and interface design
+  - User research and personas
+  - Information architecture
+  - Wireframing and prototyping
+  - Usability testing
+
+### Testing
+- **e2e-test-engineer** - End-to-end testing
+  - Playwright and Cypress
+  - Visual regression testing
+  - Test automation strategies
+  - CI/CD integration
+
+### Messaging & Communication
+- **nats-messaging-expert** - NATS messaging system
+  - Pub/Sub patterns
+  - Request/Reply patterns
+  - JetStream persistence
+  - Microservices communication
+
+## 💡 Usage
+
+### In Claude Code
+
+After installation, agents are available in your project:
+
+```markdown
+<!-- CLAUDE.md -->
+## Active Team Agents
+
+<!-- Load framework agents -->
+- @include .claude/agents/frameworks/react-frontend-engineer.md
+- @include .claude/agents/frameworks/tailwindcss-expert.md
+```
+
+Or use `autopm team load` to automatically include agents:
+
+```bash
+# Load framework-focused team
+autopm team load frameworks
+
+# Or include frameworks in fullstack team
+autopm team load fullstack
+```
+
+### Direct Invocation
+
+```bash
+# Invoke agent directly from CLI
+autopm agent invoke react-frontend-engineer "Build product catalog component"
+```
+
+## 📋 Agent Capabilities
+
+### React Development
+- Modern React patterns and best practices
+- State management strategies
+- Performance optimization techniques
+- Server-side rendering (SSR/SSG)
+
+### UI/UX Design
+- Responsive component design
+- Accessibility compliance
+- Design system implementation
+- User-centered design principles
+
+### Testing Strategies
+- Component testing
+- Integration testing
+- E2E test automation
+- Visual regression testing
+
+### Styling Solutions
+- Utility-first CSS with Tailwind
+- CSS-in-JS approaches
+- Responsive design
+- Dark mode implementation
+
+## 🔌 MCP Servers
+
+This plugin works with the following MCP servers for enhanced capabilities:
+
+- **react-docs** - React documentation and API references
+- **vue-docs** - Vue.js documentation and patterns
+
+Enable MCP servers:
+
+```bash
+autopm mcp enable react-docs
+autopm mcp enable vue-docs
+```
+
+## 🚀 Examples
+
+### React Component Development
+
+```
+@react-frontend-engineer
+
+Build a product listing component with:
+
+Requirements:
+- Fetch data from REST API
+- Loading and error states
+- Pagination support
+- Filter and sort functionality
+- Responsive grid layout
+
+Include:
+1. Component implementation with hooks
+2. Custom hooks for data fetching
+3. TypeScript types
+4. Unit tests with React Testing Library
+```
+
+### Tailwind UI Implementation
+
+```
+@tailwindcss-expert
+
+Create responsive navigation component:
+
+Requirements:
+- Mobile-first responsive design
+- Dropdown menu support
+- Dark mode toggle
+- Accessible keyboard navigation
+- Tailwind utility classes
+
+Include:
+1. Component markup
+2. Tailwind configuration
+3. Custom theme extensions
+4. Accessibility features
+```
+
+### UX Design System
+
+```
+@ux-design-expert
+
+Design component library for SaaS dashboard:
+
+Requirements:
+- Consistent design language
+- 8pt grid system
+- Color palette and typography
+- Component documentation
+- Accessibility guidelines
+
+Include:
+1. Design tokens
+2. Component specifications
+3. Usage guidelines
+4. Figma/Sketch templates
+```
+
+### E2E Testing Suite
+
+```
+@e2e-test-engineer
+
+Create E2E test suite for checkout flow:
+
+Requirements:
+- Playwright test framework
+- Page Object Model pattern
+- Cross-browser testing
+- Visual regression tests
+- CI/CD integration
+
+Include:
+1. Test specifications
+2. Page object classes
+3. Test data fixtures
+4. GitHub Actions workflow
+```
+
+### NATS Microservices
+
+```
+@nats-messaging-expert
+
+Setup NATS messaging for microservices:
+
+Requirements:
+- Service discovery pattern
+- Request/Reply for sync calls
+- Pub/Sub for events
+- JetStream for persistence
+- Error handling and retry
+
+Include:
+1. NATS connection setup
+2. Message patterns
+3. Service implementations
+4. Error handling strategies
+```
+
+## 🔧 Configuration
+
+### Environment Variables
+
+Some agents benefit from environment variables:
+
+```bash
+# API endpoints
+export REACT_APP_API_URL=https://api.example.com
+
+# Feature flags
+export REACT_APP_ENABLE_DARK_MODE=true
+
+# NATS configuration
+export NATS_URL=nats://localhost:4222
+```
+
+### Agent Customization
+
+You can customize agent behavior in `.claude/config.yaml`:
+
+```yaml
+plugins:
+  frameworks:
+    react:
+      version: 18
+      prefer_typescript: true
+      state_management: zustand
+    tailwind:
+      prefix: tw-
+      important: true
+    testing:
+      framework: playwright
+      coverage_threshold: 80
+```
+
+## 📖 Documentation
+
+- [React Frontend Engineer Guide](./agents/react-frontend-engineer.md)
+- [React UI Expert Guide](./agents/react-ui-expert.md)
+- [Tailwind CSS Expert Guide](./agents/tailwindcss-expert.md)
+- [UX Design Expert Guide](./agents/ux-design-expert.md)
+- [E2E Test Engineer Guide](./agents/e2e-test-engineer.md)
+- [NATS Messaging Expert Guide](./agents/nats-messaging-expert.md)
+
+## 🤝 Contributing
+
+Contributions are welcome! Please see [CONTRIBUTING.md](../../CONTRIBUTING.md) for guidelines.
+
+## 📄 License
+
+MIT © ClaudeAutoPM Team
+
+## 🔗 Links
+
+- [ClaudeAutoPM](https://github.com/rafeekpro/ClaudeAutoPM)
+- [Plugin Documentation](https://github.com/rafeekpro/ClaudeAutoPM/blob/main/docs/PLUGIN-IMPLEMENTATION-PLAN.md)
+- [npm Package](https://www.npmjs.com/package/@claudeautopm/plugin-frameworks)
+- [Issues](https://github.com/rafeekpro/ClaudeAutoPM/issues)

package/{autopm/.claude/agents/frameworks → packages/plugin-frameworks/agents}/e2e-test-engineer.md

@@ -343,6 +343,225 @@ const metrics = await page.evaluate(() => performance.toJSON());
 expect(metrics.timing.loadEventEnd).toBeLessThan(3000);
 ```
 
+## Context7-Verified Playwright Patterns
+
+**Source**: `/microsoft/playwright` (2,103 snippets, trust 9.9)
+
+### ✅ CORRECT: Web-First Assertions (Auto-Retry)
+
+Always use Playwright's web-first assertions that automatically retry:
+
+```javascript
+// ✅ Good: Automatically waits and retries until element is visible
+await expect(page.getByText('welcome')).toBeVisible();
+
+// ✅ Good: Automatically waits for text match
+await expect(page.getByTestId('status')).toHaveText('Success');
+
+// ❌ Bad: No waiting or retry - immediate check
+expect(await page.getByText('welcome').isVisible()).toBe(true);
+```
+
+### ✅ CORRECT: Mock Third-Party APIs
+
+Intercept external dependencies for reliable, fast tests:
+
+```javascript
+await page.route('**/api/fetch_data_third_party_dependency', route => route.fulfill({
+  status: 200,
+  body: testData,
+}));
+await page.goto('https://example.com');
+```
+
+### ✅ CORRECT: Test Isolation with beforeEach
+
+Use `test.beforeEach` for setup ensuring each test starts fresh:
+
+```javascript
+import { test } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  // Runs before each test and signs in each page
+  await page.goto('https://github.com/login');
+  await page.getByLabel('Username or email address').fill('username');
+  await page.getByLabel('Password').fill('password');
+  await page.getByRole('button', { name: 'Sign in' }).click();
+});
+
+test('first', async ({ page }) => {
+  // page is signed in
+});
+
+test('second', async ({ page }) => {
+  // page is signed in (independent of first test)
+});
+```
+
+### ✅ CORRECT: Soft Assertions
+
+Continue test execution after assertion failures to collect all errors:
+
+```javascript
+// Make a few checks that won't stop test when failed...
+await expect.soft(page.getByTestId('status')).toHaveText('Success');
+await expect.soft(page.getByTestId('count')).toHaveText('5');
+
+// ... and continue the test to check more things
+await page.getByRole('link', { name: 'next page' }).click();
+```
+
+### ✅ CORRECT: User-Facing Locators (getByRole)
+
+Prefer user-facing attributes over DOM structure:
+
+```javascript
+// ✅ Good: Uses accessible roles - resilient to DOM changes
+page.getByRole('button', { name: 'submit' });
+page.getByRole('link', { name: 'Get started' });
+
+// ✅ Good: Filter within context
+const product = page.getByRole('listitem').filter({ hasText: 'Product 2' });
+
+// ❌ Avoid: Brittle CSS selectors tied to DOM structure
+page.locator('#submit-button');
+page.locator('.nav > li:nth-child(2) > a');
+```
+
+### ✅ CORRECT: Parallel Test Execution
+
+Configure tests to run in parallel for speed:
+
+```javascript
+import { test } from '@playwright/test';
+
+// Run tests within this file in parallel
+test.describe.configure({ mode: 'parallel' });
+
+test('runs in parallel 1', async ({ page }) => { /* ... */ });
+test('runs in parallel 2', async ({ page }) => { /* ... */ });
+```
+
+### ✅ CORRECT: Sharding for Multiple Machines
+
+Distribute test suite across multiple CI machines:
+
+```bash
+# Machine 1 of 3
+npx playwright test --shard=1/3
+
+# Machine 2 of 3
+npx playwright test --shard=2/3
+
+# Machine 3 of 3
+npx playwright test --shard=3/3
+```
+
+### ✅ CORRECT: Debug Mode
+
+Run tests in headed mode with Playwright Inspector:
+
+```bash
+# Debug all tests
+npx playwright test --debug
+
+# Debug specific test file
+npx playwright test auth.spec.ts --debug
+
+# Debug specific test by line number
+npx playwright test auth.spec.ts:42 --debug
+```
+
+### ✅ CORRECT: Page Fixture for Test Isolation
+
+Each test gets isolated `BrowserContext` through `page` fixture:
+
+```python
+# Python example
+from playwright.sync_api import Page
+
+def test_example_test(page: Page):
+    # "page" belongs to an isolated BrowserContext for this specific test
+    pass
+
+def test_another_test(page: Page):
+    # "page" in this second test is completely isolated from the first test
+    pass
+```
+
+```javascript
+// JavaScript/TypeScript example
+test('first test', async ({ page }) => {
+  // page is isolated
+});
+
+test('second test', async ({ page }) => {
+  // completely different page instance
+});
+```
+
+### ✅ CORRECT: Comprehensive Test Structure (C#)
+
+Complete test examples for different frameworks:
+
+```csharp
+// NUnit example
+using Microsoft.Playwright.NUnit;
+
+[Parallelizable(ParallelScope.Self)]
+[TestFixture]
+public class ExampleTest : PageTest
+{
+    [Test]
+    public async Task HasTitle()
+    {
+        await Page.GotoAsync("https://playwright.dev");
+        await Expect(Page).ToHaveTitleAsync(new Regex("Playwright"));
+    }
+
+    [Test]
+    public async Task GetStartedLink()
+    {
+        await Page.GotoAsync("https://playwright.dev");
+        await Page.GetByRole(AriaRole.Link, new() { Name = "Get started" }).ClickAsync();
+        await Expect(Page.GetByRole(AriaRole.Heading, new() { Name = "Installation" })).ToBeVisibleAsync();
+    }
+}
+```
+
+### Performance Best Practices
+
+1. **Mock External Dependencies**: Prevents flakiness and speeds up tests
+2. **Use Auto-Waiting**: Playwright waits automatically before actions
+3. **Parallel Execution**: Run tests concurrently where possible
+4. **Test Isolation**: Each test should be independent (use beforeEach)
+5. **Sharding**: Distribute tests across multiple CI machines
+6. **Soft Assertions**: Collect all failures in a single test run
+7. **User-Facing Locators**: More resilient to UI changes
+
+### Anti-Patterns to Avoid
+
+```javascript
+// ❌ Don't use manual isVisible() checks
+expect(await page.getByText('welcome').isVisible()).toBe(true);
+
+// ✅ Use web-first assertions instead
+await expect(page.getByText('welcome')).toBeVisible();
+
+// ❌ Don't use brittle CSS selectors
+page.locator('#submit');
+
+// ✅ Use accessible roles
+page.getByRole('button', { name: 'Submit' });
+
+// ❌ Don't use fixed delays
+await page.waitForTimeout(5000);
+
+// ✅ Use smart waits
+await page.waitForSelector('.loaded');
+await expect(page.getByTestId('status')).toHaveText('Ready');
+```
+
 ## Self-Verification Protocol
 
 Before delivering any solution, verify: