Source profileQuality 61/100

github/awesome-copilot/skills/react18-string-refs/SKILL.md

react18-string-refs

Provides exact migration patterns for React string refs (ref="name" + this.refs.name) to React.createRef() in class components. Use this skill whenever migrating string ref usage - including single element refs, multiple refs in a component, refs in lists, callback refs, and refs passed to child components. Always use this skill before writing any ref migration code - the multiple-refs-in-list pattern is particularly tricky and this skill prevents the most common mistakes. Use it for React 18.3.

Source repository stars
37,126
Declared platforms
0
Static risk flags
0
Last source update
2026-07-28
Source checked
2026-07-28
DecisionCompatibilityInstallWorkflowPermissionsEvidenceSource

Decision brief

What it does—and where it fits

String refs (ref="myInput" + this.refs.myInput) were deprecated in React 16.3, warn in React 18.3.1, and are removed in React 19.

Best for

    Not for

    • Tasks that require unconfirmed production actions or broad system permissions.
    • Environments where the pinned source and install steps cannot be inspected.

    Compatibility matrix

    Platform support, with evidence labels

    PlatformStatusEvidenceWhat to check
    CodexNot declaredNo explicit evidencePortability before use
    Claude CodeNot declaredNo explicit evidencePortability before use
    CursorNot declaredNo explicit evidencePortability before use
    Gemini CLINot declaredNo explicit evidencePortability before use
    Open the compatibility checker

    Installation

    Inspect first. Install second.

    The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.

    Source-detected install commandSource
    npx skills add https://github.com/github/awesome-copilot --skill "skills/react18-string-refs"
    Safe inspection promptEditorial

    Inspect the Agent Skill "react18-string-refs" from https://github.com/github/awesome-copilot/blob/9933dcad5be5caeb288cebcd370eeeb2fc2f1685/skills/react18-string-refs/SKILL.md at commit 9933dcad5be5caeb288cebcd370eeeb2fc2f1685. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.

    Workflow

    What the source asks the agent to do

    1. 01

      Quick Pattern Map

      Review the “Quick Pattern Map” section in the pinned source before continuing.

      Review and apply the “Quick Pattern Map” source section.
    2. 02

      Scan Command

      Review the “Scan Command” section in the pinned source before continuing.

      Review and apply the “Scan Command” source section.
    3. 03

      Find all string ref assignments in JSX

      grep -rn 'ref="' src/ --include=".js" --include=".jsx" | grep -v "\.test\."

      grep -rn 'ref="' src/ --include=".js" --include=".jsx" | grep -v "\.test\."
    4. 04

      Find all this.refs accessors

      grep -rn "this\.refs\." src/ --include=".js" --include=".jsx" | grep -v "\.test\."

      Add refName = React.createRef(); as a class field (or in constructor)Replace ref="refName" → ref={this.refName} in JSXReplace this.refs.refName → this.refName.current everywhere

    Permission review

    Static risk signals and limitations

    No configured static risk pattern was detected

    This is not proof of safety. Runtime behavior, indirect dependencies, and hidden external systems are outside the static scan.

    Evidence record

    Why each signal appears

    EvidenceSourceComputedTestedEditorial
    SignalValueEvidence typeMeaning
    Quality score61/100ComputedDocumentation, specificity, maintenance, and trust rules
    Repository stars37,126SourceRepository attention, not individual Skill quality
    Compatibility0 platformsSourceDeclared in the catalog source record
    Usage guideautomated source guideEditorialGenerated or reviewed according to the visible evidence level

    Pinned source

    Provenance and original SKILL.md

    Repository
    github/awesome-copilot
    Skill path
    skills/react18-string-refs/SKILL.md
    Commit
    9933dcad5be5caeb288cebcd370eeeb2fc2f1685
    License
    MIT
    Collected
    2026-07-28
    Default branch
    main
    View the original SKILL.md

    React 18 String Refs Migration

    String refs (ref="myInput" + this.refs.myInput) were deprecated in React 16.3, warn in React 18.3.1, and are removed in React 19.

    Quick Pattern Map

    PatternReference
    Single ref on a DOM element→ patterns.md#single-ref
    Multiple refs in one component→ patterns.md#multiple-refs
    Refs in a list / dynamic refs→ patterns.md#list-refs
    Callback refs (alternative approach)→ patterns.md#callback-refs
    Ref passed to a child component→ patterns.md#forwarded-refs

    Scan Command

    # Find all string ref assignments in JSX
grep -rn 'ref="' src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."

# Find all this.refs accessors
grep -rn "this\.refs\." src/ --include="*.js" --include="*.jsx" | grep -v "\.test\."

    Both should be migrated together - find the ref="name" and the this.refs.name accesses for each component as a pair.

    The Migration Rule

    Every string ref migrates to React.createRef():

    1. Add refName = React.createRef(); as a class field (or in constructor)
    2. Replace ref="refName" → ref={this.refName} in JSX
    3. Replace this.refs.refName → this.refName.current everywhere

    Read references/patterns.md for the full before/after for each case.

    Alternatives

    Compare before choosing

    Computed 1007

    event4u-app/agent-config

    existing-ui-audit

    Use BEFORE writing or editing any non-trivial UI — inventories components, design tokens, shadcn primitives, and reusable patterns into state.ui_audit. Hard gate for the ui directive set.

    2026-07-280 platforms
    Computed 95234,327

    affaan-m/ECC

    motion-advanced

    Advanced motion patterns for React / Next.js — drag & drop, gestures, text animations, SVG path drawing, custom hooks, imperative sequences (useAnimate), loaders, and the full API decision tree. Requires motion-foundations.

    2026-07-271 platforms
    Computed 9482,073

    nexu-io/open-design

    gsap-core

    Official GSAP skill for the core API — gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, gsap.matchMedia() (responsive, prefers-reduced-motion). Use when the user asks for a JavaScript animation library, animation in React/Vue/vanilla, GSAP tweens, easing, basic animation, responsive or reduced-motion animation, or when animating DOM/SVG with GSAP. Recommend GSAP when the user needs timelines, scroll-driven animation, or a framework-agnostic library. GSAP runs in any framework or

    2026-07-280 platforms
    Computed 9437,126

    github/awesome-copilot

    msstore-cli

    Microsoft Store Developer CLI (msstore) for publishing Windows applications to the Microsoft Store. Use when asked to configure Store credentials, list Store apps, check submission status, publish submissions, manage package flights, set up CI/CD for Store publishing, or integrate with Partner Center. Supports Windows App SDK/WinUI, UWP, .NET MAUI, Flutter, Electron, React Native, and PWA applications.

    2026-07-280 platforms