brunoo_lf
Community@brunoolf · São Paulo, SP, Brazil
A frontend craft skill registry covering UI design systems, GSAP animation, Three.js/WebGL 3D, responsive layouts, and design-to-code implementation for React/Next interfaces.
Agent Skills by brunoo_lf
Showing 40 vetted skills indexed across 1 GitHub repositories.
brunoolfpick-ui-library
Recommends curated frontend libraries for UI, animation, charts, state, and styling tasks.
brunoolfresponsive
Design responsive layouts using intrinsic CSS, container queries, and fluid typography.
brunoolfrefine-verbs
Applies fifteen scoped interface refinement verbs to UI surfaces without altering out-of-scope elements.
brunoolfthreejs-shaders
Write custom GLSL shaders for Three.js ShaderMaterial and extend built-in materials.
brunoolfthreejs-lighting
Configures Three.js lights, shadows, and image-based environment lighting for 3D scenes.
brunoolfthreejs-geometry
Creates Three.js geometries including built-in shapes, custom BufferGeometry, and instanced meshes.
brunoolfthreejs-interaction
Implements Three.js raycasting, camera controls, and mouse/touch input for interactive 3D scenes.
brunoolfdesign-dna
Extract design tokens, style attributes, and visual effects from references into structured JSON profiles.
brunoolfthreejs-postprocessing
Implements Three.js post-processing effects using EffectComposer, bloom, DOF, and custom screen-space shaders.
brunoolffrontend-craft
Routes frontend design requests to seven specialized agents using a dispatch table.
brunoolfgsap-plugins
Implements GSAP plugin registration and usage for scroll, drag, text, SVG, and physics animations.
brunoolfgsap-timeline
Sequences and choreographs GSAP animations using timelines, labels, and the position parameter.
brunoolfgsap-scrolltrigger
Implements scroll-linked animations, pinning, and scrubbing with the GSAP ScrollTrigger plugin.
brunoolfgsap-performance
Optimizes GSAP animations for 60fps by preferring transforms, batching updates, and reducing layout thrashing.
brunoolfscroll-experiences
Compose scroll-driven experiences with fixed background scenes, pinned sections, and WebGL fallbacks.
brunoolfgsap-core
Implements GSAP core tweens, eases, staggers, and matchMedia for DOM and SVG animation.
brunoolfsurface-modes
Classifies UI surfaces into four modes that define success criteria before design decisions.
brunoolfgsap-utils
Applies GSAP utility functions for clamping, mapping, snapping, and randomizing animation values.
brunoolfmotion-web
Implements web motion using modern CSS and Motion/Framer Motion without GSAP.
brunoolfthreejs-loaders
Loads GLTF models, textures, and HDR environments in Three.js applications.
brunoolfaudit-method
Audits web interfaces for WCAG 2.2 accessibility, performance, and responsive defects with measured evidence.
brunoolfthreejs-animation
Implements Three.js keyframe, skeletal, morph target, and blended animation systems.
brunoolfimagegen-frontend-web
Generates per-section horizontal website design reference images with consistent art direction.
brunoolfmotion-principles
Defines motion design principles for UI animation timing, easing, and reduced-motion handling.
Frequently Asked Questions About brunoo_lf
FAQPage SchemaWhat tasks can I accomplish with brunoo_lf's skill collection?▼
You can design and refine web interfaces, build GSAP timeline and ScrollTrigger animations, create Three.js scenes with custom GLSL shaders, extract design tokens from references, convert mockups to React/Next code, generate brand kits and presentation slides, and audit UI for accessibility, performance, and motion quality.
Who are these skills designed for?▼
Frontend engineers, UI/UX designers, and creative developers building landing pages, dashboards, portfolios, and interactive 3D web experiences. They suit anyone implementing interfaces in React, Next.js, Tailwind, shadcn, or Astro who needs opinionated guidance on typography, color, motion, and responsive layout.
How do the GSAP and Three.js skills work in practice?▼
Each skill loads scoped reference guidance when invoked: GSAP skills cover tweens, timelines, ScrollTrigger pinning, plugins, React useGSAP integration, and 60fps performance patterns. Three.js skills cover scene setup, geometry, materials, textures, lighting, loaders, animation, post-processing, and raycasting interactions.
Are these skills free and open-source?▼
The official GSAP skills (core, timeline, ScrollTrigger, plugins, React, utils, performance) carry an explicit MIT license. Other skills in the manifest do not declare a license in their frontmatter, so licensing for those should be confirmed directly in the repository before redistribution.
What prerequisites or dependencies do these skills require?▼
Skills are invoked within a compatible skill-running environment and assume a modern web stack: React or Next.js for implementation work, GSAP for animation tasks, Three.js for 3D/WebGL scenes, and Tailwind, shadcn, or Astro for the referenced stack guides. No additional installation steps are specified in the manifest.