Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Get Started Free →

React Component Development — Skill · asymmetric-al | DecimalAI

frontendby asymmetric-al

React Component Development — Skill

asymmetric-al/react-component-dev

Source asymmetric-al/core ↗License AGPL-3.0

Build reusable, accessible React components with predictable APIs and ref forwarding.

SkillScore95Maintained

Automatic

Frontend / UI pack

Last verified 8/20/2026

What it changes

Passed 21 of 22 test cases with the skill, and 17 of 22 without it.

Without skill77%

With skill95%

Checks it passed that the model alone missed

Uses forwardRef on the trigger component.
Applies React.forwardRef to pass through the ref to the root DOM container.
Uses React.forwardRef or forwardRef for components that render DOM elements.

and 2 more in the full report

5 fixed16 passed either way0 still failing1 broke

Pass-rate lift: +18 pp
Tokens: +7%
Agent turns: 0%
Response time: -19%

Model gemini-3.6-flashMeasured 8/20/2026v121 of 22 cases passed with skill

Tokens, turns and time describe resource use, not a dollar price.

Use this skill

Save it into your project's skills folder. Claude Code picks it up in its next session.

curl -fsSL --create-dirs -o .claude/skills/asymmetric-al-react-component-dev/SKILL.md https://app.decimal.ai/s/asymmetric-al-react-component-dev/SKILL.md

Want it pinned and updatable? pip install "decimalai>=0.15", then decimalai skills add asymmetric-al-react-component-dev, and start Claude Code with claude --plugin-dir "$(git rev-parse --show-toplevel)/.agents"

1 · One-time — install the CLI (docs ↗)

pip install "decimalai>=0.15"

2 · Get the skill — writes .agents/skills/asymmetric-al-react-component-dev/ and pins it in .decimal/skills.lock

decimalai skills add asymmetric-al-react-component-dev

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/asymmetric-al-react-component-dev/SKILL.md https://app.decimal.ai/s/asymmetric-al-react-component-dev/SKILL.md

Raw file: /s/asymmetric-al-react-component-dev/SKILL.md ↗ · machine-readable summary at /s/asymmetric-al-react-component-dev.json ↗

Safety checks: 3 of 3 passed

Code scan CleanIntent PassedContent Clean

See it in action

One of 5 test cases the skill fixed. Same model, same prompt, with and without the skill.

1 of 5

Prompt

I need a reusable Accordion component in React with TypeScript for my design system. Can you code the component structure along with a short example showing how to render an accordion item with a title and content block?

What was checked, without and with the skill
Checked	Without skill	With skill
Uses React.forwardRef or forwardRef for components that render DOM elements.	Missed	Passed

case-01 · gemini-3.6-flash · 8/20/2026 · answers are capped and redacted

What's inside

The instructions your model reads when the skill loads.

SKILL.md90 linessingle file

React Component Development — Skill

Name: react-component-dev Purpose: Build reusable, accessible React components with predictable APIs and ref forwarding. Use this skill when creating or refactoring components.

Applies when: Building new components, refactoring UI components, or defining component APIs. Do not use when: Only editing styles or content in existing components without API changes.

Rules

Composition over configuration: Prefer children/slots over many boolean props.
Forward refs: If a component renders a DOM element, use forwardRef.
Accessibility: Use semantic HTML first; add ARIA only when needed.
Predictable props: Follow controlled/uncontrolled conventions.
Small and testable: Extract complex behavior into hooks.

Workflow

Define the component’s responsibility and minimal usage.
Choose the API shape (controlled vs uncontrolled as needed).
Implement with semantic HTML and accessibility defaults.
Add forwardRef for DOM-rendering components.
Extract complex behavior into hooks if needed.

Checklists

Implementation checklist

Review checklist

API is small and composable
Example usage is included

Track record

Benchmark

21 / 22

test cases passed, vs 17 / 22 without

Adoption

Users: 7
Times used: 204

Safety and source details

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

View 15 scanner checks

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

asymmetric-al / core

.agents/skills/react-component-dev/SKILL.md

View on GitHub ↗

License AGPL-3.0Imported 8/3/2026Version v1

Other skills for the same job

Published skills whose descriptions closely match this one, with their headline benchmark lift.

More skills from the same source and nearby in the registry, with their headline benchmark lift.

Ready to supercharge your AI agents?

See it in action

What's inside

React Component Development — Skill

Rules

Workflow

Checklists

Implementation checklist

Review checklist

Track record

Benchmark

Adoption

SkillSafety

Source

Other skills for the same job

Related skills