NeVibeCode · 2,133 items
Skills for Design
Skills for Design: what each one does, an install command and example prompts.
frontend-ui-engineering skill This skill guides an agent through accessible, responsive UI work. Use it when building pages, components, layouts, or interface state.
CX Codex +1
67,400installs
api-and-interface-design skill Guides API and module-boundary design with explicit contracts, validation, and consistent errors. Use it for REST, GraphQL, or public interfaces.
CX Codex +1
62,600installs
mobile-native skill Strips the tells that give a web app away on a phone: sticky hover, tap highlight flash, the 100vh bug.
CX Codex +1
86,600installs
ppt-master skill This skill creates and edits PPTX decks, rebuilds slide visuals, and fills native templates. Use it when an agent needs a presentation workflow rather than plain text.
CX Codex +1
19,900installs
diagram-design skill Draws 45 diagram types as self-contained HTML files with inline SVG. Useful when a picture beats a paragraph.
CX Codex +1
19,600installs
image skill A skill for marketing visuals: AI generation, editing existing images, picking the right model, and web optimization.
CX Codex +1
87,800installs
design-md
official skill Extracts screens and styles from Google Stitch via MCP to synthesize a semantic design system into a DESIGN.md file.
CX Codex +1
64,800installs
paywalls skill This skill helps plan and improve in-app paywalls, upgrade screens, upsell modals, and feature gates when a free user is asked to move to a paid plan.
CX Codex +1
71,000installs
popups skill Guides the design and copy of modals, slide-ins, and banners focused on conversions without hurting user experience.
CX Codex +1
70,900installs
enhance-prompt
official skill Turns rough UI concepts into detailed, structured prompts for Google Stitch. Pulls tokens from DESIGN.md and formats colors, sections, and component keywords.
CX Codex +1
58,300installs
stitch-loop
official skill Guides agents through iterative website creation with Stitch MCP. The agent reads the baton file, generates UI, integrates the page, and prepares tasks for the next run.
CX Codex +1
56,400installs
remotion-markup skill A skill that tells your agent how to write Remotion React markup: frame-driven animation, media components, effects. Useful when you build video in code.
CX Codex +1
207,700installs
gsap-core skill This skill helps write core GSAP animations for DOM and SVG. Use it for tweens, easing, stagger effects, and reduced-motion handling.
CX Codex +1
75,800installs
stitch::react-components
official skill Turns Stitch designs into modular Vite and React components. Can also sync existing components with updated Stitch designs.
CX Codex +1
50,400installs
gsap-scrolltrigger skill Teaches AI agents to build scroll-driven animations with GreenSock ScrollTrigger, including pinned sections and scrub timelines.
CX Codex +1
72,800installs
gsap-timeline skill This skill helps an agent build GSAP timelines, control timing, and manage playback. Use it for multi-step or parallel animation scenes.
CX Codex +1
69,700installs
gsap-plugins skill A skill that walks your agent through GSAP plugin registration and usage: ScrollTo, Flip, Draggable, SplitText and more. Handy when your animations already run on GSAP.
CX Codex +1
67,700installs
gsap-react skill This skill guides GSAP animation work in React and Next.js, including scoped selectors, cleanup, and client-only execution.
CX Codex +1
66,900installs
remotion-studio skill This skill starts Remotion Studio and opens a video preview. Use it to inspect a composition and follow changes while working on a video.
CX Codex +1
177,200installs
animation-performance skill A diagnostic skill that tracks down dropped frames in web animations and points to the cheaper property to animate instead.
CX Codex +1
36,800installs
gsap-utils skill This skill guides an agent through gsap.utils for ranges, random values, snapping, and collections. Use it when building GSAP animations.
CX Codex +1
65,700installs
daisyui skill This skill hands your coding agent the daisyUI 5 reference, so it writes markup with real component classes instead of inventing its own.
CX Codex +1
12,100installs
remotion
official skill Turns Stitch project screens into a Remotion walkthrough with transitions, zoom effects, and text overlays. Useful for presenting an interface screen by screen.
CX Codex +1
41,400installs
anatomy skill Builds detailed interactive isometric SVG figures that explain technical ideas as physical machines. Useful for landing pages and docs.
CX Codex +1
21,800installs
make-interfaces-feel-better skill This skill guides small UI refinements, from icon alignment to motion. Use it while building components or reviewing frontend code.
CX Codex +1
73,400installs
gifgrep skill Searches Tenor and Giphy from the CLI, downloads GIF files, and extracts frames or contact sheets for PRs and docs.
CX Codex +1
5,200installs
baoyu-image-gen skill Generates images via OpenAI, Google, DashScope, and other APIs directly inside your coding agent. Handles text prompts, image references, and parallel batch jobs.
CX Codex +1
33,600installs
fireworks-tech-graph skill Builds precise technical SVG diagrams, exports them to PNG or standalone HTML, and animates semantic SVGs into GIFs. Suitable for system architecture, UML, and cloud workflows.
CX Codex +1
18,000installs
baoyu-infographic skill Turns your text into an infographic: picks a layout and style, writes the prompt, renders the image.
CX Codex +1
32,800installs
baoyu-cover-image skill Generates article cover images across five dimensions: type, palette, rendering, text and mood. Useful when a post or longread needs a header image.
CX Codex +1
32,100installs
excalidraw-diagram-generator
official skill Turn a plain-language description into an Excalidraw diagram. Useful for mapping processes, system structure, and relationships between entities.
31,639installs
baoyu-article-illustrator skill Inspects article structure, picks key spots for graphics, and generates consistent raster illustrations. Use it when an article needs visuals planned directly inside your coding agent.
CX Codex +1
31,900installs
baoyu-xhs-images skill Splits an article or post into a series of cartoon-style image cards. Handy when you need social media visuals without doing the design yourself.
CX Codex +1
31,300installs
baoyu-slide-deck skill Turns content into slide images: an outline with style rules first, then individual PNGs. Built for reading and sharing, not live presenting.
CX Codex +1
31,200installs
interface-design skill This skill guides product UI work for dashboards, admin panels, SaaS apps, and tools. Use it when hierarchy, states, visual direction, and design-system consistency matter.
CX Codex +1
30,800installs
taste-design
official skill Generates agent-ready DESIGN.md files for Google Stitch screens. It sets strict rules for typography, palettes, and spring motion to avoid generic UI tropes.
CX Codex +1
20,200installs
baoyu-compress-image skill Compresses images into WebP or PNG using local tools like sips and cwebp. Handy for optimizing assets directly inside your repository.
CX Codex +1
28,200installs
tailwind-design-system skill Helps build design systems with Tailwind CSS v4, from theme tokens to component variants. Use it when a project needs shared UI patterns.
CX Codex
70,180installs
frost-sequence-camera-orbit skill Builds a 22.5-second scene where an orbiting camera follows an ice logo that breaks apart, reforms into two text moments, and fades.
CX Codex +1
10,000installs
orbit-card skill Adds a 10-second 1920×1080 HyperFrames motion block where a single feature card orbits a dot sphere using exported Blender camera paths.
CX Codex +1
10,000installs
41–80 of 2,133
