Skills
Instructions your agent can follow for layout, type, motion, forms and more.
147 skills
Results
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
Animation Vocabularyby emilkowalski
Sharpen motion language so animation choices feel deliberate and consistent.
MotionExternalGitHub stars: 51.4K
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
Apple Designby emilkowalski
Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.
MotionExternalGitHub stars: 51.4K
Banner Designby nextlevelbuilder
Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.
VisualExternalGitHub stars: 142.5K
Baseline Uiby ibelick
Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.
Design SystemsExternalGitHub stars: 10.4K
Beautiful Shadowsby MengTo
Use when a UI needs better depth, elevation, and shadow treatment without looking muddy.
VisualExternalGitHub stars: 7.1K
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
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
Bolderby pbakaus
Increase visual impact and personality for interfaces that feel too safe, bland, or generic.
VisualExternalGitHub stars: 95.1K
Brandby nextlevelbuilder
Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
VisualExternalGitHub stars: 142.5K
Brandkitby Leonxlnx
Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.
VisualExternalGitHub stars: 105.4K
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
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
Canvas Designby anthropics
Create original visual designs and art on digital canvases using design philosophy, focusing on form, space, and color.
VisualExternalGitHub stars: 184.8K
Cc Figma Tokensby nvillapiano
Build or update Figma Primitive and Semantic variable collections from component-contracts token files.
Design SystemsExternalGitHub stars: 34
Cobejsby MengTo
Use when building lightweight animated globe or orb visuals with Cobe.
VisualExternalGitHub stars: 7.1K
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
Colorizeby pbakaus
Introduce strategic color systems to interfaces that feel dull, monochrome, or visually flat.
VisualExternalGitHub stars: 95.1K
Compact Landingby Danilaa1
Build compact premium landing pages with clear CTA hierarchy, quiet typography, and minimal visual noise.
VisualExternalGitHub stars: 37
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
Contrast Checkerby AccessLint
Compatibility listing for contrast-checker installs from AccessLint's marketplace skill set.
AccessibilityExternalGitHub stars: 114
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
Critiqueby pbakaus
Evaluate design quality with structured UX scoring, persona checks, and actionable remediation guidance.
VisualExternalGitHub stars: 95.1K
Daisyuiby saadeghi
Official daisyUI component library skill, providing docs, class names, examples and code examples to generate better daisyUI code.
VisualExternalGitHub stars: 42.7K
Data Table Scannabilityby UI Skillbook
Structure table rows and columns so the eye can scan down and across without losing its place.
Layout
Designby nextlevelbuilder
Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.
VisualExternalGitHub stars: 142.5K
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
Design Labby 0xdesign
Interactive design exploration workflow: conduct interviews, generate variants, and refine UI designs through feedback.
VisualExternalGitHub stars: 782
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
Design Systemby nextlevelbuilder
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.
VisualExternalGitHub stars: 142.5K
Design Taste Frontendby Leonxlnx
Senior UI/UX frontend skill that enforces anti-slop design decisions, motion quality, and architecture discipline.
TasteExternalGitHub stars: 105.4K
Emil Design Engby emilkowalski
Emil Kowalski's design-engineering philosophy for UI polish, components, animation, and production-ready frontend craft.
TasteExternalGitHub stars: 51.4K
Empty States That Do Somethingby UI Skillbook
Treat empty states as an onboarding opportunity, not a placeholder to fill later.
Visual
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
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
Frontend Designby anthropics
Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code and UI design that avoids generic AI aesthetics.
VisualExternalGitHub stars: 184.8K
Frontend Slidesby zarazhangrui
Create animation-rich HTML presentations from scratch or convert PPT/PPTX files into polished web slides.
MotionExternalGitHub stars: 31.6K
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
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
High End Visual Designby Leonxlnx
High-end visual design guidance for premium typography, spacing, depth, and animation systems.
TasteExternalGitHub stars: 105.4K
I Have Adhdby ayghri
Shape output for a reader with ADHD by leading with the next action, numbering steps, suppressing tangents, and making progress visible.
VisualExternalGitHub stars: 59.3K
Image to Code Skillby Leonxlnx
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.
VisualExternalGitHub stars: 105.4K
Imagegen Frontend Mobileby Leonxlnx
Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By default, screens should be shown inside a subtle premium iPhone or similar phone mockup with a visible frame, while the main focus stays on the app content itself. This skill generates images only. It does not write code.
VisualExternalGitHub stars: 105.4K
Imagegen Frontend Webby Leonxlnx
Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product comps that developers or coding models can accurately recreate.
VisualExternalGitHub stars: 105.4K
Impeccableby pbakaus
Flagship design skill for production-grade, anti-generic frontend interfaces with strong craft and consistency.
TasteExternalGitHub stars: 95.1K
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
Industrial Brutalist Uiby Leonxlnx
Raw, mechanical interface direction mixing Swiss print structure with terminal-inspired brutalist aesthetics.
TasteExternalGitHub stars: 105.4K