framework-react

framework-react is a skill for Claude Code from wahidyankf/ose-public. It costs 50 tokens per session (1,040 once invoked), scanned A, original, MIT.

A guide to managing state, side effects, and server data in React, a JavaScript library for building user interfaces. It helps place each value in the narrowest suitable component or data cache.

In plain words
What is it for?
Use it to decide whether a value belongs in computed output, component state, a reducer, or a query cache, and to test React hooks and data flows.
Why use it?
It prevents duplicated state, unnecessary effects, and server data being stored in the wrong place. It also helps keep components easier to reason about and test.

Skill for Claude Code

Written for Claude Code: when-to-use in frontmatter. Also seen: installed under .agents/ (shared by several agents).

Good fit Use it to decide whether a value belongs in computed output, component state, a reducer, or a query cache, and to test React hooks and data flows.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/wahidyankf/ose-public/framework-react
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add wahidyankf/ose-public --skill framework-react
Clone the repo
git clone --depth 1 https://github.com/wahidyankf/ose-public

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for framework-react

README.md
[![agentmods](https://agentmods.dev/badge/skills/wahidyankf/ose-public/framework-react/github.svg)](https://agentmods.dev/skills/wahidyankf/ose-public/framework-react)
Your own site
<a href="https://agentmods.dev/skills/wahidyankf/ose-public/framework-react"><img src="https://agentmods.dev/badge/skills/wahidyankf/ose-public/framework-react/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for framework-react

Your own site · 80×15
<a href="https://agentmods.dev/skills/wahidyankf/ose-public/framework-react"><img src="https://agentmods.dev/badge/skills/wahidyankf/ose-public/framework-react.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 50 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,040 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00050 $0.01040
Opus 5.5 $0.00020 $0.00416
Sonnet 5.5 $0.00010 $0.00208
Haiku 4.5 $0.00005 $0.00104

Measured 2d ago against content hash 1ad91e260123, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

framework-react scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.agents/skills/framework-react/SKILL.md · 84 lines

How it starts

The opening of the file, as written. The whole thing — 84 lines — stays where its author put it; the contents beside it link to each section on GitHub.

React Framework

Every React rule is owned by React Standards, typing by TypeScript Standards, and Programming TypeScript carries the language procedure. This skill covers state, effects, and data only. Building components, their variants, accessibility, and tokens belongs to Developing Frontend UI; when a change does both, use both. Where a sentence here seems to state a rule, the standard decides.

Start From What the Project Records

Read the store, query, and form choices recorded under the standard's Library Decisions. When the change needs a library that is not recorded, raise it as a decision rather than adding one quietly.

Run the type check, lint, and component tests on the untouched tree. A gate already failing is handled under Preexisting Error Resolution.

Find the Value's Home Before Declaring It

Ask of each new value, in order, and stop at the first yes:

Question Home
can it be computed from props, state, or cached data? a value computed during render, not state
does a server own it? the query cache
does only one component read or change it? that component's state or reducer
do a parent and its near children share it? the parent, passed down as props
does a distant part of the tree need it, and does it change often? the recorded store
does a distant part of the tree need it, and does it rarely change? context

Read the full file on GitHub · 84 lines

Files

What ships with it

1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 2d ago First seen · 84 lines · 50 tokens per session scan A 1ad91e260123

Subscribe to this mod's changes

framework-react is a skill published in the GitHub repository wahidyankf/ose-public (12 stars, last pushed today), licensed MIT. It adds 50 tokens to every session and 1,040 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-10-14.

Related

Other skills, from other repositories

trpc-router

Entry point for all tRPC skills. Decision tree routing by task: initTRPC.create(), t.router(), t.procedure, createTRPCClient, adapters, subscriptions, React Query, Next.js, links, middleware, validators, error handling, caching, FormData.

trpc/trpc · 59 tokens

debugging-ci-failures

Debugs failing GitHub Actions CI runs for PostHog PRs, commits, and branches, and answers broad CI-health questions ("is CI red?", "is master green today?", "what's broken right now?"). Use when the user asks why CI is red, asks for the current CI or master status, or mentions a failing check, GitHub Actions run…

PostHog/posthog · 202 tokens

qa-frontend

Internal PostHog developer frontend/browser QA skill. Use only when a PostHog developer explicitly asks to run frontend QA, browser-test a PR, verify a UI flow against the local PostHog stack, use qa-frontend, or QA current frontend changes with browser/runtime evidence, or to make a feature reel (see reel mode…

PostHog/posthog · 216 tokens

writing-tests

Gates whether a new test should exist and forces it to be efficient, protecting CI from low-value test bloat. Use before any change to what a pytest, Jest, or Playwright test asserts or sets up, down to one fixture or one assertion added to an existing block. Front-loads the value bar (every test must catch a…

PostHog/posthog · 211 tokens

exploring-llm-evaluations

Investigate AI observability evaluations — hog (deterministic code-based), llmjudge (LLM-prompt-based), and sentiment (user-message sentiment). Find existing evaluations, inspect their configuration, run them against specific generations, query individual results, and set up scheduled reports on an evaluation. Use…

PostHog/posthog · 124 tokens

investigating-error-issue

Investigates a single PostHog error tracking issue end-to-end. Use when the user provides an issue ID or pastes an issue URL (/error-tracking/ ) and wants to understand the error — who it affects, what triggers it, when it started, whether it correlates with a release, browser, OS, or feature flag, and what the next…

PostHog/posthog · 115 tokens