NeVibeCode · 2,133 items
Skills for Design
Skills for Design: what each one does, an install command and example prompts.
spacing-system skill Builds a systematic spacing scale from a 4px or 8px base unit with rules for padding and margins. Useful when cleaning up inconsistent layout values.
CX Codex +1
2,300installs
heuristic-evaluation skill This skill reviews interfaces against Nielsen’s heuristics and domain criteria, then rates finding severity. Use it before user testing when you need an expert audit.
CX Codex +1
2,400installs
presentation-creator skill Creates interactive React and Vite slide decks with Sentry styling. Use it when a presentation needs real metrics, charts, and slide navigation.
CX Codex +1
2,900installs
animejs skill A skill that feeds your coding agent Anime.js syntax: timelines, stagger, SVG morphing and keyframe sequences.
CX Codex +1
2,800installs
apple-hig-expert skill Audits iOS, macOS, watchOS, and visionOS interfaces against Apple HIG. Use it to review mockups or design native-feeling Apple UI.
662installs
figure-spec skill Builds editable SVG diagrams from structured FigureSpec JSON. Use it for architecture, workflow, and pipeline figures where layout and connections must stay precise.
CX Codex +1
456installs
liquid-metal-border skill Guides React work with animated metal-fx WebGL borders for buttons, cards, and selected controls when visual states need a metallic frame.
CX Codex +1
1,300installs
beam-glow-states skill A React skill that wires the border-beam animated edge glow into loading, selected, current, focus and pressed states.
CX Codex +1
1,300installs
no-ai-design-slop skill A passive quality gate for UI work: it flags reflex design choices and common interface defects while you build or revise a screen.
CX Codex +1
1,300installs
documentary-brutalist-agency skill A skill for building creative agency and portfolio sites: billboard typography, hard black-and-white chapters, documentary collages.
CX Codex +1
1,300installs
thinking-orbs skill Guides coding agents to implement animated AI status indicators using the React thinking-orbs package. Useful for chat interfaces, copilot sidebars, and search tools.
CX Codex +1
1,300installs
editorial-service-booking skill Guidance for service websites with appointments, from editorial treatment browsing to booking states that retain each selection.
CX Codex +1
1,300installs
operational-enterprise-ai skill A skill for building or reworking enterprise product pages: system boundaries, approvals, audit, exceptions and rollback.
CX Codex +1
1,300installs
generate-reference-inspired-brand-worlds skill Generates original brand campaign worlds from visual references without copying protected signature assets. It controls visual proximity from 30% to 85%.
CX Codex +1
1,300installs
audit-reference-originality skill Compares a shipped site with its reference corpus and flags overlaps in copy, brands, numbers, images and code. Useful before release.
CX Codex +1
1,300installs
browser-video-recording skill Renders 60 fps 4:3 4K browser demo videos from in-app browser screenshots. Useful for Dribbble UI clips and product presentations with macOS cursor styling.
CX Codex +1
1,300installs
add-shader-cursor-trail skill Installs a WebGPU hero effect: a twinkling white halftone trail that follows the pointer, with chromatic ripples and film grain. Falls back to the static frame.
CX Codex +1
1,300installs
shaders-cursor-ripples skill Adds interactive WebGPU fluid distortion over existing images using the Shaders library. Useful when replacing old CSS spotlight reveals without altering layout.
CX Codex +1
1,400installs
slide-maker skill Builds, redesigns, and critiques .pptx slide decks from documents, code, or rough notes. Runs an actor-critic review loop before finalizing the output.
CX Codex +1
1,200installs
rive-interactive skill A skill for Rive: state machines, input handling and data binding in React. Useful when an animation has to react to UI state.
CX Codex +1
2,600installs
lightweight-3d-effects skill A skill for decorative 3D elements and micro-interactions: pseudo-3D illustrations, animated backgrounds, tilt on hover. Useful when a landing page needs depth without a full WebGL stack.
CX Codex +1
2,600installs
usability-test-plan skill Builds a usability test plan: research questions, methodology, participant criteria, metrics and a facilitation script. Useful when the study is still being planned.
CX Codex +1
2,200installs
case-study skill Structures design portfolio case studies around process evidence, personal contribution, and business metrics. Built for presenting projects to external audiences.
CX Codex +1
2,200installs
design-token skill Defines and organises colour, spacing, type and elevation tokens with naming and usage rules. Useful when you are laying down the token layer.
CX Codex +1
2,200installs
error-handling-ux skill A skill that guides the agent through preventing, surfacing and recovering from errors in a product. Useful when failures cross several flows at once.
CX Codex +1
2,200installs
design-qa-checklist skill Builds a systematic QA checklist to verify that an implementation matches design specs. Use it during review to catch visual, layout, and accessibility bugs.
CX Codex +1
2,200installs
loading-states skill Designs waiting states with skeletons, progress indicators, progressive loading and optimistic updates. Use it when content or actions take time to complete.
CX Codex +1
2,200installs
design-critique skill The skill runs a team design critique: session framing, feedback rules, and action items with owners. Built for sessions with people in the room.
CX Codex +1
2,200installs
state-machine skill Models UI component behavior as explicit states, events, and transitions. Useful when a component has multiple interacting states that must remain predictable.
CX Codex +1
2,200installs
design-token-audit skill Finds where a product bypasses its design tokens: hard-coded values, duplicate names, missing scale steps.
CX Codex +1
2,200installs
animation-principles skill A skill that tunes one specific UI animation: picks easing, duration and the order in which related elements move.
CX Codex +1
2,200installs
wireframe-spec skill Defines wireframe layout specifications, content priorities, and interaction notes. Useful when structuring an interface before moving into visual UI design.
CX Codex +1
2,300installs
micro-interaction-spec skill Specifies one micro-interaction end to end: trigger, rules, feedback, loops and modes. Useful when a single interaction goes to engineering.
CX Codex +1
2,300installs
paper-illustration-image2 skill Generates publication-quality academic figures via a local Codex app-server bridge. It uses Claude for planning and visual review while offloading raster rendering to Codex.
CX Codex +1
439installs
ant-design skill A decision guide for antd 6.x, Ant Design Pro 5 and Ant Design X v2. It steers the agent through component choice, tokens and SSR.
CX Codex +1
4,100installs
bencium-controlled-ux-designer skill Guides visual choices for web interfaces before code changes begin. Use it when building components, pages, or applications that need accessibility checks.
CX Codex +1
4,600installs
ui-design-brain skill This skill guides interface generation with documented component patterns and design-system rules. Use it for pages, dashboards, forms, navigation, and other UI work.
CX Codex +1
845installs
swiftui-liquid-glass skill Implement and review Liquid Glass in SwiftUI interfaces for iOS 26+. Useful when adding glass buttons, grouped effects, or animated shape changes.
CX Codex +1
4,100installs
locomotive-scroll skill This skill guides an agent through Locomotive Scroll setup for smooth scrolling, parallax, and scroll-driven motion. Use it when page elements need viewport tracking or scroll events.
CX Codex +1
2,500installs
accessibility-test-plan skill Plans accessibility testing sessions with assistive technology and real users. Useful when preparing user flows for WCAG compliance.
CX Codex +1
2,100installs
721–760 of 2,133
