cc-jaspr-web

Jaspr Web 자동화 + Flutter Web 임베드 검증. CoUI Web 페이지를 점검하고, Web↔Flutter 듀얼 라이브 프리뷰를 구동하며, VM Service를 통해 로컬 Flutter Web 디버그 빌드에 연결합니다.

cc-jaspr-web#

Web/Jaspr layer of the cocode verification stack. Covers two distinct needs that the VM Service-based MCPs (Marionette, mcp_toolkit, and the pixel-loop capture built on them) cannot:

Jaspr-rendered DOM — Production-built Jaspr SSG/SSR pages such as coui.cocode.im/components/*. Pure HTML/CSS; no Flutter, no VM Service.
Flutter Web embeds — Flutter widgets lazy-loaded into a Jaspr page (e.g. coui.cocode.im/live-preview-poc). In production this is a release-mode Flutter Web canvas — VM Service is off, so only Playwright/Chrome DevTools work.

Skills#

이름	설명
jaspr-patterns	Jaspr 웹 개발 패턴. Dart 웹에서 Jaspr 컴포넌트, 라우팅, SSR을 구축할 때 사용합니다.
jaspr-state-management	bloc_signals_jaspr 기반 Jaspr 웹 상태관리. Jaspr 컴포넌트에 상태를 연결하거나, Flutter 앱과 상태관리 코드를 공유할 때 사용합니다.
jaspr-web-guide	CoUI Web에 맞춰진 Jaspr 렌더링 웹 자동화. Playwright(또는 Chrome DevTools MCP)를 구동해 셀렉터 현황을 조사하고, 접근성을 점검하고, 문서화된
live-preview-match	cocode 스타일 live-preview 페이지를 위한 Web↔Flutter Web 임베드 듀얼 픽셀 매칭. 같은 CoUI 컴포넌트의 Jaspr Web 렌더링과 Flutter W
web-a11y	Jaspr 웹 접근성 구현 가이드. Dart 웹에서 ARIA, 키보드 내비게이션, WCAG 준수를 구현할 때 사용합니다.

Commands#

이름	설명
/jaspr-web audit — 웹사이트 건강검진	Jaspr 사이트를 순회하며 CoUI Web 셀렉터 현황을 조사하고, 화면별 접근성(a11y) + 콘솔 에러 리포트를 캡처합니다.
/jaspr-web match — 웹·플러터 화면 "다른 그림 찾기"	cocode live-preview 의 카드마다 웹 화면과 Flutter Web 화면을 픽셀 비교해 A/B/diff 이미지, 차이 원인 분류(글씨·색·배치·잡음·timeout),
/jaspr-web regression — 화면 틀어짐 자동 검사	화면별로 스크린샷을 기준 화면(baseline)과 비교합니다. 배포 시 Jaspr/CoUI 시각적 회귀를 잡아냅니다.
/jaspr-web widgetbook-web — 웹 컴포넌트 카탈로그 자동 점검	Flutter Web 디버그 모드로 띄운 로컬 CoUI Widgetbook 을 한 칸씩 돌며 조작 전후 화면을 캡처하고 점검 목록·요약 보고서를 폴더로 남깁니다 (Playwrigh
jaspr-web	Jaspr Web 자동화: DOM 점검, 접근성, 시각적 회귀, Web↔Flutter 듀얼 live-preview 매칭.

관련 플러그인#

플러그인	설명
cc-bricks	cob(co-bricks) 기반 브릭 생성 가이드. kobic Clean Architecture feature 모듈 11종 + 그린필드 프로젝트 초기 세팅(project-init
cc-compass	코코드 스킬 저장소 나침반 — 작업 유형(워크플로우/도구/규칙/레퍼런스)에 따라 알맞은 플러그인·커맨드·스킬로 안내
cc-dev	개발 사이클 자동화 (이슈 사이클, 버그 사이클, 세션, ZenHub, Agent Teams)
cc-flutter	Flutter 개발 핵심 (UI 패턴, Feature 생성, BLoC, 테스트)
cc-marionette	Marionette MCP 래퍼 — CoUI 컴포넌트에 맞춘 위젯 트리 단위 Flutter 자동화 (Widgetbook 회귀 테스트, 커스텀 인터랙티브 위젯 감지, 인프로세스 탭/
cc-mcp-toolkit	mcp_flutter / mcp_toolkit 래퍼 (Arenukvern) — Dynamic Tools Registration 기반 앱 내부 MCP. 실행 중인 Flutter 앱이
cc-pixel-loop	Figma + Marionette + Dart MCP를 활용한 픽셀 퍼펙트 Flutter UI 에이전틱 루프 (Read → Write → Reload → Capture → Comp
cc-security	보안 통합 — API/앱 보안, 보안 감사, CI 시크릿, 결제/IAP 엔드포인트 보안, 도서 PDF DRM (구 cc-uiux-security 확장)
cc-serverpod	Serverpod 백엔드 — 모델/엔드포인트 생성, 마이그레이션 + 심화 패턴(아키텍처, 인증, 캐싱, DB, IAP, 테스트; 구 cc-backend 통합)
cc-spec	스펙 명확성 검증 (소크라테스식 인터뷰, Seed spec, 모호성 스코어링, contrarian/simplifier 에이전트, 3단계 평가)

설치#

claude plugins install coco-de/skills/plugins/cc-jaspr-web