Use when testing features with local backend integration - runs codebase E2E tests by default, uses Claude in Chrome only when explicitly requested with --browser flag
Runs E2E tests against local backend and frontend without mock data.
npx claudepluginhub devnogari/devnogari-claude-pluginsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
로컬 백엔드와 프론트엔드를 함께 띄우고 테스트를 수행하는 워크플로우.
Core principle:
--browser 플래그 시 Claude in Chrome으로 실시간 브라우저 인터랙션중요: 이 테스트 환경은 Mock 데이터를 사용하지 않습니다.
Frontend (localhost:PORT)
↓ HTTP requests
Backend (localhost:API_PORT)
↓ Database queries
Database (localhost:DB_PORT)
Don't use for:
# E2E 테스트 실행 (기본, 권장)
/local-testing [test-name]
# 브라우저 인터랙션 테스트 (요청 시에만)
/local-testing [page-path] --browser
When: 자동화된 테스트, CI/CD, 반복 가능한 검증
workflow:
1. 서버 상태 확인 (curl health check)
2. E2E 테스트 실행 (pnpm test:e2e 또는 npm run test:e2e)
3. 결과 리포트 확인
When: 수동 디버깅, 실시간 UI 확인, 복잡한 인터랙션 탐색
workflow:
1. 서버 상태 확인
2. Claude in Chrome 연결
3. 로그인 수행 (필요시)
4. 페이지 탐색 및 인터랙션
5. 네트워크/콘솔 검증
| Mode | Command | Use Case |
|---|---|---|
| Default | E2E test runner | 자동화된 E2E 테스트, 회귀 테스트 |
| --browser | Claude in Chrome | 수동 디버깅, 실시간 확인 |
# Verify servers are running (adjust ports for your project)
curl -s http://localhost:API_PORT/health > /dev/null && echo "✅ Backend OK" || echo "❌ Backend not running"
curl -s http://localhost:FRONTEND_PORT > /dev/null && echo "✅ Frontend OK" || echo "❌ Frontend not running"
# Run all E2E tests (adjust command for your project)
pnpm test:e2e
# or
npm run test:e2e
# Run specific test file
pnpm test:e2e tests/e2e/login.spec.ts
# Run tests matching pattern
pnpm test:e2e --grep "login"
# View test report (if html reporter configured)
open playwright-report/index.html
# Check test output for failures
# Check and start if needed
curl -s http://localhost:API_PORT/health > /dev/null || echo "❌ Start backend first"
curl -s http://localhost:FRONTEND_PORT > /dev/null || echo "❌ Start frontend first"
# Get tab context
mcp-cli call claude-in-chrome/tabs_context_mcp '{"createIfEmpty": true}'
# Navigate to frontend
mcp-cli call claude-in-chrome/navigate '{"url": "http://localhost:FRONTEND_PORT", "tabId": <TAB_ID>}'
# Read page for login form
mcp-cli call claude-in-chrome/read_page '{"tabId": <TAB_ID>, "filter": "interactive"}'
# Type credentials
mcp-cli call claude-in-chrome/computer '{"tabId": <TAB_ID>, "action": "left_click", "ref": "<EMAIL_REF>"}'
mcp-cli call claude-in-chrome/computer '{"tabId": <TAB_ID>, "action": "key", "text": "cmd+a"}'
mcp-cli call claude-in-chrome/computer '{"tabId": <TAB_ID>, "action": "type", "text": "test@example.com"}'
mcp-cli call claude-in-chrome/computer '{"tabId": <TAB_ID>, "action": "key", "text": "Tab"}'
mcp-cli call claude-in-chrome/computer '{"tabId": <TAB_ID>, "action": "type", "text": "password"}'
mcp-cli call claude-in-chrome/computer '{"tabId": <TAB_ID>, "action": "key", "text": "Enter"}'
# Navigate to target page
mcp-cli call claude-in-chrome/navigate '{"url": "http://localhost:FRONTEND_PORT/<path>", "tabId": <TAB_ID>}'
# Read page structure
mcp-cli call claude-in-chrome/read_page '{"tabId": <TAB_ID>}'
# Check network requests
mcp-cli call claude-in-chrome/read_network_requests '{"tabId": <TAB_ID>}'
# Check console for errors
mcp-cli call claude-in-chrome/read_console_messages '{"tabId": <TAB_ID>, "pattern": "error|Error"}'
| Mistake | Fix |
|---|---|
| 서버 미실행 상태로 테스트 | curl로 health check 먼저 |
| E2E 테스트 환경 미설정 | Playwright 설치 및 설정 확인 |
| 탭 ID 재사용 (browser mode) | 매번 tabs_context_mcp 호출 |
| 로그인 없이 페이지 접근 | 인증 필요 페이지는 로그인 먼저 |
| Backend 코드 변경 미반영 | 서버 재시작 또는 재빌드 |
// ❌ Bad - Selects wrong element
const heading = page.locator('h1').first();
// ✅ Good - Targets page content
const heading = page.locator('main h1').first();
test('should not display error state', async ({ page }) => {
await page.waitForLoadState('networkidle');
await expect(page.locator('text=Error')).not.toBeVisible();
});
Search, retrieve, and install Agent Skills from the prompts.chat registry using MCP tools. Use when the user asks to find skills, browse skill catalogs, install a skill for Claude, or extend Claude's capabilities with reusable AI agent components.
Activates when the user asks about AI prompts, needs prompt templates, wants to search for prompts, or mentions prompts.chat. Use for discovering, retrieving, and improving prompts.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.