claude-skill-lord 1.5.0

package/commands/design/describe.md

@@ -0,0 +1,21 @@
+---
+description: Describe a design based on screenshot/video
+argument-hint: [screenshot]
+---
+
+Think hard to describe the design based on this screenshot/video: 
+<screenshot>$ARGUMENTS</screenshot>
+
+**IMPORTANT**: Activate `aesthetic` and `frontend-design` skills.
+**IMPORTANT**: Analyze the list of skills  at `.claude/skills/*` and intelligently activate the skills that are needed for the task during the process.
+**Ensure token efficiency while maintaining high quality.**
+
+## Workflow:
+1. Use `ai-multimodal` skills to describe super details of the screenshot/video so the developer can implement it easily.
+   - Be specific about design style, every element, elements' positions, every interaction, every animation, every transition, every color, every border, every icon, every font style, font size, font weight, every spacing, every padding, every margin, every size, every shape, every texture, every material, every light, every shadow, every reflection, every refraction, every blur, every glow, every image, background transparency, etc.
+   - **IMPORTANT:** Try to predict the font name (Google Fonts) and font size in the given screenshot, don't just use Inter or Poppins.
+2. Use `ui-ux-designer` subagent to create a design implementation plan following the progressive disclosure structure so the result matches the screenshot/video:
+   - Create a directory `plans/YYYYMMDD-HHmm-plan-name` (example: `plans/20251101-1505-authentication-and-profile-implementation`).
+   - Save the overview access point at `plan.md`, keep it generic, under 80 lines, and list each phase with status/progress and links.
+   - For each phase, add `phase-XX-phase-name.md` files containing sections (Context links, Overview with date/priority/statuses, Key Insights, Requirements, Architecture, Related code files, Implementation Steps, Todo list, Success Criteria, Risk Assessment, Security Considerations, Next steps).
+3. Report back to user with a summary of the plan.

package/commands/design/fast.md

@@ -0,0 +1,22 @@
+---
+description: Create a quick design
+argument-hint: [tasks]
+---
+
+Think hard to plan & start working on these tasks follow the Orchestration Protocol, Core Responsibilities, Subagents Team and Development Rules: 
+<tasks>$ARGUMENTS</tasks>
+
+**IMPORTANT**: Activate `aesthetic` and `frontend-design` skills.
+**IMPORTANT**: Analyze the list of skills  at `.claude/skills/*` and intelligently activate the skills that are needed for the task during the process.
+**Ensure token efficiency while maintaining high quality.**
+
+## Workflow:
+2. Use `ui-ux-designer` subagent to start the design process.
+3. If user doesn't specify, create the design in pure HTML/CSS/JS.
+4. Report back to user with a summary of the changes and explain everything briefly, ask user to review the changes and approve them.
+5. If user approves the changes, update the `./docs/design-guidelines.md` docs if needed.
+
+## Notes:
+- Remember that you have the capability to generate images, videos, edit images, etc. with `ai-multimodal` skills. Use them to create the design and real assets.
+- Always review, analyze and double check generated assets with `ai-multimodal` skills to verify quality.
+- Maintain and update `./docs/design-guidelines.md` docs if needed.

package/commands/design/good.md

@@ -0,0 +1,26 @@
+---
+description: Create an immersive design
+argument-hint: [tasks]
+---
+
+Think hard to plan & start working on these tasks follow the Orchestration Protocol, Core Responsibilities, Subagents Team and Development Rules: 
+<tasks>$ARGUMENTS</tasks>
+
+**IMPORTANT**: Activate `aesthetic` and `frontend-design` skills.
+**IMPORTANT**: Analyze the list of skills  at `.claude/skills/*` and intelligently activate the skills that are needed for the task during the process.
+**Ensure token efficiency while maintaining high quality.**
+
+## Workflow:
+1. Use `researcher` subagent to research about design style, trends, fonts, colors, border, spacing, elements' positions, etc.
+2. Use `ui-ux-designer` subagent to implement the design step by step based on the research.
+3. If user doesn't specify, create the design in pure HTML/CSS/JS.
+4. Report back to user with a summary of the changes and explain everything briefly, ask user to review the changes and approve them.
+5. If user approves the changes, update the `./docs/design-guidelines.md` docs if needed.
+
+## Important Notes:
+- **ALWAYS REMEBER that you have the skills of a top-tier UI/UX Designer who won a lot of awards on Dribbble, Behance, Awwwards, Mobbin, TheFWA.**
+- Remember that you have the capability to generate images, videos, edit images, etc. with `ai-multimodal` skills for image generation. Use them to create the design with real assets.
+- Always review, analyze and double check the generated assets with `ai-multimodal` skills to verify quality.
+- Use removal background tools to remove background from generated assets if needed.
+- Create storytelling designs, immersive 3D experiences, micro-interactions, and interactive interfaces.
+- Maintain and update `./docs/design-guidelines.md` docs if needed.

package/commands/design/screenshot.md

@@ -0,0 +1,32 @@
+---
+description: Create a design based on screenshot
+argument-hint: [screenshot]
+---
+
+Think hard to plan & start designing follow exactly this screenshot: 
+<screenshot>$ARGUMENTS</screenshot>
+
+**IMPORTANT**: Activate `aesthetic` and `frontend-design` skills.
+**IMPORTANT**: Analyze the list of skills  at `.claude/skills/*` and intelligently activate the skills that are needed for the task during the process.
+**Ensure token efficiency while maintaining high quality.**
+
+## Workflow:
+1. Use `ai-multimodal` skills to describe super details of the screenshot (design style, trends, fonts, colors, border, spacing, elements' positions, size, shape, texture, material, light, shadow, reflection, refraction, blur, glow, image, background transparency, transition, etc.)
+   - **IMPORTANT:** Try to predict the font name (Google Fonts) and font size in the given screenshot, don't just use Inter or Poppins.
+2. Use `ui-ux-designer` subagent to create a design plan following the progressive disclosure structure so the final result matches the screenshot:
+   - Create a directory `plans/YYYYMMDD-HHmm-plan-name` (example: `plans/20251101-1505-authentication-and-profile-implementation`).
+   - Save the overview access point at `plan.md`, keep it generic, under 80 lines, and list each phase with status/progress and links.
+   - For each phase, add `phase-XX-phase-name.md` files containing sections (Context links, Overview with date/priority/statuses, Key Insights, Requirements, Architecture, Related code files, Implementation Steps, Todo list, Success Criteria, Risk Assessment, Security Considerations, Next steps).
+   - Keep every research markdown report concise (≤150 lines) while covering all requested topics and citations.
+3. Then implement the plan step by step.
+4. If user doesn't specify, create the design in pure HTML/CSS/JS.
+5. Report back to user with a summary of the changes and explain everything briefly, ask user to review the changes and approve them.
+6. If user approves the changes, update the `./docs/design-guidelines.md` docs if needed.
+
+## Important Notes:
+- **ALWAYS REMEBER that you have the skills of a top-tier UI/UX Designer who won a lot of awards on Dribbble, Behance, Awwwards, Mobbin, TheFWA.**
+- Remember that you have the capability to generate images, videos, edit images, etc. with ai-multimodal skill for image generation. Use them to create the design with real assets.
+- Always review, analyze and double check the generated assets with ai-multimodal skill to verify quality.
+- Use removal background tools to remove background from generated assets if needed.
+- Create storytelling designs, immersive 3D experiences, micro-interactions, and interactive interfaces.
+- Maintain and update `./docs/design-guidelines.md` docs if needed.

package/commands/design/video.md

@@ -0,0 +1,32 @@
+---
+description: Create a design based on video
+argument-hint: [video]
+---
+
+Think hard to plan & start designing follow exactly this video: 
+<video>$ARGUMENTS</video>
+
+**IMPORTANT**: Activate `aesthetic` and `frontend-design` skills.
+**IMPORTANT**: Analyze the list of skills  at `.claude/skills/*` and intelligently activate the skills that are needed for the task during the process.
+**Ensure token efficiency while maintaining high quality.**
+
+## Workflow:
+1. Use `ai-multimodal` skills to describe super details of the video: be specific about describing every element, every interaction, every animation, every transition, every color, every font, every border, every spacing, every size, every shape, every texture, every material, every light, every shadow, every reflection, every refraction, every blur, every glow, every image, background transparency, etc.
+   - **IMPORTANT:** Try to predict the font name (Google Fonts) and font size in the given video, don't just use Inter or Poppins.
+2. Use `ui-ux-designer` subagent to create a design plan following the progressive disclosure structure so the final result matches the video:
+   - Create a directory `plans/YYYYMMDD-HHmm-plan-name` (example: `plans/20251101-1505-authentication-and-profile-implementation`).
+   - Save the overview access point at `plan.md`, keep it generic, under 80 lines, and list each phase with status/progress and links.
+   - For each phase, add `phase-XX-phase-name.md` files containing sections (Context links, Overview with date/priority/statuses, Key Insights, Requirements, Architecture, Related code files, Implementation Steps, Todo list, Success Criteria, Risk Assessment, Security Considerations, Next steps).
+   - Keep every research markdown report concise (≤150 lines) while covering all requested topics and citations.
+3. Then implement the plan step by step.
+4. If user doesn't specify, create the design in pure HTML/CSS/JS.
+5. Report back to user with a summary of the changes and explain everything briefly, ask user to review the changes and approve them.
+6. If user approves the changes, update the `./docs/design-guidelines.md` docs if needed.
+
+## Important Notes:
+- **ALWAYS REMEBER that you have the skills of a top-tier UI/UX Designer who won a lot of awards on Dribbble, Behance, Awwwards, Mobbin, TheFWA.**
+- Remember that you have the capability to generate images, videos, edit images, etc. with ai-multimodal skill for image generation. Use them to create the design with real assets.
+- Always review, analyze and double check the generated assets with ai-multimodal skill to verify quality.
+- Use removal background tools to remove background from generated assets if needed.
+- Create storytelling designs, immersive 3D experiences, micro-interactions, and interactive interfaces.
+- Maintain and update `./docs/design-guidelines.md` docs if needed.

package/commands/docs/init.md

@@ -0,0 +1,15 @@
+---
+description: ⚡⚡⚡⚡ Analyze the codebase and create initial documentation
+---
+
+## Mission
+Use `docs-manager` agent to analyze the codebase and create initial documentation:
+- `docs/project-overview-pdr.md`: Project overview and PDR (Product Development Requirements)
+- `docs/codebase-summary.md`: Codebase summary
+- `docs/code-standards.md`: Codebase structure and code standards
+- `docs/system-architecture.md`: System architecture
+- Update `README.md` with initial documentation (keep it under 300 lines)
+
+Use `docs/` directory as the source of truth for documentation.
+
+**IMPORTANT**: **Do not** start implementing.

package/commands/docs/summarize.md

@@ -0,0 +1,22 @@
+---
+description: ⚡ Analyze the codebase and update documentation
+argument-hint: [focused-topics] [should-scan-codebase]
+---
+
+Use `docs-manager` agent to analyze the codebase based on `docs/codebase-summary.md` and respond with a summary report.
+
+## Arguments:
+$1: Focused topics (default: all)
+$2: Should scan codebase (`Boolean`, default: `false`)
+
+## Focused Topics:
+<focused_topics>$1</focused_topics>
+
+## Should Scan Codebase:
+<should_scan_codebase>$2</should_scan_codebase>
+
+## Important:
+- Use `docs/` directory as the source of truth for documentation.
+- Do not scan the entire codebase unless the user explicitly requests it.
+
+**IMPORTANT**: **Do not** start implementing.

package/commands/docs/update.md

@@ -0,0 +1,23 @@
+---
+description: ⚡⚡⚡ Analyze the codebase and update documentation
+---
+
+Use `docs-manager` agent to analyze the codebase and update documentation:
+- `README.md`: Update README (keep it under 300 lines)
+- `docs/project-overview-pdr.md`: Update project overview and PDR (Product Development Requirements)
+- `docs/codebase-summary.md`: Update codebase summary
+- `docs/code-standards.md`: Update codebase structure and code standards
+- `docs/system-architecture.md`: Update system architecture
+- `docs/project-roadmap.md`: Update project roadmap
+- `docs/deployment-guide.md` [optional]: Update deployment guide
+- `docs/design-guidelines.md` [optional]: Update design guidelines
+
+## Additional requests
+<additional_requests>
+  $ARGUMENTS
+</additional_requests>
+
+## Important
+- Use `docs/` directory as the source of truth for documentation.
+
+**IMPORTANT**: **Do not** start implementing.

package/commands/e2e.md

@@ -0,0 +1,365 @@
+---
+description: Generate and run end-to-end tests with Playwright. Creates test journeys, runs tests, captures screenshots/videos/traces, and uploads artifacts.
+---
+
+# E2E Command
+
+This command invokes the **e2e-runner** agent to generate, maintain, and execute end-to-end tests using Playwright.
+
+## What This Command Does
+
+1. **Generate Test Journeys** - Create Playwright tests for user flows
+2. **Run E2E Tests** - Execute tests across browsers
+3. **Capture Artifacts** - Screenshots, videos, traces on failures
+4. **Upload Results** - HTML reports and JUnit XML
+5. **Identify Flaky Tests** - Quarantine unstable tests
+
+## When to Use
+
+Use `/e2e` when:
+- Testing critical user journeys (login, trading, payments)
+- Verifying multi-step flows work end-to-end
+- Testing UI interactions and navigation
+- Validating integration between frontend and backend
+- Preparing for production deployment
+
+## How It Works
+
+The e2e-runner agent will:
+
+1. **Analyze user flow** and identify test scenarios
+2. **Generate Playwright test** using Page Object Model pattern
+3. **Run tests** across multiple browsers (Chrome, Firefox, Safari)
+4. **Capture failures** with screenshots, videos, and traces
+5. **Generate report** with results and artifacts
+6. **Identify flaky tests** and recommend fixes
+
+## Example Usage
+
+```
+User: /e2e Test the market search and view flow
+
+Agent (e2e-runner):
+# E2E Test Generation: Market Search and View Flow
+
+## Test Scenario Identified
+
+**User Journey:** Market Search → View Results → Click Market → View Details
+
+**Test Coverage:**
+1. Navigate to markets page
+2. Perform semantic search
+3. Verify search results
+4. Click on first result
+5. Verify market details page loads
+6. Verify chart renders
+
+## Generated Test Code
+
+```typescript
+// tests/e2e/markets/search-and-view.spec.ts
+import { test, expect } from '@playwright/test'
+import { MarketsPage } from '../../pages/MarketsPage'
+import { MarketDetailsPage } from '../../pages/MarketDetailsPage'
+
+test.describe('Market Search and View Flow', () => {
+  test('user can search markets and view details', async ({ page }) => {
+    // 1. Navigate to markets page
+    const marketsPage = new MarketsPage(page)
+    await marketsPage.goto()
+
+    // Verify page loaded
+    await expect(page).toHaveTitle(/Markets/)
+    await expect(page.locator('h1')).toContainText('Markets')
+
+    // 2. Perform semantic search
+    await marketsPage.searchMarkets('election')
+
+    // Wait for API response
+    await page.waitForResponse(resp =>
+      resp.url().includes('/api/markets/search') && resp.status() === 200
+    )
+
+    // 3. Verify search results
+    const marketCards = marketsPage.marketCards
+    await expect(marketCards.first()).toBeVisible()
+    const resultCount = await marketCards.count()
+    expect(resultCount).toBeGreaterThan(0)
+
+    // Take screenshot of search results
+    await page.screenshot({ path: 'artifacts/search-results.png' })
+
+    // 4. Click on first result
+    const firstMarketTitle = await marketCards.first().textContent()
+    await marketCards.first().click()
+
+    // 5. Verify market details page loads
+    await expect(page).toHaveURL(/\/markets\/[a-z0-9-]+/)
+
+    const detailsPage = new MarketDetailsPage(page)
+    await expect(detailsPage.marketName).toBeVisible()
+    await expect(detailsPage.marketDescription).toBeVisible()
+
+    // 6. Verify chart renders
+    await expect(detailsPage.priceChart).toBeVisible()
+
+    // Verify market name matches
+    const detailsTitle = await detailsPage.marketName.textContent()
+    expect(detailsTitle?.toLowerCase()).toContain(
+      firstMarketTitle?.toLowerCase().substring(0, 20) || ''
+    )
+
+    // Take screenshot of market details
+    await page.screenshot({ path: 'artifacts/market-details.png' })
+  })
+
+  test('search with no results shows empty state', async ({ page }) => {
+    const marketsPage = new MarketsPage(page)
+    await marketsPage.goto()
+
+    // Search for non-existent market
+    await marketsPage.searchMarkets('xyznonexistentmarket123456')
+
+    // Verify empty state
+    await expect(page.locator('[data-testid="no-results"]')).toBeVisible()
+    await expect(page.locator('[data-testid="no-results"]')).toContainText(
+      /no.*results|no.*markets/i
+    )
+
+    const marketCount = await marketsPage.marketCards.count()
+    expect(marketCount).toBe(0)
+  })
+
+  test('can clear search and see all markets again', async ({ page }) => {
+    const marketsPage = new MarketsPage(page)
+    await marketsPage.goto()
+
+    // Initial market count
+    const initialCount = await marketsPage.marketCards.count()
+
+    // Perform search
+    await marketsPage.searchMarkets('trump')
+    await page.waitForLoadState('networkidle')
+
+    // Verify filtered results
+    const filteredCount = await marketsPage.marketCards.count()
+    expect(filteredCount).toBeLessThan(initialCount)
+
+    // Clear search
+    await marketsPage.searchInput.clear()
+    await page.waitForLoadState('networkidle')
+
+    // Verify all markets shown again
+    const finalCount = await marketsPage.marketCards.count()
+    expect(finalCount).toBe(initialCount)
+  })
+})
+```
+
+## Running Tests
+
+```bash
+# Run the generated test
+npx playwright test tests/e2e/markets/search-and-view.spec.ts
+
+Running 3 tests using 3 workers
+
+  ✓  [chromium] › search-and-view.spec.ts:5:3 › user can search markets and view details (4.2s)
+  ✓  [chromium] › search-and-view.spec.ts:52:3 › search with no results shows empty state (1.8s)
+  ✓  [chromium] › search-and-view.spec.ts:67:3 › can clear search and see all markets again (2.9s)
+
+  3 passed (9.1s)
+
+Artifacts generated:
+- artifacts/search-results.png
+- artifacts/market-details.png
+- playwright-report/index.html
+```
+
+## Test Report
+
+```
+╔══════════════════════════════════════════════════════════════╗
+║                    E2E Test Results                          ║
+╠══════════════════════════════════════════════════════════════╣
+║ Status:     ✅ ALL TESTS PASSED                              ║
+║ Total:      3 tests                                          ║
+║ Passed:     3 (100%)                                         ║
+║ Failed:     0                                                ║
+║ Flaky:      0                                                ║
+║ Duration:   9.1s                                             ║
+╚══════════════════════════════════════════════════════════════╝
+
+Artifacts:
+📸 Screenshots: 2 files
+📹 Videos: 0 files (only on failure)
+🔍 Traces: 0 files (only on failure)
+📊 HTML Report: playwright-report/index.html
+
+View report: npx playwright show-report
+```
+
+✅ E2E test suite ready for CI/CD integration!
+```
+
+## Test Artifacts
+
+When tests run, the following artifacts are captured:
+
+**On All Tests:**
+- HTML Report with timeline and results
+- JUnit XML for CI integration
+
+**On Failure Only:**
+- Screenshot of the failing state
+- Video recording of the test
+- Trace file for debugging (step-by-step replay)
+- Network logs
+- Console logs
+
+## Viewing Artifacts
+
+```bash
+# View HTML report in browser
+npx playwright show-report
+
+# View specific trace file
+npx playwright show-trace artifacts/trace-abc123.zip
+
+# Screenshots are saved in artifacts/ directory
+open artifacts/search-results.png
+```
+
+## Flaky Test Detection
+
+If a test fails intermittently:
+
+```
+⚠️  FLAKY TEST DETECTED: tests/e2e/markets/trade.spec.ts
+
+Test passed 7/10 runs (70% pass rate)
+
+Common failure:
+"Timeout waiting for element '[data-testid="confirm-btn"]'"
+
+Recommended fixes:
+1. Add explicit wait: await page.waitForSelector('[data-testid="confirm-btn"]')
+2. Increase timeout: { timeout: 10000 }
+3. Check for race conditions in component
+4. Verify element is not hidden by animation
+
+Quarantine recommendation: Mark as test.fixme() until fixed
+```
+
+## Browser Configuration
+
+Tests run on multiple browsers by default:
+- ✅ Chromium (Desktop Chrome)
+- ✅ Firefox (Desktop)
+- ✅ WebKit (Desktop Safari)
+- ✅ Mobile Chrome (optional)
+
+Configure in `playwright.config.ts` to adjust browsers.
+
+## CI/CD Integration
+
+Add to your CI pipeline:
+
+```yaml
+# .github/workflows/e2e.yml
+- name: Install Playwright
+  run: npx playwright install --with-deps
+
+- name: Run E2E tests
+  run: npx playwright test
+
+- name: Upload artifacts
+  if: always()
+  uses: actions/upload-artifact@v3
+  with:
+    name: playwright-report
+    path: playwright-report/
+```
+
+## PMX-Specific Critical Flows
+
+For PMX, prioritize these E2E tests:
+
+**🔴 CRITICAL (Must Always Pass):**
+1. User can connect wallet
+2. User can browse markets
+3. User can search markets (semantic search)
+4. User can view market details
+5. User can place trade (with test funds)
+6. Market resolves correctly
+7. User can withdraw funds
+
+**🟡 IMPORTANT:**
+1. Market creation flow
+2. User profile updates
+3. Real-time price updates
+4. Chart rendering
+5. Filter and sort markets
+6. Mobile responsive layout
+
+## Best Practices
+
+**DO:**
+- ✅ Use Page Object Model for maintainability
+- ✅ Use data-testid attributes for selectors
+- ✅ Wait for API responses, not arbitrary timeouts
+- ✅ Test critical user journeys end-to-end
+- ✅ Run tests before merging to main
+- ✅ Review artifacts when tests fail
+
+**DON'T:**
+- ❌ Use brittle selectors (CSS classes can change)
+- ❌ Test implementation details
+- ❌ Run tests against production
+- ❌ Ignore flaky tests
+- ❌ Skip artifact review on failures
+- ❌ Test every edge case with E2E (use unit tests)
+
+## Important Notes
+
+**CRITICAL for PMX:**
+- E2E tests involving real money MUST run on testnet/staging only
+- Never run trading tests against production
+- Set `test.skip(process.env.NODE_ENV === 'production')` for financial tests
+- Use test wallets with small test funds only
+
+## Integration with Other Commands
+
+- Use `/plan` to identify critical journeys to test
+- Use `/tdd` for unit tests (faster, more granular)
+- Use `/e2e` for integration and user journey tests
+- Use `/code-review` to verify test quality
+
+## Related Agents
+
+This command invokes the `e2e-runner` agent provided by ECC.
+
+For manual installs, the source file lives at:
+`agents/e2e-runner.md`
+
+## Quick Commands
+
+```bash
+# Run all E2E tests
+npx playwright test
+
+# Run specific test file
+npx playwright test tests/e2e/markets/search.spec.ts
+
+# Run in headed mode (see browser)
+npx playwright test --headed
+
+# Debug test
+npx playwright test --debug
+
+# Generate test code
+npx playwright codegen http://localhost:3000
+
+# View report
+npx playwright show-report
+```