メニュー
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.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SOC 職業分類に基づく
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/diegosouzapw/awesome-omni-skill --skill rdc-setupコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
Token-efficient tracking for AI orchestration. CLI-first for status updates (~50 tokens), agent fallback for complex ops (~1KB). Use when: updating task status, querying blockers, creating progress files, validating phases.
AshAi extension guidelines for integrating AI capabilities with Ash Framework. Use when implementing vectorization/embeddings, exposing Ash actions as LLM tools, creating prompt-backed actions, or setting up MCP servers. Covers semantic search, LangChain integration, and structured outputs.
This skill should be used when solving hard questions, complex architectural problems, or debugging issues that benefit from GPT-5 Pro or GPT-5.1 thinking models with large file context. Use when standard Claude analysis needs deeper reasoning or extended context windows.
| name | rdc-setup |
| description | 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. |
| disable-model-invocation | true |
Before installing, detect the project type and protocol by checking these files:
Check which lock file exists:
yarn.lock → use yarn addpnpm-lock.yaml → use pnpm addpackage-lock.json or bun.lockb → use npm install or bun addCheck 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 |
Scan the codebase to determine which data-fetching protocols are used:
Look for these patterns:
fetch() calls with REST-style URLs (/api/, /users/, etc.)axios, ky, got, superagent in package.jsonapi.ts, client.ts, services/*.ts/users/:id, /posts/:postId/commentsmethod: 'GET', method: 'POST', .get(, .post(Look for these patterns:
@apollo/client, graphql-request, urql, graphql-tag in package.json.graphql or .gql files in the projectquery {, mutation {, subscription {/graphqlFor async operations that don't match REST or GraphQL:
| Framework | Core Package |
|---|---|
| React (all) | @data-client/react + dev: @data-client/test |
| Vue | @data-client/vue (testing included) |
React (NextJS, Expo, React Native, plain React):
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:
npm install @data-client/vue
yarn add @data-client/vue
pnpm add @data-client/vue
After installing, add the provider at the top-level component.
Edit app/layout.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.
Edit app/_layout.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>
);
}
Edit entry file (e.g., index.tsx):
import { DataProvider } from '@data-client/react';
import { AppRegistry } from 'react-native';
const Root = () => (
<DataProvider>
<App />
</DataProvider>
);
AppRegistry.registerComponent('MyApp', () => Root);
Edit entry file (e.g., index.tsx, main.tsx, or src/index.tsx):
import { DataProvider } from '@data-client/react';
import ReactDOM from 'react-dom/client';
ReactDOM.createRoot(document.getElementById('root')!).render(
<DataProvider>
<App />
</DataProvider>,
);
Edit main.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');
After provider setup, apply the appropriate skill based on detected protocol:
Apply skill "rdc-rest-setup" which will:
@data-client/restBaseEndpoint class extending RestEndpointApply skill "rdc-graphql-setup" which will:
@data-client/graphqlGQLEndpoint instanceApply skill "rdc-endpoint-setup" which will:
@data-client/endpointnew Endpoint()If multiple protocols are detected, apply multiple setup skills. Each protocol package can be installed alongside others.
After setup, verify:
package.json@data-client/react/nextjs for NextJS)❌ Wrong:
import { DataProvider } from '@data-client/react';
✅ Correct for NextJS:
import { DataProvider } from '@data-client/react/nextjs';
The DataProvider must wrap all components that use data-client hooks. Place it at the topmost level possible.
After core setup and protocol-specific setup:
Entity - see skill "rdc-schema"useSuspense, useQuery, useController - see skill "rdc-react"For detailed API documentation, see the references directory: