NeVibeCode · 2,133 items
Skills for Design
Skills for Design: what each one does, an install command and example prompts.
scroll-world skill This skill builds a landing page where scrolling drives a camera that dives into each scene and moves to the next with no cuts.
CX Codex +1
4,800installs
excalidraw-diagram skill Generates .excalidraw JSON diagram files for technical architectures and workflows. Helps turn system specs or logic into diagrams with real data examples.
CX Codex +1
8,600installs
think skill Turns a rough idea into a plan with a recommendation, success criteria, and checks. Use it to weigh architecture choices or prepare a handoff before coding.
CX Codex +1
15,000installs
design-system
official skill This skill audits a design system, documents components, and helps extend existing patterns. Use it when tokens, states, naming, or accessibility need a closer check.
CX Codex +1
4,200installs
research-synthesis
official skill Synthesizes interview transcripts, surveys, and support tickets into structured reports with themes, user segments, and prioritized actions.
CX Codex +1
4,100installs
frontend-design skill Skill for building frontend interfaces with considered typography, color and layout — from landing pages to dashboards.
CX Codex +1
4,800installs
user-research
official skill Helps teams plan research studies, prepare interview guides, and synthesize feedback. Useful for scoping usability tests and prioritizing findings.
CX Codex +1
3,900installs
understand-figma skill Analyzes a Figma file via the Figma REST API and generates an interactive design knowledge graph with components, screens, and tokens for the dashboard.
CX Codex +1
1,800installs
transitions-polish skill This skill audits existing animations and maps timing, distance, scale, blur, and easing to motion tokens. Use it when motion feels off.
CX Codex +1
10,800installs
guizang-social-card-skill skill Builds carousel images and covers for Xiaohongshu, WeChat, and articles from text, screenshots, or video using Swiss design and magazine layouts.
CX Codex +1
5,200installs
variant skill This skill builds distinct versions of one UI component and puts them on the page where it will live. Use it to compare design directions before choosing one.
CX Codex +1
14,600installs
surprise-me skill This skill combines available skills into one unexpected creative deliverable. Use it when you want inspiration or a project without choosing the format yourself.
CX Codex +1
2,300installs
explain-interface skill Explains how a visual effect, animation, or website layout was built from a live page or a screenshot. It breaks down the underlying layer stack.
CX Codex +1
14,100installs
design-handoff
official skill Turns a Figma file or a written design description into a developer handoff spec: measurements, tokens, states, breakpoints, edge cases.
CX Codex +1
3,500installs
interaction-design skill This skill helps design microinteractions, transitions, and feedback states. Use it when polishing a UI or building loading and gesture patterns.
CX Codex
16,146installs
kpi-dashboard-design skill This skill helps design KPI dashboards, choose useful metrics, and trace conflicting calculations. Use it for SaaS, operations, and cohort analysis views.
CX Codex
16,141installs
design-system-patterns skill Guides the design of design tokens, theme switching, and component library architecture. Use it when establishing shared UI foundations for a project.
CX Codex
15,953installs
unocss skill A skill that gives the agent reference material on UnoCSS configuration, rules, shortcuts and presets. Useful when setting up UnoCSS or reusing Tailwind knowledge in it.
CX Codex +1
16,100installs
react-native-design skill This skill guides React Native styling, navigation, and Reanimated animations. Use it when building cross-platform mobile apps or platform-specific screens.
CX Codex
15,522installs
web-design-guidelines skill Audits product interface code against Vercel design guidelines for layout, typography, motion, and accessibility. Useful for frontend code reviews.
CX Codex +1
3,900installs
visual-design-foundations skill This skill helps define typography, color, spacing, and icon rules for a project. Use it when setting up design tokens or bringing an interface into visual consistency.
CX Codex
13,566installs
baoyu-design skill Generates UI mockups, interactive prototypes, slide decks, and design systems as self-contained HTML. Useful whenever an agent needs to produce interface layouts.
CX Codex +1
6,300installs
web-component-design skill This skill helps design reusable components for React, Vue, and Svelte. Use it for UI libraries, design systems, or legacy component refactors.
CX Codex
13,167installs
threejs skill Guides the agent in building browser 3D scenes, materials, interactive controls, and post-processing with Three.js.
CX Codex +1
3,400installs
creative-director skill This skill takes a creative concept from brief to presentation and checks it on three axes. Use it for campaign ideas and creative critique.
CX Codex +1
3,400installs
design-brief skill Parses an I-Lang design brief into a concrete spec with palette, typography, density, and constraints. Eliminates ambiguity from phrases like "make it professional."
CX Codex +1
3,400installs
improve-ui skill Audits an interface against its own design system, finds proven inconsistencies, and writes fix plans for another agent without touching source.
CX Codex +1
7,900installs
premium-frontend-ui
official skill Guides GitHub Copilot when building animated web interfaces. Use it for a visually distinctive landing page or interactive portfolio.
4,900installs
expo-native-ui skill Guides your coding agent in building native-feeling Expo screens with Apple HIG styling, @expo/ui components, SF Symbols, and semantic colors.
CX Codex +1
31,700installs
wcag-audit-patterns skill Audits web interfaces against WCAG 2.2 with automated checks and manual verification. Use it to find violations and build accessible patterns.
CX Codex
12,486installs
apple-hig skill Integrates Apple Human Interface Guidelines for iOS, macOS, visionOS, watchOS, and tvOS into your coding agent during planning.
CX Codex +1
3,200installs
agentation-self-driving skill Runs autonomous design critiques in a visible browser window and leaves feedback notes directly through the Agentation toolbar.
CX Codex +1
7,000installs
dfam-check skill Measures mesh files against Design for Additive Manufacturing rules to evaluate printability before slicing or running CAD regeneration.
CX Codex +1
4,100installs
hatch-pet skill Creates, validates, and packages 8×9 animated pet spritesheets for Codex. Use it when turning visual references or concept prompts into importable digital pet companions.
CX Codex +1
3,100installs
design-md skill Creates and maintains DESIGN.md with design direction, tokens, and visual rules. Useful when an agent needs one source of truth for a project’s design system.
CX Codex +1
3,100installs
d3-visualization skill This skill teaches the agent to create interactive D3.js visualizations. Use it to generate charts for dashboards, reports, and data-rich prototypes.
CX Codex +1
3,100installs
design-review skill Audits UI visually, fixes flaws with atomic commits, and captures before/after screenshots. Useful for tightening shipped interface code right before launch.
CX Codex +1
3,200installs
frontend-skill skill This skill helps agents create visually strong landing pages, websites, and app UIs with restrained composition. Use it for frontend and interface work.
CX Codex +1
3,000installs
presentation skill Turns a technical-spec directory into an interactive web presentation. Use it when a specification needs a shareable deck with a clear narrative.
CX Codex +1
3,500installs
popular-web-designs skill 54 real-world design systems (Stripe, Linear, Vercel, Claude) with CSS tokens, typography, and components for building pages styled after known brands.
CX Codex +1
919installs
161–200 of 2,133
