should-i-render

should-i-render는 측정되고 선별된 스냅샷에서 React 컴포넌트를 선택하기 위한 읽기 전용 MCP 서버입니다. 소스 덤프를 반환하는 대신 간결한 판정과 하네스 사실로 컴포넌트 적합성 질문에 답합니다.

번들된 스냅샷에는 현재 게시된 should-i-render 인덱스가 포함되어 있습니다. stdio로 실행되며 API 키, 데이터베이스, 네트워크 액세스가 필요 없고 모든 텍스트 응답을 약 500 토큰으로 제한합니다.

vibecodng.com에서 호스팅되는 무료 베타는 라이브 인덱스를 읽고 API 키당 UTC 하루에 100회의 도구 호출을 포함합니다. 브라우저에서 키를 만든 다음 HTTP를 지원하는 MCP 클라이언트를 https://vibecodng.com/mcp에 연결하세요. 할당량 없이 비공개, 오프라인, 버전 관리되는 스냅샷을 원한다면 이 npm 패키지를 사용하세요.

로컬 사용

{
  "mcpServers": {
    "should-i-render": {
      "command": "node",
      "args": ["/path/to/should-i-render/server.js"]
    }
  }
}

Node 20 이상이 필요합니다. npm test를 실행하여 번들된 스냅샷, 도구 메타데이터, 구조화된 응답, 응답 제한을 확인하세요.

npm을 사용하면 체크아웃이 필요 없습니다:

{
  "mcpServers": {
    "should-i-render": {
      "command": "npx",
      "args": ["-y", "should-i-render@0.1.0"]
    }
  }
}

호스팅 서비스는 이후 더 최신 데이터, 더 높은 할당량, 팀 워크플로를 위한 유료 요금제를 추가할 수 있습니다. 게시된 오프라인 패키지는 아래 라이선스에 따라 계속 사용할 수 있습니다.

도구

• find_component({task, pattern?, style?, palette?})는 컴포넌트 설명, 패턴, 스타일, 측정 결과를 바탕으로 최대 3개의 검증된 렌더링 적합 항목을 순위로 매깁니다. 실패 경고는 권장 사항에서 제외됩니다. 팔레트 slug를 전달하면 해당 CSS 변수가 추가됩니다.

• palette_pick({mood?})는 1~3개의 선별된 접근 가능한 팔레트를 hex 역할 및 복사 가능한 CSS 변수 블록과 함께 반환합니다.

• check_component({name})는 전체 판정, 건너뛰기 조건, 측정 스트립을 반환합니다.

• alternatives({name})는 동일 패턴의 후보들을 순위로 매깁니다.

• install_plan({name})는 의존성, 베어 하네스 격차, 공급자 요구 사항, 설정 노트, 라이선스, 작성자 크레딧, 측정된 갤러리 페이지, 업스트림 소스, 그리고 소스가 지원하는 경우 정확한 shadcn 명령을 반환합니다.

• skip_list({pattern, style?})는 명시적인 실패 경고와 측정 결과가 가장 나쁜 항목을 먼저 배치합니다.

모든 도구에는 제목, 읽기 전용 어노테이션, 출력 스키마, 제한된 텍스트 응답과 함께 구조화된 콘텐츠가 포함됩니다.

팔레트

이 패키지에는 24개의 독창적인 4색 팔레트가 번들로 포함되어 있습니다. 각 팔레트는 accent, surface, text, muted를 정의하며, 모든 텍스트-표면 쌍은 WCAG AA 대비 4.5:1 이상으로 검증됩니다. palette_pick을 팔레트 slug 또는 dark, light, pastel, neon, retro, earth, warm, cold, mono 같은 무드와 함께 사용하세요.

:root {
  --bw-accent: #E85D4A;
  --bw-surface: #FFF7F1;
  --bw-text: #34231F;
  --bw-muted: #775F57;
}

자동 테마 적용은 자사 컴포넌트에 적용되며, 타사 항목은 수동 매핑이 필요합니다.

측정 스트립의 의미

RENDERS는 준비된 하네스 마운트 결과입니다. A11Y는 기록된 axe 위반의 합계입니다. KB는 하네스 기준선 대비 증분 gzip 번들 크기입니다. BARE는 준비된 shadcn 스타일 헬퍼 없이 수행하는 두 번째 빌드 및 마운트 패스입니다. PROVIDER는 공급자 누락 마운트 오류가 측정되었음을 의미합니다.

스타일 축

패턴과 스타일은 서로 다른 질문에 답합니다. 패턴은 컴포넌트가 수행하는 작업, 예를 들어 버튼, 캘린더, 캐러셀, 텍스트 리빌 등을 의미합니다. 스타일은 컴포넌트가 속한 시각적 세계, 예를 들어 미니멀 플랫, 브루탈리즘, 스파셜, 벤토, 다크 퓨처리스틱 등을 의미합니다. 상호작용이 고정되어 있지만 제품 언어가 고정되지 않은 경우 둘 모두로 필터링하는 것이 유용합니다.

스타일은 패키지 기능이 아니라 편집상의 분류입니다. 동일한 패턴과 스타일을 가진 두 항목도 의존성, 접근성 검사 결과, 번들 비용, 베어 호환성, 공급자 요구 사항에서 크게 다를 수 있습니다.

데이터

data/components.json은 게시된 컴포넌트 레코드의 특정 시점 내보내기입니다. 설명, 측정 결과, 소스 및 작성자 크레딧, 라이선스 메타데이터, 패턴과 스타일, 상대 미리보기 경로가 포함됩니다. 미리보기 이미지나 비디오 바이트는 포함하지 않습니다. data/palettes.json은 번들된 팔레트 카탈로그입니다.

SHOULD_I_RENDER_DATA=/path/to/components.json을 설정하여 동일한 구조의 다른 스냅샷을 테스트하세요.

제한 사항

• 현재 하네스는 React 컴포넌트만 측정합니다.

• 커버리지는 철저한 레지스트리 크롤링이 아니라 선별된 것입니다.

• 스냅샷은 특정 시점의 것입니다. 업스트림 컴포넌트 API와 의존성은 내보내기 후 변경될 수 있습니다.

• 하네스 결과는 통제된 측정값이지 프로덕션 QA가 아닙니다. 앱에서 브라우저, 디자인 시스템, 접근성, 보안, 사용자 테스트를 대체하지 않습니다.

• 데모는 각 컴포넌트의 소스 API에 맞춰 작성되며 스크린샷을 생성합니다. 데모가 의도한 상태를 다룰 수는 있지만 모든 prop, 상호작용, 서버 동작 또는 데이터 로딩 경로를 다루는 것은 아닙니다.

• 접근성 수치가 깨끗하다는 것은 이 하네스에서 기록된 데모에 axe 발견 사항이 없었음을 의미합니다. 이는 접근성 인증이 아닙니다.

• 판정과 스타일 라벨은 기록된 측정값과 소스 API에 근거한 편집상의 판단입니다.

라이선스

서버 코드는 MIT 라이선스입니다. 컴파일된 인덱스 메타데이터는 mrkeyoor.com에 저작자 표시를 요구하는 CC BY 4.0입니다. 개별 컴포넌트 소스 프로젝트는 각자의 라이선스와 작성자 크레딧을 유지합니다.

기여

• 잘못된 판정이나 오래된 컴포넌트 레코드를 찾으셨나요? 이슈 열기.

• MCP 서버와 순위 로직에 대한 코드 변경은 환영합니다. 응답을 제한 범위 안에서 유지하고 풀 리퀘스트를 열기 전에 npm test를 실행하세요.

• data/components.json은 측정된 vibecodng 인덱스에서 생성되므로 데이터 수정은 스냅샷을 직접 편집하기보다 이슈로 시작해야 합니다.