Scalar API Reference skill for agents
Scalar API Reference skill
A skill that adds a Scalar reference to an app from its OpenAPI description: integrations, authentication, themes, migration from Swagger UI
- 16,337 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill only describes the procedure, but the agent then installs packages and edits your app's routes
- The minimal example loads the renderer from cdn.jsdelivr.net, and a page with `persistAuth` enabled stores credentials in the browser
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/scalar-api-reference-skillDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill only describes the procedure, but the agent then installs packages and edits your app's routes
- The minimal example loads the renderer from cdn.jsdelivr.net, and a page with `persistAuth` enabled stores credentials in the browser
This is third-party code. Review the repository files before installing.
What it does
The `scalar-api-reference` skill lives in the `.agents/skills` folder of the Scalar repository, an open API platform. It teaches an agent to embed Scalar's interactive documentation into an existing app from an OpenAPI description. The agent looks at the framework, package versions, routes and the address where the app already serves its API description, and picks the matching integration. The skill's table covers HTML and JavaScript, Vue, React, Next.js, Nuxt, Express, Fastify, Hono, NestJS, FastAPI and ASP.NET Core, with a package and entry point for each. The agent loads the API description through `url`, `content` or `sources`. The last option shows several APIs, each with a title, a `slug` and a default choice. The skill checks that `url` points to a browser-reachable address serving JSON or YAML rather than a file on disk or the documentation page. A separate section on authentication distinguishes access to the documentation page, access to the description and authentication of requests to the API itself: configuring the request client protects neither the page nor the description. The look is set with `theme`, `layout`, `showSidebar`, `darkMode` and theme variables rather than by editing internal selectors. When Swagger UI or Redoc documentation has to be replaced, the agent keeps the description address and generator, changes only the rendering on the intended route and carries over only the needed settings. At the end the skill requires checking the route and the description endpoint separately, confirming that operations and search appear, and reporting what was verified and what was not.
Who it is for. For backend and full-stack developers who already have an OpenAPI description and want a Scalar API reference page in place of Swagger UI or Redoc.
Good fit when
- A FastAPI, NestJS, Hono or ASP.NET Core app needs an API reference page built from an existing OpenAPI description
- Swagger UI or Redoc has to be replaced with Scalar while keeping the description generator and routes
- The documentation page opens blank or unstyled, or cannot find the description because of the address, CORS or a CSP policy
- You need to show several APIs on one page, for example a public one and an admin one
- You need to fit the theme, layout variant or default code sample to the project's brand
Not a fit when
- You need to configure a hosted Scalar Docs site or develop a standalone API client: the skill sends those tasks outside its scope
- The app has no OpenAPI description and nothing to produce one: the skill generates nothing and attaches rendering to an existing description
- You need to write FastAPI server code for the installed package version: the catalog has the official FastAPI skill for that
- You need skills for developing Scalar itself: other skills in `.agents/skills`, such as those for tests, TypeScript and Vue components, are written for repository contributors
Example request
Replace Swagger UI in my FastAPI app with Scalar using the same OpenAPI description, make the theme dark and keep the route as it isLimitations
- The skill attaches rendering and does not create an API description: without a ready OpenAPI description reachable from the browser, there is nothing to show.
- The integration table holds minimal entry points. The agent must check parameter names against the installed package version: the Python and .NET wrappers differ from JavaScript.
- The `persistAuth` option keeps credentials in the browser's local storage, so the skill enables it only on request. Production secrets do not go into public configuration.
- The `proxyUrl` option passes requests and credentials through a proxy, and the skill forbids quietly adding a public proxy to an existing app.
- When loaded from a CDN, the page may fetch a renderer of a different version than the wrapper package, and the version is then pinned with the `bundle` or `cdn` option described in the integration guide.
- MIT license.
How to disable. Delete the `scalar-api-reference` folder from your agent's skills directory. Scalar packages already installed and the reference route stay in the project; remove them by hand together with the `@scalar/api-reference` dependency or the integration package.
FAQ
How do I install the Scalar API Reference skill?
Run `npx skills add scalar/scalar --skill scalar-api-reference`. The README also has a ready prompt for an agent: it inspects the project, picks the integration for the framework, serves the reference at `/scalar` and checks that the page loads.
Which frameworks does the skill support?
The skill's table lists HTML and JavaScript, Vue, React, Next.js, Nuxt, Express, Fastify, Hono, NestJS, FastAPI and ASP.NET Core. For others the skill points to the integration catalog and asks not to substitute a similarly named package without checking its framework support.
How do `url`, `content` and `sources` differ?
The `url` option gives the address from which the browser gets JSON or YAML. The `content` option passes the description as an object or string, and it then reaches the browser along with the page. The `sources` option combines several descriptions, each with a title, a `slug` and a default choice.
Does the authentication setting protect the documentation page?
No. The skill separates three things: access to the page, access to the description and authentication of requests to the API. Configuring the request client protects only the last, and the page and description endpoint are closed by the application's own means.
How do I move from Swagger UI or Redoc?
Keep the description address or generator as it is and replace the rendering on the intended route. Carry over only the settings you need, because Swagger UI and Redoc option names do not match Scalar's. The old dependency is removed after checking that nothing else uses it.
Discussion
No questions or reviews yet.
Related
SkillsThe official FastAPI skill, bundled with the package, teaching agents to write code for the installed version
The official Payload CMS skill shipped inside the package: collections, fields, hooks, access control, queries and database adapters
Wildberries Seller API skill
Wildberries Seller API - Agent Skill
A Wildberries Seller API reference skill on local Swagger files with search in Russian and English
builder-skills: agent skills for Convex apps
builder-skills
17 skills that teach an agent to build Convex apps by the docs and run a project through a PRD, task.md and a changelog
tRPC skills for agents
tRPC skills
24 skills inside the tRPC packages: server, adapters, client, Next.js, TanStack React Query and OpenAPI load into the agent by task via TanStack Intent
Laravel API Architecture Skill
Laravel API Production-Ready Architecture Skill
A skill that keeps an agent within a layered Laravel API architecture: JSON:API v1.1, strict types, PHPStan level 8 and tests
README in short
The Scalar description presents a platform of an API reference, a request client, packages and integrations. The quickstart has the skill install command, a ready prompt for an agent, a plain HTML example and a list of supported frameworks and environments. A table of Scalar products with documentation links follows. The repository holds AGENTS.md files for packages and several skills, of which the quickstart names one.
README badge
Original SKILL.md
--- name: scalar-api-reference description: Install, configure, and troubleshoot Scalar API Reference in an application, including framework integrations, API description loading, authentication, themes, and migration from Swagger UI or Redoc. Use for the embedded or self-hosted reference, rather than hosted Scalar Docs site configuration or standalone API Client development. --- # Scalar API Reference Add interactive API documentation to an existing application with the integration that matches its framework. Scalar renders an API description; preserve the application's existing description generator and API routes. ## Choose the integration Inspect the application's framework, package versions, routing conventions, and existing API description endpoint. Determine whether the user needs a standalone documentation route or a component embedded in the application layout.