NeVibeCode · 2,133 items
Skills for Design
Skills for Design: what each one does, an install command and example prompts.
visual-emphasis-and-hierarchy skill Enforces visual hierarchy rules in UI: button priorities, contrast, whitespace, and text emphasis. Useful when designing dashboards, cards, and CTA sections.
CX Codex +1
874installs
wcag-accessibility skill This skill guides interface work against WCAG 2.2 AA, from contrast and keyboard access to form labels. Use it when building or reviewing user-facing UI.
CX Codex +1
873installs
button-states skill A skill that defines six states for interactive elements and derives hover and active colours from the base colour in HSL. Useful when buttons in a project look unfinished.
CX Codex +1
877installs
core-animation skill This skill helps an agent find QuartzCore documentation for layer properties, animations, and related APIs. Use it when you need direct control over Core Animation behavior.
CX Codex +1
400installs
hig-project-context skill Writes one shared document about your Apple project so the other HIG skills stop asking the same setup questions.
CX Codex +1
628installs
hig-components-system skill Adds Apple HIG guidelines for widgets, Live Activities, complications, and alerts. Guides design choices for interfaces outside your main app.
CX Codex +1
625installs
component-family-consistency skill Keeps buttons, inputs, badges and pills on the same radius, colour logic, shadow, border and spacing. Useful when building or reviewing a component library.
CX Codex +1
874installs
loading-states-and-perceived-performance skill A coding-agent skill that picks the right spinner, skeleton or progress bar and makes a slow interface feel faster.
CX Codex +1
871installs
generate-ui-from-brand skill Turns a site URL or a DESIGN.md file into design tokens, UX decisions and a UI spec you can paste into a project.
CX Codex +1
870installs
micro-interactions skill A skill for small purposeful animations: toggles, animated icons, success moments. Useful when an interface gives no feedback.
CX Codex +1
869installs
databricks-app-design skill Design data screens for custom Databricks Apps built with AppKit/React. Use it for KPIs, reports, charts, tables, and Genie or chat views.
CX Codex +1
315installs
hig-technologies skill A skill that feeds your agent Apple HIG rules for Siri, Apple Pay, HealthKit, ARKit, iCloud and other system technologies.
CX Codex +1
620installs
ui-design skill Frontend design guidelines covering 42 rules across 8 categories. It steers interface code toward WCAG accessibility and Core Web Vitals standards.
CX Codex +1
513installs
color-palette-extractor skill Pulls dominant colors out of an image, screenshot or website and turns them into a palette with contrast checks. Handy when you need a theme built from a logo or someone else's mockup.
CX Codex +1
609installs
ux-design skill A skill that hands your coding agent a set of UX rules, from user research to accessibility and responsive layout. Useful when you design or review an interface.
CX Codex +1
1,100installs
lottie skill A skill that steers your coding agent through Lottie work: dotLottie files, lazy loading, renderer choice and reduced-motion fallbacks.
CX Codex +1
1,100installs
status-colors-and-errors skill A skill that sets rules for semantic status colours and error copy: how many colours to keep, what each one means, and how to write a message with a way forward.
CX Codex +1
859installs
elevation-and-depth skill Defines rules for shadows, border radius, and surface layering in CSS. Helps the agent style cards, modals, dropdowns, and tooltips with physical depth.
CX Codex +1
854installs
extract-design skill Extract colors, type, spacing, and component styles from a live website. Use the results to seed a design system or build a Tailwind theme.
CX Codex +1
853installs
sticky-and-fixed-elements skill Decides what stays on screen while the user scrolls: sticky headers, bottom toolbars, floating action buttons, pinned table headers.
CX Codex +1
855installs
data-display-and-selection skill Guides the agent through data collections: view modes, row selection, mass actions, sorting, filters and search patterns.
CX Codex +1
855installs
notifications-and-recovery skill A skill for designing notifications and error states: toasts, inline errors, banners and recovery paths. Useful when you need feedback after an action.
CX Codex +1
854installs
tui-design skill A skill for designing terminal interfaces: panel layouts, color schemes, keyboard navigation and async state. Useful when you build a TUI dashboard or picker.
CX Codex +1
1,300installs
scroll-areas skill Teaches coding agents to avoid inner scroll containers and restricts unavoidable scroll areas to a single axis in UI layouts.
CX Codex +1
843installs
ui-context-and-scope skill Defines rules for user orientation in deep navigation layouts: breadcrumbs, visual section borders, and persistent impersonation banners.
CX Codex +1
842installs
iphone-duo-dual-pane-patterns skill Guides two-pane UI development for iPhone Duo, covering panel dimensions and hinge callbacks. Useful when building dual-screen flows or adapting layouts to fold poses.
CX Codex +1
393installs
real-world-metaphors skill Helps you pick between a card, carousel, drawer and accordion when designing components and navigation.
CX Codex +1
841installs
21st-design-sync skill Extracts shadcn and Tailwind CSS tokens from your project and publishes them as a public theme on 21st.dev using the 21st CLI.
CX Codex +1
1,700installs
global-toolbar-controls skill Guides the layout and styling of language, currency, and unit selectors. It helps keep global controls accessible in the header or footer without cluttering primary navigation.
CX Codex +1
834installs
webflow-mcp:designer-tools skill Use this skill to create and edit Webflow pages, elements, styles, and components through MCP. Most page work can run without Designer open.
CX Codex +1
841installs
figma-design-to-code
official skill Guides an agent through implementing a Figma node in a project’s existing stack. Use it before calling get_design_context.
CX Codex GP ChatGPT
30installs
framer-motion skill This skill guides the agent in implementing Disney's 12 animation principles with Framer Motion in React. Useful for building UI transitions and gesture animations.
CX Codex +1
1,700installs
stock-photo-finder skill A skill for searching multiple free stock photo sites at once with license, orientation, and palette filters. Useful when sourcing images for UI layouts and articles.
CX Codex +1
582installs
dembrandt skill Runs a UI/UX task through six ordered stages: brand, tokens, layout, components, polish, accessibility. Useful for a design review or a build from scratch.
CX Codex +1
822installs
premium-frontend-design skill Guides coding assistants to build distinctive, motion-driven frontend interfaces. It prevents generic layouts by enforcing design principles and shader rules.
CX Codex +1
1,400installs
font-pairing-suggester skill Suggests font combinations for a given use case and shows heading hierarchy with examples. Handy when you need a free stand-in for a paid typeface.
CX Codex +1
578installs
pixel-art skill This skill gives your agent working knowledge of pixel art: limited palettes, dithering, subpixel animation, tiles and retro hardware limits. Useful when you draw sprites and tilesets.
CX Codex +1
520installs
webflow-mcp:flowkit-naming skill Brings CSS class names in Webflow in line with the Flowkit system: audits what exists, generates new names, applies them through MCP tools.
CX Codex +1
824installs
presentation-design-enhancer skill Turns text-heavy slides into visual storytelling, suggesting layout changes, icons and ways to show data.
CX Codex +1
573installs
dashboards-and-real-time-visualization
official skill Designs dashboards and live data visualization systems. Helps structure streaming data, refresh rates, mobile interruptions, and rendering budgets.
CX Codex GP ChatGPT
29installs
1,361–1,400 of 2,133
