Design e Frontend

Use when the user wants to design, build, plan, critique, audit, polish, clarify, simplify, amplify, animate, typeset, layout, adapt, harden, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Also handles UX review, Gestalt principles, UX research methodology, personas, journey m

Extract brand identity from a website URL — voice, colors, typography, imagery, values, and target audience — into a structured brand-profile.json. The profile feeds downstream skills (seo-content-writer, email-composer, frontend-design, pro-deck-builder, cross-platform-audit) for brand-consistent output. Use when the user says brand DNA, brand profile, extract brand, analyze brand, brand voice, b

Use when the user wants to scan for design anti-patterns, take a browser screenshot, or do a design engineering code review. Covers: missing focus rings, clipped dropdowns, bad z-index, placeholder-as-label, missing reduced-motion (detect); real Chromium screenshots, mobile/desktop viewports, visual bug fixing (preview); motion crimes, accessibility violations, forbidden CSS patterns, token misuse

Zen é uma biblioteca de componentes React orientada a props, construída para velocidade. Crie interfaces polidas sem escrever HTML, CSS ou pensar em classes Tailwind.

Create polished HTML technical reports and multi-page documents for consulting deliverables. Includes a customizable design system with dark cover page, warm cream content pages (8.5x11 portrait), professional typography, and a curated component library (KPI cards, data tables with severity coloring, callout boxes, recommendation cards, priority banners). Trigger on report, audit report, technical

Create distinctive, production-grade frontend interfaces with high design quality. Covers design thinking, typography pairing, color theory, motion design, spatial composition, and code quality. Generates real working code — HTML/CSS/JS or React — with intentional aesthetic direction, not generic AI output.

Create polished HTML technical reports and multi-page documents for consulting deliverables. Features a professional design system with dark cover pages, warm cream content pages, Switzer + Cartograph CF typography, and a curated component library (KPI cards, data tables, callout boxes, recommendation cards, priority banners). Outputs standalone HTML that prints cleanly to PDF.

Generar templates de issues para bug reports y feature requests

Auditar accesibilidad WCAG 2.1 nivel AA con checklist y correcciones. Activar ante: accesibilidad web, WCAG, lector de pantalla, contraste, navegacion por teclado, a11y

Perfilar aplicaciones para encontrar cuellos de botella de CPU y memoria. Activar cuando la aplicacion este lenta, haya un cuello de botella, problemas de latencia, se necesite un flamegraph, se detecte alto uso de CPU, un memory leak o se quiera analizar el rendimiento.

Generar guías de migración entre versiones para los usuarios del proyecto. Activar ante: guia de migracion, actualizar version, breaking changes, instrucciones de actualizacion

Crear releases con versionado semantico, notas y artefactos