Art & Design

Critique, distill, shape, and verify product UX/UI. Use when auditing an existing interface, simplifying navigation, designing user journeys, or implementing an agreed redesign in the project's existing design system.

Audit and redesign user interfaces using the principles of the book Refactoring UI (hierarchy, spacing, typography, color, depth, images, finishing touches). Use when the user asks to review, critique, audit, improve, polish or redesign a UI, web page, app screen or component (cards, forms, tables, navigation, buttons, dashboards, modals, empty states), whether it's open in the browser, given as a URL, a screenshot, or HTML/CSS code.

Criar, auditar e revisar carrosséis com ganchos específicos, progressão narrativa, direção de arte e antes/depois completos. Usar com tema, copy, roteiro ou slides; inclui perfil opcional do Davi e revisão localizada.

Use when proposing or comparing UI changes for the user to decide on - after a design critique, UX or interaction audit, or design review, while brainstorming a screen or flow, when weighing UI options, sketching a screen that doesn't exist yet, or laying out empty, loading, error and phone-width states. Also when the user asks what a proposed screen or layout would look like. Not for colour, contrast or typography tweaks, or for UI changes the user has already decided and asked you to build.

Builds, redesigns, restyles, animates or reviews a personal website: one person's portfolio, personal homepage, blog, CV site or link hub. Not for businesses, shops, products or company landing pages. The result looks made by and for that person, not from a portfolio template. On the first run it asks the person what look they want (or researches niche design directions itself when told "you decide"), writes the answers into their own design system, and filters every choice through a ledger of 225+ banned AI-design patterns, including the AI portfolio clichés. Self-updating: a dislike the user voices becomes a ledger row; a colour, font or token the user adds becomes a design system row. Use whenever the user says "build my website", "make my portfolio", "redesign my site", "my personal site", "my blog", "my CV site", "this looks AI-made", "set up the design", "I don't like X", "use this colour", "/website-dev".

Makes websites and web apps comfortable to look at and keeps them from looking generic or AI-generated. Applies and audits evidence-graded rules for text size, contrast, light and dark themes, motion, flashing, stripe patterns and layout stability, and studies real reference sites in a browser to extract their fonts, palette, layout and motion before designing. Use when building or styling UI, setting up color tokens, typography or dark mode, when a page is hard to read, too bright, harsh, tiring, "hurts my eyes" or should be "easy on the eyes", when a design looks templated, generic or like "AI slop", or when the user wants design inspiration from real sites. Handles "/easy-on-the-eyes audit", "fix" and "study <url>". Not for full WCAG compliance audits or personal eye-health advice.

Clean UI, regras de design de interface (dados primeiro, cabe na tela, dois temas, cara de produto feito por gente) para qualquer trabalho de front-end (telas, componentes, cards, listas, gráficos, e-mails HTML, ajustes de layout, mobile e web). Use sempre que for criar, ajustar ou revisar UI, CSS, Tailwind ou componentes React/Next, antes de mostrar prints ou publicar.

Turn one lesson (a lesson plan, a teaching script, a syllabus section or notes) into a clean, lively PowerPoint deck (.pptx, 16:9, icons, native charts, speaker notes) plus one video script file that a video editor or a text-to-speech pipeline can use to produce a narrated slideshow video. Follows instructional design rules (one idea per slide, a visual on every slide, 6x6 text, nothing under 24 pt, dark background, three colours, a title-to-closing lesson structure) and checks every rule with a script before handing anything over. Use this skill whenever the user wants slides, a slide deck, a PowerPoint, a presentation or a slideshow for a lesson, lecture, class, workshop, training session, online course video or Udemy lecture, or says "turn this lesson into slides", "make the deck for module 2", "slides for my course video", even if they never say PowerPoint. Not for writing the lesson content itself or for business pitch decks.

Cria uma landing page institucional para uma empresa de software ou serviço (HTML único, com efeitos que reagem ao mouse no hero e fotos geradas por IA automaticamente quando o projeto tem chave do OpenRouter), com tela do produto no hero, diferencial em destaque, módulos em abas, contato e rodapé, num padrão profissional, com menos cara de IA. Use quando o usuário pedir "perfect landing page", "criar um site", "fazer uma página inicial", "uma landing page para minha empresa", "um site no mesmo padrão deste exemplo", ou para melhorar um site existente que está com cara de template, mesmo sem citar a skill.

Build an immersive, real-time 3D website: live Three.js scenes behind real HTML, driven by scroll and pointer. Glass and metal hero objects with bloom, particle clouds that morph into shapes and words, camera flights along a path, exploded product views, shader backgrounds, instanced worlds. Plans the journey and the one moment people remember first, then builds a static site with no build step and no API keys, then screenshots every scroll position on desktop and phone to prove it holds up. Use for "3D website", "immersive website", "crazy 3D site", "three.js landing page", "WebGL site", "scroll 3D", "make the site 3D", "interactive 3D hero", "a website that feels like a game", or any request for a site that should feel like an experience rather than a document.

Build a 3D website from a folder of content and assets, or turn an existing website into a 3D one. A five-role pipeline (scout, sculptor, animator, builder, critic) makes real 3D objects in code (three.js, the user's logo or models, Spline), studio-style motion graphics, and stitches them into the site with the interactions the user asks for. Use when the user says /3d-website-factory, "3D website", "website factory", "set up the website factory", "build me this as a website", "make my website 3D", "add 3D to my site", "make my logo 3D", "make it react to the cursor", "add a Spline scene", or "add a scroll film".

Plans, builds, critiques, and audits websites and landing pages (page structure, messaging, trust, conversion, accessibility, performance), with evidence-aware recommendations and playbooks for SaaS, agencies, local services, startups, e-commerce, enterprise, and luxury brands. Use this skill whenever the user wants to make, design, redesign, review, audit, or improve a website, homepage, landing page, marketing page, online store, or a site flow such as signup or checkout, even if they only say 'make me a site' or share a URL or screenshot. It decides what the site should say and do, and hands component code, design tokens, and visual styling to the ux-ui-kit skills when they are available. Not for standalone components, token pipelines, in-app product screens such as dashboards, or native app UI.

Directs how an interface is experienced before it is built - what people notice first, what stays familiar and where originality goes, the art direction, composition and pacing, interaction behavior and feedback, motion choreography, signature moments, and adaptation to touch, keyboard, zoom, reduced motion and low-powered devices. Produces an Experience Spec that the ux-ui-kit build skills execute and verify. Use when designing or redesigning a website, landing page, app screen, flow or product UI that must be distinctive as well as usable; when a UI feels generic, flat, template-like or good but not memorable; when the user asks for art direction, a creative concept, motion or interaction design, a signature moment or a wow factor; and before apply-aesthetic, brandkit or design-code on brand-facing work. Not for website strategy, messaging, SEO or conversion (website-excellence), token pipelines, or a single component spec (design-component).

Slides Design Skill: cria e revisa slides de PowerPoint executivos e de vendas e escolhe o melhor gráfico entre 46 formas testadas, com títulos de ação, Gestalt, destaque único e rótulos diretos.

Manages shadcn-svelte components and projects — adding, updating, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn-svelte, the CLI, design-system presets, or any project with a components.json file. Also triggers for "shadcn-svelte init", "add component", registry URLs, building a design system, or applying a DESIGN.md or brand spec to shadcn-svelte.

Audit a landing page receiving paid traffic against post-click conversion best practice and return a prioritised fix list - message match to the ad, above-the-fold clarity, form friction, trust, speed, mobile, policy risk - with every finding labelled by evidence class and no statistical claims on thin data. Use whenever the user says their ads get clicks but no conversions, asks why a landing page isn't converting, or mentions post-click experience, message match, conversion friction, form friction, or CPA rising after the click - even if they never say 'landing page audit'. Covers B2B and B2C on any platform. Audit only. Do NOT use for pre-click account problems - use mbfinotti/advertising-skills@ad-account-diagnostic instead.

Check whether any new public page or web app is ready to launch, covering its hook, its body, how it looks and works on phone, tablet, laptop and large desktop, its next step, sharing and measuring. Use when building or about to launch a page, or when planning its layout or first screen. For a page that is already public, use live-page-review.

Use this skill whenever the user asks to generate standalone, single-file HTML/CSS from Figma with ZERO JavaScript (no <script> tags), using only pure internal <style> and images/SVGs. Ideal for print/A4 templates, PDFs, email newsletters, sandboxed webviews, or systems that ban scripts.

Analyze, audit, inventory, and document an existing design system, in Figma through the Figma MCP server or in code (tokens, component markup, HTML prototypes) — components, variables, tokens, patterns, design debt, usage rules, causal relationships — and create documentation pages in Figma or a review catalogue in code on request. Use when the user asks to audit, inventory, map, document, or find debt in a Figma file, page, frame, component set, or selection, or in a design system kept as code. Read-only by default; modify Figma or code only when the user explicitly asks. Not for designing or building screens — that is design-screens; not for repairing broken variable bindings — that is figma-fix-variable-bindings.

Apply a brand's defined visual system to a real, conversion-focused website — designing and building it in custom code, with real copy given its proper emphasis. Use when the user mentions 'website design,' 'design my site,' 'build a landing page,' 'homepage,' 'marketing site,' 'product page,' 'pricing page,' 'redesign our website,' 'hero section,' or wants to ship a site. This is where the approved identity becomes a live, shipped surface — not a mockup, working code.

Build and refine web layouts with persistent browser guides, from the page shell to individual controls. Use when implementing or reviewing alignment, spacing, typography, icons, or responsive layout on a running page.

Prepares documents for professional layout in Adobe InDesign instead of laying them out with AI. Extracts the design system (paragraph/character styles, colours, grid) from the user's reference PDF, or reads it from their own InDesign file exported as IDML, and delivers an IDML with every style, swatch and table style plus the Word .docx content already laid out in those styles (titles, body, lists, emphasis, tables, threaded pages). Then proposes visual resources (key figures, diagrams, mind maps) as editable InDesign scripts. Also writes ExtendScript (ES3) import scripts for new text. Use when the user mentions InDesign, IDML, .indd/.indt, ExtendScript or .jsx for InDesign, maquetar/maquetación, a whitepaper, report, magazine or brochure to lay out, a style sheet or "sistema de estilos" from a PDF, or putting a Word document into InDesign.

Refine Latin-script book and print-document typography using the user's house rules: locked body specifications, continuous text flow, no widows or orphans, contextual punctuation cleanup, and optical letter spacing. Use for English book typesetting, InDesign typography, rivers, tracking, kerning, or paragraph-break repair. Not a prose-editing skill; Chinese and other non-Latin typography require separate guidance.

Behavioral design for any interface: user psychology applied to screens, forms, flows, states (empty, loading, error), notifications, microcopy, visual hierarchy and AI interfaces, in any stack and design system. Two modes: DESIGN (build applying the principles) and AUDIT (findings table with principle, severity, location and fix). Turns Hick, Fitts, cognitive load, Jakob, Gestalt, recognition over recall, defaults, progressive disclosure, Fogg (B=MAP), response-time limits, error prevention, reversibility, framing, peak-end and anti dark patterns ethics into concrete patterns with cited research. Use it to design, review or improve a UI: "review this form", "this feels hard to use", "make it more intuitive", "reduce friction", "empty state", "onboarding", "microcopy", "UX review", "UX audit", "dark patterns", "usability". Do not use it for pure aesthetics (palette, typography, brand motion) or for code without an interface. Spanish version: ux-conductual.