Visual skills
Color, contrast, depth, icons and imagery: how the interface looks at a glance.
147 skills, page 2 of 4
Skills
Create Design Mdby ibelick
Create or update a DESIGN.md from an existing product repository or public website, with evidence-based design tokens and guidance.
Design SystemsExternalGitHub stars: 10.4K
Improve Uiby ibelick
Audit an existing product surface against its own design evidence, identify verified UI problems, and write self-contained implementation plans for another agent without modifying product source.
VisualExternalGitHub stars: 10.4K
Better Colorsby jakubkrehel
OKLCH color space for web projects. Convert hex/rgb/hsl to oklch, generate palettes, check contrast, handle gamut boundaries, and theme with Tailwind v4. Triggers on oklch, color conversion, palette generation, contrast ratio, gamut, display p3, design tokens, hue drift, chroma, dark mode colors.
VisualExternalGitHub stars: 9.2K
Better Interfaceby jakubkrehel
Run a holistic interface review across accessibility, layout, writing, typography, color, and visual polish.
VisualExternalGitHub stars: 9.2K
Better Layoutby jakubkrehel
Improve interface structure through grouping, alignment, reading order, progressive disclosure, and adaptive responsive layouts.
Design SystemsExternalGitHub stars: 9.2K
Better Typographyby jakubkrehel
Web typography from choosing fonts to spacing, wrapping and accessibility. Use when picking or pairing typefaces, configuring variable fonts or OpenType features, setting up a type scale, styling text in components, truncating text, styling underlines, selection, placeholders or carets, or reviewing frontend code for typography. Triggers on typography, fonts, font formats, woff2, variable fonts, font-weight, opentype, font-feature-settings, letter-spacing, line-height, type scale, tabular numbers, text-wrap, truncation, line clamp, underlines, text-decoration, text selection, iOS input zoom, font smoothing, text contrast, measure, line length, text-box, smart punctuation, drop cap.
TypographyExternalGitHub stars: 9.2K
Better Uiby jakubkrehel
Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, image outlines, box shadows.
VisualExternalGitHub stars: 9.2K
Breakby jakubkrehel
Answers "does this survive?" for one component. Renders it on a page in every state real use can put it in, and hands that page over as a visual report of what broke.
LayoutExternalGitHub stars: 9.2K
Explain Interfaceby jakubkrehel
Answers how was this built about an interface. Give it a URL and name the thing you're curious about, and it reads the layers that produce the effect. Reads the whole frontend instead when you don't name a thing. From a screenshot it reconstructs rather than reads and says so.
TasteExternalGitHub stars: 9.2K
Interface Reviewby jakubkrehel
Interface review of a change rather than a screen: uncommitted work, the current branch, or a pull request. Covers interface quality, not correctness, tests, or security.
TasteExternalGitHub stars: 9.2K
Variantby jakubkrehel
Answers which of these rather than is this right. Builds several genuinely different versions of one piece of UI behind a picker in the real page, so you can flip between them and promote the one that wins.
VisualExternalGitHub stars: 9.2K
Gc Minimal Zine Poster V0 1by LiamGvchi
Generate quiet minimal zine-style editorial poster prompts and matching raster images from themes, moods, objects, photos, or content briefs.
VisualExternalGitHub stars: 7.4K
Beautiful Shadowsby MengTo
Use when a UI needs better depth, elevation, and shadow treatment without looking muddy.
VisualExternalGitHub stars: 7.1K
Cobejsby MengTo
Use when building lightweight animated globe or orb visuals with Cobe.
VisualExternalGitHub stars: 7.1K
Company Logosby MengTo
Use when laying out logos, trust rows, or brand collections in a clean and balanced way.
Design SystemsExternalGitHub stars: 7.1K
Container Linesby MengTo
Use when using borders and container structure as part of the visual system.
Design SystemsExternalGitHub stars: 7.1K
Design First Ui Promptingby MengTo
Use when you want to turn a product goal into a design-first UI prompt with clear layout, type, color, and constraint choices.
VisualExternalGitHub stars: 7.1K
Landing Pageby MengTo
Use when designing or implementing a landing page with strong hierarchy, conversion flow, and visual pacing.
VisualExternalGitHub stars: 7.1K
Masked Revealby MengTo
Use when revealing content with masked motion, clipped transitions, or layered entrances.
MotionExternalGitHub stars: 7.1K
Pricing Pageby MengTo
Use when building a pricing page with clear plan comparison, emphasis, and conversion-oriented layout.
VisualExternalGitHub stars: 7.1K
Progressive Blurby MengTo
Use when applying blur transitions or layered depth effects that need to feel smooth and controlled.
VisualExternalGitHub stars: 7.1K
Threejsby MengTo
Use when building 3D scenes, interactions, or WebGL-backed interface moments in Three.js.
VisualExternalGitHub stars: 7.1K
Webgl Landing Steeringby MengTo
Use when steering a landing page around a WebGL centerpiece or hero experience.
VisualExternalGitHub stars: 7.1K
Antfu Designby antfu
antfu-style design conventions, broadened. UnoCSS-first, class-based semantic tokens with dual light/dark for tooling and devtools UIs, plus design-read, anti-slop, and micro-interaction polish for landing pages and product surfaces. Use when building or refactoring any interface with UnoCSS.
LayoutExternalGitHub stars: 6K
Nitroby antfu
Nitro is the framework-agnostic server toolkit (powering Nuxt) for building and deploying web servers anywhere. Use when working with nitro.config, server routes/event handlers, route rules, caching, storage, tasks, websockets, or deploying to Node/Bun/Deno/Cloudflare/Vercel.
LayoutExternalGitHub stars: 6K
Slidevby antfu
Create developer slide decks with Slidev using Markdown, Vue components, code highlighting, and animations.
MotionExternalGitHub stars: 6K
Unocssby antfu
UnoCSS atomic CSS engine guidance for rules, shortcuts, and presets like Wind, Icons, and Attributify.
VisualExternalGitHub stars: 6K
Web Design Guidelinesby antfu
Review UI code for web interface guideline compliance, including accessibility and UX best practices.
VisualExternalGitHub stars: 6K
Refine Liveby Jakubantalik
Iteratively refine UI in live sessions with a focus on motion, polish, and interaction detail.
MotionExternalGitHub stars: 5.9K
Interface Designby Dammyjay93
Specialized skill for interface design: dashboards, admin panels, and SaaS apps. Focused on craft and consistency.
VisualExternalGitHub stars: 5.9K
Text to Lottieby diffusionstudio
Turn text prompts into polished Lottie animations for motion-heavy UI work.
MotionExternalGitHub stars: 5.6K
Make Interfaces Feel Betterby jakubkrehel
Design engineering principles for making interfaces feel polished, with focus on micro-interactions, typography, and visual details.
TasteExternalGitHub stars: 3.9K
Threejs Animationby cloudai-x
Three.js animation guidance for keyframes, skeletal animation, morph targets, and animation blending.
VisualExternalGitHub stars: 3.8K
Threejs Fundamentalsby cloudai-x
Three.js scene setup guidance for cameras, renderer configuration, object hierarchy, and transforms.
VisualExternalGitHub stars: 3.8K
Threejs Geometryby cloudai-x
Three.js geometry patterns for built-in shapes, BufferGeometry, custom meshes, and instancing.
VisualExternalGitHub stars: 3.8K
Threejs Interactionby cloudai-x
Three.js interaction patterns for raycasting, controls, pointer input, and object selection.
VisualExternalGitHub stars: 3.8K
Threejs Lightingby cloudai-x
Three.js lighting guidance for light types, shadows, environment lighting, and performance tuning.
VisualExternalGitHub stars: 3.8K
Threejs Loadersby cloudai-x
Three.js asset loading patterns for GLTF, textures, HDR assets, async loading, and progress handling.
VisualExternalGitHub stars: 3.8K
Threejs Materialsby cloudai-x
Three.js material guidance for PBR, classic materials, shader materials, and material optimization.
VisualExternalGitHub stars: 3.8K
Threejs Postprocessingby cloudai-x
Three.js post-processing techniques with EffectComposer, bloom, depth of field, and screen-space effects.
VisualExternalGitHub stars: 3.8K