프론트엔드 버그는 적절한 도구 없이는 진단하기 어렵습니다. 이 스킬은 Chrome DevTools MCP를 사용하여 UI 문제, 성능 문제, 네트워크 오류, 콘솔 실패를 식별하고 수정하기 위한 안내된 워크플로를 제공합니다.

웹 애플리케이션을 수동으로 테스트하면 시간이 많이 들고 오류가 발생합니다. 이 스킬은 Playwright 자동화 스크립트와 서버 관리 도구를 제공하여 프론트엔드 기능을 확인하고, 스크린샷을 캡처하며, UI 동작을 디버그하고, 브라우저 콘솔 로그를 볼 수 있습니다.

개발자들은 모의 객체(mock) 대신 실제 동작을 확인하는 테스트를 작성하는 데 시간을 낭비합니다. 이 기술은 TDD 원칙을 적용하고 각 테스트 결정 전에 게이트 함수를 제공함으로써 5가지 일반적인 테스트 안티 패턴을 방지합니다.

코드를 작성한 후 테스트를 작성하는 것은 아무것도 증명하지 않습니다. 이 스킬은 먼저 실패하는 테스트를 작성하도록 강제함으로써 TDD 규율을 적용하여, 테스트가 실제로 동작을 검증하고 프로덕션에 도달하기 전에 버그를 탐지하도록 보장합니다.

무작위 수정은 시간을 낭비하고 새로운 버그를 만듭니다. 이 스킬은 솔루션을 시도하기 전에 근본 원인을 이해하도록 보장하는 엄격한 4단계 디버깅 프로세스를 적용하여, 근본적인 문제를 감추는 증상 수정을 방지합니다.

일찍 발견된 코드 문제는 나중에 비용이 많이 드는 수정을 방지합니다. 이 스킬은 개발을 진행하기 전에 요구사항에 대한 구현을 확인하기 위해 코드 리뷰어 서브에이전트를 실행합니다.

많은 개발자들이 검증 없이 코드 리뷰 피드백을 맹목적으로 구현합니다. 이 스킬은 구현 전에 피드백을 기술적으로 평가하도록 보장합니다. 코드 품질을 향상시키고 불필요한 변경을 방지합니다.

Chrome 확장 프로그램을 개발하려면 서비스 워커, 보안 패턴, Chrome 웹 스토어 규정 준수에 대한 이해가 필요합니다. 이 기술은 아키텍처 지침, 코드 템플릿, 선택적 AI 통합을 포함한 전문적인 확장 프로그램 제작을 위한 보안 모범 사례를 제공합니다.

MCP 서버를 만들려면 프로토콜 사양, 에이전트 중심 설계, 평가 방법론에 대한 깊은 지식이 필요합니다. 이 스킬은 효과적인 LLM-도구 통합을 가능하게 하는 고품질 MCP 서버를 구축하기 위한 포괄적인 가이드, 참조 구현 및 평가 도구를 제공합니다.

개발자들은 브랜치를 끝내는 방법을 결정하는 데 시간을 낭비합니다. 이 스킬은 명확한 옵션을 제시하고 선택한 워크플로우를 안전하게 처리합니다. 테스트가 통과하는지 확인하고 파괴적인 작업에는 확인을 요구합니다.

여러 테스트 실패를 하나씩 조사하면 시간이 낭비됩니다. 이 스킬은 여러 Claude 에이전트를 동시에 디스패치하여 독립적인 문제를 조사하고 수정하는 패턴을 제공하여 디버깅 시간을 줄입니다.

순수 HTML로 복잡한 아티팩트를 구축하는 것은 느리고 제한적입니다. 이 스킬은 React, Tailwind CSS, 40개 이상의 사전 구축된 shadcn/ui 컴포넌트가 포함된 완전한 개발 환경을 제공합니다. 프로젝트를 초기화하고, 현대적인 도구로 개발하고, 모든 것을 단일 휴대용 HTML 파일로 번들링하세요.

모호한 요구사항을 명확한 시스템 설계로 전환합니다. EventStorming 방법론을 사용하여 Mermaid 다이어그램으로 탐색 가능한 설계 카탈로그를 생성합니다.

대규모 코드베이스를 이해하려면 시간과 노력이 필요합니다. CodeConscious는 세션 간에 지속적 메모리를 구축하는 자율적 인지 어시스턴트를 제공하여 심층적인 코드 탐색, 패턴 인식, 프로젝트 기록에서의 지속적 학습을 가능하게 합니다.

전통적인 텍스트 검색은 코드 구조를 놓칩니다. AST-Grep은 코드의 의미를 이해하는 구문 인식 패턴을 사용하여 코드를 찾고 변환합니다. 일반 텍스트가 아닌 AST 구조로 검색하여 정확한 코드 분석과 대규모 리팩토링을 가능하게 합니다.

개발자들은 분산된 개발 도구 간 전환으로 시간을 낭비합니다. 이 툴킷은 8개의 맞춤형 AI 도구와 ripgrep, jq 등 10개 이상의 인기 CLI 유틸리티를 통합 검색 시스템을 통해 원활하게 통합합니다.

여러 git 브랜치를 관리하면 메인 작업 디렉토리가 복잡해지고 컨텍스트 전환이 어려워질 수 있습니다. 이 스킬은 간섭 없이 여러 기능을 동시에 작업할 수 있도록 격리된 git worktree를 생성하는 체계적인 접근 방식을 제공합니다.

TypeScript 스트릭트 모드는 런타임 오류를 일으킬 수 있는 버그를 컴파일 타임에 포착합니다. 이 스킬은 엄격한 타입 검사를 구성하고 적용하여 더 안전하고 신뢰할 수 있는 코드를 작성하는 데 도움을 줍니다.

코드를 먼저 작성하고 테스트를 나중에 작성하면 간극과 놓치는 엣지 케이스가 발생합니다. 이 스킬은 RED-GREEN-REFACTOR 주기를 갖춘 구조화된 TDD 워크플로우, 모킹 없이 실제 구현을 테스트하는 방법, 그리고 Playwright를 사용한 E2E 검증 기능을 제공합니다.

버그 수정은 종종 증상만 다룰 때 실패합니다. 이 4단계 디버깅 프레임워크는 해결책을 시도하기 전에 근본 원인을 이해하도록 보장합니다. 디버깅 시간을 줄이고 반복되는 문제를 방지합니다.