educlopez
UserDesign engineering skill for AI Agents — build interfaces with craft-level quality
Categories
Indexed Skills (22)
ui-craft-dense-dashboard
Dense dashboard / admin / Bloomberg / Retool / data-heavy internal tools. Locked knobs: CRAFT=7, MOTION=3, DENSITY=9. IBM Plex + mono numbers, semantic palette, 4/8px grid, sparklines, tabular-nums. Trigger on: dashboard, admin panel, data-dense, analytics, Bloomberg-like, Retool-like.
ui-craft-editorial
Editorial / magazine / long-form / Medium / Substack / content-heavy UIs. Locked knobs: CRAFT=9, MOTION=4, DENSITY=3. Serif display + humanist body, wide reading column, drop caps, OpenType. Trigger on: editorial, magazine, long-form, blog, Medium-like, Substack-like.
ui-craft-minimal
Minimal / clean / Linear / Notion / Vercel / whitespace-heavy UIs. Locked knobs: CRAFT=8, MOTION=3, DENSITY=2. Monochrome + one accent, Inter/Geist, hairline borders over shadows. Trigger on: minimal, clean, Linear-like, Notion-like, Vercel-like, whitespace-heavy.
ui-craft
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.
audit
Technical UI audit — a11y, performance, responsive. Produces a prioritized findings table. Invoke when the user asks for audit on their UI, or mentions 'audit' alongside design / UI / frontend work.
brief
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.
colorize
Color strategy pass — introduces a single accent at 3-5 intentional placements, or reduces an over-colored UI back to 90% neutral. Use when the UI has no color identity, uses blue by default, or is shouting with too many competing accents. Invoke when the user asks for colorize on their UI, or mentions 'colorize' alongside design / UI / frontend work.
finalize
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.
heuristic
Produce a scored heuristic critique of the UI using Nielsen's 10 + 6 design laws + optional persona walkthroughs. Outputs a machine-parseable scorecard. Invoke when the user asks for heuristic on their UI, or mentions 'heuristic' alongside design / UI / frontend work.
shape
Wireframe-first pass — outputs an ASCII layout + state list + content inventory + question list before any code. Use when starting a new screen from scratch or when the user's brief is still ambiguous. Invoke when the user asks for shape on their UI, or mentions 'shape' alongside design / UI / frontend work.
tokens
Audit or establish the project's 3-layer token spine. Invoke when the user asks for tokens on their UI, or mentions 'tokens' alongside design / UI / frontend work.
gitlab-security-setup
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.
lando-img-placeholder
Sets up a static image placeholder for local Lando PrestaShop development so broken/missing product images show a nice placeholder instead of broken icons. Use this skill when the user says "placeholder de imagenes en lando", "lando image placeholder", "imagenes rotas en lando", "broken images in lando", or wants to avoid downloading hundreds of product images for local development. Trigger proactively whenever the user is working on a Lando PrestaShop project and mentions broken images or missing product photos.
lando-setup
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".
mallard-release
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.
panda-kb
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.
prestashop-kb
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.
ps-email-preview
Generates a full-featured email template viewer for PrestaShop projects, deployed as email-preview/index.php (subfolder, ROOT = dirname(__DIR__)). Features: Geist font + Geist Mono UI matching Vercel design system; PS admin authentication via Cookie class (always denies on failure — never allows by default); CSRF protection on all write endpoints; sandboxed iframe (sandbox="allow-scripts"); shop logo and favicon resolved dynamically from PS DB; source version pill dropdown (custom, not native select) showing child/parent/core with colored dots and count badge; language pill dropdown (same custom pattern); sidebar with real-time search (F shortcut), Geist-style tabs in drawer and preview bar, source stack dots per template; "↑ child" button with Geist confirmation modal to copy template to child theme override; "Eliminar override" button with Geist destructive modal (red band, irreversibility warning) to delete the child override and revert to parent/core; Variables inspector drawer (tabs: Variables with clipb
ps-security-audit
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.
ps-translate
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.
ps-watch
Sets up BrowserSync live-reload watcher for PrestaShop Panda child theme development in Lando. Auto-detects child theme name and Lando proxy URL. Watches child theme CSS/JS/TPL files and reloads the browser automatically on save. Use when working on PS frontend/maquetación in Lando and the user wants auto-reload, live reload, watcher, or is tired of reloading the browser manually after CSS changes.
ps-demo-user
ps-demo-user — Usuario demo PrestaShop 8 (Lando)
Bio shown is the top-scored skill's repo description as a fallback — real GitHub bios land in a future update.