NeVibeCode · 2,133 items
Skills for Design
Skills for Design: what each one does, an install command and example prompts.
md-slides skill Turns a Markdown deck into a single-file HTML presentation with keyboard controls, speaker notes, and PDF printing. Use it for slides authored in Markdown.
15installs
figma-ui-skills skill Applies Figma UI constraints: light mode, Inter font, and a 4px grid. Keeps coding agents from picking random spacing, colors, or heavy layout animations.
CX Codex +1
346installs
design-system-creation skill A skill that walks the agent through building a design system: tokens, typography, components and their docs. Useful when UI standards need to be settled before code.
CX Codex +1
481installs
cognitive-walkthrough skill Runs one user task through the cognitive walkthrough method and shows where a novice gets stuck. Useful before you spend time on usability testing.
CX Codex +1
458installs
vercel-ui-skills skill Pins your agent to Vercel's look: light surfaces, Inter, a 4px grid. Useful when you want generated UI to follow one fixed scale instead of guessing.
CX Codex +1
342installs
codex-theme-installer skill Downloads a CodexThemes package, validates it, and places the files in the local theme library. It is used when a theme should be installed and activated in Codex.
CX Codex +1
1,600installs
codex-theme-switcher skill Applies, switches and restores Claude desktop themes from the local ~/.codexthemes library, and reports which theme is active.
CX Codex +1
1,700installs
vtex-io-admin-react skill Guides coding agents in building VTEX IO admin pages with React, enforcing official design systems, bounded tables, and predictable feedback states.
CX Codex +1
1,100installs
image-to-code
official skill Translates screenshots, mockups, and AI images into responsive frontend code. Helpful for turning visual concepts into functional web prototypes.
CX Codex GP ChatGPT
14installs
design-qa
official skill A skill for side-by-side design and implementation comparison before handoff. Works with Figma, screenshots, and URLs; catches visual gaps in layout, typography, and interaction states.
CX Codex GP ChatGPT
14installs
design-with-taste skill A skill that gives the agent a design philosophy: gradual revelation, fluid transitions and selective emphasis. Useful when generated UI keeps looking generic.
CX Codex +1
758installs
motion-designer skill Drafts frame-accurate video specifications for Remotion, covering timing, transitions, and layered audio. Useful when planning motion graphics before writing code.
CX Codex +1
570installs
landing-page-optimization skill A Claude skill for landing pages: copy frameworks, the 11-element page structure, CTA writing and conversion work.
CX Codex +1
324installs
interior-design-visualization skill Visualizes room redesigns directly from photos using each::sense AI. Useful when testing alternative interior aesthetics or paint palettes.
CX Codex +1
1,100installs
presentation-design skill Sets visual rules for bold, minimal decks: dark theme, oversized headlines, per-section accent colors. Useful when you need to turn content into a slide structure.
CX Codex +1
800installs
efecto-social-media skill Builds social media layouts via the efecto.app canvas. Useful when asking an agent to generate Instagram carousels, YouTube covers, or social posts.
CX Codex +1
636installs
framer-ui-skills skill Hands the agent a fixed set of Framer-style UI rules: dark surfaces, Inter, a 4px grid. Useful when you want a predictable look without hand-tweaking every value.
CX Codex +1
320installs
html-visual skill Generates an interactive single-file HTML visualization: mockup, ERD, flowchart, chart or slides. Useful when you want a schema or dataset rendered instead of described.
CX Codex +1
475installs
interaction-design skill A skill for designing interface feedback: loading states, errors, empty screens, animation timing and accessibility. Useful when you need to plan how UI behaves, not just how it looks.
CX Codex +1
441installs
scrollytelling-and-parallax-data-visualization
official skill Guides the design and implementation of scrollytelling and parallax data visualizations. Use it when scroll progression explains data through staged scene reveals.
CX Codex GP ChatGPT
13installs
geospatial-and-cartographic-visualization
official skill This skill helps plan maps by choosing projections, basemaps, visualization types, and implementation tools. Use it for thematic maps, routes, and spatial datasets.
CX Codex GP ChatGPT
13installs
d3-data-visualization
official skill This skill builds custom D3 visualizations with SVG or DOM, annotations, bespoke scales, and interaction. Use it when standard chart grammars no longer fit.
CX Codex GP ChatGPT
13installs
anthropic-ui-skills skill Hands your agent a fixed set of rules for Anthropic-style interfaces: light surfaces, Inter, a 4px grid. Useful when you keep re-explaining the palette in every prompt.
CX Codex +1
313installs
3d-spatial skill Applies Disney's 12 animation principles to 3D engines, VR, and AR. Guides rigging, curve editing, and timing in Blender, Unity, and Unreal.
CX Codex +1
771installs
qr-code-generator skill Creates PNG and SVG QR codes with UTM tracking parameters and custom text labels. Useful for preparing print materials, stickers, and bulk batch exports from CSV.
CX Codex +1
312installs
webflow-mcp:figma-to-webflow skill Translates Figma layouts into native Webflow elements and styles using Figma MCP and Webflow MCP. Ideal for assembling pages directly in Webflow without copy-pasting raw markup.
CX Codex +1
373installs
tdesign-miniprogram skill A skill that tells the agent how to build WeChat mini program UIs with Tencent's TDesign library: 60+ components, dark mode, theme customization.
CX Codex +1
396installs
ios-animations skill SwiftUI animation craft guide for Swift 6.2 and Clinic MVVM-C architecture. Configures spring physics and motion tokens without raw literals.
CX Codex +1
340installs
gsap-greensock skill Guides your coding agent in applying Disney's 12 animation principles with GreenSock tweens and timeline sequences.
CX Codex +1
730installs
morphing-icons skill Builds icon components that transform through direct SVG line motion instead of crossfades, relying on a shared three-line structure.
CX Codex +1
362installs
nuxt-ui-v4 skill A skill that gives your agent the Nuxt UI v4 component library: 125+ accessible components, Tailwind v4, dark mode. Useful for Nuxt dashboards, forms and chat UIs.
CX Codex +1
410installs
naming skill Diagnoses weak brand, product, and fictional names across four layers to craft names that sound natural and stick.
CX Codex +1
491installs
mui-base skill A skill with 48 rules for building headless React component libraries the MUI Base UI way. Useful when logic and styling stay apart.
CX Codex +1
328installs
css-native skill This skill gets your agent writing motion with plain CSS: @keyframes, transition, transform. Useful when interface animation should not pull in a JS library.
CX Codex +1
716installs
saas-productivity skill Guides motion design for task, form, panel, and notification interfaces. Use it when work-focused animation needs feedback without distraction.
CX Codex +1
709installs
shadcn-ui skill Teaches your agent how to build shadcn/ui components: Radix primitives, Tailwind, CVA variants and data-slot.
CX Codex +1
351installs
ui-design-patterns skill A reference on common interface patterns: navigation, forms, data display, feedback and accessibility. Useful when you design components or audit an existing UI.
CX Codex +1
853installs
tailwindcss-responsive-darkmode skill A Tailwind CSS skill covering responsive layout, dark mode, runtime theme switching and FOUC prevention.
CX Codex +1
476installs
ux-principles skill Gives your coding agent usability heuristics, user research methods and accessibility checks, so interface work follows known rules instead of guesswork.
CX Codex +1
836installs
assetseeker skill Searches online sources for photos, icons, video, music, sound effects, and fonts. Use it when a project needs licensed creative assets.
CX Codex +1
404installs
1,561–1,600 of 2,133
