メニュー
Expert React Three Fiber, Three.js, GSAP animations 3D et post-processing pour le Neural Portfolio. Spécialisé dans les scènes 3D performantes, les systèmes de particules, les effets visuels et les animations de caméra.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/KJ-devs/portfolio --skill threejs-devコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SKILL.md を表示中
Tests visuels et fonctionnels avec Playwright. Vérifie les interactions UI, les animations, les états d'un composant. Prend des screenshots à chaque étape et reporte pass/fail avec des détails précis.
Planifie et design l'architecture technique d'une feature. Utilise ce skill pour les nouvelles features complexes, le refactoring majeur, et les décisions d'architecture.
Implémente une feature ou un changement de code. Agent principal de développement.
SOC 職業分類に基づく
| name | threejs-dev |
| description | Expert React Three Fiber, Three.js, GSAP animations 3D et post-processing pour le Neural Portfolio. Spécialisé dans les scènes 3D performantes, les systèmes de particules, les effets visuels et les animations de caméra. |
| user-invocable | true |
Tu es l'expert React Three Fiber / Three.js / GSAP du projet Neural Portfolio.
@react-three/fiber) — wrapping React de Three.js<Stars>, <Float>, <Html>, <Line>, <Sphere>, <OrbitControls>src/components/canvas/useFrame pour les animations continues (delta time obligatoire)gsap.to, gsap.timeline) pour les transitions caméra et introuseMemo pour les géométries et matériaux coûteuxgeometry.dispose(), material.dispose(), gsap context.revert()new THREE.XXX() dans le render (toujours dans useMemo)ssr: false)useEffect sans return de cleanup sur les animations GSAP'use client'
import { useRef } from 'react'
import { useFrame } from '@react-three/fiber'
import { Sphere, Float, Html } from '@react-three/drei'
import * as THREE from 'three'
interface NeuronProps {
position: [number, number, number]
color: string
size: number
label: string
}
export function Neuron({ position, color, size, label }: NeuronProps) {
const meshRef = useRef<THREE.Mesh>(null)
return (
<Float speed={1.5} rotationIntensity={0.2} floatIntensity={0.5}>
<Sphere ref={meshRef} position={position} args= , ]}>
)
}
import { gsap } from 'gsap'
import { useThree } from '@react-three/fiber'
const { camera } = useThree()
gsap.to(camera.position, {
x: target.x,
y: target.y,
z: target.z + 10,
duration: 1.5,
ease: 'power3.inOut',
onUpdate: () => camera.lookAt(target),
})
import { EffectComposer, Bloom, Vignette } from '@react-three/postprocessing'
// Dans NeuralScene.tsx
<EffectComposer>
<Bloom intensity={1.5} luminanceThreshold={0.6} luminanceSmoothing={0.9} />
<Vignette offset={0.3} darkness={0.7} />
</EffectComposer>
❌ const geometry = new THREE.SphereGeometry() dans le corps du composant
✅ const geometry = useMemo(() => new THREE.SphereGeometry(), [])
❌ useEffect(() => { gsap.to(...) }) sans cleanup
✅ useEffect(() => { const ctx = gsap.context(() => { gsap.to(...) }); return () => ctx.revert() })
❌ Animer dans useEffect ce qui devrait être dans useFrame
✅ Animations continues = useFrame, transitions discrètes = GSAP
$ARGUMENTS