UI/UX, logos, slides, and image generation (7.4K skills)
Build and review interfaces with purposeful animation, responsive button feedback, and consistent spacing and color. The skill guides motion choices by usage frequency and provides concrete code review suggestions with reasons for each change.
Find brand logos and AWS, Azure, or GCP service icons from theSVG. Get embedding URLs or SVG markup, a scalable image format, and choose available variants that suit light or dark backgrounds.
Design a repeatable Figma-to-code workflow using Anima, from approved design inputs through code generation, normalization, checks, and human review. The result is a project architecture with clear boundaries for artifacts, credentials, and delivery.
Generate React or HTML code from an approved Figma node using several settings, then preview the results locally. Compare framework and styling choices side by side and repeat the generate, preview, and tweak cycle while keeping each run's source revision and settings available for review.
Track Anima generation usage, reuse outputs when their source and settings still match, and regenerate only changed design elements. It helps teams review plan fit using current account data and report avoided work without guessing monetary savings.
Set up the server-side Anima SDK for generating code from Figma designs. Configure Anima and Figma credentials, initialize the client, and verify access by generating files from a selected Figma node.
Plan resumes for creative roles by balancing visual presentation with parsing by applicant tracking systems (ATS). It guides a two version approach, portfolio links, layout, typography, and when to use a plain application version or a designed resume.
Design interfaces using the Nothing-inspired visual system, with clear type hierarchy, deliberate spacing, monochrome colors, and a considered dark or light mode. It guides composition and component choices for a restrained, information-rich UI.
Create and arrange a Grida `.canvas` board by editing its manifest and bundled documents. Place reference images, generated files, and notes spatially on an infinite canvas, and update their order and layout; use a slides workflow for linear presentations.
Create editable SVG diagrams for documentation when a screenshot cannot clearly explain a gesture, alignment rule, or before-and-after state. Reuse the kit’s visual tokens, primitives, template, and examples to build consistent figures for product docs.
Create or edit a Grida presentation as a `.canvas` bundle containing one 16:9 SVG file per slide. Organize slides through the bundle manifest, preserve a selected template’s visual style, and present a valid first slide while the deck is being built.
Create and edit SVG documents in a Grida editor session, where changes can appear on the live canvas. The skill also guides recovery from parse errors and preserves existing dimensions, viewBox, and formatting when editing.
Use this principle when product, UX, or feature scope decisions arise. It helps weigh choices from the user's perspective, favoring a smaller set of polished features, clear feedback, and a focused core workflow over implementation convenience.
When a UI interaction or architecture has no precedent in the codebase, this principle recommends building two or three competing prototypes and comparing them side by side before deciding. It also applies to product choices where user experience depends on feel.
Use this skill to explain, create, update, or compare Excalidraw diagrams. It delegates diagram work to subagents, which return concise summaries of components and relationships instead of loading verbose drawing data into the main agent’s context.
Create and refine diagrams by editing `.drawio` XML, adjusting element positions, labels, and arrows, then converting the file to PNG for visual review. The skill also provides guidance for AWS icons, fonts, spacing, and diagrams used in slides.
Create or evolve a shared design system with tokens for color, type, and spacing, reusable component structures, accessibility guidance, and documentation templates. It helps teams define consistent UI patterns, including theming and dark mode, across products.
Design readable, responsive interfaces for Three.js games, including HUDs, menus, overlays, settings, and touch controls. Plan game states, connect UI to game state, and check text fit, safe areas, overlap, and interaction on target screen sizes.
Create or edit 2D art for Three.js games with Gemini’s image API, including concept references, textures, backgrounds, logos, icons, and interface art. Use existing images as inputs for revisions and save generated assets for game or 3D workflows.
Create, edit, and refine diagrams on an Excalidraw canvas. Arrange and connect elements, convert Mermaid diagrams, inspect screenshots, and import or export scene files and PNG or SVG images through the CLI, MCP tools, or REST API.
Builds image prompts from one of the skill’s illustrated styles, following its templates and selection steps. It can also prepare structured call details for certain styles. The skill outputs text and does not generate images.
Generate scientific diagrams as PNG images from natural-language descriptions, including neural network architectures, system diagrams, flowcharts, circuits, and biological pathways. A review step checks the image against document-type thresholds and may prompt a limited regeneration; inspect labels and scientific details yourself before use.
Create an editable, one-slide PowerPoint research poster from approved local text and images. Check layout, image resolution, package safety, and print requirements, then review accessibility and final output manually.
Create infographics for statistics, timelines, processes, comparisons, and other content. Nano Banana Pro generates visuals, while Gemini 3.6 Flash reviews quality and can prompt another iteration; optional research lookup gathers facts and data for current topics.