Design
UI/UX direction, visual design, and design systems
pretext-motion-bubble
by Asunfly
Use when generating or refining a standalone preview page that shows Pretext-driven animated text reflow around a moving video subject inside a chat-style bubble, especially when the effect should be easy to run and share locally.
buddy-design
by gikenye
Use this skill to generate well-branded interfaces and assets for Buddy, the body-doubling miniapp for ADHD students. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping. Buddy uses a chunky neon "Focus Arena" arcade aesthetic — dark purple backgrounds, neon cyan/yellow/green accents, 4px borders with hard offset shadows, uppercase headings, and system fonts.
ecom-klaviyo-email
by jasoncarrigan
Build one high-converting, on-brand HTML campaign email for an e-commerce store and deploy it to Klaviyo as a ready-to-review DRAFT (audience left as a clearly-marked placeholder so nothing sends by accident). The user supplies a product page (PDP) or collection/listing page (PLP) link plus the email type; the skill learns the brand, reads the page, researches the customer and the competition, mines the store's own Klaviyo performance for what already works, writes the copy, generates an AI hero image plus real product photos, assembles bulletproof email HTML, and creates the draft. It also hands back two paste-ready Klaviyo audience prompts (one targeted, one broad). Use this whenever the user wants to create, build, draft, design, or generate a campaign email, daily email, product email, promo email, launch email, or newsletter for their online store — even if they don't say "Klaviyo." Trigger on phrases like "build a campaign email for my daily send featuring this product," "make me an email for this collection," "draft this week's newsletter," or "I need a promo email," especially when a store URL is provided.
frontend-design
by ederheisler
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.
frontend-design
by opsui
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
aholiab-ux
by christopheraaronhogg
Provides expert UX analysis, usability assessment, and accessibility audit. Use this skill when the user needs user experience evaluation, accessibility review, or user flow analysis. Triggers include requests for UX review, accessibility audit, or when asked to evaluate usability and user journey patterns. Produces detailed consultant-style reports with findings and prioritized recommendations — does NOT write implementation code.
chet-mutaphon-design
by chetmutaphon
Use this skill to generate well-branded interfaces and assets for Chet Mutaphon — a Marketing Executive & Graphic Designer whose portfolio specialises in F&B / hospitality brands. A quiet, Apple-inspired, typography-led minimal identity with four switchable themes. Contains essential design guidelines, colors, type, fonts, assets, and portfolio UI-kit components for prototyping or production.
ui-layout-and-styling
by tippyentertainment
Improve the visual quality and usability of existing UI by fixing layout structure, responsiveness, spacing, alignment, typography, and overall consistency. This skill assumes components already exist and focuses only on presentation, not business logic.
clinic-content-system
by gwanggyo-barun
광교바른내과 통합 환자 교육 콘텐츠 생성 스킬 (HTML + PDF). 세 가지 콘텐츠 타입을 단일 디자인 시스템·단일 빌드 파이프라인으로 생산한다: (1) 16:9 멀티슬라이드 환자 교육 덱, (2) A4 세로 1장 진료실 핸드아웃, (3) A4 세로 1장 검사 결과 인포그래픽. 공통 인프라: Navy #003366 + Steel Blue #5B9BD5, Pretendard Variable, Python qrcode SVG 자동 QR 생성, OG meta 7개 head 등록. 사용자가 "환자 교육 슬라이드/PDF", "유인물 만들어줘", "주의사항 PDF", "비치용 안내문", "검사 결과지 인포그래픽", "결과지 시각화", "종합검진 결과지", "건강검진 결과", "검진 결과지", "위/대장 내시경 + 초음파 + 혈액검사 종합", "경동맥/갑상선/상복부 초음파 결과", "심전도/골밀도 포함 검진 결과", "텍스트/PDF/캡쳐로 검사결과지 생성", "환자한테 보낼 자료", "카톡으로 보낼 자료" 등을 만들어 달라고 할 때 트리거된다. 특히 lab-reports/health-checkup 모드는 환자별로 시행 검사가 다른 종합 건강검진 결과지를 1~3페이지 HTML/PDF로 만든다. 기존 patient-education-pptx, patient-handout-pdf, lab-report-infographic 세 스킬의 HTML 통합 후속 버전이며, PPTX가 명시적으로 요구되지 않는 한 이 스킬을 우선 사용한다.
atmosferi-design
by michalkasparek91-arch
Use this skill to generate well-branded interfaces and assets for Atmosferi, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
wunderpar-brand
by Kingly-Clark
Wunderpar brand guidelines for consistent styling across web projects. Use when building websites, landing pages, or micro apps for Wunderpar. Use with Lovable, v0, or other AI web builders. Provides colors, typography (including Fraunces display font), spacing, and border radii.
GTMDot Skill
by bruce-workspace
Sites with only 1-2 verbatim reviews (handy-dandy, plugged-electricians): use the 1-2 available as static pull quotes only, skip the marquee/feed component — not enough reviews to scroll meaningfully.
better-plan-mode
by LIPOKA
"Enhanced planning mode that presents decision points as rich HTML documents with visual previews, comparison tables, and recommendations. Tracks all decisions in a browsable history with a landing page. Use for planning new projects or major features."
expressive-design
by ab22593k
Material 3 Expressive (M3E). Comprehensive guidance on expressive design system for Flutter with platform support for Android and Linux desktop. Covers color tokens, typography scales, motion specifications, shape tokens, spacing ramps, and component enhancements for creating emotionally engaging UIs. Includes migration guidance from standard M3 and platform-specific integration notes.
frontend-design
by nsds42
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
frontend-design
by RizqMarketing
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
webprinter
by SiteHypeInc
Convert Elementor template kits into WebPrinter-compatible templates and deploy automated websites. Use when working with WebPrinter 2.0, converting templates, deploying sites, managing the plugin, or working with the n8n pipeline. Triggers on mentions of WebPrinter, template conversion, Elementor templates, site deployment, kit.json, or the marker system (_wp_repeat, _wp_if, _wp_img, _wp_stock).
codebelt-code-style
by codeBelt
Enforces the CodeBelt TypeScript and React code style guide for project structure, naming conventions, component patterns, service patterns, testing, and TypeScript rules. Use when writing, reviewing, or refactoring TypeScript or React code, creating new files or components, organizing project directories, writing tests, defining Zod schemas, or when the user mentions code style, conventions, linting, file organization, or naming patterns.
tk-vn-product-sheet-skill
by 23xxCh
Process TikTok cross-border e-commerce spreadsheets for Vietnam site: translate Chinese titles/variants to Vietnamese (de-branded, ≤80 chars), set brand→Generic N/A, stock→30, regenerate SKU, clear video links. Pre-screen product images via vision LLM → only send images containing brand/logo/watermark/text to Doubao Seedream 5.0 (2K) or GPT-Image-2 for cleaning (remove brand/logo/watermark + translate text to Vietnamese). All URL→API→URL — no local file downloads needed. Triggers: tk越南站表格, tiktok产品表, 电商表格翻译越南语, 产品图去logo水印, 跨境电商数据清洗.
frontend-design
by seiyus-dot
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.
material
by kmaili
Google's Material Design with layered surfaces, dynamic theming, built-in motion, and responsive cross-platform patterns.
corelith-design
by tate2301
Use this skill to generate well-branded interfaces and assets for Corelith (the operating platform built on the Huchu codebase). Provides the warm-paper Claude Code-inspired design language — colors, type, fonts, status vocabulary, sidebar, table, settings, and list patterns — for production code or throwaway prototypes and mocks.
Design System & UI
by tachfineamnay
Tailwind CSS configuration, Lumira color palette, glassmorphism, and animation patterns.
spores
by liet-codes
Directory of works-in-progress seeking collaborators. Register projects, discover collaborators, search by tags.