최신 웹 애플리케이션 전반에서 헤드리스, 타입 세이프, 프레임워크 독립적 TanStack 라이브러리를 활용하기 위한 포괄적인 개발자 자산.
설치 및 다운로드
1. ClawHub CLI
레지스트리에서 스킬을 바로 설치하는 가장 빠른 방법입니다.
npx clawhub@latest install tanstack-libraries
2. 수동 설치
스킬 폴더를 다음 위치 중 하나로 복사하세요
~/.openclaw/skills/ <project>/skills/ 우선순위: 워크스페이스 > 로컬 > 번들
3. 프롬프트 설치
이 프롬프트를 OpenClaw에 복사하면 자동으로 설치됩니다.
Clawhub를 사용해서 tanstack-libraries 설치를 도와줘. Clawhub가 설치되어 있지 않다면 먼저 설치해 줘 (npm i -g clawhub).
다운로드를 원하시나요?
ZIP 아카이브 형태의 원본 스킬 파일을 받으세요.
TanStack Libraries 기술란 무엇인가요?
TanStack Libraries 기술은 TanStack의 고성능 Web 툴링 솔루션 모음을 사용하기 위한 상세한 청사진과 지식 베이스를 제공합니다. 이러한 라이브러리는 완전히 헤드리스이므로, 개발자는 상태 동기화, 라우팅, 데이터 가상화, 서버 사이드 렌더링과 같은 복잡한 작업을 처리하는 동시에 UI 마크업과 스타일링에 대한 완벽한 권한을 가집니다.
엄격한 프레임워크 독립적 원칙에 따라 설계된 각 라이브러리는 핵심 기능을 독립적인 JavaScript 엔진으로 분리한 다음, React, Vue, Solid, Svelte, Angular 등을 위한 프레임워크 어댑터를 제공합니다. 이러한 레이아웃은 Openclaw Skills를 채택하는 현대 엔지니어링 팀을 위해 벤더 종속성을 제거하는 경량화되고, 트리 쉐이킹이 가능한, 타입 세이프 시스템을 제공합니다.
TanStack Libraries 기술 활용 사례
- 제로 의존성 헤드리스 UI 아키텍처를 사용하여 확장 가능하고 고성능인 Web 애플리케이션 구축.
- 비동기 작업, 복잡한 중첩 서버 캐싱 및 낙관적 변경사항을 원활하게 관리.
- 최첨단 프레임워크 설정을 사용하여 풀스택 SSR, 스트리밍 및 타입 세이프 라우팅 구현.
- 전용 CLI 툴을 활용한 자동 발견 및 게시 메커니즘으로 에이전트 워크플로우 향상.
TanStack Libraries 기술 작동 원리
- 핵심 디커플링: 아키텍처는 운영 로직을 핵심 패키지(
@tanstack/query-core,@tanstack/table-core등) 내부에 격리합니다. - 어댑터 연결: 개발자는 경량화된 최적화 런타임 어댑터를 사용하여 기능을 특정 프레임워크에 매핑합니다.
- 타입 전파: TypeScript 추론은 데이터베이스 모델에서 UI 로더 및 필드까지 심층적인 타입 세이프를 제공합니다.
- 기능 발견: Openclaw Skills는 CLI 및 Intent 엔진과 같은 특수 유틸리티를 활용하여 로컬 툴을 조정하고 최신 구성을 등록합니다.
TanStack Libraries 기술 설정 가이드
프로젝트 생태계 내에서 표준 TanStack 라이브러리를 시작하고 구성하려면 패키지 관리자를 통해 스택에 필요한 특정 프레임워크 어댑터를 설치하십시오:
# 라이브러리 선택에 따라 핵심 프레임워크 어댑터 설치
pnpm add @tanstack/react-query
pnpm add @tanstack/react-router
pnpm add @tanstack/react-table
# CLI를 통해 최신 스캐폴딩 설정 초기화
pnpm add -D @tanstack/cli
TanStack Libraries 기술 데이터 스키마 및 분류 체계
이 기술은 다음과 같이 구조화된 4가지 주요 기술 도메인 전반의 정보를 관리합니다:
| 성숙도 도메인 | 포함된 라이브러리 | 운영 대상 |
|---|---|---|
| Stable(안정) | Query, Router, Table, Virtual, Config | 성숙한 프로덕션 준비 완료 Web 툴링 엔진 |
| RC & 신규 | Start, Form | 풀스택 렌더링 아키텍처 및 입력 유효성 검사 매트릭스 |
| Beta(베타) | DB, Pacer, Store | 반응형 클라이언트 스토리지 레이어 및 최적화된 속도 제한 메커니즘 |
| Alpha(알파) | AI, Hotkeys, Devtools, CLI, Intent | 에이전트 멀티 제공자 SDK, 단축키 추적 및 자동 발견 구조 |
TanStack Libraries 기술 고급 기능
- Intent Engine 최적화:
@tanstack/intent를 사용하여 기본 자동 발견 및 만료 감지 루틴과 함께 npm을 통해 에이전트 기술을 게시하십시오. - 풀스택 오케스트레이션: 엣지 친화적인 스트리밍과 서버 함수를 특징으로 하는 TanStack Start를 통해 통합된 풀스택 애플리케이션을 구동하십시오.
- 클라이언트 사이드 반응형 DB: 로컬 Collection 인덱스, 실시간 쿼리 추적 및 자동 낙관적 업데이트를 결합하여 복잡한 클라이언트 애플리케이션을 구축하십시오.
SKILL.md
로드 중
관련 Openclaw 스킬
스토리보드 프롬프트 생성기
표준 애니메이션 스토리보드 스크립트를 캐릭터, 장면 및 AI 비디오 생성기를 위한 고도로 최적화된 이중 언어 프롬프트로 변환하는 AI 기반 생성기입니다.
Hotcoin Research
실시간 BTC/ETH 선물, 토큰 발견 및 기관급 암호화폐 상장 연구 보고서를 위한 강력한 읽기 전용 API 통합입니다.
Dakaimen Investing Skill
초기 기대 파동에서 고탄성 대상을 식별하고 실적 변곡점을 추적하는 주기 기반 주식 선정 프레임워크입니다.
금융 산업 지능형 마케팅 어시스턴트
은행 및 증권 팀이 세분화, 다채널 캠페인 디자인, 타겟팅 콘텐츠 카피라이팅 및 전환 최적화를 관리할 수 있도록 맞춤 구축된 AI 기반 디지털 마케팅 어시스턴트입니다.
은행 재무 보고서 분석가
기업 재무제표를 파싱하고, 듀퐁 분석 및 Altman Z-Score 분석을 실행하며, 재무 위험 신호를 식별하고, 포괄적인 신용 및 투자 보고서를 생성하도록 설계된 고급 재무 분석 AI 스킬입니다.
은행 규제 보고 어시스턴트
NFRA, PBOC, SAFE, 1104 제출 및 Basel III 자본 적정성 보고를 자동화하고 검증하는 AI 기반 은행 컴플라이언스 어시스턴트입니다.
디지털 휴먼 운영 어시스턴트
자동화된 콘텐츠 기획, 스크립트 생성 및 성과 분석을 위해 설계된 AI 기반 디지털 휴먼 운영 어시스턴트입니다.
추천*
