⚛️
FrontendPython

Programming in React

by ed3dai

Programming in React is a Frontend skill for Claude Code, published by ed3dai in ed3d-plugins.

248 stars32 forkson ed3dai/ed3d-pluginsAdded 2026/09/02Repository updated 2026/06/16
View source on GitHubDownload repo ZIP
claudeclaude-codeclaude-code-pluginclaude-code-plugin-marketplaceskills
Install in seconds
Install Programming in React
Copy Programming in React into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.
terminal
npx degit https://github.com/ed3dai/ed3d-plugins/tree/main/plugins/ed3d-house-style/skills/programming-in-react ~/.claude/skills/programming-in-react

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/ed3dai/ed3d-plugins.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file
plugins/ed3d-house-style/skills/programming-in-react/SKILL.md in ed3dai/ed3d-plugins
Installs to
~/.claude/skills/programming-in-react
Collection
One of 25 skills cataloged from this repository
Category
Frontend — 600 skills

What Programming in React does

Programming in React guides modern React component work with TypeScript, hooks, composition, and common pitfalls. Use it when creating or modifying .jsx/.tsx files, planning React features, or debugging React-specific issues.

Programming in React is cataloged under Frontend on DirSkills. Programming in React comes from a repository tagged claude, claude-code, claude-code-plugin, claude-code-plugin-marketplace and skills.

Documentation

README

Programming in React

Overview

Modern React development using functional components, hooks, and TypeScript. This skill guides you through React workflows from component creation to testing.

Core principle: Components are functions that return UI. State and effects are managed through hooks. Composition over inheritance always.

REQUIRED SUB-SKILL: Use ed3d-house-style:howto-code-in-typescript for general TypeScript patterns. This skill covers React-specific TypeScript usage only.

When to Use

  • Creating or modifying React components
  • Working with React hooks (useState, useEffect, custom hooks)
  • Planning React features or UI work
  • Debugging React-specific issues (hooks errors, render problems)
  • When you see .jsx or .tsx files

Workflow: Creating Components

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Programming in React

  • What else does ed3dai publish alongside Programming in React?

    Programming in React is one of 25 skills that DirSkills catalogs from ed3dai/ed3d-plugins, the repository it ships in. Its siblings there include Asking Clarifying Questions, Brainstorming and Coding Effectively. Each one is a separate skill with its own page in this directory, installs the same way Programming in React does, and is maintained by ed3dai in that same repository. The rest of the collection is listed on the ed3dai/ed3d-plugins page.

  • How does Programming in React compare to other Frontend skills?

    Programming in React ranks #550 by stars among the 600 Frontend skills in this catalog. The most-starred ones next to it are Angular Developer, Android Clean Architecture and Accessibility. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Programming in React against them. Open each page to compare what they document and how they install.

More from ed3dai/ed3d-plugins

Programming in React is one of 25 skills cataloged on DirSkills from ed3dai/ed3d-plugins.

See all 25 skills →
❓
1h ago

Asking Clarifying Questions

Asking Clarifying Questions helps narrow ambiguous requirements before brainstorming by resolving contradictions, defining scope, and checking assumptions. Use it after initial context is gathered to avoid designing the wrong solution.
AI Engineering
24832
💡
1h ago

Brainstorming

Brainstorming turns rough ideas into structured designs through guided questions, alternatives, and stepwise validation. Use it before implementation or planning to clarify goals, constraints, and approach.
AI Engineering
24832
🛠️
1h ago

Coding Effectively

Coding Effectively guides writing and refactoring code with correctness, explicit error handling, property-driven design, and clear module organization. Use it when implementing features, reviewing code, or choosing patterns across languages and runtimes.
Quality
24832
🧩
1h ago

Creating A Plugin

Creating A Plugin explains how to structure a Claude Code plugin and write its manifest. Use it when packaging commands, agents, skills, hooks, or MCP servers for reuse across projects.
AI Engineering
24832
🤖
1h ago

Creating an Agent

Creating an Agent explains how to design specialized subagents for Claude Code plugins or the Task tool. It covers trigger descriptions, tool limits, prompt structure, and testing agents.
AI Engineering
24832
🛡️
1h ago

Defense In Depth

Defense In Depth validates data at every layer it passes through so invalid values are caught by entry, business, environment, and debug checks. Use it when bad input causes failures deep in execution or tests bypass earlier validation.
Quality
24832

More Frontend skills

Programming in React is one of 600 Frontend skills cataloged on DirSkills, ranked #550 by stars among them.

Browse all Frontend skills →
🅰️
3w ago

Angular Developer

Angular Developer generates Angular code and provides architectural guidance for Angular projects. Use it for creating projects, components, or services, or for best practices on reactivity, forms, DI, routing, SSR, accessibility, animations, styling, testing, and CLI tooling.
Frontend
239.8K36.4K
🏗️
3w ago

Android Clean Architecture

Android Clean Architecture provides patterns for structuring Android and Kotlin Multiplatform projects, covering module boundaries, UseCases, Repositories, and data layer with Room, SQLDelight, and Ktor. Use it when setting up layered architecture in Android or KMP projects.
Frontend
239.8K36.4K
♿
3w ago

Accessibility

Accessibility helps design, implement, and audit inclusive digital products using WCAG 2.2 Level AA standards for keyboard, contrast, and screen-reader support. Use it when building or auditing UI that must meet WCAG 2.2 Level AA or reviewing changes for accessibility.
Frontend
239.8K36.4K