Visual skills
Color, contrast, depth, icons and imagery: how the interface looks at a glance.
147 skills, page 3 of 4
Skills
Threejs Shadersby cloudai-x
Three.js shader guidance for GLSL, ShaderMaterial, uniforms, and custom vertex and fragment effects.
VisualExternalGitHub stars: 3.8K
Threejs Texturesby cloudai-x
Three.js texture workflows for maps, UV mapping, environment maps, and texture configuration.
VisualExternalGitHub stars: 3.8K
Vue Debug Guidesby vuejs-ai
Practical debugging workflows for diagnosing and fixing Vue reactivity, rendering, and state issues.
VisualExternalGitHub stars: 3.2K
Figma Code Connectby figma
Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files.
VisualExternalGitHub stars: 2.1K
Figma Create New Fileby figma
**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `create_new_file` tool call. NEVER call `create_new_file` directly without loading this skill first. Trigger whenever the user wants a new blank Figma file — a new design, FigJam, or Slides file — or when you need a fresh file before calling `use_figma`. Usage — /figma-create-new-file [editorType] [fileName] (e.g. /figma-create-new-file figjam My Whiteboard, /figma-create-new-file slides Q3 Review)
VisualExternalGitHub stars: 2.1K
Figma Design to Codeby figma
**MANDATORY prerequisite** — you MUST invoke this skill BEFORE calling the `get_design_context` Figma MCP tool. You MUST trigger this skill whenever the user wants to implement, build, port, or code up a Figma design as code. Example prompts (not exhaustive) are 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'design to code'. This skill provides critical instructions and steps to the agent on how to correctly implement Figma designs in code and must NOT be skipped.
VisualExternalGitHub stars: 2.1K
Figma Generate Designby figma
Translate pages and multi-section layouts into Figma by discovering design system components, variables, and assembling screens section by section.
Design SystemsExternalGitHub stars: 2.1K
Figma Generate Diagramby figma
MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Trigger whenever the user asks to create, generate, draw, render, sketch, or build a diagram — flowchart, architecture diagram, sequence diagram, ERD or entity-relationship diagram, state diagram or state machine, gantt chart, or timeline. Also trigger when the user mentions Mermaid syntax or wants a system architecture, decision tree, dependency graph, API call flow, auth handshake, schema, or pipeline visualized in FigJam. Routes to type-specific guidance, sets universal Mermaid constraints, and tells you when to use a different diagram type or skip the tool entirely (mindmaps, pie charts, class diagrams, etc.).
VisualExternalGitHub stars: 2.1K
Figma Swiftuiby figma
SwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad — in EITHER direction — translating a Figma design into SwiftUI (design → code), or pushing SwiftUI views / screens / tokens back into a Figma file (code → design). Triggers on phrases like 'implement this Figma design in SwiftUI', 'build this screen in Swift', 'push this SwiftUI view to Figma', 'mirror my Swift code in a Figma file', or whenever a Figma URL appears alongside `.swift` files / an `.xcodeproj`. Routes to a direction-specific reference doc; loads alongside `figma-use` for the code → design path.
VisualExternalGitHub stars: 2.1K
Figma Use Figjamby figma
This skill helps agents use Figma's use_figma MCP tool in the FigJam context. Can be used alongside figma-use which has foundational context for using the use_figma tool.
VisualExternalGitHub stars: 2.1K
Figma Use Slidesby figma
This skill helps agents use Figma's use_figma MCP tool in the Slides context. Can be used alongside figma-use which has foundational context for using the use_figma tool.
VisualExternalGitHub stars: 2.1K
Generate Project Planby figma
Generate a FigJam project plan board from a PRD plus codebase context. Interactive flow: research → propose sections → per-section deep research → per-section content + block-shape proposal → create FigJam → skeleton → fill → diagrams → wrap. Each content block (section, nested section, intro callout, table, multi-column text, sticky column, diagram section, metadata strip) has its own subskill reference file. Use when the user asks for 'project plan in FigJam', 'interactive project plan', '/generate-project-plan', or provides a PRD and wants per-section confirmation on content + rendering.
LayoutExternalGitHub stars: 2.1K
Design Labby 0xdesign
Interactive design exploration workflow: conduct interviews, generate variants, and refine UI designs through feedback.
VisualExternalGitHub stars: 782
Bencium Innovative Ux Designerby bencium
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
VisualExternalGitHub stars: 470
Scandinavian Designby ericzakariasson
Apply a refined Scandinavian visual system with a neutral black-and-white foundation, restrained sans-serif typography, purposeful product imagery, generous spacing, clear page chapters, and minimal decoration. Use when the user invokes /scandinavian-design or requests a Nordic, monochrome, calm, spacious, restrained, or minimalist interface.
VisualExternalGitHub stars: 412
Oklch Skillby jakubkrehel
Practical OKLCH color workflow skill for building consistent, accessible, and tunable color systems in modern UIs.
VisualExternalGitHub stars: 273
Swiss Designby zeke
Swiss design system skill focused on grid discipline, typography hierarchy, and clean editorial interface composition.
VisualExternalGitHub stars: 159
Smooth Shadow Ringby flornkm
Style elevated surfaces with smooth shadow ring utilities instead of combining borders or rings with shadows and creating double edges.
VisualExternalGitHub stars: 149
Prefer Container Queriesby flornkm
Enforce Tailwind container queries over viewport breakpoints for responsive components. Use when writing or reviewing responsive Tailwind code, when a component needs to adapt to its available space (cards, sidebars, lists, panels, anything reused in different layouts), or when migrating sm:/md:/lg: classes to @container variants.
LayoutExternalGitHub stars: 115
Webgl Componentsby flornkm
Build small, always-on WebGL visuals (identity avatars, ambient orbs, glass and iridescent surfaces, animated textures) that ship inside a normal web app UI without wrecking performance, accessibility, SSR, or layout. Use whenever a shader-, GLSL-, or canvas-driven decorative element is added to a product UI, especially one rendered many times per page or per list; when reviewing or optimizing one; or when debugging one that renders blurry, aliased, all-black, or paints over the surrounding UI on machines without hardware acceleration.
VisualExternalGitHub stars: 115
Contrast Checkerby AccessLint
Compatibility listing for contrast-checker installs from AccessLint's marketplace skill set.
AccessibilityExternalGitHub stars: 114
Use of Colorby AccessLint
Compatibility listing for use-of-color installs from AccessLint's marketplace skill set.
AccessibilityExternalGitHub stars: 114
Signal Geometryby CaliCastle
Create sparse geometric illustrations and posters from concepts or briefs, using precise spatial systems, restrained contrast, and matte paper texture.
VisualExternalGitHub stars: 96
Slide Wrightby arifszn
Create beautiful, animated web presentations from a topic, rough notes, or an outline. Generates a custom theme and a short two-slide preview, then builds the full deck only once the user confirms the direction. Use when the user wants to make slides, a presentation, a talk deck, or a pitch deck.
MotionExternalGitHub stars: 65
Svg Animationby iart-ai
SVG animation techniques for stroke draw-on effects, path morphing, motion paths, animated icons, gradients, and filters.
MotionExternalGitHub stars: 64
12 Principles of Animationby raphaelsalaja
Apply Disney's 12 animation principles to web interfaces to make motion feel natural, organic, and human.
MotionExternalGitHub stars: 42
Morphing Iconsby raphaelsalaja
Build icon components that morph between SVG shapes with smooth, line-based transformation.
MotionExternalGitHub stars: 42
Pseudo Elementsby raphaelsalaja
Audit CSS pseudo-elements and View Transitions usage for hover effects, decorative layers, and transitions.
MotionExternalGitHub stars: 42
Compact Landingby Danilaa1
Build compact premium landing pages with clear CTA hierarchy, quiet typography, and minimal visual noise.
VisualExternalGitHub stars: 37
Budgeby millionco
Use when making single-property CSS or Tailwind visual changes in Next.js App Router projects. Presents a floating control widget for live tuning before persisting.
VisualExternalGitHub stars: 34
Cc Figma Tokensby nvillapiano
Build or update Figma Primitive and Semantic variable collections from component-contracts token files.
Design SystemsExternalGitHub stars: 34
Sync Figma Tokenby firebenders
Sync design tokens between code and Figma variables with drift reporting, approval gates, safe delta apply, and persisted reports.
Design SystemsExternalGitHub stars: 27
Design Reviewby Superfuture
Run a sharp, prioritized design critique of a UI — a URL, a screenshot/image, or a component file — covering visual hierarchy, typography, spacing, color & contrast, motion, component states, responsiveness, accessibility, and brand consistency. Returns findings ranked from blocking to polish, each with a specific fix; can optionally apply the fixes to code. Use when the user asks to review/critique a design, page, screen, component, or screenshot, or to check craft/accessibility before shipping.
VisualExternalGitHub stars: 24
Rad Spacingby nolanperk
Apply hierarchical spacing variables across Figma layouts using proximity-based 4px and 8px increments from the file's library.
Design SystemsExternalGitHub stars: 14
Linear Disciplineby tjcages
Keep Linear tracking honest during development with search-before-create, lifecycle updates, and close-the-loop discipline.
VisualExternalGitHub stars: 9
Color Contrast for Taste, Not Just Complianceby UI Skillbook
Use accessible contrast ratios as a floor, then build restrained hierarchy on top of them rather than treating them as the whole job.
Visual
Data Table Scannabilityby UI Skillbook
Structure table rows and columns so the eye can scan down and across without losing its place.
Layout
Empty States That Do Somethingby UI Skillbook
Treat empty states as an onboarding opportunity, not a placeholder to fill later.
Visual
Navigation Active Statesby UI Skillbook
Make it unambiguous where the user is, at every level of nested navigation.
Navigation
Optical Alignmentby UI Skillbook
Align interface elements by perceived visual weight, not just mathematical geometry.
Visual