New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Add React Admin Resource

by talkincode in talkincode/toughradius

Add a resource or page in the React Admin management backend (TR-F013).

MITAuto-check passedFrontend & Design

Install Add React Admin Resource

skills CLI
$ npx skills add talkincode/toughradius --skill add-react-admin-resource -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install talkincode/toughradius add-react-admin-resource --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/talkincode/toughradius.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/add-react-admin-resource .claude/skills/add-react-admin-resource && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
add-react-admin-resource
GitHub stars
691
Token cost
~429 tokens
SKILL.md length
164 words
Files
1
Skills in repo
15
Repo updated
First seen
Licence
MIT

At a glance

Add a resource or page in the React Admin management backend (TR-F013).

  • Works in 5 steps: Resource file: define List/Edit/Create… → Register the resource: add " .../> in… → Data mapping: confirm dataProvider.ts… → …
  • A new Admin API needs a corresponding management UI in the frontend
  • SKILL.md covers When to use, Pre-research, Implementation steps and Boundaries, plus 1 more section
  • Calls npm

What it does

Add React Admin Resource is an agent skill from talkincode/toughradius. Add a resource or page in the React Admin management backend (TR-F013). Use when a new Admin API needs a corresponding management UI in the frontend.

Its SKILL.md is about 430 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design. It works with React. The repository describes itself as: A powerful, open-source RADIUS server designed for ISPs, enterprise networks, and carriers. Supports standard RADIUS protocols, a full EAP / 802.1X authentication suite (EAP-TLS… The licence is MIT.

When your agent uses it

  • A new Admin API needs a corresponding management UI in the frontend

Example prompts

  • “/add-react-admin-resource”

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Resource file: define List/Edit/Create in web/src/resources/.tsx (mirror nodes.tsx).
  2. Register the resource: add " .../> in web/src/App.tsx; the name must align with the backend API path.
  3. Data mapping: confirm dataProvider.ts pagination / filter / sort params match the backend.
  4. Pages (if not standard CRUD): put them under web/src/pages/; do not create a separate management entry.
  5. i18n: if the project has i18n keys, add the corresponding strings.

What it can do on your machine

Read from SKILL.md and the folder at commit 50907c9. 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

    Shell commands in SKILL.md call:

    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm, 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

Add React Admin Resource loads about 429 tokens when it runs. Until then it costs about 44 tokens; SKILL.md has 164 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~44
When it runs · the whole SKILL.md, loaded when a task matches
~429

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.

SKILL.md

The full file from talkincode/toughradius at commit 50907c9, republished under its MIT licence (© talkincode). 164 words, ~429 tokens.

Download SKILL.mdSave it as .claude/skills/add-react-admin-resource/SKILL.md (or your agent's skills folder).
name
add-react-admin-resource
description
Add a resource or page in the React Admin management backend (TR-F013). Use when a new Admin API needs a corresponding management UI in the frontend.

Skill: Add a Frontend Management Resource / Page

Feature ID: TR-F013 | Milestone: M2 and others

When to use

After adding an Admin API on the backend, when the React Admin backend needs to expose the corresponding resource or page.

Pre-research

text
view web/src/App.tsx                       # resource / route registration
file_search "web/src/resources/*.tsx"      # resource references
view web/src/providers/dataProvider.ts     # REST mapping
view web/src/resources/nodes.tsx           # standard resource reference

Implementation steps

  1. Resource file: define List/Edit/Create in web/src/resources/<feature>.tsx (mirror nodes.tsx).
  2. Register the resource: add <Resource name="<api-path>" .../> in web/src/App.tsx; the name must align with the backend API path.
  3. Data mapping: confirm dataProvider.ts pagination / filter / sort params match the backend.
  4. Pages (if not standard CRUD): put them under web/src/pages/; do not create a separate management entry.
  5. i18n: if the project has i18n keys, add the corresponding strings.

Boundaries

  • Do not introduce a separate management entry; all pages hang under the unified Admin framework.
  • The frontend only exposes backend-supported, verifiable, safe actions (especially CoA); never assemble protocol packets in the frontend.

Acceptance

  • cd web && npm run build succeeds
  • List / filter / CRUD are connected to the backend
  • PR references TR-F013 and the milestone ID

© talkincode, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/add-react-admin-resource of talkincode/toughradius.

Open the folder on GitHubat commit 50907c9

Compare with similar skills

Add React Admin Resource 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.

Add React Admin Resource compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Add React Admin Resource this skilltalkincode/toughradius691—~429Automated safety check: PassMIT
Web Artifacts Builderanthropics/skills180k41 repos~769Automated safety check: PassApache-2.0
React Doctormakeplane/plane61k12 repos~657Automated safety check: PassAGPL-3.0
React Router Developmentremix-run/react-router57k1 repos~1.5kAutomated safety check: PassMIT
React UI State PatternsChrisWiles/claude-code-showcase6.1k8 repos~1.6kAutomated safety check: PassNone
GSAP Core Animationgreensock/gsap-skills16k4 repos~3.7kAutomated safety check: PassMIT

Similar skills

  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 41 repos~769 tokens
    Frontend & DesignAuto-check passed

  • React Doctor

    makeplane/plane

    Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.

    61k GitHub starsUsed in 12 repos~657 tokens
    Frontend & DesignAuto-check passed

  • React Router Development

    remix-run/react-router

    Guides work on React Router apps by first identifying whether the app uses Framework, Data or Declarative mode, then loading the matching reference and the installed package docs.

    57k GitHub starsUsed in 1 repo~1.5k tokens
    Frontend & DesignAuto-check passed

  • React UI State Patterns

    ChrisWiles/claude-code-showcase

    Sets patterns for React interfaces: when to show loading spinners or skeletons, how to surface errors, how to disable buttons during async work and how to handle empty lists.

    6.1k GitHub starsUsed in 8 repos~1.6k tokens
    Frontend & DesignAuto-check passed

  • GSAP Core Animation

    greensock/gsap-skills

    Covers the GSAP core API for tweens, easing, staggers, defaults and matchMedia, and when to choose GSAP over CSS animations or other JavaScript animation libraries.

    16k GitHub starsUsed in 4 repos~3.7k tokens
    Frontend & DesignAuto-check passed

  • LobeHub Interactive Prototype

    lobehub/lobehub

    Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.

    83k GitHub stars~1.6k tokensUpdated today
    Frontend & DesignAuto-check passed

More from talkincode/toughradius

All 15 skills in this repo

  • Release Version

    talkincode/toughradius

    Review merged PRs since the last Git tag and decide whether a ToughRADIUS release is warranted.

    691 GitHub stars~1.6k tokensUpdated 5 days ago
    Auto-check passed

  • Add Acceptance Test

    talkincode/toughradius

    Write CI-executable acceptance/integration tests for protocol or end-to-end changes (TR-F022).

    691 GitHub stars~827 tokensUpdated 5 days ago
    Auto-check passed

  • Add Adminapi Endpoint

    talkincode/toughradius

    Add a group of Admin REST endpoints in the management backend (TR-F012).

    691 GitHub stars~461 tokensUpdated 5 days ago
    Auto-check passed

  • Add Eap Method

    talkincode/toughradius

    Add an EAP authentication method (e.g. An agent skill from talkincode/toughradius.

    691 GitHub stars~802 tokensUpdated 5 days ago
    Auto-check passed

  • Add Radius Vendor

    talkincode/toughradius

    Add or extend vendor VSA parsing and response enhancement (TR-F005).

    691 GitHub stars~590 tokensUpdated 5 days ago
    Auto-check passed

  • Document Go APIs

    talkincode/toughradius

    Standard-library-style Go API documentation and comment conventions (TR-F024).

    691 GitHub stars~1.3k tokensUpdated 5 days ago
    Auto-check passed

Works with

Categories

Questions about Add React Admin Resource

What does Add React Admin Resource do?

Add a resource or page in the React Admin management backend (TR-F013). Add React Admin Resource is an agent skill from talkincode/toughradius. Add a resource or page in the React Admin management backend (TR-F013).

When should I use Add React Admin Resource?

Add React Admin Resource fits situations like: A new Admin API needs a corresponding management UI in the frontend.

How do I install Add React Admin Resource in Claude Code?

Run `npx skills add talkincode/toughradius --skill add-react-admin-resource -a claude-code`. Or copy the skill folder (.agents/skills/add-react-admin-resource in talkincode/toughradius) into .claude/skills/add-react-admin-resource in your project. Claude Code loads it when a task matches its description.

How do I install Add React Admin Resource in Codex?

Run `npx skills add talkincode/toughradius --skill add-react-admin-resource -a codex`. Or copy the skill folder (.agents/skills/add-react-admin-resource in talkincode/toughradius) into .agents/skills/add-react-admin-resource in your project. Codex loads it when a task matches its description.

Can I use Add React Admin Resource 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 talkincode/toughradius --skill add-react-admin-resource -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/add-react-admin-resource, .gemini/skills/add-react-admin-resource, .github/skills/add-react-admin-resource and .opencode/skills/add-react-admin-resource in your project.

What does Add React Admin Resource need to run?

Going by SKILL.md and its folder, Add React Admin Resource needs the command-line tools its instructions call (npm).

Does Add React Admin Resource access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Add React Admin Resource 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 Add React Admin Resource use?

Add React Admin Resource is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Add React Admin Resource use?

About 429 tokens (SKILL.md is roughly 1.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Add React Admin Resource?

Skills that share tags, products or a category with Add React Admin Resource: Web Artifacts Builder (anthropics/skills, 180k stars), React Doctor (makeplane/plane, 61k stars), React Router Development (remix-run/react-router, 57k stars) and React UI State Patterns (ChrisWiles/claude-code-showcase, 6.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Add React Admin Resource?

talkincode (a GitHub organization) maintains it in talkincode/toughradius, which has 691 GitHub stars. The repository holds 15 skills in this directory. The repository was last updated on October 3, 2026.

Source: talkincode/toughradius on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.