本文へ移動
cccskills
無料GitHub で公開

zt-three-shader

GLSL shader systems: production-level uniforms, color space, derivatives, precision. Use when implementing, reviewing or testing glsl shader systems for React, Vite, Next.js or Perfect_AI projects.

インストール方法を見る

含まれるファイル(1)

  • SKILL.md2.0 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

GLSL shader systems

When to activate

Use on tasks involving uniforms, color space, derivatives, precision. 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: uniforms, color space, derivatives, precision. 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 uniforms, color space, derivatives, precision 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

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

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.

日本語の概要は準備中です。原文の説明を表示しています。

Realjustawall/Perfect-AI42026年10月10日 更新

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.

日本語の概要は準備中です。原文の説明を表示しています。

Realjustawall/Perfect-AI42026年10月10日 更新

قواعد پروژه 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.

日本語の概要は準備中です。原文の説明を表示しています。

Realjustawall/Perfect-AI42026年10月10日 更新

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.

日本語の概要は準備中です。原文の説明を表示しています。

Realjustawall/Perfect-AI42026年10月10日 更新

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.

日本語の概要は準備中です。原文の説明を表示しています。

Realjustawall/Perfect-AI42026年10月10日 更新

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.

日本語の概要は準備中です。原文の説明を表示しています。

Realjustawall/Perfect-AI42026年10月10日 更新

Realjustawall のスキルをすべて見る

このスキルの問題を報告する