스킬 react-components
📦
react-components
콘텐츠 리비전 r1 높은 위험 ⚙️ 외부 명령어🌐 네트워크 접근📁 파일 시스템 접근
Stitch 디자인을 React 컴포넌트로 변환
Stitch 디자인을 유지보수 가능한 React 코드로 바꾸는 작업은 느리고 일관성이 떨어질 수 있습니다. 이 스킬은 검색, 컴포넌트 구조, 토큰 매핑, 검증 과정을 Claude, Codex 또는 Claude Code가 수행하도록 안내합니다.
지원: Claude Codex Code(CC)
설치 전에 중지하고 확인을 요청하세요.
계획을 검토하고 파일을 변경하기 전에 사용자의 명시적 동의를 받으세요.
내 에이전트로 설치
이 요청을 에이전트에 복사하세요. 공식 Skill 페이지와 매니페스트가 포함되어 있습니다.
에이전트 요청
Review the Skillstore skill "react-components" from https://skillstore.io/skills/google-labs-code-react-components.md and its manifest at https://skillstore.io/api/skills/google-labs-code-react-components/manifest. Verify the artifact. Stop and obtain explicit user consent before installing or changing files.에이전트는 계속해서 계획을 표시하고 보안 정책에서 요구하는 확인을 요청해야 합니다.
에이전트가 읽기 쉬운 리소스
AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.
테스트해 보기
"react-components" 사용 중입니다. Stitch 활동 피드 카드를 React로 변환하세요.
예상 결과:
- typed props가 있는 재사용 가능한 활동 카드 컴포넌트.
- Mock 콘텐츠가 별도 데이터 레이어로 이동됨.
- props 구조와 색상 사용에 대한 검증 메모.
"react-components" 사용 중입니다. Stitch 대시보드 화면에서 Vite 컴포넌트 시스템을 만드세요.
예상 결과:
- 책임별로 구성된 더 작은 대시보드 컴포넌트 세트.
- 색상, 타이포그래피, 간격에 대한 테마 매핑 가이드.
- 구조, 검증, 시각적 검토에 대한 체크리스트 요약.
"react-components" 사용 중입니다. 생성된 컴포넌트의 아키텍처 문제를 검토하세요.
예상 결과:
- 누락된 props, 하드코딩된 스타일, 과도하게 큰 파일의 간결한 목록.
- 프로젝트 구조를 보존하는 권장 수정 사항.
- 검토된 각 컴포넌트의 최종 검증 상태.
보안 감사
높은 위험v4 • 2026. 7. 5. 버전별 보고서 열기
Most static findings are false positives caused by Markdown code spans, JSX template literals, Apache license URLs, and ordinary relative imports. The confirmed risks are the intentional Bash and npm workflow, an unconstrained curl download helper, and validator file reads from CLI-supplied paths. No prompt injection attempt was found in the reviewed files.
10
스캔된 파일
374
분석된 줄 수
7
검토 항목
0
오탐 무시됨
확인된 보안 우려 사항 (2)
높음
Unvalidated External Download and File Write
SKILL.md instructs agents to run a Bash helper with htmlCode.downloadUrl, and scripts/fetch-stitch.sh passes URL and OUTPUT arguments directly to curl. The helper lacks scheme, domain, and output path restrictions.
The Bash workflow and curl command are explicit, and both URL and output path come from script arguments. The expected Stitch source is legitimate, but no allowlist or path guard is present.
중간
Broad Agent Tool Permissions
The skill declares Bash, Read, Write, and web_fetch access for a design conversion workflow. These broad permissions increase impact if design metadata or prompt content is hostile.
The allowed-tools block explicitly grants broad execution, file, and network capabilities. This is not malicious by itself, but it expands the trust boundary for a community skill.
기능 검토 항목 (7)
이 스킬에 대해 예상될 수 있는 실제 로컬 기능이므로 검토가 필요하지만, 확인된 악의적 동작으로는 집계되지 않습니다.
중간
Unix shell invocation
#!/bin/bash
This is an executable Bash helper that the skill instructs agents to run. In context it invokes curl with caller-provided URL and output arguments.
중간
Node.js fs operations
const code = fs.readFileSync(filePath, 'utf-8');
The validator reads a CLI-supplied file path without restricting it to project component files. This is legitimate validation, but unsafe arguments could read arbitrary local files.
중간
Synchronous file operations
const code = fs.readFileSync(filePath, 'utf-8');
The same readFileSync call performs local file reads from an unconstrained argument. The synchronous API is not itself malicious, but the path handling is a real filesystem exposure.
중간
Ruby/shell backtick execution
- Use the `Bash` tool to run: `bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.ht
The skill directs the agent to use Bash to run scripts/fetch-stitch.sh with a metadata URL. That is real shell and network execution, even though the command is specific.
중간
Ruby/shell backtick execution
1. **Environment setup**: If `node_modules` is missing, run `npm install` to enable the validation t
The skill asks the agent to run npm install when dependencies are missing. npm install fetches packages and may run lifecycle scripts in the target project.
중간
Ruby/shell backtick execution
* Run `npm run validate <file_path>` for each component.
The skill instructs agents to run npm run validate with a component path. This launches local Node code that reads the provided file path.
중간
Ruby/shell backtick execution
* Start the dev server with `npm run dev` to verify the live result.
The skill instructs agents to start the dev server with npm run dev. This executes project scripts and opens a local service as part of the workflow.
위험 요인
⚙️ 외부 명령어 (24)
examples/gold-standard-card.tsx:49 examples/gold-standard-card.tsx:50 examples/gold-standard-card.tsx:58-59 resources/component-template.tsx:31 scripts/fetch-stitch.sh:1 scripts/validate.js:41 scripts/validate.js:51 scripts/validate.js:52 SKILL.md:17 SKILL.md:18 SKILL.md:20 SKILL.md:22 SKILL.md:26 SKILL.md:27 SKILL.md:28 SKILL.md:31 SKILL.md:32 SKILL.md:36 SKILL.md:37 SKILL.md:38 SKILL.md:39 SKILL.md:41 SKILL.md:42 SKILL.md:43
🌐 네트워크 접근 (4)
감사자: codex 감사 이력 보기 →
이 보고서 공유 및 인용
버전이 지정된 평가 보고서, 중립 배지, 임베드 카드 및 인용을 공유하세요. Skillstore는 근거를 보고하지만 이 Skill의 안전 여부를 판단하지 않습니다.
보고서 링크 복사
https://skillstore.io/skills/google-labs-code-react-components/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown 배지
[](https://skillstore.io/skills/google-labs-code-react-components?utm_source=security_passport_badge)HTML 배지
<a href="https://skillstore.io/skills/google-labs-code-react-components?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/google-labs-code-react-components/security.svg" alt="Skillstore security assessment" loading="lazy"></a>임베드 카드
<iframe src="https://skillstore.io/embed/skills/google-labs-code-react-components.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>학술 인용 (APA · BibTeX · CFF)
APA 인용
google-labs-code. (2026). react-components security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/google-labs-code-react-components/audits/4BibTeX 인용
@techreport{google-labs-code-google-labs-code-react-components-2026,
author = {google-labs-code},
title = {react-components security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/google-labs-code-react-components/audits/4},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "react-components security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "google-labs-code"
date-released: "2026-07-05"
url: "https://skillstore.io/skills/google-labs-code-react-components/audits/4"
identifiers:
- type: other
value: "skillstore:google-labs-code-react-components:audit:4"
description: "Skillstore immutable audit report identifier"
Skillstore 점수
이 점수의 이유 증거 신뢰도: 중간 59
아키텍처
85
유지보수성
87
콘텐츠
70
커뮤니티
83
사양 준수
만들 수 있는 것
디자인 화면 변환
Stitch 화면을 매핑된 Tailwind 토큰과 검증 단계가 포함된 모듈식 React 컴포넌트로 변환합니다.
UI 출력 표준화
생성된 인터페이스 작업 전반에 일관된 컴포넌트 구조, 데이터 분리, 테마 사용을 적용합니다.
제품 흐름 프로토타입 제작
팀이 레이아웃과 상호작용을 더 빨리 검토할 수 있도록 디자인에서 Vite 기반 컴포넌트 스캐폴드를 만듭니다.
이 프롬프트를 사용해 보세요
단일 화면 변환
react-components 스킬을 사용하여 [screen]이라는 내 Stitch 화면을 모듈식 React 컴포넌트로 변환하세요. 생성 후 각 컴포넌트를 검증하세요.
프로젝트 토큰 적용
[screen]을 React 컴포넌트로 변환하고 색상, 간격, 글꼴을 내 프로젝트 Tailwind 테마에 매핑하세요. 하드코딩된 hex 값은 피하세요.
컴포넌트 시스템 구축
[flow]를 컴포넌트 시스템으로 변환하세요. 검증을 실행하기 전에 mock data, hooks, 재사용 가능한 컴포넌트, app wiring을 분리하세요.
생성된 UI 개선
아키텍처 체크리스트에 따라 생성된 React 컴포넌트를 감사하세요. 구조, props typing, 테마 매핑, 검증 실패를 수정하세요.
모범 사례
- 파일을 생성하기 전에 Stitch 화면, viewport, 프로젝트 테마를 확인하세요.
- 워크플로를 실행하도록 허용하기 전에 모든 네트워크 fetch와 명령을 검토하세요.
- AST 검사는 레이아웃 충실도를 확인할 수 없으므로 검증 후 시각적 검사를 실행하세요.
피하기
- 신뢰할 수 없는 디자인 URL을 검토 없이 Bash 명령에 붙여넣지 마세요.
- 크게 생성된 화면을 단일 React 파일로 유지하지 마세요.
- 검증 성공을 시각적 정확성의 증거로 간주하지 마세요.
자주 묻는 질문
이 스킬은 무엇을 하나요?
Stitch 화면을 Tailwind 토큰 가이드가 포함된 모듈식 React 및 Vite 컴포넌트로 변환하는 데 도움을 줍니다.
Stitch MCP가 필요한가요?
예. 워크플로는 화면 HTML 및 스크린샷 다운로드 URL을 포함한 Stitch MCP 메타데이터를 필요로 합니다.
명령을 실행하나요?
예. Bash, npm install, npm validation, 로컬 개발 서버 명령을 실행할 수 있습니다.
어떤 검증이 포함되어 있나요?
validator는 SWC로 TypeScript를 파싱하고 props 인터페이스와 하드코딩된 hex 색상을 확인합니다.
완전한 앱을 만들 수 있나요?
생성된 컴포넌트 구조와 app wiring에 중점을 둡니다. 제품 로직과 최종 UX 검토는 별도 작업으로 남습니다.
잠긴 환경에서도 안전한가요?
네트워크 fetch, 파일 시스템 쓰기, 로컬 명령 실행을 사용하므로 추가 승인이 필요할 수 있습니다.
개발자 세부 정보
작성자
google-labs-code라이선스
MIT
Skillstore 리비전
r1
버전 안내
작성자가 버전을 선언하지 않았습니다.
참조
30c73eac2afe762f6aa9c4553158769369d47351
유지보수 최신성
2026. 7. 23.
사용량
10 다운로드 · 180 조회