Design
UI/UX direction, visual design, and design systems
ui-ux-design-pro
by saifyxpro
Senior-level UI/UX design expert for building data-driven, premium production interfaces. Use when you need to: 1. Design complex applications (dashboards, SaaS, AI tools) from scratch 2. Generate comprehensive design systems (tokens, palettes, typography) 3. Audit existing UI for quality, accessibility, and "craft" 4. Search for proven real-world design patterns and implementation details Trigger: "design a...", "audit this...", "create a design system", "find icons", "fintech dashboard", "landing page"
wds-docs
by wix
Wix Design System component reference. Use when building UI with @wix/design-system, choosing components, or checking props and examples. Triggers on "what component", "how do I make", "WDS", "show me props", or component names like Button, Card, Modal, Box, Text.
wix-design-system
by wix
Wix Design System component reference. Use when building UI with @wix/design-system, choosing components, checking props and examples, or writing tests with component testkits. Triggers on "what component", "how do I make", "WDS", "show me props", "testkit", "driver", or component names like Button, Card, Modal, Box, Text.
replatform
by wix
Routes RePlatform source-to-Wix migrations to the next workflow step by inspecting migration project artifacts. Use when starting, continuing, or recovering a migration run.
wix-headless
by wix
"Connect Wix business services (Stores, Bookings, CMS, Blog, Events, Forms, and more) to a Wix Headless frontend — infer the needed capabilities, install the apps, seed backend content, and produce an SDK-integration guide. For managed (Wix-hosted) projects it can also build the frontend: scaffold a new site (create) or wire an existing/brought-in design (connect), then build and release. Works across managed, self-managed, and stripe project types. Triggers: set up a Wix Headless backend, add Wix business features to my app, build or host a Wix site, connect/implement this design with Wix."
wix-vibe-headless
by wix
"Client-only, dependency-free REST scaffolds for connecting an already-built front end (a vibe-coded app, an HTML/JSX/Vite project, a design-tool export) to a live Wix site over the site's public WIX_CLIENT_ID — the browser talks to Wix directly, no SDK, no backend, no build step. One skill covering every Wix business solution: Stores/eCommerce storefront (products, cart, checkout), Bookings (services, slots, appointments), Blog (posts, categories, tags), Events & Tickets (browse, RSVP, ticketing), Portfolio (collections, projects, galleries), Restaurants (menu, online ordering, reservations), CMS / Wix Data (list, detail, filter, forms, CRUD), Pricing Plans (memberships, subscriptions, checkout), and Members (custom login — email+password, Google/Facebook, and custom SSO — plus account areas and member-gated content). Each vertical ships a copy-as-is REST layer plus wiring instructions. Read-only over the owner's content — never provisions, never mocks data. Triggers: connect my Wix store/shop, build a storefront over Wix, add a cart and checkout, connect Wix Bookings, take appointments/reservations, show my Wix blog, list my Wix events, sell tickets, take RSVPs, build a portfolio from Wix Portfolio, show my restaurant menu / order online / book a table, display my Wix CMS collection, wire a contact form to Wix, sell membership/subscription plans, add member login / sign up, let members log in with Google or Facebook, custom login page, account / profile page, gate content behind login, sign in with SSO/Okta, 'here is my WIX_CLIENT_ID', connect this app to my Wix site over REST. Use this for CLIENT-ONLY REST integration over an existing site; use wix-headless instead for SDK + Wix CLI builds, hosting, and one-prompt new-site creation."
Material UI
by Awesome-Technologies
Migration from v0.x to v1: Yeah, v1 has been released! Take advantage of 2 years worth of effort.
ppt-creater-skill
by Yu-0312
把凌亂的文件（會議逐字稿、多場會議混在一起的檔案、實驗／數據報告、論文、財報）變成可直接上台的設計感簡報的工作流。 Use this skill whenever the user wants to turn a document, meeting notes, transcript, report, spreadsheet, or raw data into slides / a presentation / a deck — 包括他們說「做成簡報」「整理成投影片」「幫我做一份簡報」「把這份報告變簡報」 「turn this into a presentation / slides / a deck」，即使沒有明說步驟。 也適用於「只有主題沒有素材」（如「幫我做一份 AI 發展趨勢的簡報」）——會先做主題研究再進入流程。 也適用於跨 session 銜接（「繼續做 xxx 的簡報」「接上次」）——會定位進度再銜接。 它會先清點內容並把敏感資料（姓名、薪資、競業條款、個資）攔進備援區、停下來等使用者確認範圍， 再把「有設計感」翻成具體色碼與版型規格、生成單一 HTML 簡報， 並對任何圖表用原始數據重算統計值、抓出原文寫錯的數字。 Also use it whenever the user needs figures or charts from a report recomputed from the source data rather than trusted blindly. 也支援 Keynote Magic Move 式的 Morph Transition 轉場（使用者說「Magic Move」「Morph」「物件飛過去的轉場」時）。
serenity
by ZadAnthony
用 Serenity(@aleabitoreddit)的"供应链卡点逆向"投资逻辑分析股票/板块——帮你判断该怎么分析、往哪一层挖、什么会证实或证伪、值不值得投。把市场当物理系统而非代码列表,先建 thesis 再谈标的。当用户聊美股/AI 供应链/光模块(CPO/硅光/InP)/半导体/内存/NeoCloud/电力液冷/机器人等 AI 全产业链任意细分的投资分析,或主动 /serenity 时使用。
yueban-image-to-code
by SemineChen
像素级 750px 图片转代码与切图工作流。当 Codex 需要把当前选中的 UI 图片、截图、App/Web 设计稿、Figma 图片导出稿或设计长图转换为代码，并输出独立透明 PNG 切图资源时使用。适用于严格 1:1 等比例还原、画板宽度精确 750px、禁止自动排版优化、文本可编辑、简单图形原生矢量/代码化、图标和位图独立透明 PNG 提取，以及按矢量层、文本层、位图/图标切图三类模块独立验收的任务。
excalidraw
by dtsola
Use when user requests diagrams, flowcharts, architecture charts, or visualizations. Also use proactively when explaining systems with 3+ components, complex data flows, or relationships that benefit from visual representation. Generates .excalidraw files and exports to PNG/SVG via Kroki API or locally using excalidraw-brute-export-cli.
Design Styles Skill
by markus41
"Access 263+ design styles with AI-optimized prompt keywords for frontend development"
design-taste-frontend
by Dwsy
Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.
form-ux-design
by peterbamuhigire
Cross-platform form UX/UI patterns for web (Bootstrap 5/Tabler) and Android (Jetpack Compose). Covers field anatomy, validation, error states, multi-step wizards, accessibility, touch-friendly inputs, and submission workflows. Use when building any form — registration, data entry, settings, checkout, search, filters, or clinical forms. Companion to webapp-gui-design, healthcare-ui-design, pos-sales-ui-design, and jetpack-compose-ui skills.
q-presentations
by TyrealQ
Generates professional slide deck images from content with smart logo branding and video-overlay-aware layout selection. Use when user asks to "create slides", "make a presentation", "generate deck", "slide deck", or "PPT".
healthcare-ui-design
by peterbamuhigire
Clinical-grade UI/UX patterns for healthcare applications across web (Bootstrap 5/Tabler + PHP) and Android (Jetpack Compose + Material 3). Covers patient records, vital signs, medication safety, care plans, scheduling, telemedicine, dashboards, patient portals, and clinical communication. Enforces HIPAA compliance, WCAG 2.2 AA accessibility, medical safety workflows, and role-based interfaces for clinicians, nurses, patients, and administrators. Use when building or reviewing EMR/EHR systems, hospital management, clinic apps, telemedicine platforms, patient portals, health dashboards, or any healthcare-related interface.
pos-sales-ui-design
by peterbamuhigire
Design POS, checkout, and sales entry web UIs that are simple, accessible, and fast for all ages while integrating all backend actions strictly through APIs. Use for creating or reviewing UI patterns, layouts, components, and workflows for web-based sales recording systems.
report-print-pdf
by peterbamuhigire
"Guidance for building report templates that serve both mPDF exports and the browser-based print workflow, including the auto-print standard introduced in the report-printing-style guide."
design-reference
by popmechanic
Self-contained design transformer — invoke directly, do not decompose. Transforms a design reference HTML file into a Vibes app. Use when user provides a design.html, mockup, or static prototype to match exactly.
vibefigma
by vibeflowing-inc
Convert Figma designs to production-ready React components with Tailwind CSS. Use when user provides a Figma URL, asks to convert Figma designs to React/code, wants to extract components from Figma, or mentions "vibefigma". Requires a Figma access token (via --token flag, FIGMA_TOKEN env var, or .env file).
frontend-design
by ynulihao
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
design-system-library
by nguyenthienthanh
"Design system selection and implementation helper. Detects and recommends UI libraries (MUI, Tailwind, shadcn/ui, etc.) based on project context."
web-design
by goncalossilva
"Design and implement distinctive, production-ready web interfaces with strong aesthetic direction. Use when asked to create or restyle web pages, components, or applications (HTML/CSS/JS, React, Vue, etc.)."
design-expert
by nguyenthienthanh
"UI/UX design expertise - component design, design systems, responsive design, Figma analysis"