New: 97,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

React

by valkey-io in valkey-io/valkey-admin

Guidance for React frontend work. An agent skill from valkey-io/valkey-admin.

Apache-2.0Auto-check passedFrontend & Design

Install React

skills CLI
$ npx skills add valkey-io/valkey-admin --skill react -a claude-code

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

GitHub CLI
$ gh skill install valkey-io/valkey-admin react --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/valkey-io/valkey-admin.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/react .claude/skills/react && 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
react
GitHub stars
148
Token cost
~766 tokens
SKILL.md length
372 words
Files
1
Skills in repo
5
Repo updated
First seen
Licence
Apache-2.0

At a glance

Guidance for React frontend work. An agent skill from valkey-io/valkey-admin.

  • Changing React components
  • SKILL.md covers State Flow, Hooks and Components And Markup
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Semantic markup

What it does

React is an agent skill from valkey-io/valkey-admin. Guidance for React frontend work. Use when changing React components, hooks, JSX structure, semantic markup, component composition, selector consumption, or frontend render data flow.

Its SKILL.md is about 770 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, covering React components. It works with React and Redux. The repository describes itself as: Valkey Admin is a web-based administration tool for Valkey clusters and standalone instances. It provides an intuitive interface to monitor, manage, and interact with your Valkey… The licence is Apache-2.0.

When your agent uses it

  • Changing React components
  • Semantic markup
  • Component composition
  • Selector consumption

Example prompts

  • “/react”

What it can do on your machine

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

    No scripts in the folder and no shell commands in SKILL.md.

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

  • Network

    No URLs in SKILL.md.

    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

React loads about 766 tokens when it runs. Until then it costs about 47 tokens; SKILL.md has 372 words of instructions outside code blocks.

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

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 valkey-io/valkey-admin at commit 64f5fb4, republished under its Apache-2.0 licence (© valkey-io). 372 words, ~766 tokens.

Download SKILL.mdSave it as .claude/skills/react/SKILL.md (or your agent's skills folder).
name
react
description
Guidance for React frontend work. Use when changing React components, hooks, JSX structure, semantic markup, component composition, selector consumption, or frontend render data flow.

React Skill

Use this skill when changing React components, hooks, JSX structure, or frontend render data flow.

State Flow

  • Treat RTK slices and selectors as the source of truth for app/domain state.
  • Components should dispatch intent actions and consume selectors. Avoid anonymous useSelector((state) => ...) in components.
  • Put single-slice selectors near the slice. Put selectors that join multiple state areas in a domain selector file; create a shared/global selector file only when the cross-slice selector does not belong to one domain.
  • Derived Redux fields are valid when intentional. Use the compute pattern when prepared view data improves render simplicity, consistency, or performance.
  • Avoid recomputing shared derived values ad hoc inside components. Move shared transforms into reducers, selectors, or common/.
  • Keep Valkey client and transport details out of React components.

Hooks

  • Custom hooks are appropriate for reusable component-local behavior, browser/DOM integration, and small UI interaction state.
  • Do not use hooks as hidden service layers for API orchestration, Redux-derived state, websocket flows, retries, polling, or action chaining.
  • For external stores or subscription-based browser/runtime state, prefer useSyncExternalStore so React owns snapshot consistency.
  • Avoid useEffect + setState subscription patterns unless the API cannot fit the external-store model.
  • Use useEffect only for imperative side effects that are not render-state subscriptions, such as focus/scroll commands, title updates, event reporting, imperative library setup/cleanup, or component-local resource cleanup.
  • Avoid useEffect for application data flow. Components should not use effects to fetch data, sync Redux state, chain actions, or coordinate websocket/API workflows.
  • Do not add useMemo or useCallback by default. Prefer straightforward code, selectors, compute steps, and stable component boundaries.
  • Treat manual memoization as an exception that needs a short reason: measured issue, external API referential-stability requirement, or a case React Compiler cannot optimize safely.
Show full SKILL.md (89 more words)Show less

Components And Markup

  • Use semantic HTML where the element has meaning or interaction: main, section, header, nav, ul, li, button, form, label, and related elements.
  • Use div for layout, containment, flex/grid, spacing, overflow, or styling only when no semantic element fits.
  • Avoid unnecessary nested divs and anonymous wrapper trees.
  • Prefer named components for repeated or meaningful UI concepts in apps/frontend/src/components.
  • Prefer composition over large components and prop-heavy abstractions.
  • Keep components focused on rendering and local interaction. Move data orchestration to middleware and shared transforms to selectors, reducers, or common/.

© valkey-io, Apache-2.0. 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/react of valkey-io/valkey-admin.

Open the folder on GitHubat commit 64f5fb4

Compare with similar skills

React 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.

React compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
React this skillvalkey-io/valkey-admin148—~766Automated safety check: PassApache-2.0
Frontendredis/RedisInsight8.9k—~3.2kAutomated safety check: PassCustom licence
React ExpertJeffallan/claude-skills12k—~1.4kAutomated safety check: PassMIT
React GeneralLedgerHQ/ledger-live621—~738Automated safety check: PassMIT
Web Artifacts Builderanthropics/skills180k40 repos~769Automated safety check: PassApache-2.0
React Composition Patternsvercel-labs/openreview1.7k58 repos~721Automated safety check: PassMIT

Similar skills

  • Frontend

    redis/RedisInsight

    Official

    React/Redux frontend development patterns for RedisInsight UI: component folder structure, styled-components, hooks, named exports, barrel files, layout components, and theme usage.

    8.9k GitHub stars~3.2k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

  • React Expert

    Jeffallan/claude-skills

    Builds React 19 components in TypeScript with Server Components, useActionState forms, custom hooks and state libraries, checked with tsc and React Testing Library.

    12k GitHub stars~1.4k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

  • React General

    LedgerHQ/ledger-live

    General React and React Native engineering rules for Ledger Live.

    621 GitHub stars~738 tokensUpdated today
    Frontend & DesignAuto-check passed

  • 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 40 repos~769 tokens
    Frontend & DesignAuto-check passed

  • React Composition Patterns

    vercel-labs/openreview

    Official

    Rules for structuring React components with composition instead of boolean props, covering compound components, lifted state, variants and React 19 changes.

    1.7k GitHub starsUsed in 58 repos~721 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

More from valkey-io/valkey-admin

  • Ramda

    valkey-io/valkey-admin

    Guidance for using Ramda in transformation-heavy TypeScript or JavaScript.

    148 GitHub stars~535 tokensUpdated yesterday
    Auto-check passed

  • Rx JS

    valkey-io/valkey-admin

    Guidance for Redux Toolkit and RxJS middleware patterns. An agent skill from valkey-io/valkey-admin.

    148 GitHub stars~666 tokensUpdated yesterday
    Auto-check passed

  • Valkey

    valkey-io/valkey-admin

    Guidance for Valkey-specific behavior. An agent skill from valkey-io/valkey-admin.

    148 GitHub stars~635 tokensUpdated yesterday
    Auto-check passed

  • Styling

    valkey-io/valkey-admin

    Guidance for frontend styling. An agent skill from valkey-io/valkey-admin.

    148 GitHub stars~424 tokensUpdated yesterday
    Auto-check passed

Works with

Categories

Questions about React

What does React do?

Guidance for React frontend work. An agent skill from valkey-io/valkey-admin. React is an agent skill from valkey-io/valkey-admin. Guidance for React frontend work.

When should I use React?

React fits situations like: changing React components; semantic markup; component composition; selector consumption.

How do I install React in Claude Code?

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

How do I install React in Codex?

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

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

What does React need to run?

SKILL.md names no scripts, command-line tools or credentials: React is instructions for the agent only.

Does React access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

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

React is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does React use?

About 766 tokens (SKILL.md is roughly 3.1k 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 React?

Skills that share tags, products or a category with React: Frontend (redis/RedisInsight, 8.9k stars), React Expert (Jeffallan/claude-skills, 12k stars), React General (LedgerHQ/ledger-live, 621 stars) and Web Artifacts Builder (anthropics/skills, 180k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains React?

valkey-io (a GitHub organization) maintains it in valkey-io/valkey-admin, which has 148 GitHub stars. The repository holds 5 skills in this directory. The repository was last updated on October 6, 2026.

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