TOBIASpuchito
Community@TOBIASpuchito
TOBIASpuchito provides frontend engineering skills covering GSAP scroll animation, React/Next.js optimization, TypeScript typing, and the CITEC Astro/Tailwind design system.
Agent Skills by TOBIASpuchito
Showing 21 vetted skills indexed across 1 GitHub repositories.
TOBIASpuchitogsap-scrolltrigger
Implements scroll-linked animations, pinning, and scrubbing with the GSAP ScrollTrigger plugin.
TOBIASpuchitoreact-doctor
Scans React codebases for security, performance, and architecture issues with a health score.
TOBIASpuchitogsap-performance
Optimizes GSAP animations for smooth 60fps rendering using transforms and batching.
TOBIASpuchitogsap-core
Implements GSAP core tweens, eases, staggers, and responsive matchMedia animations in JavaScript.
TOBIASpuchitotypescript-advanced-types
Implements generics, conditional types, mapped types, and template literal types in TypeScript.
TOBIASpuchitovercel-react-best-practices
Applies Vercel performance optimization rules when writing and refactoring React and Next.js code.
TOBIASpuchitotailwind-design-system
Build component libraries and design tokens with Tailwind CSS v4 CSS-first configuration.
TOBIASpuchitogsap-plugins
Implements GSAP plugin registration and usage for scroll, drag, text, SVG, and physics animations.
TOBIASpuchitogsap-timeline
Sequences GSAP tweens into timelines using position parameters, labels, and nesting.
TOBIASpuchitogsap-utils
Applies GSAP utility functions for clamping, mapping, snapping, and transforming animation values.
TOBIASpuchitogsap-frameworks
Implement GSAP animations in Vue, Nuxt, and Svelte with lifecycle-safe cleanup.
TOBIASpuchitogsap-react
Implements GSAP animations in React using the useGSAP hook, scoped refs, and context cleanup.
TOBIASpuchitocitec-brand-manual
Applies CITEC brand palette and typography rules to Astro, React, and Tailwind UI components.
TOBIASpuchitohuman-design-frontend
Reviews and refines Astro, React, and Tailwind UI to avoid generic AI-looking design.
TOBIASpuchitocitec-react-islands
Guides creation and review of hydrated React islands in Astro frontends.
TOBIASpuchitocitec-seo-routing
Implements route metadata, JSON-LD, sitemap, RSS, and manifest SEO for the CITEC Astro frontend.
TOBIASpuchitocitec-tailwind-system
Applies Tailwind tokens and CSS variables to CITEC Astro and React styling.
TOBIASpuchitocitec-typescript-contracts
Enforces strict TypeScript typing for data contracts, Astro props, and integration boundaries.
TOBIASpuchitocitec-astro-routing
Guides creation and review of Astro routes, layouts, and page components for the CITEC frontend.
TOBIASpuchitocitec-bun-quality
Runs Bun-based validation, build, and QA commands for the CITEC frontend.
TOBIASpuchitocitec-motion-system
Implements scroll animations and reveal motion with GSAP, ScrollTrigger, and Lenis in Astro and React.
Frequently Asked Questions About TOBIASpuchito
FAQPage SchemaWhat tasks can I accomplish with TOBIASpuchito's skills?▼
You can build GSAP scroll-driven animations, timelines, and plugin-based effects; optimize animation performance to 60fps; apply Vercel React/Next.js best practices; write advanced TypeScript types; and maintain the CITEC Astro frontend covering routing, SEO, Tailwind styling, React islands, and Bun quality checks.
Who should use these frontend skills?▼
Frontend engineers working with GSAP animation in React, Vue, Svelte, or vanilla JavaScript, plus developers maintaining the CITEC Astro site. React developers benefit from react-doctor diagnostics and Vercel performance guidelines, while TypeScript users gain advanced generics and conditional type patterns.
How do the GSAP skills work in practice?▼
The GSAP skills cover the core tween API, timelines, ScrollTrigger pinning and scrub, plugins like Flip and Draggable, framework integration via useGSAP in React or lifecycle hooks in Vue/Svelte, plus performance guidance on transforms, will-change, and avoiding layout thrashing for smooth 60fps motion.
Are these skills free and open source?▼
Yes. All GSAP skills and vercel-react-best-practices carry MIT licenses, permitting free use and modification. The remaining skills, including react-doctor, typescript-advanced-types, tailwind-design-system, and the CITEC frontend set, list no license restrictions in their manifests.
What prerequisites do the CITEC skills require?▼
The CITEC skills assume an Astro project using React islands with hydration directives, Tailwind CSS with design tokens, strict TypeScript contracts, Bun for commands and validation, and GSAP with ScrollTrigger and Lenis for motion. They apply when editing or reviewing CITEC frontend code.