NeVibeCode · 2,133 items
Skills for Design
Skills for Design: what each one does, an install command and example prompts.
progressive-blur skill This skill creates a top or bottom CSS progressive blur with layered backdrop-filter masks. Use it for a soft fade at the viewport edge.
CX Codex +1
1,700installs
cobejs skill A skill that walks the agent through building a small spinning globe with cobe, markers included. Handy for hero sections and about pages.
CX Codex +1
1,700installs
native-feel-cross-platform-desktop skill A skill for designing cross-platform desktop apps that feel native: windowing, hotkeys, materials, fast launch.
CX Codex +1
608installs
anti-ui-slop skill Keeps a coding agent from shipping a generic screen: it reads the product context, covers the required states, and checks the rendered result for visible breakage.
CX Codex +1
475installs
sega skill Defines rules for an arcade-inspired design system with VT323 typography, 0px corners, and chunky push buttons. Useful when crafting game UI specs.
CX Codex +1
2,200installs
matrix skill This skill guides a dark Matrix-style interface with tokens, component states, and accessibility checks. Use it when an agent needs concrete UI rules.
CX Codex +1
2,200installs
riso skill Turns your coding agent into a design-system author for a two-color risograph look: warm paper, pink accent, blue headings.
CX Codex +1
2,200installs
fiction skill Generates design system guidelines in a cartoonesque children's book style with cream backgrounds, thick outlines, Cossette Texte typography, and WCAG 2.2 AA checks.
CX Codex +1
2,200installs
terracotta skill A skill that hands your coding agent the Terracotta design system: cream surfaces, ink-brown serif headlines and one terracotta accent.
CX Codex +1
2,300installs
impeccable skill The skill turns your agent into a design-system author: tokens, type scale, component states, accessibility criteria. Useful when a project needs one visual language.
CX Codex +1
2,300installs
codex skill Enforces a radically minimal monochrome design system and generates component specifications compliant with WCAG 2.2 AA.
CX Codex +1
2,300installs
sketch skill This skill defines a hand-drawn design system for AI-assisted UI work. Use it for component guidance with tokens, interaction states, and testable accessibility rules.
CX Codex +1
2,300installs
ppt-visual skill Designs slide layouts, typography, and color schemes. Outputs ASCII wireframes and layout specifications for presentation decks.
CX Codex +1
12,100installs
figma-build skill Builds or updates a design in a connected Figma file from code or a description, reusing its components, variables, and styles. Useful for moving UI work onto the canvas.
CX Codex +1
1,300installs
banana skill Plans, generates, and edits images with Google Gemini models. It requires explicit approval before every paid API request.
CX Codex +1
912installs
webgl-3d-object skill Guides coding agents to generate standalone Three.js 3D objects with physical materials, directional lighting, and proper memory cleanup.
CX Codex +1
1,600installs
video-to-superprompt skill Turns a reference video into a detailed build prompt for UI, motion and scrolling behavior. Use it before recreating a page or app from a video demo.
CX Codex +1
1,600installs
pricing-page skill Walks an agent through designing or rewriting a SaaS pricing page: structure, plan design, copy, FAQ, and SEO/AEO markup.
CX Codex +1
1,600installs
webgl-landing-steering skill Guides visual direction, Three.js architecture, and performance budgets for WebGL landing pages before writing front-end code.
CX Codex +1
1,600installs
masked-reveal skill This skill reveals words through an overflow mask as text enters the viewport with GSAP ScrollTrigger. Use it for headings, hero copy, and short section intros.
CX Codex +1
1,600installs
pixel-art skill This skill turns a text description into a pixel art SVG for READMEs, docs or slides. Handy when you need a hero image or a cute character without opening a design tool.
CX Codex +1
548installs
create-canvas skill This skill builds a freeform canvas inside your project so UI variants sit side by side, move around, and get compared without a page reload.
CX Codex +1
381installs
roku skill Gives the agent a written design system for an app dashboard: purple palette, top-bar navigation, card layouts. Useful when the UI has drifted apart.
CX Codex +1
2,000installs
power skill Turns the agent into a design-system author for a dark, monochrome look with bold headings. Useful when you need component rules and accessibility checks without writing them by hand.
CX Codex +1
2,000installs
geometric skill Defines structured design system guidelines using Inter typography and neutral colors. Helpful when building accessible UI components under WCAG 2.2 AA.
CX Codex +1
2,000installs
stitch skill stitch gives an AI coding agent concrete design-system rules for data-heavy interfaces, including tokens, component states, accessibility, and QA.
CX Codex +1
2,000installs
web3d-integration-patterns skill This skill helps plan 3D web experiences that combine Three.js, React Three Fiber, and animation libraries. Use it for scroll-driven scenes and physics-based interactions.
CX Codex +1
3,200installs
vantajs skill Adds animated Vanta.js backgrounds and explains setup for static sites, React, and Next.js.
CX Codex +1
1,500installs
atmosphere-background skill A skill for building a dark atmospheric backdrop: vertical light folds drift slowly across the frame and the glow concentrates in one corner or along the lower edge.
CX Codex +1
1,500installs
editorial-tech skill Guides code agents to blend magazine typography with technical product UI using asymmetrical grids, mono labels, and restrained accent color.
CX Codex +1
1,500installs
css-alpha-masking skill This skill adds CSS alpha masks with gradient edge fades. Use it when an image, text block, or container needs a horizontal or vertical fade.
CX Codex +1
1,500installs
glass-dark-ui skill Builds dark glassmorphism layouts with frosted surfaces and gradient masked borders. Useful for dark dashboards, hero sections, and cards in HTML, Tailwind, or React.
CX Codex +1
1,500installs
build-threejs-scroll-worlds skill Builds scroll-controlled Three.js worlds that stay spatially continuous across authored chapters. Useful for interactive portfolios, product stories, exhibitions, and WebGL explainers.
CX Codex +1
1,500installs
container-lines skill This skill adds thin vertical guide lines at the edges of the content container, plus mini corner squares on sections. Useful when a layout feels loose and needs structure.
CX Codex +1
1,500installs
company-logos skill Guides agents to use Iconify Simple Icons in a 64x64 box instead of plain text names or random raster images.
CX Codex +1
1,500installs
marquee-loop skill This skill guides an agent through building a looping marquee from repeated items. Use it for scrolling logos, testimonials, screenshots, or tags.
CX Codex +1
1,500installs
css-border-gradient skill Applies refined gradient border treatments to cards, modals, and buttons in CSS or Tailwind. Useful when surfaces need subtle edge highlights without loud glowing outlines.
CX Codex +1
1,500installs
scroll-scrubbed-visual-sequence skill Builds reversible visual scenes driven by native scrolling, from product assembly to interface walkthroughs. Useful for interactive hero sections, diagrams, and image sequences.
CX Codex +1
1,500installs
unsplash-asset-images skill This skill picks Unsplash photos for avatars, headshots, backgrounds and wallpapers, and names the ratios and resolutions you need.
CX Codex +1
1,600installs
scroll-world-storytelling skill Turns articles, case studies, and product journeys into visual scroll-driven landing pages. Useful when you need a connected story instead of generic stacked sections.
CX Codex +1
1,600installs
601–640 of 2,133
