NeVibeCode · 2,133 items
Skills for Design
Skills for Design: what each one does, an install command and example prompts.
scroll-scrubbed-word-reveal skill A skill that reveals words in marked-up text as scroll progress advances. Built for headlines, quotes and onboarding copy.
CX Codex +1
1,400installs
technical-wireframe-info-layout skill Defines a monochrome design system with exploded wireframe 3D objects, connector lines, and dark diagnostic info layouts.
CX Codex +1
1,400installs
corner-diagonals skill A skill for diagonal-cut corners and chamfered edges on buttons, cards and panels. Useful when a UI needs sharp geometry instead of rounded pills.
CX Codex +1
1,400installs
number-details skill A skill that adds decorative 01, 02, 03 numbers to process steps, cards and headings. Useful when a section needs visual rhythm without extra copy.
CX Codex +1
1,400installs
gooey-blob-system skill Creates gooey blob animations with SVG filters that merge shapes on proximity. Useful for background accents, loaders, or interactive hero areas.
CX Codex +1
1,400installs
dark-glass-clean-layout skill This skill defines a dark glass UI system with clean columns, floating data cards, and restrained depth. Use it for workspace and console layouts.
CX Codex +1
1,400installs
clean-minimal-beige-light-mode skill Sets a design-system direction: warm beige surfaces, quiet modular grids, a restrained accent. Useful when the interface should read calm and organised.
CX Codex +1
1,400installs
mesh-gradient-dark-blue-clean skill A design system skill for dark-blue interfaces with procedural canvas mesh gradients, hero containers, and pill navigation. Built for dark technical layouts.
CX Codex +1
1,400installs
framed-grid-layout skill A skill that spells out how to build pages with thin visible section borders, L-shaped corner brackets and strict grid alignment.
CX Codex +1
1,400installs
webgl-laser skill This skill builds a fixed full-screen background with a thin vertical beam, a colored halo and smoky fog around it. Useful when a page needs a cinematic backdrop behind content.
CX Codex +1
1,400installs
image-first-grid-layout skill Directs coding agents to build layout grids around full-bleed photography with subtle guide rails and low-contrast overlays. Great for cinematic landing pages.
CX Codex +1
1,400installs
dither-background skill A skill that builds a dark monochrome procedural background with enlarged square pixels and visible Bayer-style ordered dithering.
CX Codex +1
1,400installs
html-to-interaction-prompts skill Turns a supplied HTML page into an article of AI-builder prompts, with screenshots of every interaction it finds.
CX Codex +1
1,400installs
globe-particles skill Renders a 3D particle globe with a luminous spherical core and an orbital disc using WebGL and Three.js. Useful for data visualizations and dark themes.
CX Codex +1
1,400installs
agency-grid-layout-minimal skill Sets a minimal agency-site direction with an editorial grid, oversized type and restrained image framing. Use it when a page needs structure rather than card-heavy sections.
CX Codex +1
1,400installs
unicorn-studio skill Guides you through embedding Unicorn Studio interactive WebGL scenes on a page: container setup, responsive sizing, performance tuning, layering with UI.
CX Codex +1
1,400installs
skeuomorphic-ui skill Generates tactile skeuomorphic web CSS with layered gradients, inset shadows, and reflective edges. Useful when buttons or panels need physical depth without cartoon gloss.
CX Codex +1
1,400installs
background-grid-webgl skill A skill that tells your coding agent how to build a perspective WebGL grid background with fading lines, particle haze and slow forward drift.
CX Codex +1
1,500installs
finesse-ui skill A skill for building and refining web interfaces: landing pages, dashboards, mobile screens, single components. It keeps an eye on type, color and motion.
CX Codex +1
1,000installs
epic-design skill A Claude Code skill that builds cinematic pages: scroll storytelling, parallax depth, animated text. No WebGL involved.
701installs
create-website skill Walks you from a blank page to a live site in ten phases: message first, then design, then conversion. Every decision is asked and saved to docs/.
CX Codex +1
2,300installs
design-code-architecture skill Walks you from an app idea to a deliberate architecture: eight phases, a question at every decision point, results written into docs/. Useful when you need to pick boundaries and split the domain.
CX Codex +1
2,300installs
improve-website skill Walks a live but underperforming site through eight phases and turns the findings into a ranked backlog of fixes. Each fix ships as a testable experiment.
CX Codex +1
2,300installs
brand-guidelines skill Applies and documents brand rules for colours, typography, logos and tone of voice. Use it to audit assets or build a brand guide for a product.
696installs
data-visualization skill Guides your agent through picking a chart type and setting axes, labels and accessible colors so the result reads without a legend.
CX Codex +1
2,400installs
layout-grid skill This skill defines a responsive page grid: columns, gutters, margins and breakpoint behaviour. Handy when you are setting up page structure from scratch.
CX Codex +1
2,400installs
icon-system skill Sets design specifications for icon systems, covering grids, size tiers, naming rules, and accessibility. Ideal for standardising iconography in design systems.
CX Codex +1
2,400installs
user-flow-diagram skill Draws screen-level flow diagrams with entry points, decision branches and error paths. Useful when a feature needs step-by-step specs.
CX Codex +1
2,400installs
dark-mode-design skill This skill turns an existing light palette into a dark theme: surface elevation, contrast, desaturated accents. Use it when the light tokens already exist.
CX Codex +1
2,400installs
replica-brand skill Names app clones, sets up contrast-checked palettes, writes logo briefs, and sweeps original brand remnants from code.
CX Codex +1
617installs
cinetic skill A skill that directs short promo films end to end: storyboard, beat-locked timing, code-made sound and render in Remotion or HyperFrames.
CX Codex +1
1,000installs
scandinavian-design skill This skill guides interface work toward calm layouts, restrained monochrome styling, and clearer hierarchy. Use it to redesign a surface, review it, or explore prototype directions.
CX Codex +1
1,800installs
spline-interactive skill Guides agents on integrating interactive Spline 3D scenes into web apps. Useful for embedding 3D UI, configuring state animations, and handling object events in React.
CX Codex +1
2,800installs
gsap-scrolltrigger skill A skill that teaches the agent to write GSAP animations and ScrollTrigger scroll effects: tweens, timelines, pinning, parallax.
CX Codex +1
2,800installs
awwwards skill Turns a one-line prompt into a finished portfolio or landing page, using Awwwards Site of the Day as the quality bar.
CX Codex +1
1,300installs
ux-writing skill Writes and edits button labels, error messages, notifications and empty states against four standards: purposeful, concise, conversational, clear.
CX Codex +1
2,700installs
documd-visuals skill Creates text-driven charts, diagrams, and architecture layouts directly in Markdown. Ideal when documentation needs live visual cards or system schematics.
CX Codex +1
313installs
grow-app skill Guides retention and habit-loop design across eight phases while logging decisions in the docs folder. Useful when signups quietly leave after day one.
CX Codex +1
2,200installs
improve-app skill Walks a shipped app from “works but feels rough” to a product that fits the job: nine phases, questions at every step, notes in docs/.
CX Codex +1
2,200installs
responsive-design skill A skill that steers your coding agent toward layouts and interactions that hold up across screen sizes and input methods.
CX Codex +1
2,300installs
681–720 of 2,133
