NeVibeCode · 2,133 items
Skills for Design
Skills for Design: what each one does, an install command and example prompts.
gsap-web skill Helps AI coding assistants write GSAP animations, from sequenced timelines and ScrollTrigger effects to SplitText, Flip, and Lenis smooth scroll.
CX Codex +1
2,500installs
micro-interaction skill A skill for small UI motion: hover and press feedback, toggles, toasts, drawers, list reordering. Useful when an interface needs to feel responsive.
CX Codex +1
2,500installs
atomic-design-fundamentals skill Lays out UI components across the six Atomic Design levels, from tokens up to pages. Useful once a codebase has enough components that placement gets arbitrary.
CX Codex +1
766installs
tailwindcss skill Guides coding agents through Tailwind CSS v4 component styling using project tokens, explicit utility classes, and accessible layouts.
CX Codex +1
447installs
scenario-textures skill Orchestrates tileable texture generation, repeat-safe upscaling, and PBR material extraction via the Scenario MCP. Useful when preparing 2D surfaces and 3D mesh materials for game engines.
CX Codex +1
500installs
gpt-taste skill Forces coding agents to generate layout images, analyze their typography and spacing, and only then write frontend code.
CX Codex +1
398installs
app-icon skill Generates dimensional iOS and Android app icons for Expo projects and crops them to store requirements.
CX Codex +1
396installs
design-taste skill This skill guides interface design and review, from visual direction to typography, layout, motion, and component states. Use it when building or polishing a web UI.
CX Codex +1
720installs
screenshot-to-code skill Turns a screenshot, mockup or Figma export into working front-end code, then renders it and compares the result against the image. Handy when the design exists but the markup does not.
CX Codex +1
1,300installs
product-taste skill A skill that helps you name why a product feels good and make hard calls before the numbers arrive.
CX Codex +1
397installs
instagram-carousel skill Builds an Instagram carousel as a swipeable HTML preview and exports every slide as a ready 1080×1350 PNG.
CX Codex +1
817installs
page-transition-animation skill A skill for animating page transitions in Next.js App Router and fixing Framer Motion AnimatePresence exit animations that never fire on navigation.
CX Codex +1
2,300installs
glassmorphism skill A skill that teaches your coding agent to build frosted glass panels: blurred backdrops, lit edges, layered shadows and SVG refraction.
CX Codex +1
2,400installs
tool-foundation-sprint-approach-options skill Facilitates the Day 2 morning step of a Foundation Sprint. Generates 3 to 7 candidate approaches as one-page summaries before the team locks into a single bet.
CX Codex +1
622installs
presentation-design skill A skill that shapes presentations around the audience: structure, visual clarity, cognitive load. Use it before building a deck or to review existing slides.
CX Codex +1
2,500installs
tool-design-sprint-prototype-plan skill Creates Thursday’s Design Sprint planning pack: team roles, a prototype brief, and an interview script. Run it after Wednesday’s storyboard is approved.
CX Codex +1
620installs
tool-design-sprint-map-and-target skill Guides Day 1 of a Design Sprint to produce the Monday artifact: long-term goal, customer map, HMW clusters, and target moment.
CX Codex +1
620installs
tool-design-sprint-decide-and-storyboard skill Runs Wednesday of a Design Sprint: art museum layout, heat map, speed critique, straw poll, the Decider's supervote and a 5-15 step storyboard.
CX Codex +1
620installs
stop-describing-ui skill A skill that removes explanatory copy from interfaces: headings, empty states, button labels, helper text and onboarding. Useful when a screen explains itself instead of showing an action.
CX Codex +1
717installs
tool-design-sprint-sketch skill Runs day two of a Design Sprint: lightning demos plus the four-step independent sketch protocol. Useful for a facilitator once Monday's target is locked.
CX Codex +1
616installs
using-ui-stack skill Makes the agent build interfaces from fixed rules: an 8px grid, 60-30-10 colors, type scale, dark mode and interaction states.
CX Codex +1
539installs
qt-figma-token-extraction skill Reads variables, text styles and tokens out of a Figma file, then writes design-tokens.json and working QML singletons built around one Theme.
CX Codex +1
439installs
ios-liquid-glass skill An API reference for the Liquid Glass design system in iOS 26+. Covers glassEffect modifiers, containers, morphing transitions and navigation patterns.
CX Codex +1
803installs
resend-design-skills skill Routes coding agents to Resend visual identity rules and assets. Use it when styling marketing graphics, slide decks, or public-facing materials.
CX Codex +1
1,200installs
ui-design skill A skill that gives the agent design rules for layout, type, color and spacing. Useful when no product design-system skill exists.
CX Codex +1
832installs
qt-figma-component-generation skill Reads Figma components over MCP and writes QML controls for Qt Quick Controls 2. It runs at the component generation step of a design-system workflow.
CX Codex +1
437installs
mapbox-style-patterns skill Ready-made Mapbox layer setups for common maps: POI finders, real estate, navigation, delivery. Useful when you want a proven style instead of picking colors from scratch.
CX Codex +1
2,300installs
hig skill A local Markdown reference for Apple Human Interface Guidelines to check touch targets, Dynamic Type, system components, and App Review rules on demand.
CX Codex +1
786installs
ai-native-ux skill Guides you through designing interfaces for probabilistic models: what the AI should decide and what stays with the human.
CX Codex +1
373installs
tailwindcss-animations skill A Tailwind CSS skill covering built-in animation utilities, custom keyframes, transitions, reduced-motion and Framer Motion.
CX Codex +1
2,400installs
scenario-image-editing skill Edits existing images via Scenario MCP tool models: upscales to 4K, applies 3D LUT grades, and cuts out backgrounds. Useful for asset pipelines without prompting.
CX Codex +1
443installs
ui-design-system skill A skill for reviewing and building React interfaces with TailwindCSS, Radix UI and shadcn/ui. Useful when your components have drifted apart.
CX Codex +1
3,200installs
scenario-asset-analysis skill Extracts style prompts and control maps from Scenario assets, plus searches catalogs by similarity. Helpful for QA reviews on image batches and conditioning downstream models.
CX Codex +1
435installs
design-style-picker skill Generates a batch of visual design directions and lets you choose from images instead of a written brief. Handy when a client cannot put the look into words.
CX Codex +1
342installs
frontend-design skill Audits existing CSS, pulls out design tokens, and generates palettes, type scales and component templates. Useful when your UI looks like default AI output.
CX Codex +1
2,300installs
lottie-animation skill Gives your agent the wiring for After Effects vector animation: player setup, frame control, scroll effects and runtime recoloring.
CX Codex +1
2,100installs
wireframe-prototyping skill Sketch a UI and build a prototype before development starts. Useful when you need early feedback from a team or a client.
CX Codex +1
1,400installs
hand-drawn-diagrams skill Draws hand-drawn diagrams, flowcharts, wireframes and page mockups as Excalidraw files. Useful when a picture explains the flow faster than prose.
CX Codex +1
620installs
web-3d-asset-pipeline
official skill Guides browser-game 3D assets from Blender cleanup to GLB or glTF preparation. Use it after choosing a runtime stack, when asset quality or size is the remaining issue.
CX Codex GP ChatGPT
58installs
window-management
official skill Configures macOS 15+ SwiftUI windows and scenes: toolbar chrome, drag regions, placement, and launch restoration.
CX Codex GP ChatGPT
58installs
1,201–1,240 of 2,133
