UI/UX, logos, slides, and image generation (7.4K skills)
Build React or Next.js interfaces using adjustable layout variation, motion, and information density. This preserved v1 skill covers typography, color, responsive layouts, interaction states, and animation isolation for projects that require its original behavior.
Create HTML visuals that appear directly inside an Orca chat reply. Use charts, diagrams, tables, reports, or mockups to explain an answer visually, with styles, scripts, and data included in each page.
Analyze a Figma file and turn its pages, screens, components, instances, and design tokens—shared design values—into an interactive graph. Open the dashboard to explore the file's structure and relationships.
Turn plain-language descriptions, Mermaid diagrams, or repository evidence into interactive standalone HTML diagrams. Create system maps, workflows, timelines, database relationships, and everyday process diagrams, with automated validation, light and dark themes, and image, SVG, or WebM export.
Create character, scene, and product images from structured descriptions of style, composition, lighting, and color. Guide generation with reference images and aspect ratio settings, using a Python script connected to a supported image generation service.
Discover available skills and combine one to three of them into a single creative piece. Use it for an unexpected presentation, visual artifact, or interactive web experience, drawing on known interests or seasonal themes.
Build web pages and interface components with a clear visual direction and working code. Shape typography, colors, layouts, and animation around the intended audience and purpose, with support for HTML/CSS/JS, React, and Vue implementations.
Design and improve website and app interfaces, from typography, spacing, and color to task flows. Review usability, accessibility, responsive layouts, and performance, or refine interface text, error states, and reusable design elements.
Create original posters and static artwork by first defining a visual direction for color, shape, space, and typography. Receive a Markdown design philosophy alongside a PNG or PDF artwork that communicates primarily through visuals.
Give slides, documents, reports, and HTML landing pages consistent colors and fonts. Choose from ten preset themes using a visual showcase, or create a custom theme from a description and review it before application.
Style documents and other artifacts with Anthropic's brand colors and fonts. The skill specifies heading and body typography, readable text colors for different backgrounds, and accent colors for shapes, with fallback fonts when needed.
Create a JSON theme preset for Ruflo Console Theme Studio from a visual brief. Adjust six colors, animation speed, and decorative layers while keeping text readable and success, warning, and failure states visually distinct.
Review multi-step forms to find information users must enter more than once. Suggest automatic filling, reuse options, and preserving data between steps, while explaining relevant accessibility requirements and exceptions for security or validity.
Review images, icons, and illustrations for cultural meanings that may confuse international audiences. Suggest neutral alternatives or locale-based replacements with a shared default, and flag embedded text and other visuals that need localization review.
Check text, input borders, meaningful icons, and other interface elements for sufficient color contrast. Guide color adjustments against WCAG accessibility thresholds and verify readability across default, hover, focus, active, and visited states.
Review CSS color definitions and convert palettes to oklch(), a color format designed around human perception. Use consistent lightness steps to build color scales, dark-mode palettes, and interaction states, with guidance for wide-gamut displays.
Review help links, chat controls, phone numbers, and FAQ entry points across related pages. Compare their relative positions and order under matching layout conditions, then identify changes that make support easier to find throughout a task.
Apply shared visual and writing rules to course pages, figures, and manuals. Check colors, fonts, labels, layouts, plain technical English, dark themes, keyboard focus, touch targets, and reduced-motion behavior against defined reference values.
Build an interactive page that explains a process as a machine viewed from an angle. A tested simulation keeps movement, numbers, and explanations consistent, while controls let readers step through operations and explore failures.
Create animated lesson diagrams, sliders that update figures, and interactive panels that explain how systems work. It also builds moving dot patterns for page headers, with rules for readability, themes, and reduced motion.
Create static SVG diagrams, scalable images for lessons, READMEs, and manuals. It uses real system names, nine diagram types, and consistent colors and arrows, with checks for readable labels, accessible descriptions, and valid markup.
Builds and improves web interfaces, covering layout, styling, motion, and usability. It records design rules before implementation, uses supplied references or design research, and checks the result in real browsers for visual consistency, accessibility, and performance.
Create and revise posters, social graphics, web pages, and app screens on a Design canvas. Apply brand colors, fonts, and shared components, organize multiple artboards, and make targeted changes to existing designs.
Build and revise a design system from brand materials or code. Organize colors, typography, spacing, components, and assets into structured files, with usage guidelines and previews, using the supported Design System artifact format.