cross-check — for Claude Code cross-check, composition, community, for Claude Code, ide skills, pnpm run build:specs, pnpm run codex:typecheck, git diff --name-only, *.spec.ts, ElementSprite.tsx

v1.0.0
GitHub

关于此技能

适用场景： Ideal for AI agents that need codex harness integration. 本地化技能摘要： ## Codex Harness Integration rendering parity 관련 이슈가 있으면 이 스킬을 우선 사용한다. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

功能特性

Codex Harness Integration
rendering parity 관련 이슈가 있으면 이 스킬을 우선 사용한다.
CRITICAL 이슈 수정 후 pnpm run build:specs와 pnpm run codex:typecheck
Cross-Check: 렌더링 경로 정합성 검증
변경된 컴포넌트의 CSS(Preview), WebGL(Skia Canvas), PixiJS(이벤트) 렌더링 경로가 일관되게 동작하는지 검증합니다.

# 核心主题

for Claude Code pnpm run build:specs pnpm run codex:typecheck git diff --name-only *.spec.ts ElementSprite.tsx
rblood79 rblood79
[0]
[0]
更新于: 5/1/2026

Killer-Skills Review

Decision support comes first. Repository text comes second.

Reference-Only Page Review Score: 8/11

This page remains useful for teams, but Killer-Skills treats it as reference material instead of a primary organic landing page.

Original recommendation layer Concrete use-case guidance Explicit limitations and caution
Review Score
8/11
Quality Score
30
Canonical Locale
ko
Detected Body Locale
ko

适用场景： Ideal for AI agents that need codex harness integration. 本地化技能摘要： ## Codex Harness Integration rendering parity 관련 이슈가 있으면 이 스킬을 우선 사용한다. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

核心价值

推荐说明： cross-check helps agents codex harness integration. Codex Harness Integration rendering parity 관련 이슈가 있으면 이 스킬을 우선 사용한다. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

适用 Agent 类型

适用场景： Ideal for AI agents that need codex harness integration.

↓ 赋予的主要能力 · cross-check

适用任务： Applying Codex Harness Integration
适用任务： Applying rendering parity 관련 이슈가 있으면 이 스킬을 우선 사용한다
适用任务： Applying CRITICAL 이슈 수정 후 pnpm run build:specs와 pnpm run codex:typecheck

! 使用限制与门槛

  • 限制说明： git diff --name-only로 변경된 파일에서 영향받는 컴포넌트를 식별합니다.
  • 限制说明： Phase 1: 변경 대상 식별 git diff --name-only로 변경된 파일에서 영향받는 컴포넌트를 식별합니다
  • 限制说明： Requires repository-specific context from the skill documentation

Why this page is reference-only

  • - Current locale does not satisfy the locale-governance contract.
  • - The underlying skill quality score is below the review floor.

Source Boundary

The section below is imported from the upstream repository and should be treated as secondary evidence. Use the Killer-Skills review above as the primary layer for fit, risk, and installation decisions.

评审后的下一步

先决定动作，再继续看上游仓库材料

Killer-Skills 的主价值不应该停在“帮你打开仓库说明”，而是先帮你判断这项技能是否值得安装、是否应该回到可信集合复核，以及是否已经进入工作流落地阶段。

安装路径

先进入安装与验证

如果这项技能值得继续，下一步应该先确认安装命令、CLI 写入路径与环境验证。
可信复核

回到可信合集再做一次复核

如果你还在比较不同技能或供应方，先回到可信合集做二次判断，而不是继续放大仓库噪音。
工作流

如果要进团队流转，转到工作流集合

当你的目标已经不是单个技能，而是团队协作、审批和可重复执行，就应该转到工作流合集继续比较。
实验室 Demo

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

常见问题与安装步骤

以下问题与步骤与页面结构化数据保持一致，便于搜索引擎理解页面内容。

? FAQ

cross-check 是什么？

适用场景： Ideal for AI agents that need codex harness integration. 本地化技能摘要： ## Codex Harness Integration rendering parity 관련 이슈가 있으면 이 스킬을 우선 사용한다. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

如何安装 cross-check？

运行命令：npx killer-skills add rblood79/composition。支持 Cursor、Windsurf、VS Code、Claude Code 等 19+ IDE/Agent。

cross-check 适用于哪些场景？

典型场景包括：适用任务： Applying Codex Harness Integration、适用任务： Applying rendering parity 관련 이슈가 있으면 이 스킬을 우선 사용한다、适用任务： Applying CRITICAL 이슈 수정 후 pnpm run build:specs와 pnpm run codex:typecheck。

cross-check 支持哪些 IDE 或 Agent？

该技能兼容 Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer。可使用 Killer-Skills CLI 一条命令通用安装。

cross-check 有哪些限制？

限制说明： git diff --name-only로 변경된 파일에서 영향받는 컴포넌트를 식별합니다.；限制说明： Phase 1: 변경 대상 식별 git diff --name-only로 변경된 파일에서 영향받는 컴포넌트를 식별합니다；限制说明： Requires repository-specific context from the skill documentation。

↓ 安装步骤

  1. 1. 打开终端

    在你的项目目录中打开终端或命令行。

  2. 2. 执行安装命令

    运行：npx killer-skills add rblood79/composition。CLI 会自动识别 IDE 或 AI Agent 并完成配置。

  3. 3. 开始使用技能

    cross-check 已启用，可立即在当前项目中调用。

! 参考页模式

此页面仍可作为安装与查阅参考，但 Killer-Skills 不再把它视为主要可索引落地页。请优先阅读上方评审结论，再决定是否继续查看上游仓库说明。

Upstream Repository Material

The section below is imported from the upstream repository and should be treated as secondary evidence. Use the Killer-Skills review above as the primary layer for fit, risk, and installation decisions.

Upstream Source

cross-check

## Codex Harness Integration rendering parity 관련 이슈가 있으면 이 스킬을 우선 사용한다. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows. Codex

SKILL.md
Readonly
Upstream Repository Material
The section below is imported from the upstream repository and should be treated as secondary evidence. Use the Killer-Skills review above as the primary layer for fit, risk, and installation decisions.
Supporting Evidence

Codex Harness Integration

  • rendering parity 관련 이슈가 있으면 이 스킬을 우선 사용한다.
  • CRITICAL 이슈 수정 후 pnpm run build:specs와 pnpm run codex:typecheck 필요 여부를 확인한다.

Cross-Check: 렌더링 경로 정합성 검증

변경된 컴포넌트의 CSS(Preview), WebGL(Skia Canvas), PixiJS(이벤트) 렌더링 경로가 일관되게 동작하는지 검증합니다.

Phase 1: 변경 대상 식별

git diff --name-only로 변경된 파일에서 영향받는 컴포넌트를 식별합니다.

변경 파일 → 컴포넌트 매핑:

  • *.spec.ts → 해당 컴포넌트
  • *.css → 해당 컴포넌트
  • ElementSprite.tsx → TAG_SPEC_MAP에 등록된 모든 변경 컴포넌트
  • fullTreeLayout.ts / utils.ts → 영향받는 모든 컴포넌트
  • implicitStyles.ts → 해당 컨테이너 컴포넌트
  • *Renderers.tsx → 해당 Preview 렌더러 컴포넌트

Phase 2: 컴포넌트별 5-레이어 교차 검증

각 컴포넌트에 대해 아래 테이블을 작성합니다:

레이어파일검증 항목상태
Specpackages/specs/src/components/{Name}.spec.tsvariants, sizes, render.shapes(), properties
Factoryapps/builder/src/builder/factories/definitions/*.ts기본 props, style, 자식 구조
CSS Rendererpackages/shared/src/components/styles/{Name}.cssdata-variant/data-size 선택자, 토큰
WebGL RendererElementSprite.tsx + specTextStyle.ts + utils.tsTAG_SPEC_MAP, TEXT_BEARING_SPECS, INLINE_BLOCK_TAGS
Preview Rendererpackages/shared/src/renderers/*.tsxvariant/size props 전달, data-* 속성

Phase 3: 정합성 검증 항목

각 컴포넌트에 대해 아래를 확인합니다:

3.1 Variant 정합성

  • Spec defaultVariant와 React 컴포넌트 기본값 일치
  • Spec variants 키와 CSS [data-variant="..."] 선택자 일치
  • Preview 렌더러가 variant prop을 컴포넌트에 전달

3.2 Size 정합성

  • Spec defaultSize와 React 컴포넌트 기본값 일치
  • Size casing 일관성 (sm/md/lg, S/M/L 혼용 금지)
  • Spec sizes의 fontSize/paddingX/paddingY/lineHeight/borderWidth가 CSS와 일치
  • Preview 렌더러가 size prop을 컴포넌트에 전달

3.3 WebGL 레이아웃 정합성

  • INLINE_BLOCK_TAGS 또는 BUTTON_LIKE_TAGS 등록 여부 (fit-content 필요 시)
  • TEXT_BEARING_SPECS 등록 여부 (텍스트 폭 측정 필요 시)
  • DEFAULT_SIZE_BY_TAG 등록 여부
  • calculateContentWidth의 isFormElement 경로 포함 여부
  • calculateContentHeight의 isButtonLike 경로 포함 여부

3.4 토큰 정합성

  • Spec TokenRef와 CSS 변수 매핑 일치 (css-tokens.md 참조)
  • 금지된 M3 토큰 사용 없음
  • --bg-inset / {color.layer-2} 필드 배경 통일 (해당 시)

3.5 상태 정합성

  • disabled 상태: opacity 0.38, pointerEvents: none (Spec ↔ CSS)
  • focusVisible: outline 2px solid var(--focus-ring) (CSS) / var(--accent) (Spec)

Phase 4: 결과 보고

검증 결과를 테이블로 보고합니다:

컴포넌트레이어이슈심각도수정 여부
MenuWebGLTEXT_BEARING_SPECS 미등록CRITICAL수정 완료

발견된 이슈는 즉시 수정합니다. 수정 후 pnpm run build:specs와 pnpm run codex:typecheck 또는 targeted test로 검증합니다.

Phase 5: 시각 파리티 검증 (선택 — dev 서버 실행 시)

개발 서버(localhost:5173)와 Storybook(localhost:6006) 중 실행 중인 것이 있으면, 사용 가능한 브라우저/컴퓨터 사용 도구로 Preview(CSS)와 Canvas(Skia) 렌더링을 시각적으로 비교합니다.

5.1 Preview(CSS) 스크린샷 캡처

  • 브라우저/컴퓨터 사용 도구 또는 Playwright MCP가 있으면 새 탭을 열고 http://localhost:5173 또는 http://localhost:6006 로 이동
  • 변경된 컴포넌트가 보이는 화면까지 진입 후 스크린샷을 캡처

5.2 Canvas(Skia) 스크린샷 캡처

동일 탭에서 Canvas 영역을 스크린샷으로 캡처합니다. Canvas와 Preview를 나란히 비교할 수 있는 뷰가 있으면 한 번에 캡처합니다.

5.3 시각 비교

두 스크린샷을 비교하여 아래 항목을 확인합니다:

  • 크기·여백 불일치 (padding, height, gap 차이)
  • 색상·폰트 불일치 (토큰 매핑 오류, dark mode 차이)
  • 정렬 차이 (flex/grid 배치 불일치)
  • 상태 렌더링 차이 (hover, disabled, focus 시각 차이)

불일치 발견 시 Phase 4 결과 테이블에 추가하고 즉시 수정합니다.

생략 조건

아래에 해당하면 Phase 5를 건너뜁니다:

  • 개발 서버 또는 Storybook이 실행 중이지 않음
  • 시각적 변화가 없는 수정 (로직·타입·스토어 변경만 포함)
  • CI 환경 (브라우저 없음)
  • 사용자가 명시적으로 생략을 요청한 경우

Evals

Positive (발동해야 하는 경우)

  • "Button spec 수정했는데 CSS도 맞는지 확인해줘" → ✅ 렌더링 경로 교차 검증
  • "이 컴포넌트 Canvas랑 Preview가 다르게 보여" → ✅ 불일치 감지 → 5-레이어 검증
  • "Spec 변경 후 정합성 체크해줘" → ✅ 직접 트리거
  • "렌더링 경로 확인해봐" → ✅ 직접 트리거

Negative (발동하면 안 되는 경우)

  • "TextField placeholder 텍스트만 변경" → ❌ 시각 렌더링 미변경
  • "ESLint 규칙 추가" → ❌ 렌더링 무관
  • "Store 로직만 수정했어" → ❌ 렌더링 경로 미관여 (시각적 변화 없으면 불필요)
  • "단위 테스트 작성해줘" → ❌ 테스트 작업 → tester 에이전트

相关技能

寻找 cross-check 的替代方案 (Alternative) 或可搭配使用的同类 community Skill？探索以下相关开源技能。

查看全部

openclaw-release-maintainer

Logo of openclaw
openclaw

本地化技能摘要： 🦞 # OpenClaw Release Maintainer Use this skill for release and publish-time workflow. It covers ai, assistant, crustacean workflows. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

★ 333.8k
⑂ 0
AI

widget-generator

Logo of f
f

本地化技能摘要： Generate customizable widget plugins for the prompts.chat feed system # Widget Generator Skill This skill guides creation of widget plugins for prompts.chat . It covers ai, artificial-intelligence, awesome-list workflows. This AI agent skill supports Claude Code, Cursor, and Windsurf

★ 149.6k
⑂ 0
AI

flags

Logo of vercel
vercel

本地化技能摘要： The React Framework # Feature Flags Use this skill when adding or changing framework feature flags in Next.js internals. It covers blog, browser, compiler workflows. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

★ 138.4k
⑂ 0
浏览器

pr-review

Logo of pytorch
pytorch

本地化技能摘要： Usage Modes No Argument If the user invokes /pr-review with no arguments, do not perform a review . It covers autograd, deep-learning, gpu workflows. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

★ 98.6k
⑂ 0
开发者工具