NeVibeCode · 2,133 items
Skills for Design
Skills for Design: what each one does, an install command and example prompts.
interaction-design skill A skill for designing interactions: animations, loading and error states, feedback on touch. Useful when the interface works but feels flat.
CX Codex +1
505installs
design-archivist skill Crawls 500–1000 real sites and turns them into a database of palettes, type, grids and interactions. Useful when you need evidence, not inspiration.
CX Codex +1
321installs
responsive-web-design skill Guides coding agents to write adaptive CSS with a mobile-first mindset. Covers responsive layouts, fluid clamp() typography, and media queries.
CX Codex +1
684installs
user-persona-creation skill Builds realistic user personas from qualitative research and interview notes. Useful for guiding product design and feature prioritization.
CX Codex +1
486installs
figma-integration skill Guides AI agents through translating Figma designs into code. Covers design token extraction, layout conversion, and MCP server configuration.
CX Codex +1
718installs
animate skill Creates animated videos and motion graphics from natural language prompts. Builds a standalone Vite, React, and Framer Motion project that plays scenes in the browser.
CX Codex +1
394installs
data-viz-2025 skill A skill for React, Next.js and TypeScript projects: helps build interactive charts, dashboards and data stories with Tailwind CSS.
CX Codex +1
304installs
dark-mode-design-expert skill A skill for dark mode UI work: atmospheric palettes, WCAG contrast rules and tokens that cover both light and dark schemes. Useful when a theme toggle must not hurt readability.
CX Codex +1
304installs
muapi-logo-creator skill Creates minimalist, flat vector marks using geometric primitives and negative space via muapi.ai. Built for clean brand identities and favicon-ready graphics.
CX Codex +1
2,900installs
thumbnail-design skill This skill writes the thumbnail brief and the A/B test plan: one focal point, mobile-legible text, an honest promise instead of clickbait.
CX Codex +1
699installs
design-and-templates skill A skill that builds a brand kit and a small template set so a non-designer can ship consistent social graphics fast.
CX Codex +1
694installs
less-best-practices skill This skill guides coding assistants on Less architecture, modular project layout, variable scales, and reusable mixins. Keep stylesheet specificity low and maintainable.
CX Codex +1
692installs
scroll-animations skill A skill for animations tied to scrolling: reveal effects, parallax, sticky headers, progress bars. Useful when the page should react to scroll instead of just moving.
CX Codex +1
1,100installs
muapi-ui-design skill Turns a product brief into a design spec for high-fidelity UI mockups and wireframes: atomic design, tokens, layout patterns.
CX Codex +1
2,800installs
muapi-nano-banana skill Formulates reasoning-driven image prompts in Gemini 3 style and sends them to muapi.ai. Useful when you need legible typography and physically accurate lighting.
CX Codex +1
2,800installs
blockbench-texturing skill Create and paint Blockbench model textures with MCP tools. Use the skill for pixel art, UV work, and painting details directly onto a model.
CX Codex +1
1,200installs
animated-infographic skill Lays out a static infographic of icons, numbers and labels, then reveals the elements in sequence. Built for explainer videos.
CX Codex +1
1,300installs
ios-glass-ui-designer skill Redesigns a mobile app UI to feel iOS-native: glass materials, SF Pro type, safe-area handling. Useful when a screen looks out of place on iPhone.
CX Codex +1
504installs
ui-design skill A build guide and quality gate for visual interfaces, covering track selection, accessibility, responsive behavior, themes, motion, and preview delivery.
CX Codex +1
1,800installs
react-flow-architecture skill Architecture guidance for React Flow node-based UIs, covering state, integrations, scale and fit decisions.
CX Codex +1
529installs
nano-banana-prompts skill Builds structured prompts for Gemini 2.5 Flash Image. Replaces keyword tags with descriptive prose for photography, art, and iterative image editing.
CX Codex +1
600installs
responsive-layout-builder skill Equips Claude Code and other AI assistants with mobile-first layout patterns, Tailwind breakpoints, CSS Grid, and container queries.
CX Codex +1
354installs
image-prompt skill Shapes visual briefs for social posts, prevents pointless AI generation, crafts clean natural prompts, and routes requests to the right image engine.
CX Codex +1
632installs
javascript-animation skill The skill turns a brief into a short animated film where every frame is computed on an HTML canvas, then renders it to MP4. Useful when you have no image assets to work with.
CX Codex +1
532installs
animated-readme-logo skill A skill that builds, reworks and audits README logos, from a validated SVG master to static PNG and animated GIF.
CX Codex +1
2,700installs
drawio-diagrams skill Generates, edits, and audits editable .drawio files inside agent sessions. It builds technical architecture diagrams and flowcharts, leaving out business data plots.
CX Codex +1
2,700installs
frontend-design-ui-ux skill This skill creates a locked design language and UX/UI specification for a feature or screen. Use it before handing the build to an engineering agent.
CX Codex +1
2,400installs
tailwind-responsive-ui skill A skill for Claude and other AI editors that helps turn Tailwind CSS interfaces into layouts that work on mobile and desktop.
CX Codex +1
461installs
brand-consistency-checker skill A skill that scans documents and slides for off-brand colors, fonts and logos, checks them against your guidelines and suggests fixes.
CX Codex +1
345installs
layer-pixel-art skill A skill for making pixel art with Layer: sprites, tiles, walk cycles, and packing frames into a sheet. Useful when output comes back blurry or off-grid.
CX Codex +1
3,400installs
layer-art-direction skill Establishes visual style, color palettes, and storyboards before volume asset generation. It prevents wasted Creative Units on blind prompt rerolls.
CX Codex +1
3,400installs
soundtrack skill Writes a score for an animation in code with Web Audio, renders it to WAV, and checks that every cut lands on the beat without a startling jump in loudness.
CX Codex +1
543installs
game-designer skill A skill for game animation work: it maps Disney's 12 principles onto responsive controls and satisfying impact feedback.
CX Codex +1
1,000installs
mobile-first-design skill Enforces mobile-first responsive styling starting at 320px, 48x48px touch targets, and a 500KB total page weight cap.
CX Codex +1
568installs
quote-cards-and-text-graphics skill Specs typographic quote cards, pull-quotes, and standalone stat graphics for social channels. Useful when turning a single sharp sentence into a readable card.
CX Codex +1
612installs
tailwind-ui-refactor skill A skill that refactors HTML with Tailwind utility classes: hierarchy, spacing, typography, color. Useful when you build UI without a designer on hand.
CX Codex +1
458installs
zimage-generation skill This skill sends a text prompt to Z-Image through the ModelScope API and saves the generated image. Use it when an agent needs to create an image from a description.
CX Codex +1
868installs
awwwards-landing-page skill Provides instructions for scaffolding a Next.js designer portfolio with GSAP and Locomotive Scroll. Useful for shipping an animated static site quickly.
CX Codex +1
1,300installs
efecto-graphic-design skill Enables AI agents to build graphic layouts, pitch decks, and social banners via the Efecto canvas. Generates designs through JSX and live browser sync.
CX Codex +1
795installs
pinterest-pin-design skill Plans 2:3 Pinterest pin concepts, keyword overlays readable in mobile feeds, and fresh design variations for destination URLs.
CX Codex +1
604installs
1,481–1,520 of 2,133
