メニュー
Reglas estrictas de rendimiento y arquitectura para animar React con GSAP 3 en el proyecto Math Got Motion.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/sazardev/math-got-motion --skill math-motion-gsapコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Zod schema validation best practices for type safety, parsing, and error handling. This skill should be used when defining z.object schemas, using z.string validations, safeParse, or z.infer. This skill does NOT cover React Hook Form integration patterns (use react-hook-form skill) or OpenAPI client generation (use orval skill).
Add a new mathematical formula/theorem to Math Got Motion. Use when asked to "add a formula", "add a theorem", "add [name] to the app", or when creating/editing files under src/domain/formulas/*.yaml.
SOC 職業分類に基づく
SKILL.md を表示中
| name | math-motion-gsap |
| description | Reglas estrictas de rendimiento y arquitectura para animar React con GSAP 3 en el proyecto Math Got Motion. |
Cuando escribas código de animación para este proyecto, debes seguir estrictamente estas reglas para garantizar 60 fps fluidos en Tauri/Móvil.
@gsap/react (useGSAP) para todas las animaciones.useEffect plano para instanciar timelines de GSAP.scope (referencia de React) al hook useGSAP para aislar los selectores al componente actual.x, y, scale, rotation y opacity.width, height, top, left, margin, padding.display: inline-block o position: absolute para que GSAP pueda transformarlos sin afectar el flujo del documento.useGSAP maneja el cleanup automáticamente, pero si creas instancias de ScrollTrigger fuera de este scope, DEBES matarlas (.kill()) cuando el componente se desmonte.elastic.out(1, 0.75)) para el efecto "bounce" de las letras.stagger de GSAP en lugar de múltiples animaciones separadas cuando animes la aparición de los textos explicativos.