educlopez

Use for UI design and implementation work to avoid generic AI-looking interfaces. Provides anti-slop rules, a required discovery phase before coding, and guidance for layout, typography, color, motion, accessibility, dashboards, tables, landing pages, theming, and polish. Trigger when editing UI code or reviewing and refining components, pages, screens, layouts, animations, responsive behavior, or design systems.

"Amplify personality — raises layout variance and motion, strengthens typography and one signature detail, without slop. Use when the UI works but feels safe, flat, or "template-y", or when the user says "bolder", "more personality", "more creative", or "make it pop" (still professional). Invoke when the user asks for bolder on their UI, or mentions 'bolder' alongside design / UI / frontend work."

Write or update the project's durable design brief at .ui-craft/brief.md. Invoke when the user asks for brief on their UI, or mentions 'brief' alongside design / UI / frontend work.

"One-shot build pipeline for a complete surface from an outcome recipe — inputs (or defaults) → composition → theme → build order → acceptance bar. Use when the user asks for a whole surface ("build me a dashboard", "hazme un dashboard") and expects a shippable result, not component-level help. Invoke when the user asks for craft on their UI, or mentions 'craft' alongside design / UI / frontend work."

Pre-ship gate — runs detector, verifies brief and tokens, applies the 10-pass finish bar, ranks findings by feedback hierarchy. Use when the user wants to ship, merge, or finalize a surface and needs a verdict (READY / NOT READY / BLOCKED) before committing. Invoke when the user asks for finalize on their UI, or mentions 'finalize' alongside design / UI / frontend work.

"Final craft pass applying the compound details from the polish checklist — micro-typography, spacing rhythm, hover states, and a signature detail — directly to code. Use when the surface is functionally complete but feels unfinished, or when the user says "polish this" / "it looks generic" / "add the final touches". Invoke when the user asks for polish on their UI, or mentions 'polish' alongside design / UI / frontend work."

"Tone down visual noise — lowers variance and motion, simplifies layout and color weight, keeps hierarchy clear. Use when the UI feels loud, busy, or over-designed, or when the user says "quieter", "more restrained", "simpler", or "tone it down". Invoke when the user asks for quieter on their UI, or mentions 'quieter' alongside design / UI / frontend work."

"Redesign an existing site or app without losing what already works — audits the current surface first, classifies what to preserve (brand, IA, SEO, content), picks a refresh/reskin/rebuild scope, then modernizes deliberately. Use when the user says "redesign", "modernize this site", "refresh the UI", "make this look current", or points at an existing page/URL they want improved rather than rebuilt from scratch. Invoke when the user asks for redesign on their UI, or mentions 'redesign' alongside design / UI / frontend work."

Generates a local invoice PDF viewer for PrestaShop projects, deployed as invoice-preview/index.php (subfolder, ROOT = dirname(__DIR__)). Lists the last 50 orders (searchable by reference/customer/id), renders the real PDF invoice for any order straight from classes/pdf/HTMLTemplateInvoice.php + pdf/*.tpl (respecting any themes/{child}/pdf/*.tpl override PS itself resolves) inline in the browser via an iframe, with a "Generar factura" button for orders that don't have one yet. Zero placeholders to fill in — admin dir, Lando URL, DB credentials and shop name are all auto-detected at runtime from config/parameters.php and the PS_SHOP_NAME configuration value. Gated behind backoffice employee auth (Cookie class, always denies on failure). Geist-font UI matching the ps-email-preview visual style. Use this skill whenever the user wants to preview, inspect, or debug PrestaShop invoice/receipt PDF templates without going through the backoffice order page each time, asks "cómo se ve la factura", "quiero ver el PDF de

Arregla zonas blancas (padding) en imágenes de productos PrestaShop y regenera thumbnails de forma segura sin bloquear Apache. Úsala cuando el usuario diga: "imágenes con blanco", "white zones en imágenes PS", "thumbnails con relleno blanco", "regenerar miniaturas PS", "regenerar thumbnails prestashop", "el admin de PS se queda colgado regenerando", "imágenes de productos con bordes blancos", "imágenes no llenan el contenedor", o cuando vea padding blanco en el listing de productos de una tienda PrestaShop. También aplica cuando hay que sincronizar comportamiento de generación de imágenes entre local Lando y servidor de staging/prod.

Sets up a full security stack on your company's projects hosted on GitLab.com (non-PrestaShop: Laravel, Astro, TanStack, etc.). Use ONLY when the project is a GitLab.com Free tier project. Triggers when the user asks to add dependency scanning, vulnerability alerts, security setup, Trivy, pnpm supply chain protection, or wants email reports of vulnerabilities. Do NOT use for GitHub-hosted projects, personal projects, or PrestaShop projects — use ps-security-audit skill instead for any PrestaShop project.

Sets up a modern CSS build pipeline for a PrestaShop child theme: source partials in _dev/css/, lightningcss bundle+minify to a single generated assets/css/custom.css, pnpm 11 with supply-chain hardening, pre-commit hook with zero-dependency Node fallback, and agent/team documentation. Replaces runtime @import chains and manual ?v= cache-bust versioning. Use when scaffolding CSS architecture for a new PS child theme, when a theme has multiple @import'ed CSS partials loaded at runtime, when the user mentions manual CSS version bumps, CSS cache busting problems, "el CSS no se actualiza", or wants the Milagros-style CSS build on another project.

Sets up a PrestaShop 8/9 project locally with Lando, or refreshes its database from the server. Full setup configures Lando, syncs app/config, picks a free port, imports the DB and fixes shop URLs; DB refresh mode only re-dumps and re-imports the database. Use when the user says "monta el proyecto", "setup lando", "prepara en local", "levanta el lando de X", "configura X en local", "actualízame la DB", "refresca la DB de X", "bájame la DB de X", "sync DB", or "quiero la DB actualizada de X".

Automatiza la detección y traducción de strings sin traducir en una instalación PrestaShop. Escanea todos los templates .tpl y archivos PHP buscando llamadas {l s='...' d='...'} del sistema i18n de PS, compara contra los XLF existentes del locale activo (es-CO por defecto) y traduce los strings faltantes usando Claude de forma nativa — sin API key externa. Usa esta skill cuando el usuario mencione: "traducciones PS", "strings en inglés", "ps-translate", "traducir prestashop", "i18n pendiente", "hay textos en inglés en la tienda", "¿qué strings faltan por traducir?" o cuando vea texto en inglés en el storefront que debería estar en español.

Workflow for adding skills/commands to mallard and shipping a new release. Use when the user asks how to release mallard, ship a new mallard version, add a skill or command to mallard, bump a mallard version, "publicar mallard", "subir mallard", "nueva versión de mallard", or anything involving editing this repo and getting the change to the team's machines.

Sets up weekly automated security scanning for PrestaShop 8 projects hosted on GitLab.com. Checks: installed modules vs Friends of Presta advisory database, PrestaShop core version, and PHP/Composer dependencies via Trivy. Sends weekly HTML email report every Monday. Use ONLY for PrestaShop projects on GitLab.com. Triggers when user asks for security scanning, vulnerability alerts, module CVE check, or Friends of Presta integration on a PrestaShop project.

Install and use SmoothUI — animated React components and blocks built with Tailwind CSS v4 and Motion, distributed through a shadcn-compatible registry. Use when adding animated UI components, page blocks, or SmoothUI themes to a project.

Create, improve, fix, or review SmoothUI components with production-quality animations, accessibility, and performance. Orchestrates interface-craft, web-design-guidelines, rams, and vercel-react-best-practices skills for high-quality output. Use when the user wants to build a new component, add a variant, improve an existing component, fix a component bug, or review component quality in the SmoothUI project. Triggers on "create component", "build component", "new component", "add component", "improve component", "fix component", "review component", "add variant", "refactor component", or any component work in the smoothui monorepo.

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

Curated knowledge base for the Panda theme by SunnyToo on PrestaShop 8 and 9 — 54 module fiches, 19 demos catalog, scraped official docs, and the Easy Builder track (steasybuilder + steasy_trans_panda). Use when answering questions about Panda-specific modules (`st*` prefix), SunnyToo widgets, Easy Builder layouts, or "what can Panda render". For PrestaShop platform-level questions (Symfony, Twig BO, Smarty syntax, hooks core, theme.yml mechanics, migration 8→9) use the `prestashop-kb` skill instead.

Curated knowledge base for the PrestaShop platform — versions 8 and 9. Covers theme mechanics (theme.yml, parent-child, template inheritance, assets), Smarty templating + PS extensions ({l}, {hook}, {widget}), hooks (overview + listings), modules architecture (config.xml, controllers, lifecycle), install vs distribution (PS 9 source clone), and version migration PS 8 → 9 (Symfony BO, Twig, upgrade process). Use for platform-level PrestaShop questions independent of any specific theme. For Panda-theme-specific questions (`st*` modules, SunnyToo, Easy Builder) use the `panda-kb` skill instead.

Control codevator — background music and sounds for AI coding agents. Use when the user mentions music, sounds, elevator music, background audio, coding music, volume, mute, sound modes, lo-fi, nature sounds, ambient, retro, focus music, or /codevator. Also use when the user wants to set up codevator with a new agent, check playback stats, manage sound profiles, import custom sounds, or preview available sounds.