스킬 react-three-fiber

📦

react-three-fiber

Name: react-three-fiber
Author: shreyam1008

콘텐츠 리비전 r1 안전 ⚙️ 외부 명령어

Build and Optimize React Three Fiber Scenes

React Three Fiber scenes can waste CPU and GPU resources through inefficient animation, loading, and rendering. This skill guides implementation choices for frame loops, instancing, assets, and adaptive quality.

지원: Claude Codex Code(CC)

🥉 78 브론즈

Maintain this Skill? Claim it 🥉 78 브론즈

내 에이전트로 설치

이 요청을 에이전트에 복사하세요. 공식 Skill 페이지와 매니페스트가 포함되어 있습니다.

에이전트 요청

Review the Skillstore skill "react-three-fiber" from https://skillstore.io/skills/shreyam1008-react-three-fiber.md and its manifest at https://skillstore.io/api/skills/shreyam1008-react-three-fiber/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

에이전트는 계속해서 계획을 표시하고 보안 정책에서 요구하는 확인을 요청해야 합니다.

에이전트가 읽기 쉬운 리소스

AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.

Markdown 상세 GET /skills/shreyam1008-react-three-fiber.md 서명된 manifest GET /api/skills/shreyam1008-react-three-fiber/manifest 서명된 lockfile GET /api/skills/shreyam1008-react-three-fiber/lockfile

테스트해 보기

"react-three-fiber" 사용 중입니다. Review a React Three Fiber viewer that keeps rendering while idle.

예상 결과:

Recommend demand rendering for the idle viewer.
Identify imperative changes that require frame invalidation.
Keep rendering active during animation and measure behavior on target devices.

"react-three-fiber" 사용 중입니다. Review a scene with many repeated meshes and high draw-call counts.

예상 결과:

Recommend sharing geometry and materials across repeated meshes.
Compare drei Instances with raw InstancedMesh for the expected object count.
Measure draw calls and CPU overhead before accepting the optimization.

"react-three-fiber" 사용 중입니다. Review inconsistent motion and repeated allocations in an animation loop.

예상 결과:

Recommend delta-based rotation and smoothing.
Move reusable temporary objects outside the frame loop.
Avoid routing continuous animation through React state updates.

보안 감사

안전

v1 • 2026. 10. 2. 버전별 보고서 열기

All 32 static findings are false positives caused by Markdown code fences and inline code formatting in SKILL.md. The examples describe browser rendering and React APIs, not Ruby or shell command execution. No evidence found of prompt injection, credential access, data exfiltration, or unauthorized commands.

스캔된 파일

102

분석된 줄 수

검토 항목

오탐 무시됨

가장 최근에 완료된 정적·의미론적 감사에서 확인된 보안 발견 사항이 감지되지 않았습니다. 이는 스킬에 부작용이 없음을 증명하지 않습니다.

감사자: codex

이 보고서 공유 및 인용

버전이 지정된 평가 보고서, 중립 배지, 임베드 카드 및 인용을 공유하세요. Skillstore는 근거를 보고하지만 이 Skill의 안전 여부를 판단하지 않습니다.

버전별 보고서 열기

보고서 링크 복사

https://skillstore.io/skills/shreyam1008-react-three-fiber/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown 배지

[![Skillstore security assessment](https://skillstore.io/badges/skills/shreyam1008-react-three-fiber/security.svg)](https://skillstore.io/skills/shreyam1008-react-three-fiber?utm_source=security_passport_badge)

HTML 배지

<a href="https://skillstore.io/skills/shreyam1008-react-three-fiber?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/shreyam1008-react-three-fiber/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

임베드 카드

<iframe src="https://skillstore.io/embed/skills/shreyam1008-react-three-fiber.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

학술 인용 (APA · BibTeX · CFF)

APA 인용

shreyam1008. (2026). react-three-fiber security audit report (audit version 1) [Author version unspecified]. Skillstore. https://skillstore.io/skills/shreyam1008-react-three-fiber/audits/1

BibTeX 인용

@techreport{shreyam1008-shreyam1008-react-three-fiber-2026,
  author = {shreyam1008},
  title = {react-three-fiber security audit report (audit version 1)},
  institution = {Skillstore},
  year = {2026},
  number = {1},
  url = {https://skillstore.io/skills/shreyam1008-react-three-fiber/audits/1},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "react-three-fiber security audit report (audit version 1)"
version: "unspecified"
type: report
authors:
  - name: "shreyam1008"
date-released: "2026-10-02"
url: "https://skillstore.io/skills/shreyam1008-react-three-fiber/audits/1"
identifiers:
  - type: other
    value: "skillstore:shreyam1008-react-three-fiber:audit:1"
    description: "Skillstore immutable audit report identifier"

Skillstore 점수

이 점수의 이유 증거 신뢰도: 중간

아키텍처

유지보수성

콘텐츠

커뮤니티

사양 준수

만들 수 있는 것

Create a Product Viewer

Configure demand rendering, cached model loading, and progressive loading for a product viewer that becomes idle.

Optimize Repeated Scene Objects

Compare shared resources, drei instancing, and raw InstancedMesh updates for scenes with many repeated objects.

Review Rendering Bottlenecks

Inspect frame-loop allocations, draw calls, lighting, and adaptive quality choices before selecting performance changes.

이 프롬프트를 사용해 보세요

Set Up a Basic Viewer

Help me configure a React Three Fiber product viewer using drei. Recommend Canvas settings and explain when demand rendering needs invalidation.

Improve Mesh Animation

Review this React Three Fiber animation: [component]. Replace per-frame state updates and repeated allocations with delta-based mutation and reusable objects.

Plan Asset Loading

Review my React Three Fiber model-loading flow: [details]. Recommend caching, preloading, compression, and Suspense boundaries compatible with my installed versions.

Evaluate Scene Performance

Analyze this React Three Fiber scene: [scene and measurements]. Compare instancing, raw InstancedMesh, adaptive quality, lighting changes, and cleanup.

모범 사례

Profile React work, draw calls, allocations, and GPU costs before selecting an optimization.
Check React, React Three Fiber, drei, and Three.js versions and peer dependencies together.
Choose the frame loop deliberately and dispose resources created imperatively.

피하기

Updating React state or allocating temporary objects on every animation frame.
Using demand rendering without invalidation for imperative changes or ongoing animation.
Applying universal draw-call limits or quality settings without measuring target devices.

자주 묻는 질문

What does this skill cover?

It guides React Three Fiber and drei scene setup, animation, loading, instancing, adaptive quality, profiling, and cleanup.

Which AI tools are supported?

The marketplace lists support for Claude, Codex, and Claude Code.

Does the skill run benchmarks automatically?

No. It recommends profiling methods and metrics, but includes no benchmark scripts or automated measurements.

When should I use demand rendering?

Use it for scenes that become idle. Imperative mutations require invalidation, and ongoing animation needs repeated invalidation or a continuous loop.

Does instancing always solve performance problems?

No. Instancing can reduce draw calls, but React-backed instances still incur CPU costs. Measure alternatives for large populations.

Can I use this skill for any Three.js project?

Its focus is React Three Fiber and drei. It is not intended for every plain Three.js or general 3D task.

개발자 세부 정보

작성자

shreyam1008

라이선스

MIT

Skillstore 리비전

버전 안내

작성자가 버전을 선언하지 않았습니다.

리포지토리

https://github.com/shreyam1008/shre-skills/tree/ba9787f41c2fe1be1062eeb6322bc339a1026383/skills/react-three-fiber

참조

bbec03cf10354f3aaccd6dd24eda4ac9ceeceac5

유지보수 최신성

2026. 10. 2.

사용량

0 다운로드 · 0 조회

파일 구조

📄 SKILL.md

react-three-fiber

내 에이전트로 설치

에이전트가 읽기 쉬운 리소스

테스트해 보기

보안 감사

위험 요인

보고서 링크 복사

Markdown 배지

HTML 배지

임베드 카드

APA 인용

BibTeX 인용

CITATION.cff

Skillstore 점수

만들 수 있는 것

Create a Product Viewer

Optimize Repeated Scene Objects

Review Rendering Bottlenecks

이 프롬프트를 사용해 보세요

모범 사례

피하기

자주 묻는 질문

개발자 세부 정보