Design skills
Browse reusable Agent Skills, each with a clear purpose and practical guidance.
viz
Transforms content (URLs, uploaded documents, pasted text, meeting transcripts) into professional visualizations across four output modes. Accepts a mode argument or a keyword trigger in the user message. Mode "diagram" produces an Excalidraw diagram via Excalidraw:create_view. Mode "infographic" generates a Swiss Pulse PNG via the Gemini image-generation API. Mode "visualize" renders an inline Visualizer widget (SVG or HTML) via visualize:show_widget. Mode "publish" ships an interactive Swiss Pulse HTML visual to HeyGenverse via HeyGenverse:create_app and returns a shareable link. Keywords that activate the skill: "diagram it", "excalidraw this", "draw a diagram of this", "nano this", "vis it", "ver it", "hey it", "heygenverse this". Do not use for plain-text summaries, code explanations, prose responses, or generic chat visualizations without a chosen output format.
beautiful-ui
Beautiful UI patterns for modern web development — semantic HTML, accessible markup, responsive design, typography, and form UX. Use this skill when building page layouts, structuring content, choosing semantic elements, implementing navigation, building forms, creating data tables, handling accessibility, designing responsive layouts, establishing typographic hierarchy, or any markup and styling that should be meaningful, accessible, and well-structured. Works with React, Vue, and Svelte with Tailwind CSS.
design-system-developer
Context-aware routing to the Anytype iOS design system including icons, typography, colors, and spacing. Use when working with Figma-to-code translation, design assets, or UI components.
scopy-style-rules
Scopy styling system patterns including Style::setStyle, theme colors, section backgrounds, and widget styling. Auto-loads when applying styling to scopy widgets or sections.
banner-blindness
Los usuarios ignoran elementos que parecen anuncios. Use cuando diseñe CTAs, notificaciones importantes, o elementos promocionales dentro de la interfaz.
change-blindness
Los usuarios no notan cambios que ocurren fuera de su foco de atención. Use cuando diseñe actualizaciones de estado, notificaciones, o cambios dinámicos en la UI.
cognitive-load
La cantidad de esfuerzo mental requerido para procesar información. Use cuando diseñe interfaces complejas, flujos de onboarding, o sistemas de información.
common-region
Elementos dentro de un área delimitada se perciben como grupo. Use cuando diseñe cards, secciones, formularios agrupados, o contenedores visuales.