업계 표준 디렉토리 구조, 컴포넌트 설계 및 상태 관리를 강제하는 React 및 TypeScript 프로젝트를 위한 포괄적인 엔지니어링 프레임워크입니다.
설치 및 다운로드
1. ClawHub CLI
레지스트리에서 스킬을 바로 설치하는 가장 빠른 방법입니다.
npx clawhub@latest install react-project-standard
2. 수동 설치
스킬 폴더를 다음 위치 중 하나로 복사하세요
~/.openclaw/skills/ <project>/skills/ 우선순위: 워크스페이스 > 로컬 > 번들
3. 프롬프트 설치
이 프롬프트를 OpenClaw에 복사하면 자동으로 설치됩니다.
Clawhub를 사용해서 react-project-standard 설치를 도와줘. Clawhub가 설치되어 있지 않다면 먼저 설치해 줘 (npm i -g clawhub).
다운로드를 원하시나요?
ZIP 아카이브 형태의 원본 스킬 파일을 받으세요.
React 프로젝트 표준란 무엇인가요?
React 프로젝트 표준은 고성능 React 및 TypeScript 애플리케이션을 위해 설계된 견고한 청사진입니다. 이 스킬은 개발자에게 기본 UI 컴포넌트에서 복잡한 비즈니스 로직 모듈에 이르기까지 코드베이스를 구성하기 위한 구조화된 방법론을 제공합니다. Openclaw Skills를 활용함으로써 프로젝트가 성장함에 따라 유지 관리 및 확장 가능성을 보장할 수 있습니다.
핵심 철학은 비즈니스 로직이 특정 도메인 내에 캡슐화되는 기능 중심 아키텍처에 집중되어 있습니다. 이 접근 방식은 엄격한 TypeScript 타이핑 및 표준화된 hook 패턴과 결합되어 기술 부채를 줄이고 전체 Openclaw Skills 에코시스템에서 개발자 협업을 향상시킵니다.
React 프로젝트 표준 활용 사례
- 검증된 디렉토리 계층 구조로 새로운 React + TypeScript 저장소를 초기화합니다.
- 함수형 프로그래밍 및 커스텀 hook 패턴을 따르도록 기존 컴포넌트를 리팩토링합니다.
- 통합 인터셉터 및 에러 처리를 갖춘 표준화된 API 서비스 레이어를 구현합니다.
- Openclaw Skills 환경 내에서 일관된 테스트 전략 및 성능 최적화 기술을 적용합니다.
React 프로젝트 표준 작동 원리
- AI 에이전트가 React 및 TypeScript 컨텍스트를 식별하거나 컴포넌트 생성 요청에 의해 트리거됩니다.
- 프로젝트를 표준 src 디렉토리로 매핑하여 기능, 레이아웃 및 글로벌 서비스를 분리합니다.
- props 및 이벤트 핸들러를 위해 TypeScript 인터페이스를 사용하는 함수형 컴포넌트를 생성합니다.
- 사이드 이펙트와 비즈니스 로직을 사용하기 쉬운 상태 객체를 반환하는 커스텀 hooks로 캡슐화합니다.
- 최적의 번들 분할 및 성능을 보장하기 위해 지연 로딩 및 Suspense가 포함된 라우팅을 구성합니다.
React 프로젝트 표준 설정 가이드
Openclaw Skills를 통해 이 표준을 개발 환경에 통합하려면 다음 단계를 따르세요.
# 프로젝트 루트로 이동
cd my-react-app
# Openclaw Skills 표준에 따라 프로젝트 구조 초기화
npx openclaw-init --skill react-project-standard
tsconfig.json이 더 깔끔한 임포트를 위해 @/components와 같은 경로 별칭을 지원하도록 설정되어 있는지 확인하세요.
React 프로젝트 표준 데이터 스키마 및 분류 체계
이 스킬은 명확성을 보장하기 위해 엄격한 메타데이터 및 파일 분류를 사용하여 프로젝트 데이터를 구성합니다.
| Directory | Purpose | Metadata Handling |
|---|---|---|
| /src/features | 비즈니스 모듈 | 로컬 컴포넌트, hooks 및 API 정의 포함 |
| /src/components | 공유 UI | 비즈니스 로직 결합이 없는 일반 컴포넌트 |
| /src/services | API 레이어 | 중앙 집중식 요청/응답 인터셉터 및 엔드포인트 |
| /src/store | 상태 관리 | 공유 애플리케이션 상태를 위한 글로벌 스토어 |
| /src/types | 타입 정의 | 공유 TypeScript 인터페이스 및 전역 선언 |
React 프로젝트 표준 고급 기능
- 중앙 집중식 index 내보내기를 통해 깊은 경로 임포트 혼란을 방지하는 기능 기반 모듈화.
- 로컬 장애 시 애플리케이션 전체의 충돌을 방지하기 위한 통합 Error Boundary 패턴.
- CSS 변수 및 token 기반 디자인 시스템을 사용한 동적 테마 전환 지원.
- Openclaw Skills 프레임워크 내 자동화된 라우트 가드 및 권한 기반 렌더링.
SKILL.md
로드 중
관련 Openclaw 스킬
Selfie Art Generator
Neta API를 통해 텍스트 설명을 고품질 셀카 아트, 시네마틱 초상화 및 스타일화된 일러스트레이션으로 변환하는 강력한 AI 이미지 생성 도구입니다.
Watermark Camera Verifier
사진 변조를 감지하고 원본 캡처 메타데이터를 추출하는 Today's Watermark Camera의 공식 검증 기술입니다.
쇼핑 가격 비교 (안전 모드)
공개 검색 데이터를 사용하여 주요 이커머스 플랫폼의 제품 가격을 집계하고 상세 비교 보고서를 생성하는 프라이버시 우선 쇼핑 도우미입니다.
항공권 요구사항 검토 Agent
프런트엔드, 백엔드 및 운영 항공권 제품 요구사항 문서에 대해 구조화된 감사 및 점수 산정을 수행하도록 설계된 전문가 AI Agent입니다.
Skill Preflight
벡터 유사도를 사용하여 관련 스킬과 프로토콜을 에이전트 컨텍스트에 자동으로 주입하는 로컬 우선 플러그인입니다.
추천*
