Skip to content
cccskills
FreePublished on GitHub

zt-three-react

React Three Fiber architecture: production-level Canvas mount, component lifecycle, useFrame. Use when implementing, reviewing or testing react three fiber architecture for React, Vite, Next.js or Perfect_AI projects.

The English summary is being prepared. Showing the original description.

See how to install

Files included (1)

  • SKILL.md2.0 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

React Three Fiber architecture

When to activate

Use on tasks involving Canvas mount, component lifecycle, useFrame. For unrelated backend tasks do not load this skill.

Implementation sequence

  1. Choose perspective or orthographic camera, scene graph, model coordinate scale and render target.
  2. Allocate geometry and materials outside render loop; use indexed/instanced buffers when repeated objects.
  3. Constrain frame rendering to actual need, remove handlers and dispose GPU resources.
  4. Integrate screen-space text as DOM accessible overlay and provide WebGL failure fallback.
  5. Verify 320/375/768/1440, low end DPR=1 and interaction at 30/60FPS.

Task-specific requirements

  • Scope: Canvas mount, component lifecycle, useFrame. Design the full execution path, not a screenshot placeholder.
  • Identify dependency version and actual supported API signature; avoid inventing APIs.
  • Use original code, or install licensed upstream through its maintained tool if the user wants upstream code.
  • Choose measurable states, error handling, accessibility and performance budgets.

Implementation starter

Implementation notes: Model Canvas mount, component lifecycle, useFrame as explicit states, define input/output props and independent cleanup. Read master reference(s) below before writing code.

Evidence / acceptance

  • Renderer disposes; fallback provides content; no runaway GPU usage; no clipped subject at narrow widths.
  • Test common, edge, interrupted, accessibility and responsive states; provide concrete artifacts/evidence.

Deep references

  • ../perfect-ai-master/references/02-threejs-3d.md
  • ../perfect-ai-master/references/13-threejs-animation-atlas.md
  • ../perfect-ai-master/references/17-threejs-production-guide.md

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Build, audit, and refactor premium Persian/English responsive websites and interactive 3D experiences with Anime.js v4, Three.js, motion choreography, color theory, RTL design systems, accessible UI/UX and VibeFarsi registry. Use for website design, animations, motion, landing pages, 3D/WebGL, responsive interfaces, visual quality, or Perfect_AI projects in Codex.

The English summary is being prepared. Showing the original description.

Realjustawall/Perfect-AI6Updated Oct 10, 2026

Accessibility automation: production-level axe audits and manual keyboard checks. Use when implementing, reviewing or testing accessibility automation for React, Vite, Next.js or Perfect_AI projects.

The English summary is being prepared. Showing the original description.

Realjustawall/Perfect-AI6Updated Oct 10, 2026

قواعد پروژه assistant for Codex; apply when building Persian/RTL web products, localizing content or integrating the related Iranian workflow. Local independent adaptation inspired by publicly documented VibeFarsi topics.

The English summary is being prepared. Showing the original description.

Realjustawall/Perfect-AI6Updated Oct 10, 2026

Easing mathematics: production-level cubic bezier, damped spring, velocity continuity. Use when implementing, reviewing or testing easing mathematics for React, Vite, Next.js or Perfect_AI projects.

The English summary is being prepared. Showing the original description.

Realjustawall/Perfect-AI6Updated Oct 10, 2026

Anime.js v4 core animations: production-level target selection, property keyframes, duration, ease, loop, play/pause. Use when implementing, reviewing or testing anime.js v4 core animations for React, Vite, Next.js or Perfect_AI projects.

The English summary is being prepared. Showing the original description.

Realjustawall/Perfect-AI6Updated Oct 10, 2026

Layout changes: production-level FLIP layout, additive composition, measurement. Use when implementing, reviewing or testing layout changes for React, Vite, Next.js or Perfect_AI projects.

The English summary is being prepared. Showing the original description.

Realjustawall/Perfect-AI6Updated Oct 10, 2026

See all skills by Realjustawall

Report a problem with this skill