rdc-setup
Install and set up @data-client/react or @data-client/vue in a project. Detects project type (NextJS, Expo, React Native, Vue, plain React) and protocol (REST, GraphQL, custom), then hands off to protocol-specific setup skills.
Best use case
rdc-setup is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Install and set up @data-client/react or @data-client/vue in a project. Detects project type (NextJS, Expo, React Native, Vue, plain React) and protocol (REST, GraphQL, custom), then hands off to protocol-specific setup skills.
Teams using rdc-setup should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/rdc-setup/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How rdc-setup Compares
| Feature / Agent | rdc-setup | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Install and set up @data-client/react or @data-client/vue in a project. Detects project type (NextJS, Expo, React Native, Vue, plain React) and protocol (REST, GraphQL, custom), then hands off to protocol-specific setup skills.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Setup Reactive Data Client
## Detection Steps
Before installing, detect the project type and protocol by checking these files:
### 1. Detect Package Manager
Check which lock file exists:
- `yarn.lock` → use `yarn add`
- `pnpm-lock.yaml` → use `pnpm add`
- `package-lock.json` or `bun.lockb` → use `npm install` or `bun add`
### 2. Detect Project Type
Check `package.json` dependencies:
| Check | Project Type |
|-------|--------------|
| `"next"` in dependencies | **NextJS** |
| `"expo"` in dependencies | **Expo** |
| `"vue"` in dependencies | **Vue** |
| `"react-native"` in dependencies (no expo) | **React Native** |
| `"react"` in dependencies | **Plain React** |
### 3. Detect Protocol Type
Scan the codebase to determine which data-fetching protocols are used:
#### REST Detection
Look for these patterns:
- `fetch()` calls with REST-style URLs (`/api/`, `/users/`, etc.)
- HTTP client libraries: `axios`, `ky`, `got`, `superagent` in `package.json`
- Files with REST patterns: `api.ts`, `client.ts`, `services/*.ts`
- URL patterns with path parameters: `/users/:id`, `/posts/:postId/comments`
- HTTP methods in code: `method: 'GET'`, `method: 'POST'`, `.get(`, `.post(`
#### GraphQL Detection
Look for these patterns:
- `@apollo/client`, `graphql-request`, `urql`, `graphql-tag` in `package.json`
- `.graphql` or `.gql` files in the project
- `gql\`` template literal tags
- GraphQL query patterns: `query {`, `mutation {`, `subscription {`
- GraphQL endpoint URLs: `/graphql`
#### Custom Protocol Detection
For async operations that don't match REST or GraphQL:
- Custom async functions returning Promises
- Third-party SDK clients (Firebase, Supabase, AWS SDK, etc.)
- IndexedDB or other local async storage
## Installation
### Core Packages
| Framework | Core Package |
|-----------|----------|
| React (all) | `@data-client/react` + dev: `@data-client/test` |
| Vue | `@data-client/vue` (testing included) |
### Install Command Examples
**React (NextJS, Expo, React Native, plain React):**
```bash
npm install @data-client/react && npm install -D @data-client/test
yarn add @data-client/react && yarn add -D @data-client/test
pnpm add @data-client/react && pnpm add -D @data-client/test
```
**Vue:**
```bash
npm install @data-client/vue
yarn add @data-client/vue
pnpm add @data-client/vue
```
## Provider Setup
After installing, add the provider at the top-level component.
### NextJS (App Router)
Edit `app/layout.tsx`:
```tsx
import { DataProvider } from '@data-client/react/nextjs';
export default function RootLayout({ children }) {
return (
<html>
<DataProvider>
<body>
{children}
</body>
</DataProvider>
</html>
);
}
```
**Important**: NextJS uses `@data-client/react/nextjs` import path.
### Expo
Edit `app/_layout.tsx`:
```tsx
import { Stack } from 'expo-router';
import { DataProvider } from '@data-client/react';
export default function RootLayout() {
return (
<DataProvider>
<Stack>
<Stack.Screen name="index" />
</Stack>
</DataProvider>
);
}
```
### React Native
Edit entry file (e.g., `index.tsx`):
```tsx
import { DataProvider } from '@data-client/react';
import { AppRegistry } from 'react-native';
const Root = () => (
<DataProvider>
<App />
</DataProvider>
);
AppRegistry.registerComponent('MyApp', () => Root);
```
### Plain React (Vite, CRA, etc.)
Edit entry file (e.g., `index.tsx`, `main.tsx`, or `src/index.tsx`):
```tsx
import { DataProvider } from '@data-client/react';
import ReactDOM from 'react-dom/client';
ReactDOM.createRoot(document.getElementById('root')!).render(
<DataProvider>
<App />
</DataProvider>,
);
```
### Vue
Edit `main.ts`:
```ts
import { createApp } from 'vue';
import { DataClientPlugin } from '@data-client/vue';
import App from './App.vue';
const app = createApp(App);
app.use(DataClientPlugin, {
// optional overrides
// managers: getDefaultManagers(),
// initialState,
// Controller,
// gcPolicy,
});
app.mount('#app');
```
## Protocol-Specific Setup
After provider setup, apply the appropriate skill based on detected protocol:
### REST APIs
Apply skill **"rdc-rest-setup"** which will:
1. Install `@data-client/rest`
2. Offer to create a custom `BaseEndpoint` class extending `RestEndpoint`
3. Configure common behaviors: urlPrefix, authentication, error handling
### GraphQL APIs
Apply skill **"rdc-graphql-setup"** which will:
1. Install `@data-client/graphql`
2. Create and configure `GQLEndpoint` instance
3. Set up authentication headers
### Custom Async Operations
Apply skill **"rdc-endpoint-setup"** which will:
1. Install `@data-client/endpoint`
2. Offer to wrap existing async functions with `new Endpoint()`
3. Configure schemas and caching options
### Multiple Protocols
If multiple protocols are detected, apply multiple setup skills. Each protocol package can be installed alongside others.
## Verification Checklist
After setup, verify:
- [ ] Core packages installed in `package.json`
- [ ] Provider/Plugin wraps the app at root level
- [ ] Correct import path used (especially `@data-client/react/nextjs` for NextJS)
- [ ] No duplicate providers in component tree
- [ ] Protocol-specific setup completed via appropriate skill
## Common Issues
### NextJS: Wrong Import Path
❌ Wrong:
```tsx
import { DataProvider } from '@data-client/react';
```
✅ Correct for NextJS:
```tsx
import { DataProvider } from '@data-client/react/nextjs';
```
### Provider Not at Root
The `DataProvider` must wrap all components that use data-client hooks. Place it at the topmost level possible.
## Next Steps
After core setup and protocol-specific setup:
1. Define data schemas using `Entity` - see skill "rdc-schema"
2. Use hooks like `useSuspense`, `useQuery`, `useController` - see skill "rdc-react"
3. Define REST resources - see skill "rdc-rest"
## References
For detailed API documentation, see the [references](references/) directory:
- [DataProvider](references/DataProvider.md) - Root provider component
- [installation](references/installation.md) - Installation guide
- [getDefaultManagers](references/getDefaultManagers.md) - Default managersRelated Skills
rdc-endpoint-setup
Set up @data-client/endpoint for custom async operations. Wraps existing async functions with Endpoint for use with Data Client hooks. Use after rdc-setup detects non-REST/GraphQL async patterns.
python-setup-dev-environment
Set up and run a reproducible Python dev environment with uv, ruff, mypy, and VSCode.
prisma-database-setup
Guides for configuring Prisma with different database providers (PostgreSQL, MySQL, SQLite, MongoDB, etc.). Use when setting up a new project, changing databases, or troubleshooting connection issues. Triggers on "configure postgres", "connect to mysql", "setup mongodb", "sqlite setup".
nestjs-setup-guide
NestJS 프로젝트 아키텍처, 기술 스택 선택, 모듈 구조에 대한 질문이나 계획 수립 시 자동으로 가이드 제공
ln-774-healthcheck-setup
Configures health check endpoints for Kubernetes readiness/liveness/startup
gainforest-oauth-setup
Implement ATProto OAuth authentication in a Next.js App Router application using gainforest-sdk-nextjs. Use when adding login, logout, session management, or authentication flows that integrate with GainForest, Hypercerts, or ATProto PDSes (climateai.org, gainforest.id).
flowglad-setup
Install and configure the Flowglad SDK for Next.js, Express, and React applications. Use this skill when adding billing to an app, setting up Flowglad for the first time, or configuring SDK providers and route handlers.
data-client-setup
Install and set up @data-client/react or @data-client/vue in a project. Detects project type (NextJS, Expo, React Native, Vue, plain React) and protocol (REST, GraphQL, custom), then hands off to protocol-specific setup skills.
conda-env-setup
This skill should be used when the user asks to "setup conda environment", "configure Python environment", "activate conda automatically", "set conda environment for workspace", or mentions conda environment activation for Claude Code. Provides automatic conda environment configuration for workspaces.
clerk-setup
Add Clerk authentication to any project by following the official quickstart guides.
ccw-maven-setup
Prepares Maven build environment for Claude Code Web by installing Java 25 and configuring Maven proxy. Run automatically before Maven operations in CCW.
bronze-layer-setup
End-to-end Bronze layer creation for testing and demos. Creates table DDLs, generates fake data with Faker, copies from existing sources, and configures Asset Bundle jobs. Covers Unity Catalog compliance, Change Data Feed, automatic liquid clustering, and governance metadata. Use when setting up Bronze layer tables, creating test/demo data, rapid prototyping Medallion Architecture, or bootstrapping a new Databricks project. For Faker-specific patterns (corruption rates, function signatures, provider examples), load the faker-data-generation skill.