cc-jaspr-web
Jaspr Web 자동화 + Flutter Web 임베드 검증. CoUI Web 페이지를 점검하고, Web↔Flutter 듀얼 라이브 프리뷰를 구동하며, VM Service를 통해 로컬 Flutter Web 디버그 빌드에 연결합니다.
Jaspr Web 자동화 + Flutter Web 임베드 검증. CoUI Web 페이지를 점검하고, Web↔Flutter 듀얼 라이브 프리뷰를 구동하며, VM Service를 통해 로컬 Flutter 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's Flutter capture test 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 | Dart와 Jaspr로 웹 화면을 구현할 때 사용합니다. 컴포넌트 구성, 경로 연결과 서버 렌더링 패턴을 안내합니다. |
| jaspr-state-management | Jaspr 화면에 상태 관리를 연결하거나 Flutter와 로직을 공유할 때 사용합니다. bloc_signals_jaspr로 상태 변화가 웹 컴포넌트에 반영되도록 구성합니다. |
| jaspr-web-guide | Jaspr·CoUI Web 사이트를 브라우저에서 검증할 때 사용합니다. ego-browser를 기본으로 화면 조작, 접근성, 스크린샷과 변경 전후의 시각적 차이를 확인합니다. |
| live-preview-match | 같은 CoUI 부품의 Jaspr 웹 화면과 내장된 Flutter Web 화면을 비교할 때 사용합니다. 두 렌더링 결과를 픽셀 단위로 대조해 플랫폼 간 모양 차이를 찾습니다. |
| web-a11y | Jaspr 웹 화면의 접근성을 구현하거나 점검할 때 사용합니다. 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-coui | CoUI 컴포넌트 라이브러리 (크로스플랫폼 컴포넌트 128종) + 조합/확장 가이드 |
| 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 | Jev 판정 게이트 — Seed spec 을 쓰고 TypeSafe Jev(판정 전용 모델)로 모호성·3관점 패널·드리프트를 보정 확률로 판정해 잠금 |
설치#
curl -fsSL https://skills.cocode.im/install.sh | bash -s -- --plugin cc-jaspr-web