Agent skill

React Typescript

React + TypeScript patterns for production frontends. An agent skill from cohen-liel/hivemind.

Apache-2.0Auto-check passedFrontend & Design

Install React Typescript

skills CLI

$ npx skills add cohen-liel/hivemind --skill react-typescript -a claude-code

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

GitHub CLI

$ gh skill install cohen-liel/hivemind react-typescript --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/cohen-liel/hivemind.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/react-typescript .claude/skills/react-typescript && 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/

Paste into Claude Code

Install the "react-typescript" agent skill from https://github.com/cohen-liel/hivemind/tree/main/.claude/skills/react-typescript into .claude/skills/react-typescript/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-typescript", 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.

$skill-installer

$skill-installer install https://github.com/cohen-liel/hivemind/tree/main/.claude/skills/react-typescript

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 cohen-liel/hivemind --skill react-typescript -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install cohen-liel/hivemind react-typescript --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/cohen-liel/hivemind.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/react-typescript .agents/skills/react-typescript && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "react-typescript" agent skill from https://github.com/cohen-liel/hivemind/tree/main/.claude/skills/react-typescript into .agents/skills/react-typescript/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-typescript", 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 cohen-liel/hivemind --skill react-typescript -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install cohen-liel/hivemind react-typescript --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/cohen-liel/hivemind.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/react-typescript .cursor/skills/react-typescript && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "react-typescript" agent skill from https://github.com/cohen-liel/hivemind/tree/main/.claude/skills/react-typescript into .cursor/skills/react-typescript/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-typescript", 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.

gemini skills install

$ gemini skills install https://github.com/cohen-liel/hivemind.git --path .claude/skills/react-typescript

--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 cohen-liel/hivemind --skill react-typescript -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install cohen-liel/hivemind react-typescript --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/cohen-liel/hivemind.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/react-typescript .gemini/skills/react-typescript && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "react-typescript" agent skill from https://github.com/cohen-liel/hivemind/tree/main/.claude/skills/react-typescript into .gemini/skills/react-typescript/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-typescript", 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 cohen-liel/hivemind react-typescript

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 cohen-liel/hivemind --skill react-typescript -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/cohen-liel/hivemind.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/react-typescript .github/skills/react-typescript && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "react-typescript" agent skill from https://github.com/cohen-liel/hivemind/tree/main/.claude/skills/react-typescript into .github/skills/react-typescript/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-typescript", 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 cohen-liel/hivemind --skill react-typescript -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install cohen-liel/hivemind react-typescript --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/cohen-liel/hivemind.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/react-typescript .opencode/skills/react-typescript && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "react-typescript" agent skill from https://github.com/cohen-liel/hivemind/tree/main/.claude/skills/react-typescript into .opencode/skills/react-typescript/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-typescript", 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: react-typescript
GitHub stars: 110
Token cost: ~654 tokens
SKILL.md length: 67 words
Files: 1
Skills in repo: 33
Repo updated: Apr 18, 2026
First seen: Oct 7, 2026
Licence: Apache-2.0

At a glance

React + TypeScript patterns for production frontends. An agent skill from cohen-liel/hivemind.

Building React components
SKILL.md covers Project Structure, Component Pattern, Custom Hook Pattern and State Management (Zustand), plus 2 more sections
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
State management

What it does

React Typescript is an agent skill from cohen-liel/hivemind. React + TypeScript patterns for production frontends. Use when building React components, hooks, state management, forms, routing, or any React/TSX UI.

Its SKILL.md is about 650 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 and State management. It works with React and TypeScript. The repository describes itself as: One prompt. A full AI engineering team. Go lie on the couch. 🧠. The licence is Apache-2.0.

When your agent uses it

Building React components
State management
Any React/TSX UI

Example prompts

“/react-typescript”

What it can do on your machine

Read from SKILL.md and the folder at commit 918dd9b. 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 (its code samples are typescript).
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 Typescript loads about 654 tokens when it runs. Until then it costs about 42 tokens; SKILL.md has 67 words of instructions outside code blocks.

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

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 cohen-liel/hivemind at commit 918dd9b, republished under its Apache-2.0 licence (© cohen-liel). 67 words, ~654 tokens.

Download SKILL.mdSave it as .claude/skills/react-typescript/SKILL.md (or your agent's skills folder).

name: react-typescript
description: React + TypeScript patterns for production frontends. Use when building React components, hooks, state management, forms, routing, or any React/TSX UI.

React + TypeScript Patterns

Project Structure

src/
  components/     # Reusable UI components
  pages/          # Route-level components
  hooks/          # Custom hooks (useAuth, useApi, etc.)
  store/          # Zustand/Redux state
  api/            # API client functions (axios/fetch wrappers)
  types/          # Shared TypeScript types/interfaces
  utils/          # Pure utility functions

Component Pattern

tsx

interface ButtonProps {
  label: string
  onClick: () => void
  variant?: 'primary' | 'secondary' | 'danger'
  disabled?: boolean
  isLoading?: boolean
}

export const Button: React.FC<ButtonProps> = ({
  label, onClick, variant = 'primary', disabled, isLoading
}) => {
  return (
    <button
      onClick={onClick}
      disabled={disabled || isLoading}
      className={`btn btn-${variant}`}
    >
      {isLoading ? <Spinner /> : label}
    </button>
  )
}

Custom Hook Pattern

tsx

function useApi<T>(url: string) {
  const [data, setData] = useState<T | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    const controller = new AbortController()
    fetch(url, { signal: controller.signal })
      .then(r => r.json())
      .then(setData)
      .catch(e => { if (e.name !== 'AbortError') setError(e.message) })
      .finally(() => setLoading(false))
    return () => controller.abort()
  }, [url])

  return { data, loading, error }
}

State Management (Zustand)

tsx

interface AuthStore {
  user: User | null
  token: string | null
  login: (user: User, token: string) => void
  logout: () => void
}

const useAuthStore = create<AuthStore>((set) => ({
  user: null,
  token: null,
  login: (user, token) => set({ user, token }),
  logout: () => set({ user: null, token: null }),
}))

Form Pattern (React Hook Form)

tsx

const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
  resolver: zodResolver(schema)
})

Rules

Always type props explicitly — no any
Use React.FC<Props> for components
Cleanup effects: return cleanup function from useEffect
Memoize expensive computations with useMemo
Memoize callbacks passed to children with useCallback
Split large components: <300 lines per file
Error boundaries around page-level components
Lazy load routes: const Page = React.lazy(() => import('./Page'))

Files

Just SKILL.md in .claude/skills/react-typescript of cohen-liel/hivemind.

Open the folder on GitHubat commit 918dd9b

Compare with similar skills

React Typescript 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 Typescript compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
React Typescript this skillcohen-liel/hivemind	110	—	~654	Automated safety check: Pass	Apache-2.0	5 mo ago
Dify Component Writing Guidelanggenius/dify	158k	—	~626	Automated safety check: Pass	Custom licence	today
Frontend Typescript Rulesshinpr/ai-coding-project-boilerplate	232	—	~1.7k	Automated safety check: Pass	MIT	4 days ago
Dokan Frontend Devgetdokan/dokan	288	—	~1.9k	Automated safety check: Pass	None	today
React ExpertJeffallan/claude-skills	12k	—	~1.4k	Automated safety check: Pass	MIT	4 days ago
Editor Perfgridaco/grida	2.7k	—	~5.3k	Automated safety check: Notes	Apache-2.0	today

Similar skills

Dify Component Writing Guide
langgenius/dify
Use when implementing or refactoring React/TypeScript components and the task requires decisions about component ownership, feature boundaries, state, data…
158k GitHub stars~626 tokensUpdated today
Frontend & DesignAuto-check passed
Frontend Typescript Rules
shinpr/ai-coding-project-boilerplate
Applies React/TypeScript type safety, component design, and state management rules.
232 GitHub stars~1.7k tokensUpdated 4 days ago
Frontend & DesignAuto-check passed
Dokan Frontend Dev
getdokan/dokan
Add or modify Dokan frontend code (React, TypeScript, Vue, Tailwind).
288 GitHub stars~1.9k tokensUpdated today
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
Editor Perf
gridaco/grida
Guides performance investigation, benchmarking, and optimization of the Grida Canvas web editor (TypeScript reducer, Immer, React hooks).
2.7k GitHub stars~5.3k tokensUpdated today
Frontend & DesignAuto-check: notes
React Idioms
irahardianto/awesome-agv
React 19+ patterns: custom hooks, Suspense boundaries, state management, component composition, and web performance.
157 GitHub stars~3.8k tokensUpdated 3 days ago
Frontend & DesignAuto-check passed

Questions about React Typescript

What does React Typescript do?

React + TypeScript patterns for production frontends. An agent skill from cohen-liel/hivemind. React Typescript is an agent skill from cohen-liel/hivemind. React + TypeScript patterns for production frontends.

When should I use React Typescript?

React Typescript fits situations like: building React components; state management; any React/TSX UI.

How do I install React Typescript in Claude Code?

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

How do I install React Typescript in Codex?

Run `npx skills add cohen-liel/hivemind --skill react-typescript -a codex`. Or copy the skill folder (.claude/skills/react-typescript in cohen-liel/hivemind) into .agents/skills/react-typescript in your project. Codex loads it when a task matches its description.

Can I use React Typescript 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 cohen-liel/hivemind --skill react-typescript -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-typescript, .gemini/skills/react-typescript, .github/skills/react-typescript and .opencode/skills/react-typescript in your project.

What does React Typescript need to run?

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

Does React Typescript 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 Typescript 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 Typescript use?

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

About 654 tokens (SKILL.md is roughly 2.6k 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 Typescript?

Skills that share tags, products or a category with React Typescript: Dify Component Writing Guide (langgenius/dify, 158k stars), Frontend Typescript Rules (shinpr/ai-coding-project-boilerplate, 232 stars), Dokan Frontend Dev (getdokan/dokan, 288 stars) and React Expert (Jeffallan/claude-skills, 12k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains React Typescript?

cohen-liel (a GitHub user) maintains it in cohen-liel/hivemind, which has 110 GitHub stars. The repository holds 33 skills in this directory. The repository was last updated on April 18, 2026.

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

React Typescript

Install React Typescript

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

React + TypeScript Patterns

Project Structure

Component Pattern

Custom Hook Pattern

State Management (Zustand)

Form Pattern (React Hook Form)

Rules

Files

Compare with similar skills

Similar skills

Dify Component Writing Guide

Frontend Typescript Rules

Dokan Frontend Dev

React Expert

Editor Perf

React Idioms

More from cohen-liel/hivemind

API Design

Graphql API

Async Python

Celery Tasks

Docker Deployment

E2E Testing

Questions about React Typescript

Install React Typescript

Facts

At a glance

What it does

When your agent uses it

Example prompts

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

React + TypeScript Patterns

Project Structure

Component Pattern

Custom Hook Pattern

State Management (Zustand)

Form Pattern (React Hook Form)

Rules

Files

Compare with similar skills

Similar skills

More from cohen-liel/hivemind

Related

Questions about React Typescript