NeVibeCode · 2,133 items
Skills for Design
Skills for Design: what each one does, an install command and example prompts.
design-system skill Extracts design tokens from UI screenshots or mockups into docs/design.md for agents and a mirrored docs/design.html style guide.
CX Codex +1
1,800installs
blueprinter skill Generates technical diagrams and system architecture flows using plain HTML and CSS. Useful for blueprint-style specifications without design fluff.
CX Codex +1
974installs
swiss-design skill A skill that hands your coding agent a Swiss International Style design system: IBM Plex Sans type, a 12-column grid, stone palette and one accent color.
CX Codex +1
951installs
pixel-art-sprites skill Guides the assistant in drawing pixel sprites and game tilesets. Handy when designing 2D retro assets with strict palette limits.
CX Codex +1
2,700installs
algorithm-design skill Turn a method description or implementation into LaTeX pseudocode and Mermaid diagrams. Use it to formalize an algorithm and check its representation against code.
CX Codex +1
1,700installs
paper-cinder-transition skill A WebGL transition where a line of fire eats the old page and reveals the next scene live behind it. Use it when a fade or slide reads cheap.
CX Codex +1
330installs
responsive-patterns skill Supplies container query guidelines, fluid typography rules, and CSS subgrid patterns for React components. Helps build adaptable UI elements without relying on viewport media queries.
CX Codex +1
1,600installs
craft-design-engineering skill A skill that hands your agent design engineering rules: type, colour, spacing, motion and numbers. Useful when a UI needs to look finished.
CX Codex +1
479installs
wireframe skill Designs what sits on a screen, where it goes and what matters most. Useful while layout is still cheap to change.
CX Codex +1
2,300installs
fire-paper-loader skill Builds a burning-paper ring loader using WebGL 1 and OffscreenCanvas in a Worker. The flame animation keeps moving even when heavy JavaScript blocks the main thread.
CX Codex +1
319installs
brand-visual-generator skill A skill that helps define or audit visual identity: typography, color palette, spacing, design tokens and frontend aesthetics.
CX Codex +1
1,400installs
amazon-product-photography skill Turns product details into a shoot-ready image plan: a shot list, briefs for infographics and lifestyle scenes, and a production route. Useful before booking a photographer.
CX Codex +1
1,200installs
design-loop skill The skill runs a baton-passing loop: it reads a task from a file, generates an HTML/Tailwind page, wires it into the site, then writes the next task.
CX Codex +1
1,000installs
macos-notch-ui skill Build a macOS panel that opens from the screen notch. Use it for a recording indicator or another compact status display.
CX Codex +1
557installs
mermaidjs-v11 skill This skill gives your agent Mermaid.js v11 syntax so it can write diagrams as code and render them to SVG, PNG or PDF. Handy when a schema or flow needs a picture, not a paragraph.
CX Codex +1
364installs
tailwind-css skill Guides coding agents on Tailwind CSS styling, v4 migrations, and class updates while enforcing real build checks and DOM inspection.
CX Codex +1
3,000installs
game-designer skill A game design skill that audits a browser game and reworks how it looks: backgrounds, particles, animations, scene transitions.
CX Codex +1
1,900installs
ui-components skill Supplies component library rules for shadcn/ui and Radix Primitives. It guides agents on v4 styles, OKLCH theming, CVA variants, and Zod form validation.
CX Codex +1
1,500installs
beautiful-mermaid skill Renders Mermaid diagrams into SVG and PNG formats using the Beautiful Mermaid library. Useful when the agent needs visual architecture diagrams, workflows, or data models.
CX Codex +1
1,800installs
brand-identity skill A skill for building and auditing a visual identity: logo system, color, typography, imagery, iconography and motion principles.
CX Codex +1
499installs
ui-craft-dense-dashboard skill Locks an agent into a data-first style for admin panels and analytics views: tight grid, mono numbers, semantic colors. Useful when the UI is built for an operator, not a landing page.
CX Codex +1
1,200installs
excalidraw skill This skill draws flowcharts, architecture charts and other diagrams into .excalidraw files, then exports them to PNG or SVG. Handy when a picture beats a paragraph.
CX Codex +1
4,600installs
excalidraw-skill skill A skill that connects an agent to a live Excalidraw canvas so it can draw, adjust and export diagrams.
CX Codex +1
1,500installs
design skill Design skills for Apple platform UI: Liquid Glass, animations, game feel, UX writing, SF Symbols and typography. Useful when a screen feels flat and you need a plan.
CX Codex +1
677installs
tesseract-design skill Create editable Tesseract compositions and render them as PNGs. Use it for posters, slides, diagrams, and static interface mockups.
CX Codex +1
1,400installs
om-ux-shape skill Turns a vague feature or screen idea into one decided direction: what you build, for whom, and how it behaves in the interface.
CX Codex +1
2,500installs
om-ux-setup skill Pulls your repository's design system into .uxproof/ so UX skills judge code against your rules, not a built-in one.
CX Codex +1
2,500installs
om-ux-review-pr skill Reviews UI changes in a real browser, tests user flows, and posts impact-ranked design findings with screenshot evidence.
CX Codex +1
2,600installs
logo-design skill This skill generates 6 to 12 logo variants across different architectures, then refines the chosen one to production. Useful when you need a logo, not a full identity.
CX Codex +1
447installs
sap-fiori-guidelines skill A skill that feeds your agent the official SAP Fiori design system rules: buttons, forms, tables, page types, colors, accessibility and Joule patterns.
CX Codex +1
1,200installs
game-assets skill A skill that builds pixel art sprites, animated characters and item visuals for browser games as code, with no external image files.
CX Codex +1
1,600installs
motion-dev-animations skill Generates GPU-accelerated Motion.dev animations for React, Next.js, Svelte, and Astro. Implements spring physics, gesture handling, and scroll reveals with accessibility checks.
CX Codex +1
594installs
brand-yml skill This skill builds and edits _brand.yml files so colors, fonts and logos stay the same across Shiny apps and Quarto documents.
CX Codex +1
918installs
Blender skill Connects an agent to a running Blender instance via Flue. It sends Python code directly into bpy without an MCP server and returns structured JSON.
CX Codex +1
2,800installs
brand-analyzer skill Runs brand audits, identifies Jungian personality archetypes, and generates markdown guidelines or action reports. Useful when launching a brand or standardizing design across channels.
CX Codex +1
1,100installs
favicon-generator skill Walks through favicon and app icon setup: sizes, formats, HTML tags and what Google Search expects from the icon.
CX Codex +1
1,100installs
creative-direction skill Builds a structured aesthetic brief across four directional axes: tone, aesthetic philosophy, audience relationship, and sensory ambition. Ideal before designing multi-touchpoint projects.
CX Codex +1
419installs
nanobanana skill Generates and edits images via Gemini models. Handles local multi-image references, batch output, and dry-run validation without sending requests.
CX Codex +1
10,600installs
video-prompting skill Drafts model-specific video generation prompts and creates character-sheet prompts for image models to maintain character consistency.
CX Codex +1
602installs
tldraw-skill skill Generates .tldr diagram files and exports them to PNG or SVG via a local CLI. Useful for visualizing multi-component systems and data flows.
CX Codex +1
3,700installs
1,081–1,120 of 2,133
