시나리오

Frontend Release Gate

UI 집약적 변경을 위한 출시 전 워크플로우로, 셋ipment 전에 손상된 흐름, 린트/타입 회귀, 그리고 명백한 보안 문제를 감지합니다.

3 스킬 5 설치 수

frontendtestingquality-assurancesecurityrelease

3일 전에 업데이트됨

설치

이 팩의 모든 스킬을 설치하려면 다음 명령을 실행하세요:

npx skillstore add @frontend-release-gate

CLI는 Codex와 Claude Code 폴더를 자동으로 감지하고, 가능하면 둘 다에 설치합니다.

개요

사용 가이드

AI로 개선됨

상세 가이드

## 개요
Frontend Release Gate는 UI 집약적 변경을 위한 출시 전 워크플로우입니다. 세 가지 자동화된 품질 체크포인트 — 브라우저 흐름 검증, 린트/타입 유효성 검사, 보안 감사 — 를 실행하여 자신감 있게 셋ipment할 수 있으며, 프로덕션에 도달하기 전에 회귀를 감지할 수 있습니다.

## 빠른 시작
1. OpenClaw 워크스페이스에 플러그인을 설치하세요: `npx skillstore add @frontend-release-gate`
2. UI 브랜치를 병합하기 전에 **webapp-testing**을 트리거하여 Playwright 검사를 실행하세요: 주요 사용자 흐름 확인, 주요 화면 스크린샷 캡처, 에러에 대한 브라우저 콘솔 출력 검토.
3. 프론트엔드 코드베이스 전체에서 ESLint 위반 및 TypeScript 타입 오류를 잡으려면 **lint-typecheck**를 실행하세요 — 병합 전에 릴리스를 깨끗하게 유지.
4. 마지막으로, 변경 사항이 라이브 상태가 되기 전에 인증 처리, API 키 노출, 인젝션 위험을 검토하려면 **security-audit**를 실행하세요.

## 주요 명령어
- `webapp-testing` — 로컬 웹 앱에서 Playwright 기반 브라우저 검사를 실행합니다. 손상된 UI 흐름, 콘솔 에러를 표시하며 시각적 검토를 위한 스크린샷을 제공합니다.
- `lint-typecheck` — ESLint 및 `tsc` 타입 검사를 실행합니다. 오래된 캐시에서 CI가 놓칠 수 있는 타입 회귀 및 린트 위반을 표시합니다.
- `security-audit` — 명령 실행 경로, 도구 권한, API 키 처리를 감사하여 인증 취약점 및 인젝션 위험을 확인합니다.

## 팁
- 모든 UI 집약적 PR에서 세 가지 게이트를 순차적으로 실행하세요: webapp-testing → lint-typecheck → security-audit.
- CI 파이프라인 플러그인(예: 빌드 및 테스트 플러그인)과 함께 사용하여 게이트가 수동 실행 없이 각 풀 리퀘스트에서 자동으로 실행되도록 하세요.
- webapp-testing이 손상된 흐름을 표시하면 lint-typecheck로 진행하기 전에 수정하세요. 손상된 렌더링은 종종 타입 에러를 하류에서 가립니다.