Saltar al contenido
SkillsBundleby SANTACONCHA
ES EN
Todas las colecciones

LA COLECCIÓN / Creatividad web

Métodos para creatividad web.

Explora los recursos de creatividad web, consulta qué aborda cada skill y elige por dónde empezar.

Ver las 21 skills Conseguir el pack
21 skills en esta colecciónMétodos originales y sus recursos asociadosDescarga gratuita con cuenta

QUÉ INCLUYE

Los métodos.
Uno a uno.

Abre una skill para consultar qué aborda. Su ficha individual amplía el método y los formatos de descarga disponibles.

Un pack es una colección de skills. Un ejemplo práctico ayuda a aplicar un método; no sustituye a las skills. Algunas tareas requieren herramientas externas, accesos y tu revisión.

21 skills en esta colección

Ag 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.

Método incluido en el pack original

Dentro del método
  • Capabilities
  • Patterns
  • 3D Stack Selection
  • 3D Model Pipeline
  • Scroll-Driven 3D
  • Anti-Patterns
  • Related Skills
  • When to Use
Herramientas y accesos
La ejecución de este método puede requerir herramientas compatibles, una cuenta conectada y autorización. La skill no incorpora esas integraciones ni ejecuta acciones externas por sí sola.

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

Ver la skill y sus opciones de descarga
Ag canvas designThese are instructions for creating design philosophies - aesthetic movements that are then EXPRESSED VISUALLY. Output only .md files, .pdf files, and .png files.

Método incluido en el pack original

Dentro del método
  • DESIGN PHILOSOPHY CREATION
  • DEDUCING THE SUBTLE REFERENCE
  • CANVAS CREATION
  • FINAL STEP
  • MULTI-PAGE OPTION
  • When to Use

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

Ver la skill y sus opciones de descarga
Ag frontend slidesCreate stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files.

Método incluido en el pack original

Dentro del método
  • When to Use This Skill
  • Core Principles
  • Design Aesthetics
  • Viewport Fitting Rules
  • Phase 0: Detect Mode
  • Phase 1: Content Discovery (New Presentations)
  • Phase 2: Style Discovery
  • Phase 3: Generate Presentation
Herramientas y accesos
La ejecución de este método puede requerir herramientas compatibles, una cuenta conectada y autorización. La skill no incorpora esas integraciones ni ejecuta acciones externas por sí sola.

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

Ver la skill y sus opciones de descarga
Ag google slides automationLightweight Google Slides integration with standalone OAuth authentication. No MCP server required. Full read/write access.

Método incluido en el pack original

Dentro del método
  • First-Time Setup
  • Read Commands
  • Write Commands
  • Slide Layouts
  • Presentation ID Format
  • Output Format
  • Token Management
Herramientas y accesos
La ejecución de este método puede requerir herramientas compatibles, una cuenta conectada y autorización. La skill no incorpora esas integraciones ni ejecuta acciones externas por sí sola.

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

Ver la skill y sus opciones de descarga
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…

Método incluido en el pack original

Dentro del método
  • Knowledge Base
  • Workflow
  • Example Usage
  • Key Design Systems
  • Output Format
  • References
Herramientas y accesos
La ejecución de este método puede requerir herramientas compatibles, una cuenta conectada y autorización. La skill no incorpora esas integraciones ni ejecuta acciones externas por sí sola.

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

Ver la skill y sus opciones de descarga
Figma context mcpImplementa disenos desde Figma: extrae layout information para AI coding agents. Sincroniza diseño y codigo.

Método incluido en el pack original

Dentro del método
  • How It Works
  • Installation
  • Usage
  • What It Provides
  • Prompt Examples
  • Cursor + Figma Workflow
  • Advantages Over Screenshots
  • Framelink vs Figma-Context-MCP
Herramientas y accesos
La ejecución de este método puede requerir herramientas compatibles, una cuenta conectada y autorización. La skill no incorpora esas integraciones ni ejecuta acciones externas por sí sola.

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

Ver la skill y sus opciones de descarga
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.

Método incluido en el pack original

Dentro del método
  • Seguridad y Requisitos
  • Instalación
  • Configuración MCP (Claude Desktop)
  • Herramientas Disponibles (19)
  • Skills Especializados del Repositorio
  • Pipelines para Agentes
  • Chaining y Piping
  • Errores Comunes
Herramientas y accesos
La ejecución de este método puede requerir herramientas compatibles, una cuenta conectada y autorización. La skill no incorpora esas integraciones ni ejecuta acciones externas por sí sola.

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

Ver la skill y sus opciones de descarga
Gsap coreSkill oficial de GSAP Core: gsap.to(), from(), fromTo(), easing, duration, stagger, defaults y matchMedia. Sintaxis y mejores practicas.

Método incluido en el pack original

Dentro del método
  • When to Use This Skill
  • When to Use GSAP
  • Core Tween Methods
  • Common vars
  • Transforms and CSS properties
  • Targets
  • Stagger
  • Easing

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

Ver la skill y sus opciones de descarga
Gsap frameworksSkill oficial de GSAP para Vue, Svelte y otros frameworks: lifecycle, scoping selectors, cleanup on unmount.

Método incluido en el pack original

Dentro del método
  • When to Use This Skill
  • Principles (All Frameworks)
  • Vue 3 (Composition API)
  • Vue 3 (script setup)
  • Svelte
  • Scoping Selectors
  • ScrollTrigger Cleanup
  • When to Create vs Kill
Herramientas y accesos
La ejecución de este método puede requerir herramientas compatibles, una cuenta conectada y autorización. La skill no incorpora esas integraciones ni ejecuta acciones externas por sí sola.

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

Ver la skill y sus opciones de descarga
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.

Método incluido en el pack original

Dentro del método
  • Diagnóstico de Jank
  • Propiedades GPU-Friendly
  • will-change y Layer Promotion
  • ScrollTrigger Performance
  • Memory Leaks
  • Lighthouse y Core Web Vitals
  • Benchmarks de Rendimiento
  • Errores Comunes

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

Ver la skill y sus opciones de descarga
Gsap pluginsSkill oficial de plugins GSAP: ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer. Extiende GSAP con funciones especializadas.

Método incluido en el pack original

Dentro del método
  • When to Use This Skill
  • Registering Plugins
  • Scroll
  • DOM / UI
  • Text
  • SVG
  • Easing
  • Physics
Herramientas y accesos
La ejecución de este método puede requerir herramientas compatibles, una cuenta conectada y autorización. La skill no incorpora esas integraciones ni ejecuta acciones externas por sí sola.

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

Ver la skill y sus opciones de descarga
Gsap reactSkill oficial de GSAP para React: useGSAP hook, refs, gsap.context(), cleanup. Anima componentes React correctamente.

Método incluido en el pack original

Dentro del método
  • When to Use This Skill
  • Installation
  • Prefer the useGSAP() Hook
  • Refs for Targets
  • Dependency array, scope, and revertOnUpdate
  • gsap.context() in useEffect (when useGSAP isn't used)
  • Context-Safe Callbacks
  • Server-Side Rendering (Next.js, etc.)
Herramientas y accesos
La ejecución de este método puede requerir herramientas compatibles, una cuenta conectada y autorización. La skill no incorpora esas integraciones ni ejecuta acciones externas por sí sola.

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

Ver la skill y sus opciones de descarga
Gsap scrolltriggerSkill oficial de ScrollTrigger: animaciones linked a scroll, pinning, scrub, markers. Crea efectos de scroll fascinantes.

Método incluido en el pack original

Dentro del método
  • When to Use This Skill
  • Registering the Plugin
  • Basic Trigger
  • Key config options
  • ScrollTrigger.batch()
  • ScrollTrigger.scrollerProxy()
  • Scrub
  • Pinning
Herramientas y accesos
La ejecución de este método puede requerir herramientas compatibles, una cuenta conectada y autorización. La skill no incorpora esas integraciones ni ejecuta acciones externas por sí sola.

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

Ver la skill y sus opciones de descarga
Gsap timelineSkill oficial de GSAP Timeline: gsap.timeline(), position parameter, nesting, playback controls. Secuencia animaciones con precision.

Método incluido en el pack original

Dentro del método
  • When to Use This Skill
  • Creating a Timeline
  • Position Parameter
  • Timeline Defaults
  • Timeline Options (constructor)
  • Labels
  • Nesting Timelines
  • Controlling Playback

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

Ver la skill y sus opciones de descarga
Gsap utilsSkill oficial de gsap.utils: clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Utilidades para animacion.

Método incluido en el pack original

Dentro del método
  • When to Use This Skill
  • Overview
  • Clamping and Ranges
  • Random and Snap
  • Units and Parsing
  • Arrays and Collections
  • Best practices
  • Do Not
Herramientas y accesos
La ejecución de este método puede requerir herramientas compatibles, una cuenta conectada y autorización. La skill no incorpora esas integraciones ni ejecuta acciones externas por sí sola.

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

Ver la skill y sus opciones de descarga
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.

Método incluido en el pack original

Dentro del método
  • Cuándo usar esta skill
  • Flujo por fases (con puertas)
  • Paso a paso
  • Recursos
Herramientas y accesos
La ejecución de este método puede requerir herramientas compatibles, una cuenta conectada y autorización. La skill no incorpora esas integraciones ni ejecuta acciones externas por sí sola.

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

Ver la skill y sus opciones de descarga
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.

Método incluido en el pack original

Dentro del método
  • Quick Start
  • Análisis Visual (Manual)
  • Prompt para Claude Code
  • Imágenes de referencia
  • Spec técnica
  • Tu tarea
  • Assets disponibles
  • Flujo completo

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

Ver la skill y sus opciones de descarga
Lobe uiConstruye interfaces de AI chat con LobeUI: React components para dashboards y conversational AI UIs production-ready.

Método incluido en el pack original

Dentro del método
  • Core Components
  • Installation
  • Theming with Ant Design Tokens
  • Streaming Messages
  • Chat API Integration
  • Comparison with Alternatives
  • When to Use
  • Verification
Herramientas y accesos
La ejecución de este método puede requerir herramientas compatibles, una cuenta conectada y autorización. La skill no incorpora esas integraciones ni ejecuta acciones externas por sí sola.

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

Ver la skill y sus opciones de descarga
Visual explainerCuando el output es demasiado complejo para la terminal, genera HTML. Diagramas de arquitectura, diff reviews, comparisons, y slide decks.

Método incluido en el pack original

Dentro del método
  • When to Use
  • Outputs
  • Comandos disponibles
  • Quick Start
  • Tecnologias usadas
  • Temas visuales
  • Limitaciones
  • Referencia

skills/transversal/visual-explainer/SKILL.md

Ver la skill y sus opciones de descarga
Web layout designerPreparación de layouts web, mockups de páginas y wireframes. Define grids, jerarquía visual, componentes UI y especificaciones técnicas para developers.

Método incluido en el pack original

Dentro del método
  • Sistemas de Grid
  • Anatomía de Landing Page
  • UI Components
  • Jerarquía Visual
  • Mobile-First Design
  • Dark Mode
  • Accesibilidad
  • Herramientas Recomendadas

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

Ver la skill y sus opciones de descarga
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.

Método incluido en el pack original

Dentro del método
  • Qué es
  • Requisitos
  • Stack Técnico
  • Pipeline del Clone
  • Cómo Usar
  • Integración con OpenClaw
  • Uso para Distintos
  • Limitaciones y Ética
Herramientas y accesos
La ejecución de este método puede requerir herramientas compatibles, una cuenta conectada y autorización. La skill no incorpora esas integraciones ni ejecuta acciones externas por sí sola.

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

Ver la skill y sus opciones de descarga

¿Buscas cómo plantear una petición? Explora la biblioteca de ejemplos de nuestros sectores destacados.

Ver la biblioteca de ejemplos

LA COLECCIÓN COMPLETA

Tu próximo encargo.
Un método para empezar.

Descarga el pack de Creatividad web y elige las skills que encajan con la tarea que necesitas abordar.

Crear cuenta gratuita

¿Ya tienes cuenta? Accede para descargar

ZIP · Versión 1.0.1 · 92 KB · Gratis con tu cuenta

Qué te descargas

  • 21 métodos de skills de esta colección.
  • Sus instrucciones originales y recursos asociados, cuando los incluyen.
  • Un pack para explorar: selecciona e instala las skills que admite tu herramienta.

El pack no es una única instalación preparada para todas las plataformas. Las guías y fichas individuales explican las instrucciones y los formatos disponibles.

Consultar la guía de tu plataforma

ORIGEN Y ALCANCE

SkillsBundle reúne métodos con distintos autores y licencias. Consulta el origen, la licencia y los requisitos de cada recurso antes de aplicarlo. El método ayuda a ordenar el trabajo; tú aportas el contexto y revisas el resultado.

Términos y licencias