Threejs

remotion-video-creation은 React 기반 영상 작업을 위한 Remotion 중심 스킬입니다. 애니메이션, 에셋, 오디오, 캡션, 차트, 컴포지션, 전환 등 29개 규칙으로 렌더링 실수를 줄이는 데 도움이 됩니다. Video Editing 워크플로, 템플릿형 설명 영상, 소셜 클립, 데이터 기반 모션 그래픽에 적합합니다.

shader-dev는 ShaderToy 스타일의 실시간 비주얼을 위한 실용적인 GLSL 셰이더 스킬입니다. 이 shader-dev 스킬을 사용하면 레이 마칭, SDF 장면, 조명, 파티클, 유체 모션, 후처리, UI 디자인용 shader-dev까지 일반적인 프롬프트보다 훨씬 적은 시행착오로 만들거나 디버깅할 수 있습니다.

frontend-dev는 세련되고 프로덕션에 바로 올릴 수 있는 웹 페이지를 만드는 프론트엔드 개발 스킬입니다. 프리미엄 UI, 시네마틱 모션, AI 생성 미디어, 설득력 있는 카피, 생성형 아트까지 함께 다뤄 랜딩 페이지, 마케팅 사이트, 제품 페이지, 대시보드 등 디자인·콘텐츠·구현 디테일이 서로 어긋나면 안 되는 프론트엔드 작업에 적합합니다.

remotion-best-practices는 Remotion 설치, 사용법, 규칙 기반 워크플로를 다루는 스킬 가이드로, 애니메이션, 에셋, 오디오, 자막, FFmpeg, calculateMetadata까지 폭넓게 안내합니다.

Frontend Development용 threejs-textures 스킬은 texture loading, UV mapping, colorSpace, wrapping, filtering, environment maps를 다뤄 이미지가 Three.js materials에서 올바르게 렌더링되도록 돕습니다.

threejs-shaders는 GLSL, ShaderMaterial, uniforms, 정점 변형, 프래그먼트 효과를 사용해 Three.js 셰이더를 작성하는 실용 가이드입니다. 작동하는 셰이더 기준점이 필요하거나, 머티리얼 선택을 더 분명히 하고 싶거나, 일반적인 프롬프트보다 덜 헤매고 싶을 때 프런트엔드 개발에 활용하세요.

threejs-materials는 메시 재질을 선택, 설정, 문제 해결하는 데 쓰는 Three.js 재질 스킬입니다. 사실적인 PBR, 조명 없는 플랫 셰이딩, 툰 스타일과 디버그 뷰, 텍스처 기반 스타일링, 커스텀 셰이더에 활용할 수 있습니다. 더 빠르고 일관된 재질 결정을 필요로 하는 프런트엔드 개발팀에 특히 유용합니다.

Frontend Development용 threejs-postprocessing 스킬: EffectComposer 파이프라인, bloom, depth of field, blur, color grading, 그리고 커스텀 screen-space pass를 추가할 수 있습니다. 이 가이드를 사용해 렌더 체인을 설정하고, 효과를 조정하며, 기존 Three.js 씬에 composer 렌더링을 연결하세요.

threejs-loaders는 GLTF/GLB 모델, 텍스처, HDR 환경, 기타 비동기 리소스를 포함한 Three.js 에셋을 올바르게 로드하도록 도와줍니다. 안정적인 로딩, 진행률 처리, 장면 준비 단계의 버그 감소가 필요할 때 Frontend Development용 threejs-loaders 스킬을 사용하세요.

threejs-lighting은 Frontend 개발을 위한 실용적인 Three.js 조명 스킬입니다. 어떤 조명 유형을 선택할지, 그림자를 어떻게 설정할지, 환경 조명을 어떻게 더할지, 그리고 장면이 너무 평면적으로 보이거나, 지나치게 어둡거나, 과노출될 때 어떻게 바로잡을지 도와줍니다. 더 빠르고 일관된 장면 조명이 필요할 때 threejs-lighting 가이드를 활용하세요.

threejs-interaction은 프런트엔드 개발을 위한 실용적인 Three.js 인터랙션 가이드입니다. 레이캐스팅, 오브젝트 피킹, 마우스 및 터치 입력, 카메라 컨트롤을 다루며, 클릭 가능하고 선택 가능하며 반응성 좋은 3D 경험을 더 적은 시행착오로 구현하도록 돕습니다.

threejs-geometry는 실제 장면에 맞는 Three.js geometry를 고르는 데 도움을 줍니다. 내장 도형, BufferGeometry, 커스텀 메시, 인스턴싱까지 다루며, 적절한 생성자와 파라미터 순서, 성능을 고려한 출력을 찾아야 할 때 Frontend Development용 threejs-geometry skill을 사용하세요.

threejs-fundamentals는 프런트엔드 개발자가 Three.js 앱의 핵심 설정—씬, 카메라, 렌더러, 조명, 메시, 변환, 객체 계층—을 만들고 디버깅하는 데 도움을 줍니다. 이 threejs-fundamentals 가이드를 사용하면 빈 캔버스를 고치고, 객체를 올바른 위치에 배치하고, 깔끔한 첫 장면을 완성할 수 있습니다.

Three.js 모션 시스템을 위한 threejs-animation 스킬입니다. 키프레임, 애니메이션 클립, 믹서, 액션, 스켈레탈 재생, 모프 타깃, 절차적 모션을 다룹니다. GLTF 애니메이션 재생, 클립 블렌딩, 예측 부담이 적은 깔끔한 애니메이션 루프 구현이 필요할 때 Frontend Development에 활용하세요.