MCPInstall

docyrus-app-dev

Build React TypeScript web applications using Docyrus as a backend. Use when creating or modifying apps that authenticate with Docyrus OAuth2, fetch/mutate data via the @docyrus/api-client library, use auto-generated collections for CRUD operations, or build queries with filters, aggregations, formulas, pivots, and child queries against Docyrus data sources. Triggers on tasks involving @docyrus/api-client, @docyrus/signin, Docyrus collections, data source queries, or Docyrus-backed React app development.

Installs
87
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/docyrus/agent-skills --skill docyrus-app-dev
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads docyrus-app-dev automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Docyrus App Developer

Build React TypeScript web apps with Docyrus as the backend. Authenticate via OAuth2 PKCE, query data sources with powerful filtering/aggregation, and follow established patterns.

Tech Stack

  • React 19 + TypeScript + Vite
  • TanStack Router (code-based), TanStack Query (server state)
  • Tailwind CSS v4, shadcn/ui components
  • @docyrus/api-client (REST client) + @docyrus/signin (auth provider)
  • Auto-generated collections from OpenAPI spec

Quick Start: New App Setup

  1. Wrap root with DocyrusAuthProvider:
import { DocyrusAuthProvider } from '@docyrus/signin'

<DocyrusAuthProvider
  apiUrl={import.meta.env.VITE_API_BASE_URL}
  clientId={import.meta.env.VITE_OAUTH2_CLIENT_ID}
  redirectUri={import.meta.env.VITE_OAUTH2_REDIRECT_URI}
  scopes={['offline_access', 'Read.All', 'DS.ReadWrite.All', 'Users.Read']}
  callbackPath="/auth/callback"
>
  <QueryClientProvider client={queryClient}>
    <RouterProvider router={router} />
  </QueryClientProvider>
</DocyrusAuthProvider>
  1. In App.tsx, check auth and use collection hooks:
const { status } = useDocyrusAuth()
const { getMyInfo } = useUsersCollection()

if (status === 'loading') return <Spinner />
if (status === 'unauthenticated') return <SignInButton />
  1. Use collection hooks in components:
const { list } = useBaseProjectCollection()

const { data: projects } = useQuery({
  queryKey: ['projects'],
  queryFn: () => list({
    columns: ['name', 'status', 'record_owner(firstname,lastname)'],
    filters: { rules: [{ field: 'status', operator: '!=', value: 'archived' }] },
    orderBy: 'created_on DESC',
    limit: 50,
  }),
})

Critical Rules

  1. Always send columns in .list() and .get() calls. Without it, only id is returned.
  2. Collections are React hooks — call useBaseProjectCollection(), useUsersCollection(), etc. inside React components. They use useDocyrusClient() internally for authenticated API access.
  3. Data source endpoints are dynamic — they only exist if the data source is defined in the tenant's OpenAPI spec.
  4. Use id field for count calculations. Use the actual field slug for sum, avg, min, max.
  5. Child query keys must appear in columns — e.g., if childQuery key is orders, include 'orders' in the columns array.
  6. Formula keys must appear in columns — e.g., if formula key is total, include 'total' in the columns array.
  7. Use useUsersCollection().getMyInfo() for current user profile, not a direct API call.

Regenerating Collections After Schema Changes

When data sources or fields are created, updated, or deleted via the docyrus-architect MCP tools, the app's auto-generated collections become stale. To resync:

  1. Call regenerate_openapi_spec (architect MCP) to rebuild and upload the tenant's OpenAPI spec
  2. Download the new spec into the repo, overwriting the existing file:
    curl -o openapi.json "<publicUrl returned from step 1>"
    
  3. Regenerate collections:
    pnpx @docyrus/tanstack-db-generator openapi.json
    

Always run all three steps together — a stale openapi.json or outdated collections will cause missing or incorrect endpoints at runtime.

Collection CRUD Methods

Every generated collection is a React hook that returns CRUD methods:

const { list, get, create, update, delete: deleteOne, deleteMany } = useBaseProjectCollection()

list(params?: ICollectionListParams)   // Query with filters, sort, pagination
get(id, { columns })                    // Single record
create(data)                            // Create
update(id, data)                        // Partial update
deleteOne(id)                           // Delete one
deleteMany({ recordIds })               // Delete many

API endpoint pattern: /v1/apps/{appSlug}/data-sources/{slug}/items

Query Capabilities Summary

The .list() method supports:

FeaturePurpose
columnsSelect fields, expand relations field(subfields), alias alias:field, spread ...field()
filtersNested AND/OR groups with 50+ operators (comparison, date shortcuts, user-related)
filterKeywordFull-text search
orderBySort by fields with direction, including related fields
limit/offsetPagination (default 100)
fullCountReturn total count alongside results
calculationsAggregations: count, sum, avg, min, max with grouping
formulasComputed virtual columns (simple functions, block AST, correlated subqueries)
childQueriesFetch related child records as nested JSON arrays
pivotCross-tab matrix queries with date range series
expandReturn full objects for relation/user/enum fields instead of IDs

For query/formula details, read:

  • references/data-source-query-guide.md
  • references/formula-design-guide-llm.md

TanStack Query Pattern

// Query hook — call collection hook inside the component, pass methods to TanStack Query
function useProjects(params?: ICollectionListParams) {
  const { list } = useBaseProjectCollection()
  return useQuery({
    queryKey: ['projects', 'list', params],
    queryFn: () => list({ columns: PROJECT_COLUMNS, ...params }),
  })
}

// Mutation hook
function useCreateProject() {
  const { create } = useBaseProjectCollection()
  const qc = useQueryClient()
  return useMutation({
    mutationFn: (data: Record<string, unknown>) => create(data),
    onSuccess: () => { void qc.invalidateQueries({ queryKey: ['projects'] }) },
  })
}

References

Read these files when you need detailed information:

  • references/api-client-and-auth.md — RestApiClient API, @docyrus/signin hooks, auth provider config, interceptors, error handling, SSE/streaming, file upload/download
  • references/data-source-query-guide.md — Up-to-date query payload guide: columns, filters, orderBy, pagination, calculations, formulas, child queries, pivots, and operator reference
  • references/formula-design-guide-llm.md — Up-to-date formula design guide for building and validating formulas payloads
  • references/collections-and-patterns.md — Generated collection hooks, useUsersCollection, TanStack Query/mutation hook patterns, query key factories, app bootstrap flow, routing setup, API endpoints

FAQ

What does the docyrus-app-dev skill do?

Build React TypeScript web applications using Docyrus as a backend. Use when creating or modifying apps that authenticate with Docyrus OAuth2, fetch/mutate data via the @docyrus/api-client library, use auto-generated collections for CRUD operations, or build queries with filters, aggregations, formulas, pivots, and child queries against Docyrus data sources. Triggers on tasks involving @docyrus/api-client, @docyrus/signin, Docyrus collections, data source queries, or Docyrus-backed React app development.

How do I install docyrus-app-dev?

Run npx skills add https://github.com/docyrus/agent-skills --skill docyrus-app-dev in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/docyrus-app-dev/ (personal) or .claude/skills/docyrus-app-dev/ (project).

Which AI agents can use docyrus-app-dev?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is docyrus-app-dev safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains docyrus-app-dev?

It is published by docyrus in docyrus/agent-skills. It has 87 recorded installs.

More from docyrus/agent-skills

View all →

docyrus-api-dev

docyrus/agent-skills

Develop applications using the Docyrus API with @docyrus/api-client and @docyrus/signin libraries. Use when building apps that authenticate with Docyrus OAuth2 (PKCE, iframe, client credentials, device code), make REST API calls to Docyrus data source endpoints, construct query payloads with filters, aggregations, formulas, pivots, and child queries, or integrate with external connectors (discover connectors, send requests through provider auth, run actions). Triggers on tasks involving Docyrus API integration, @docyrus/api-client usage, @docyrus/signin authentication, data source query building, Docyrus REST endpoint consumption, connector discovery, or external provider requests.

Backend & APIs826 installs

docyrus-cli-app

docyrus/agent-skills

Use the Docyrus CLI (docyrus) to interact with the Docyrus platform from the terminal. Use when the user asks to authenticate, list apps, query or manage data records (ds), manage dev app data source schema objects (studio) including data sources, fields, enums, data views, forms, webforms, HTML/PDF export templates, and email templates, manage automations and their triggers/action nodes (automation), build or edit custom AI agents and their sub-resources (agent), set an app's AI agent context or manage app-scoped AI tools (apps), list tenant email accounts and send emails (messaging), manage tenant account settings — brands, the current user's profile, and tenant regional/formatting preferences (account), discover and call connectors (connect), send API requests, switch tenants/accounts, discover tenant OpenAPI specs, drive browser automation (browser), chat with platform agents (docy), launch the pi cowork/coding agents (worky/cody/coder), run the agent br

docyrus-platform

docyrus/agent-skills

Open the skill to read its SKILL.md instructions.

AI & Agents222 installs

docyrus-api-doctor

docyrus/agent-skills

Run after making Docyrus API changes to catch bugs, performance issues, and code quality problems. Use when implementing or modifying code that uses Docyrus collection hooks (.list, .get, .create, .update, .delete), direct RestApiClient calls, query payloads with filters/calculations/formulas/childQueries/pivots, or TanStack Query integration with Docyrus data sources. Triggers on tasks involving Docyrus API logic, data fetching, mutations, or query payload construction.

Backend & APIs91 installs

docyrus-architect

docyrus/agent-skills

Open the skill to read its SKILL.md instructions.

AI & Agents75 installs

docyrus-app-ui-design

docyrus/agent-skills

Open the skill to read its SKILL.md instructions.

Popular backend & apis skills

View category →

find-skills

vercel-labs/skills

Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.

OfficialBackend & APIs4.1M installs

entra-app-registration

microsoft/azure-skills

Guides Microsoft Entra ID app registration, OAuth 2.0 authentication, and MSAL integration. USE FOR: create app registration, register Azure AD app, configure OAuth, set up authentication, add API permissions, generate service principal, MSAL example, console app auth, Entra ID setup, Azure AD authentication. DO NOT USE FOR: Key Vault secrets (use azure-keyvault-expiration-audit), general Azure resource security guidance.

OfficialBackend & APIs566.7K installs

This skill should be used when the user wants to "write agent code", "build an agent with ADK", "add a tool", "create a callback", "define an agent", "use state management" — in a project that needs ADK (Agent Development Kit) API patterns and code examples. It provides a quick reference for agent types, tool definitions, orchestration patterns, callbacks, state management, the graph Workflow API, and reference recipes to study. Do NOT use for scaffolding (use google-agents-cli-scaffold) or deployment (use google-agents-cli-deploy).

Backend & APIs514.8K installs

embedded-captions

heygen-com/hyperframes

Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet anchor rail is the default; embed every word only when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end, including transcription and subject matting; split multi-shot footage before applying it.

Backend & APIs453.3K installs

entra-agent-id

microsoft/azure-skills

Provision Microsoft Entra Agent Identity Blueprints, BlueprintPrincipals, and per-instance Agent Identities via Microsoft Graph, and configure OAuth 2.0 token exchange (fmipath, OBO, cross-tenant) including the Microsoft Entra SDK for AgentID sidecar. USE FOR: Agent Identity Blueprint, BlueprintPrincipal, agent OAuth, fmipath token exchange, agent OBO, Workload Identity Federation for agents, polyglot agent auth, Microsoft.Identity.Web.AgentIdentities. DO NOT USE FOR: standard Entra app registration (use entra-app-registration), Microsoft Foundry agent authoring (use microsoft-foundry).

OfficialBackend & APIs336.6K installs

neon

neondatabase/agent-skills

Overview of Neon, a complete set of cloud backend primitives around Lakebase Postgres: Auth, Object Storage, Functions, the AI Gateway, and Realtime. Start here to choose Neon for undecided login, files, APIs, and LLM calls, set up the CLI or MCP server, and follow the branch-first workflow. Use when building an app or backend on Neon, or when "Neon" or "Lakebase Postgres" is mentioned. Child skill neon-postgres wins for an existing DATABASEURL, SQL, schema, inspect, or search. Child skill neon-auth wins for login, users, sessions, identity routing, and Managed Better Auth setup. Child skill neon-realtime wins for live queries in reactive apps and agents. Also use for object storage, S3, buckets, serverless functions, function triggers, cron, AI gateway, LLM calls, realtime, logs, Loki, Grafana, observability, postgres, database, backend, Claimable Neon, neon.new, or a no-signup database.

Backend & APIs237.1K installs