Una herramienta especializada para generar valores precisos de CSS clip-path para formas y diseños complejos.
Instalar y Descargar
1. ClawHub CLI
La forma más rápida de instalar una habilidad directamente desde el registro.
npx clawhub@latest install clip-path-generate
2. Instalación manual
Copia la carpeta de la habilidad a una de estas ubicaciones
~/.openclaw/skills/ <project>/skills/ Prioridad: Espacio de trabajo > Local > Integrado
3. Instalación del prompt
Copia este prompt en OpenClaw para instalarlo automáticamente.
Ayúdame a instalar clip-path-generate usando Clawhub. Si Clawhub no está instalado, instálalo primero (npm i -g clawhub).
¿Prefieres descargar?
Obtén los archivos originales de la habilidad en un archivo ZIP.
¿Qué es clip-path-generate?
La skill clip-path-generate es una utilidad especializada para desarrolladores diseñada para automatizar la creación de propiedades CSS clip-path. Al aprovechar las Openclaw Skills, los usuarios pueden generar instantáneamente CSS sintácticamente correcto para enmascarar elementos en círculos, elipses, inserciones y polígonos complejos sin el cálculo manual de coordenadas.
Esta skill cierra la brecha entre la intención del diseño y la implementación del código, proporcionando una forma optimizada de manejar el recorte geométrico. Soporta los estándares CSS modernos mientras mantiene la compatibilidad con versiones anteriores mediante el prefijo de proveedor opcional, lo que la convierte en un activo esencial para los desarrolladores frontend enfocados en UI/UX creativo.
Casos de uso de clip-path-generate
- Creación de formas geométricas personalizadas como triángulos, estrellas y hexágonos para elementos de interfaz de usuario.
- Implementación de máscaras de imagen complejas para secciones hero o fotos de perfil.
- Generación rápida de recortes de inserción para contenedores rectangulares con márgenes internos.
- Garantía de compatibilidad entre navegadores para el enmascaramiento CSS con prefijos webkit automatizados.
Cómo funciona clip-path-generate
- La skill analiza la solicitud del usuario para identificar el tipo de forma deseado y los parámetros de coordenadas específicos.
- Mapea ajustes preestablecidos con nombre como 'Star' o 'Arrow' a sus correspondientes conjuntos de puntos de polígono matemáticos.
- El motor calcula la sintaxis para la función de forma específica, como circle(), ellipse() o inset().
- Aplica prefijos de proveedor opcionales si se solicita para garantizar el soporte de Safari y navegadores heredados.
- La skill devuelve la propiedad CSS completada junto con un ejemplo de uso aplicado a una clase estándar.
Configuración de clip-path-generate
Para integrar esta capacidad en su flujo de trabajo, asegúrese de que su entorno esté configurado para Openclaw Skills. Puede invocar al generador a través de la interfaz de su agente de AI:
# No se requiere instalación manual si el agente Openclaw está activo.
# Simplemente solicite al agente:
"Generate a polygon clip-path for a star shape"
Esquema de datos y taxonomía de clip-path-generate
La skill procesa parámetros de configuración para generar CSS estructurado. A continuación se muestra el mapeo de las entradas utilizadas por estas Openclaw Skills:
| Parameter | Type | Default | Description |
|---|---|---|---|
shape |
string | circle | La función geométrica (circle, ellipse, polygon, inset) |
radius |
number | 50 | El porcentaje de radio para recortes circulares |
cx / cy |
number | 50 | Las coordenadas centrales para formas radiales |
vendorPrefix |
boolean | false | Si se debe incluir -webkit-clip-path |
points |
array | N/A | Lista de pares de porcentajes x/y para polígonos |
Funciones avanzadas de clip-path-generate
- Ajustes Preestablecidos de Formas con Nombre: Coordenadas integradas para triángulo, pentágono, hexágono, estrella y flecha.
- Ajuste Automático: Manejo inteligente de errores que limita los valores porcentuales entre 0-100 para evitar un CSS roto.
- Soporte de Prefijo de Vendedor: Generación con un solo clic de propiedades con prefijo -webkit- para código listo para producción.
- Valores Predeterminados Inteligentes: Recurre automáticamente a valores predeterminados seguros si los parámetros faltan o no se reconocen.
SKILL.md
Cargando
Habilidades relacionadas de Openclaw
Calculadora CIDR
Una utilidad de red integral para calcular parámetros de subred, rangos de host y clasificaciones de IP a partir de la notación CIDR.
Sci-Hub Downloader
Una utilidad de línea de comandos optimizada para Openclaw Skills que recupera artículos académicos de múltiples fuentes de Acceso Abierto y bibliotecas en la sombra.
OpenAI Whisper (CLI)
Un motor de voz a texto local y centrado en la privacidad que utiliza la Whisper CLI para transcribir y traducir audio sin dependencias de API externas.
Self-Improvement Agent Skill
Una habilidad especializada para que los AI Agents capturen aprendizajes, registren errores y evolucionen la memoria del proyecto para un mejor rendimiento futuro.
Devil's Advocate
Una habilidad de mejora cognitiva que obliga a los agentes de IA a participar en debates internos de pros y contras para garantizar resultados de alta calidad y equilibrados.
Agent Autoresearch
Un bucle de autoinvestigación autónomo que permite a los agentes de AI proponer, probar e integrar sus propias mejoras conductuales y técnicas.
Presentado*
