react:components

react:components 스킬 개요

react:components가 하는 일

react:components 스킬은 Stitch 디자인을 Vite 기반 프런트엔드용 모듈형 React 코드로 변환합니다. 단순히 JSX를 한 번 덤프하는 데 그치지 않고, 스크린 캡처나 Stitch 메타데이터를 유지보수 가능한 컴포넌트 시스템으로 옮겨야 하는 에이전트를 위해 만들어졌습니다.

누구에게 적합한가

Stitch에서 프런트엔드를 새로 만들거나 업데이트하면서 구조, 토큰 일관성, 검증을 중요하게 본다면 이 react:components 스킬을 사용하세요. 프런트엔드 엔지니어, 디자인-투-코드 워크플로우, 그리고 시각적 화면을 컴포넌트로 반복적으로 매핑해야 하는 에이전트에게 특히 잘 맞습니다.

무엇이 다른가

일반적인 프롬프트와 비교하면 react:components에는 검색 단계, 로컬 파일 확인, 디자인 가져오기 폴백, AST 기반 검증이 포함됩니다. 핵심 위험이 “모델이 JSX를 쓸 수 있느냐”가 아니라 “출력이 디자인, 기존 파일, 프로젝트 제약 조건과 맞아떨어지느냐”일 때 이 차이가 중요합니다.

react:components 스킬 사용 방법

설치하고 활성화하기

디렉터리의 표준 스킬 명령으로 react:components 스킬을 설치한 뒤, Stitch 기반 디자인 작업에 호출하세요. 실무적으로는 react:components 설치 단계가 진입점이지만, 실제 가치는 화면 이름, 프로젝트 컨텍스트, 그리고 “React component system”이나 “Vite component set” 같은 출력 목표를 함께 주는 데서 나옵니다.

스킬에 맞는 입력 주기

가장 좋은 프롬프트는 화면 이름, Stitch 프로젝트명, 원하는 구현 형태를 함께 적습니다. 예를 들어, “내 Podcast Stitch 프로젝트의 Landing Page 화면을 Vite용 모듈형 React 컴포넌트로 변환하되, 레이아웃과 디자인 토큰은 유지해줘.”처럼 쓰면 됩니다. 이 방식은 “이걸 React로 만들어줘”보다 react:components 활용에 훨씬 적합한데, 페이지 경계, 소스 시스템, 출력 기대치를 분명히 알려주기 때문입니다.

먼저 읽어야 할 파일

먼저 SKILL.md에서 워크플로우를 확인하고, 코드 생성 전에 resources/stitch-api-reference.md, resources/architecture-checklist.md, resources/style-guide.json를 살펴보세요. 의도된 컴포넌트 스타일을 보려면 examples/gold-standard-card.tsx를 참고하고, 스킬이 어떤 내용을 거부하는지 이해하려면 scripts/validate.js를 확인하세요. 디자인 에셋을 수동으로 가져와야 한다면 scripts/fetch-stitch.sh가 지원되는 다운로드 경로를 보여줍니다.

출력 품질을 높이는 워크플로우

이 스킬은 먼저 디자인을 가져오고, 그다음 .stitch/designs/{page}.html과 .stitch/designs/{page}.png의 로컬 존재 여부를 확인한 뒤 코드 생성과 검증을 수행하는 흐름을 기대합니다. 로컬 디자인 파일이 이미 있다면, 재생성 전에 그대로 재사용할지 Stitch에서 새로 받아올지 결정하세요. 이 선택에 따라 react:components 가이드를 캐시된 디자인 상태에 맞출지, 최신 MCP 소스를 기준으로 맞출지가 달라집니다.

react:components 스킬 FAQ

react:components는 Stitch 프로젝트에서만 쓰는가?

네, 그게 가장 적합합니다. react:components 스킬은 임의의 스크린샷이나 자유형 목업이 아니라 Stitch MCP 입력에 맞춰 최적화되어 있습니다. 대략적인 제품 아이디어만 있다면 일반적인 React 프롬프트로도 충분할 수 있지만, Stitch 메타데이터가 있고 신뢰할 수 있는 매핑이 필요하다면 이 스킬이 더 잘 맞습니다.

상세한 프롬프트가 여전히 필요한가?

네. 이 스킬이 설정 작업을 줄여주기는 하지만, 화면 이름, 프로젝트명, 원하는 컴포넌트 범위는 여전히 명확해야 합니다. 입력이 강할수록 react:components 스킬이 단일 컴포넌트, 컴포넌트 트리, 재사용 가능한 모듈 세트 중 무엇을 만들어야 할지 추측하지 않아도 됩니다.

초보자에게도 적합한가?

초보자도 사용할 수는 있지만, props, 레이아웃, 디자인 토큰 같은 기본 프런트엔드 개념을 어느 정도 알아야 합니다. 처음 배우는 단계라도 이 스킬은 워크플로우를 내장하고 있어 도움이 되지만, 대상 UI를 설명하고 모듈형 React 출력을 받아들일 수 있을 때 더 좋은 결과를 얻습니다.

언제는 사용하지 말아야 하는가?

작업이 주로 콘텐츠 작성, 백엔드 작업, 또는 Stitch와 무관한 React 기능이라면 react:components를 쓰지 마세요. 디자인 메타데이터, 검증, 토큰 매핑을 따르지 않는 빠른 시각적 프로토타입이 목적일 때도 적합하지 않습니다.

react:components 스킬 개선 방법

이름만 말하지 말고 디자인 맥락을 함께 주기

품질이 가장 크게 좋아지는 지점은 어떤 화면을 변환할지, 무엇을 그대로 유지할지, 무엇을 재사용 가능한 형태로 바꿀 수 있는지를 명시하는 것입니다. 예를 들어, “데스크톱 Stitch 화면의 간격과 타이포그래피는 유지하되, 반복되는 카드는 재사용 가능한 컴포넌트로 분리해줘”라고 하면, 막연한 변환 요청보다 react:components 스킬이 구조를 훨씬 명확하게 잡을 수 있습니다.

코드 형태에 영향을 주는 제약 조건을 먼저 밝히기

프레임워크 경계, 라우팅 가정, 에셋 처리 방식, 프로젝트 규칙은 미리 적어두세요. TypeScript, Tailwind, Vite 호환 출력이 필요하다면 그 점도 분명히 말해야 합니다. 배경 이미지를 하드코딩된 CSS가 아니라 데이터로 처리해야 한다면 그 제약까지 프롬프트에 넣어야, 스킬이 react:components 설치 시의 가정과 검증 경로를 그대로 따를 수 있습니다.

자주 생기는 실패 패턴 살피기

가장 흔한 실수는 정확한 매핑에 필요한 소스 디자인 세부 정보를 주지 않고 UI 코드만 요구하는 것입니다. 또 하나는 스킬이 모듈형 출력을 전제로 설계되어 있는데도 단일 거대 파일을 요청하는 경우입니다. 세 번째는 검증 규칙을 무시하는 것으로, 이 경우 하드코딩된 색상, 누락된 인터페이스, 아키텍처 체크리스트를 통과하지 못하는 템플릿 플레이스홀더가 나올 수 있습니다.

더 좁힌 두 번째 패스로 반복 개선하기

첫 결과가 가깝지만 프로덕션 수준은 아니라면, 정확히 무엇이 문제인지 짚어서 개선하세요. 예를 들어 “헤더와 카드를 별도 컴포넌트로 분리해줘”, “정적 텍스트를 목업 데이터로 바꿔줘”, “색상을 style-guide.json과 맞춰줘”처럼 말입니다. 이런 식의 react:components 활용 피드백은 “더 나은 코드로 바꿔줘”보다 훨씬 효과적인데, 스킬이 이미 알고 있는 구조를 정확히 다듬도록 지시할 수 있기 때문입니다.