A skill your agent uses when the user is implementing, embedding, or debugging a WorkOS Widget — specifically the User Management, User Profile, Admin Portal SSO Connection, or Admin Portal Domain…
Install the "workos-widgets" agent skill from https://github.com/usenotra/notra/tree/main/.agents/skills/workos-widgets into .claude/skills/workos-widgets/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "workos-widgets", then confirm the skill loads.
Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
skills CLI
$ npx skills add usenotra/notra --skill workos-widgets -a codex
Project install goes to .agents/skills/; add -g for ~/.codex/skills/.
Install the "workos-widgets" agent skill from https://github.com/usenotra/notra/tree/main/.agents/skills/workos-widgets into .agents/skills/workos-widgets/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "workos-widgets", then confirm the skill loads.
Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
skills CLI
$ npx skills add usenotra/notra --skill workos-widgets -a cursor
Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.
Install the "workos-widgets" agent skill from https://github.com/usenotra/notra/tree/main/.agents/skills/workos-widgets into .cursor/skills/workos-widgets/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "workos-widgets", then confirm the skill loads.
Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
skills CLI
$ npx skills add usenotra/notra --skill workos-widgets -a gemini-cli
Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.
Install the "workos-widgets" agent skill from https://github.com/usenotra/notra/tree/main/.agents/skills/workos-widgets into .gemini/skills/workos-widgets/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "workos-widgets", then confirm the skill loads.
Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
GitHub CLI
$ gh skill install usenotra/notra workos-widgets
Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
skills CLI
$ npx skills add usenotra/notra --skill workos-widgets -a github-copilot
Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.
Install the "workos-widgets" agent skill from https://github.com/usenotra/notra/tree/main/.agents/skills/workos-widgets into .github/skills/workos-widgets/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "workos-widgets", then confirm the skill loads.
GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
skills CLI
$ npx skills add usenotra/notra --skill workos-widgets -a opencode
OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
Install the "workos-widgets" agent skill from https://github.com/usenotra/notra/tree/main/.agents/skills/workos-widgets into .opencode/skills/workos-widgets/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "workos-widgets", then confirm the skill loads.
OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
Skill name
workos-widgets
GitHub stars
256
Token cost
~2k tokens
SKILL.md length
719 words
Files
25 (incl. references)
Skills in repo
17
Repo updated
First seen
Licence
AGPL-3.0
At a glance
A skill your agent uses when the user is implementing, embedding, or debugging a WorkOS Widget — specifically the User Management, User Profile, Admin Portal SSO Connection, or Admin Portal Domain…
Works in 8 steps: Identify widget target from the user… → Scan project files in this order → Detect stack, data-layer style, styling,… → …
The user is implementing
SKILL.md covers Workflow Overview, Canonical Inputs, Detection and Ambiguity Protocol and Reference Loading Map, plus 4 more sections
Runs JavaScript and TypeScript scripts from its folder; calls npx and node
What it does
Workos Widgets is an agent skill from usenotra/notra. Use when the user is implementing, embedding, or debugging a WorkOS Widget — specifically the User Management, User Profile, Admin Portal SSO Connection, or Admin Portal Domain Verification widgets. Handles the full stack — detecting the frontend (Next.js, React, React Router, TanStack Start, Vite, SvelteKit), generating access tokens via the backend SDK in use (Node, Python, Go, Ruby, PHP, Java, .NET), and wiring up the widget component correctly per the bundled OpenAPI spec. Also use when code imports from…
Its SKILL.md is about 2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 26 other files, including reference files (for example `references/detection.md`, `references/fetching-apis.md` and `references/framework-go.md`).
It sits in AI & LLM Engineering, covering Authentication, React components and OpenAPI specifications. It works with WorkOS, OpenAPI, Vite and Next.js. The repository describes itself as: Notra is a modern GEO tool that asks ChatGPT, Claude and Gemini the questions your buyers ask. See if you show up, who shows up instead and how to fix it. The licence is AGPL-3.0.
When your agent uses it
The user is implementing
Debugging a WorkOS Widget — specifically the User Management
Admin Portal SSO Connection
Admin Portal Domain Verification widgets
Example prompts
“/workos-widgets”
Requirements
Node.js
Workflow steps
8 steps, taken from the first numbered list in SKILL.md.
1Identify widget target from the user request (user-management, user-profile, admin-portal-sso-connection, admin-portal-domain-verification).
2Scan project files in this order
3Detect stack, data-layer style, styling, component system, and package manager using references/detection.md.
4Check for AuthKit/WorkOS presence
5If detection is ambiguous or conflicting, ask one focused question, then continue.
6Load only the relevant reference files for the detected stack and widget.
7Implement integration based on stack shape
8Validate routing/wiring, imports, and token/API usage before finishing.
What it can do on your machine
Read from SKILL.md and the folder at commit e6483cd. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships script files (JavaScript and TypeScript, from the files we listed), which the agent can run.
Shell commands in SKILL.md call:
npx
node
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Workos Widgets loads about 2k tokens when it runs, and up to ~101k if it reads all its reference files. Until then it costs about 153 tokens; SKILL.md has 719 words of instructions outside code blocks.
Always· name and description, kept in context so the agent knows when to use it
~153
When it runs· the whole SKILL.md, loaded when a task matches
~2k
With references· SKILL.md plus every file in references/, read only if the agent opens them
~101k
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
Download SKILL.mdSave it as .claude/skills/workos-widgets/SKILL.md (or your agent's skills folder). This skill also uses 24 other files; get the full folder from GitHub.
name
workos-widgets
description
Use when the user is implementing, embedding, or debugging a WorkOS Widget — specifically the User Management, User Profile, Admin Portal SSO Connection, or Admin Portal Domain Verification widgets. Handles the full stack — detecting the frontend (Next.js, React, React Router, TanStack Start, Vite, SvelteKit), generating access tokens via the backend SDK in use (Node, Python, Go, Ruby, PHP, Java, .NET), and wiring up the widget component correctly per the bundled OpenAPI spec. Also use when code imports from @workos-inc/widgets or the user pastes <UserManagement /> or <UserProfile /> JSX.
WorkOS Widgets
Workflow Overview
Identify widget target from the user request (user-management, user-profile, admin-portal-sso-connection, admin-portal-domain-verification).
Scan project files in this order:
package/dependency manifests
framework/router entrypoints
auth/token utilities
styling/component patterns
Detect stack, data-layer style, styling, component system, and package manager using references/detection.md.
Check for AuthKit/WorkOS presence:
if detected, continue;
if not detected, ask the user to run WORKOS_MODE=agent npx workos@latest install. Wait for confirmation, then continue.
If detection is ambiguous or conflicting, ask one focused question, then continue.
Load only the relevant reference files for the detected stack and widget.
Implement integration based on stack shape:
frontend route/page + widget component when widget UI lives in the same app
token endpoint/service + client integration surface when backend-first/multi-app architecture is detected
Validate routing/wiring, imports, and token/API usage before finishing.
Canonical Inputs
Accept these inputs from the user request when available:
Implement widget operations using endpoint paths/methods from references/fetching-apis.md. When building request bodies or parsing responses, query the OpenAPI spec for the relevant widget's schemas:bash
If AuthKit/WorkOS is missing, prompt the user to run WORKOS_MODE=agent npx workos@latest install before continuing. WORKOS_MODE=agent keeps the installer deterministic (no prompts, no browser, no host-trust); pass --json when you need to parse the output.
Install additional dependencies only when strictly necessary, using the detected package manager/tooling.
Keep server-state handling aligned with the selected data-layer approach.
Use local state/reducers for UI interaction state as needed.
Prefer existing design system and styling conventions.
Avoid broad unrelated refactors and global style rewrites.
Completion Requirements
Before finishing, verify all relevant items:
Widget component exists and accepts accessToken: string when component-level integration is in scope.
Route/page wiring is complete when route integration is in scope.
API methods and paths match the bundled OpenAPI spec, and data-layer usage matches project conventions.
Loading and error branches exist for required query/mutation flows.
Validation Checklist
Confirm endpoint paths and HTTP methods come from the bundled OpenAPI spec.
Confirm request/response handling follows schema expectations from the spec.
Confirm query/mutation invalidation/refetch is applied after successful mutations where required.
Confirm empty/error/loading states are explicit and user-visible.
Confirm package installs (if any) used the detected package manager/tooling.
Confirm implementation stays aligned with existing codebase conventions.
Confirm no existing component has been passed className or style props to override its built-in styling. Use each component as-is or via its own props API (variant, size, etc.).
Workos Widgets next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
Writing, editing, and rendering Slab documents (.slab) — the declarative design language for app screens, posters, terminal UIs, and interactive components.
Modeling a user's pricing into an Autumn catalog — deciding the structure (plans, variants, add-ons, licenses, credit systems, pooled balances) before writing config, then filling in the numbers.
A skill your agent uses when the user is implementing, embedding, or debugging a WorkOS Widget — specifically the User Management, User Profile, Admin Portal SSO Connection, or Admin Portal Domain…. Workos Widgets is an agent skill from usenotra/notra. Use when the user is implementing, embedding, or debugging a WorkOS Widget — specifically the User Management, User Profile, Admin Portal SSO Connection, or Admin Portal Domain Verification widgets.
When should I use Workos Widgets?
Workos Widgets fits situations like: the user is implementing; debugging a WorkOS Widget — specifically the User Management; admin Portal SSO Connection; admin Portal Domain Verification widgets.
How do I install Workos Widgets in Claude Code?
Run `npx skills add usenotra/notra --skill workos-widgets -a claude-code`. Or copy the skill folder (.agents/skills/workos-widgets in usenotra/notra) into .claude/skills/workos-widgets in your project. Claude Code loads it when a task matches its description.
How do I install Workos Widgets in Codex?
Run `npx skills add usenotra/notra --skill workos-widgets -a codex`. Or copy the skill folder (.agents/skills/workos-widgets in usenotra/notra) into .agents/skills/workos-widgets in your project. Codex loads it when a task matches its description.
Can I use Workos Widgets in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add usenotra/notra --skill workos-widgets -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/workos-widgets, .gemini/skills/workos-widgets, .github/skills/workos-widgets and .opencode/skills/workos-widgets in your project.
What does Workos Widgets need to run?
Going by SKILL.md and its folder, Workos Widgets needs JavaScript and TypeScript for the scripts in its folder and the command-line tools its instructions call (npx and node). Our summary lists: Node.js.
Does Workos Widgets access the network?
SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Workos Widgets safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Workos Widgets use?
Workos Widgets is published under the AGPL-3.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Workos Widgets use?
About 2k tokens (SKILL.md is roughly 8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 99k tokens, read only when the agent opens those files.
What are the alternatives to Workos Widgets?
Skills that share tags, products or a category with Workos Widgets: AI SDK (vercel-labs/ai-facts, 168 stars), Clerk React Patterns (geekskai/blog, 103 stars), Slab (stencil-hq/slab, 111 stars) and Spiceflow (remorses/spiceflow, 167 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Workos Widgets?
usenotra (a GitHub organization) maintains it in usenotra/notra, which has 256 GitHub stars. The repository holds 17 skills in this directory. The repository was last updated on October 8, 2026.
Source: usenotra/notra on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.
