Skip to content
SkillsBundleby SANTACONCHA
ES EN
All collections

THE COLLECTION / AI for Creatividad Web

Methods for AI for Creatividad Web.

Explore the methods in this collection, see what each skill covers and choose where to start.

Explore the 21 skills Get the pack
21 skills in this collectionOriginal methods and associated resourcesFree download with an account

WHAT IS INSIDE

The methods.
One by one.

Open a skill to see what it covers. Its individual page explains the method and the available download formats.

A pack is a collection of skills. A practice example helps you apply a method; it does not replace the skills themselves. Some tasks require external tools, access and your review.

21 skills in this collection

3d-web-experienceYou bring the third dimension to the web. You know when 3D enhances and when it's just showing off. You balance visual impact with performance. You make 3D accessible to users who've never touched a 3D app. You create moments of wonder without sacrificing usability.

A method included in the original pack

Tools and access
Using this method may require compatible tools, a connected account and authorisation. The skill does not provide those integrations or carry out external actions by itself.

skills/transversal/ag-3d-web-experience/SKILL.md

Read the skill and download options
canvas-designThese are instructions for creating design philosophies - aesthetic movements that are then EXPRESSED VISUALLY. Output only .md files, .pdf files, and .png files.

A method included in the original pack

skills/transversal/ag-canvas-design/SKILL.md

Read the skill and download options
Design System LoaderApply real, production-tested design systems from the VoltAgent awesome-design-md collection to any web project. This skill reads DESIGN.md files from the knowledge base and generates matching CSS variables, GSAP animations, and component…

A method included in the original pack

Tools and access
Using this method may require compatible tools, a connected account and authorisation. The skill does not provide those integrations or carry out external actions by itself.

skills/verticals/web-creative/skills/design-system-loader/SKILL.md

Read the skill and download options
figma-context-mcpImplementa disenos desde Figma: extrae layout information para AI coding agents. Sincroniza diseño y codigo.

A method included in the original pack

Tools and access
Using this method may require compatible tools, a connected account and authorisation. The skill does not provide those integrations or carry out external actions by itself.

skills/verticals/web-creative/skills/figma-context-mcp/SKILL.md

Read the skill and download options
frontend-slidesCreate stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files.

A method included in the original pack

Tools and access
Using this method may require compatible tools, a connected account and authorisation. The skill does not provide those integrations or carry out external actions by itself.

skills/transversal/ag-frontend-slides/SKILL.md

Read the skill and download options
generative-media-agentAgente multimodal de generación de medios: imagen, video, audio y edición via muapi-cli. 19 herramientas integradas via MCP server para Claude Code, Cursor y agentes compatibles. Requiere API key de muapi.ai.

A method included in the original pack

Tools and access
Using this method may require compatible tools, a connected account and authorisation. The skill does not provide those integrations or carry out external actions by itself.

skills/verticals/web-creative/skills/generative-media-agent/SKILL.md

Read the skill and download options
google-slides-automationLightweight Google Slides integration with standalone OAuth authentication. No MCP server required. Full read/write access.

A method included in the original pack

Tools and access
Using this method may require compatible tools, a connected account and authorisation. The skill does not provide those integrations or carry out external actions by itself.

skills/transversal/ag-google-slides-automation/SKILL.md

Read the skill and download options
gsap-coreSkill oficial de GSAP Core: gsap.to(), from(), fromTo(), easing, duration, stagger, defaults y matchMedia. Sintaxis y mejores practicas.

A method included in the original pack

skills/verticals/web-creative/skills/gsap-core/SKILL.md

Read the skill and download options
gsap-frameworksSkill oficial de GSAP para Vue, Svelte y otros frameworks: lifecycle, scoping selectors, cleanup on unmount.

A method included in the original pack

Tools and access
Using this method may require compatible tools, a connected account and authorisation. The skill does not provide those integrations or carry out external actions by itself.

skills/verticals/web-creative/skills/gsap-frameworks/SKILL.md

Read the skill and download options
gsap-performanceDiagnostica y optimiza el rendimiento de animaciones GSAP en webs. Detecta jank, memory leaks, layout thrashing y bottlenecks de rendering. Incluye scroll performance, will-change y GPU compositing.

A method included in the original pack

skills/verticals/web-creative/skills/gsap-performance/SKILL.md

Read the skill and download options
gsap-pluginsSkill oficial de plugins GSAP: ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer. Extiende GSAP con funciones especializadas.

A method included in the original pack

Tools and access
Using this method may require compatible tools, a connected account and authorisation. The skill does not provide those integrations or carry out external actions by itself.

skills/verticals/web-creative/skills/gsap-plugins/SKILL.md

Read the skill and download options
gsap-reactSkill oficial de GSAP para React: useGSAP hook, refs, gsap.context(), cleanup. Anima componentes React correctamente.

A method included in the original pack

Tools and access
Using this method may require compatible tools, a connected account and authorisation. The skill does not provide those integrations or carry out external actions by itself.

skills/verticals/web-creative/skills/gsap-react/SKILL.md

Read the skill and download options
gsap-scrolltriggerSkill oficial de ScrollTrigger: animaciones linked a scroll, pinning, scrub, markers. Crea efectos de scroll fascinantes.

A method included in the original pack

Tools and access
Using this method may require compatible tools, a connected account and authorisation. The skill does not provide those integrations or carry out external actions by itself.

skills/verticals/web-creative/skills/gsap-scrolltrigger/SKILL.md

Read the skill and download options
gsap-timelineSkill oficial de GSAP Timeline: gsap.timeline(), position parameter, nesting, playback controls. Secuencia animaciones con precision.

A method included in the original pack

skills/verticals/web-creative/skills/gsap-timeline/SKILL.md

Read the skill and download options
gsap-utilsSkill oficial de gsap.utils: clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Utilidades para animacion.

A method included in the original pack

Tools and access
Using this method may require compatible tools, a connected account and authorisation. The skill does not provide those integrations or carry out external actions by itself.

skills/verticals/web-creative/skills/gsap-utils/SKILL.md

Read the skill and download options
image-to-threejsReconstruye el objeto de una imagen como modelo Three.js procedural (solo código: primitivas + materiales), por fases con puertas de calidad y comparación visual contra la referencia, listo para animar en web con Three.js o Threlte. Triggers: imagen a 3D, modelo 3D en código, Three.js procedural, 3D para web sin assets.

A method included in the original pack

Tools and access
Using this method may require compatible tools, a connected account and authorisation. The skill does not provide those integrations or carry out external actions by itself.

skills/verticals/web-creative/skills/image-to-threejs/SKILL.md

Read the skill and download options
landing-from-imageReplica una landing page completa a partir de imágenes de referencia. Analiza el diseño visual (colores, tipografía, estructura, spacing) y genera HTML/CSS fiel al diseño. Usa cuando: (1) Javi envíe imágenes de una landing que quiere replicar, (2) pida maquetar una landing basándose en mockups visuales, (3) necesite construir una página desde referencias visuales. Requiere: imágenes de referencia + brief de contenido.

A method included in the original pack

skills/transversal/landing-from-image/SKILL.md

Read the skill and download options
lobe-uiConstruye interfaces de AI chat con LobeUI: React components para dashboards y conversational AI UIs production-ready.

A method included in the original pack

Tools and access
Using this method may require compatible tools, a connected account and authorisation. The skill does not provide those integrations or carry out external actions by itself.

skills/verticals/web-creative/skills/lobe-ui/SKILL.md

Read the skill and download options
Visual ExplainerCuando el output es demasiado complejo para la terminal, genera HTML. Diagramas de arquitectura, diff reviews, comparisons, y slide decks.

A method included in the original pack

skills/transversal/visual-explainer/SKILL.md

Read the skill and download options
web-layout-designerCrea layouts web, mockups de páginas y wireframes. Define grids, jerarquía visual, componentes UI y especificaciones técnicas para developers.

A method included in the original pack

skills/transversal/diseno/skills/web-layout-designer/SKILL.md

Read the skill and download options
website-clonerClonar cualquier web en un codebase Next.js moderno usando agentes de IA. Pipeline multi-fase: reconnaissance, foundation, component specs, parallel build, assembly y QA. Usa Claude Code (recomendado), Codex, Cursor, Windsurf, Gemini CLI o cualquier agente compatible.

A method included in the original pack

Tools and access
Using this method may require compatible tools, a connected account and authorisation. The skill does not provide those integrations or carry out external actions by itself.

skills/verticals/web-creative/skills/website-cloner/SKILL.md

Read the skill and download options

Looking for ways to frame your request? Browse the example library across our featured sectors.

Browse examples

THE COMPLETE COLLECTION

Your next task.
A method to begin.

Download the AI for Creatividad Web pack and choose the skills that fit the task you need to tackle.

Create a free account

Already have an account? Sign in to download

ZIP · Version 1.0.1 · 92 KB · Free with your account

What you download

  • 21 skill methods from this collection.
  • Their original instructions and associated resources, where included.
  • A pack to explore: select and install the skills your tool supports.

The pack is not a single ready-made installation for every platform. Instructions and available formats are explained in the guides and individual skill pages.

Find your platform guide

SOURCE AND SCOPE

SkillsBundle brings together methods with different authors and licences. Check the source, licence and requirements of each resource before applying it. The method helps you organise the work; you provide the context and review the result.

Terms and licences