#SkillRepo stars

1. 241Imgui UI UX Engineeringmuhosekerci/imgui-ui-ux-engineeringProactively design, improve, or review high-quality Dear ImGui tools, C++ editor panels, game-development interfaces, debugging dashboards, visualization screens, and desktop workflows. Use when Dear ImGui is named or supplied code contains direct evidence such as `ImGui::`, `imgui.h`, `ImGuiContext`, or ImGui backend symbols. For an unlabelled C++ editor/tooling request, use only when the user explicitly asks whether Dear ImGui is suitable; otherwise keep framework choice open. Do not trigger for a task that explicitly names another UI framework such as Qt, GTK, WPF, wxWidgets, JUCE, or Slate8
2. 242Irasutoyahsol/irasutoyaFind, download and place free いらすとや (irasutoya.com) illustrations. Use whenever a slide deck, document, blog post, web page or design canvas would be better with an illustration or icon.9
3. 243Kiro Motion StudioKRYPT-123/kiro-motion-studioKIRO 风格炫酷视觉视频工作流：片头、个人展示片、热点视频、歌词MV、3D铬金属Logo片、说唱/演出VJ循环，含卡点剪辑、封面和抖音文案。9
4. 244Muji Style Skillyanliudesign/muji-style-skillCreate original quiet-living visuals from any theme, object, product, article, event, space, or supplied photograph using natural materials, restrained color, functional typography, asymmetric whitespace, honest photography, and human imperfection. Always use this skill when the user asks for MUJI-inspired, 无印良品感, 日系极简, Japanese minimalism, quiet living, natural minimalism, understated lifestyle design, 素朴生活美学, 留白产品海报, or asks to make a visual feel quieter, simpler, more natural, and less designed. Preserve the underlying design principles without copying MUJI logos, packaging, campaigns, stor8
5. 245Product UI Directormacistone71-jpg/heqingfeng-product-ui-skill何庆丰定制的产品 UI/UX 设计、实现与验收 Skill。凡是新建、改版、评审或迭代 Web、移动端、桌面端界面，设计系统、页面、组件、交互、响应式、可访问性、配色、字体、数据图表或视觉质量时必须使用。覆盖需求简报→设计系统→差异化视觉→代码实现→真实浏览器验收→迭代记录，内置可搜索 UI/UX 数据和项目级设计记忆。9
6. 246Shopify Theme BuildermoVictor99/shopify-theme-builderBuild a complete, clean, Online Store 2.0 Shopify theme from a guided requirements interview. Use when a user wants to build, generate, scaffold, or design a Shopify theme, Shopify sections, JSON templates, Liquid, section groups, or a fully theme-editor-controllable storefront (including bilingual / RTL Arabic stores). Produces a zip-ready theme that passes theme-check and meets Shopify Theme Store requirements.8
7. 247Terminal UI Design Systemchyinan/terminal-ui-design-systemCreate terminal-inspired UI interfaces with macOS-style window decorations, monospace typography, and a warm color palette. Use this skill when building developer tools, code marketplaces, technical documentation sites, or any interface that benefits from a terminal/command-line aesthetic. Provides complete design system specifications including color palette, typography, spacing, components, and CSS implementation details.9
8. 248UI CraftAchref23illi/ui-craftMake a mobile UI look and feel like a shipped app. Rules with numbers, 29 screen recipes (plus 200 measured ones), a fast screenshot review and lessons from a real redesign, grounded in 4,500 iOS screens from 78 apps (Spotify, Airbnb, Instagram, Apple Music, Wise, Coinbase, Google Maps, Uber Eats, Halide, Notion…). Use before designing or restyling any mobile screen (React Native, Expo, SwiftUI, Flutter, mobile web), when reviewing screenshots for "does this look like a real app", or when you need a reference for a pattern (feed, player, editor, sheet, paywall, settings, onboarding, empty stat9
9. 249Web Design TasteAlice59357/web-design-taste帮助没有设计背景、不懂技术术语的用户做出设计师级高质量网页。用户只需用大白话描述需求，通过选择预设风格卡片（而非描述设计），即可产出完整可运行的网页。每当用户提到"做个网页"、"做个网站"、"落地页"、"作品集"、"介绍页"、"官网"、"销售页"，或表达"想要好看的页面但不知道怎么形容"时，必须使用此技能。即使用户没有提供任何设计要求，也要使用此技能来引导。8
10. 250Brand Ymlstephenturner/skill-brand-ymlCreate a _brand.yml file for Quarto projects that captures brand colors, typography, and identity in a structured YAML format. Use this skill whenever the user mentions _brand.yml, brand.yml, Quarto branding, brand identity for Quarto, or wants consistent colors and fonts across Quarto documents, websites, presentations, or Shiny apps. Also trigger when the user asks to extract brand colors or fonts from a website, PDF brand guidelines, or style guide for use with Quarto. Even if the user just says "set up my brand" or "make my Quarto docs match our brand," this is the right skill.7
11. 251Motion RefjoepUI/motion-ref-skillUI 动效参考库，帮你给产品加上合适的动画。不需要懂动效 — 描述你的产品场景（页面加载慢、用户点了没反应、想让页面高级一点），直接推荐方案 + 代码。触发词：页面没动画、交互没反馈、怎么加动效、让页面动起来、加载太慢怎么办、想让产品高级一点、motion ref。7
12. 252Compliance AuditorFuzulsFriend/compliance-auditorUse this skill whenever the user asks for a privacy policy, terms of service, cookie policy, accessibility statement, GDPR / CCPA / COPPA / Israel PPL / UK GDPR review, sub-processor list, or any "make my site compliant" task. Also trigger when the user mentions Privacy Policy, Terms, ToS, ToU, "legal pages", compliance audit, data processing agreement, DPA, DPIA, consent flow, cookie banner, CAN-SPAM footer, data retention, breach-notification, or regulator names (EDPB, ICO, CPPA, FTC, Israeli PPA). The skill runs a deterministic multi-agent pipeline - researches primary-source regulator requ8
13. 253Human Experienceandrew-shwetzer/human-experienceVision-powered UX simulation engine. Opens UIs in a real browser, takes screenshots, clicks through flows, records video, and analyzes everything through Claude's vision + empirical UX research. Replaces a 1000-person user testing panel with automated multi-viewport, multi-persona, interactive analysis. Karpathy-style ratchet loop for iterative perfection.7
14. 254Linkedin Hdr LogoAdamodigi/linkedin-hdr-logoConvert a logo into an HDR JPEG whose whites glow brighter than the screen's normal white, in the one format that survives LinkedIn's image processing (Rec2020 PQ ICC profile JPEG). Use this skill whenever the user wants a logo's white to look extra bright, glowing, or HDR on LinkedIn or on social profiles, mentions the "LinkedIn HDR logo" effect, says their HDR upload loses its glow after LinkedIn processes it, or asks to make a logo "pop", "glow", or "defy screen brightness". Also use it when the user gives a logo file and asks to boost, expose, or brighten its whites for LinkedIn.8
15. 255Shain DlsDishain/Shain-Design-System-SkillToken-based design system skill for Figma + code handoff. Use whenever working with Figma components, design tokens, color variables, token migration, component creation, design-to-code handoff, or DS audits. Trigger on: design system, DS, DLS, tokens, figma variables, component spec, token naming, token hierarchy, which color to use, variant properties, theme config, dark mode. Even for "which color should I use" or "create a component" — use this skill.8
16. 256Wcss Slurmdawidlinek/slurm-wcss-skillUse this skill for any HPC task on the WCSS site in Wrocław - the Bem2 and Lem clusters (partitions like bem2-cpu-short, lem-gpu-short), login node ui.wcss.pl, grants and PD storage from KDM / e-science.pl. Trigger on any mention of WCSS, KDM, Bem2, Lem, ui.wcss.pl, a PD directory, $PDDIR, finished_jobs, a Wrocław or Polish supercomputer, or a job ID on that site, whatever the question is about - writing sbatch, MPI, array or GPU (H100) jobs, CPU-hours or GPU-hours left on a grant service, whether a job fits, a job PENDING with QOSGrpCPUMinutesLimit or killed or failed, results in $TMPDIR afte8
17. 257Webclonerveyralabsgroup/webclonerWebsite Cloner. Activate when a user wants to clone, replicate, or rebuild a website's visual design. Triggers on: "clone this website", "replicate this landing page", "rebuild this design in Next.js", "copy the layout of this site", "I want my site to look like X", "recreate this homepage". Designed for landings, marketing sites, portfolios, and ecommerce storefronts — not web applications, dashboards, or SaaS products with auth flows. Produces a pixel-accurate clone using spec-driven parallel construction with automated extraction.8
18. 258Xiaoer Artstudio DesignJane-xiaoer/xiaoer-artstudio-designDesign methodology reproduction kit for 小耳 Art Studio (xiaoerai.xyz / uki-clone.vercel.app). Replicate the "Japanese stationery × independent artist portfolio" aesthetic — tender whitespace, dual typography, section-rotated pastel palette, hand-drawn SVG vocabulary, trilingual poetic copy, **plus the five-layer interaction system** (Matter.js physics garden, per-character text spring with optional pencil cursor, tangential rotor, idle-spin). Use when a user asks to build an artist portfolio, product showcase, or derivative-goods landing page in this gentle-editorial style. Portable across Clau7
19. 259HTML Animation to Mp4AZR-Software-Solutions/html-animation-to-mp4Convert an HTML/CSS/JS animation — especially a Claude "Design" timeline artifact (a *.dc.html bundle exported from Claude) — into a clean, shareable MP4 using deterministic headless-browser frame capture plus ffmpeg. Use this whenever the user has a web/HTML animation, a Claude Design or Artifacts animation, a `.dc.html` file, an animated promo / explainer / motion graphic, and wants a video file (MP4, reel, short, clip) out of it — even if they don't say "render", "ffmpeg", or "headless". Trigger on phrasings like "convert this animation to mp4/video", "export my HTML animation as a video", 6
20. 260Avatar Sticker Packbianzigege/avatar-sticker-packGenerate a reusable sticker pack from one or more user-provided avatar images. Use when the user asks for avatar stickers, emoji packs, reaction stickers, chibi stickers, human-proportion and Q-version variants, transparent PNG stickers, or a paired sticker set for chat platforms.7
21. 261Bauhaus Designcapsrock/bauhaus-design-skillCreate frontends, posters, dashboards, and web UIs rooted in Bauhaus and Swiss International Typographic Style (Internationale Typografische Stil) design principles. Use this skill when the user mentions Bauhaus, Swiss design, International Typographic Style, grid systems, Josef Müller-Brockmann, Max Bill, Jan Tschichold, Herbert Bayer, László Moholy-Nagy, constructivism, De Stijl-influenced UI, or asks for designs that emphasize mathematical grids, typographic hierarchy, geometric abstraction, asymmetric layouts, or modernist clarity. Also trigger when the user wants a 'clean modernist' look,7
22. 262BlindspotIdanTayree/BlindspotTurn an idea — or a half-planned project already underway — into a buildable blueprint, by interviewing the user one question at a time until the unknowns run out, then deep-reading and verifying real open-source components for each part. Use this whenever someone describes something they want to build but has not specified it ('I want to build an app that…', 'I have an idea for…', 'help me plan/spec/scope this', 'turn my idea into a plan'), whenever they ask for a PRD, a spec, a product requirements document or a build plan, AND equally whenever someone says an existing project feels under-pl7
23. 263Brand Guidelinespiaoyinghuang/brand-consistency-ai-skillUniversal brand guideline engine for producing, reviewing, and suggesting brand-compliant marketing materials for ANY company. Use this skill whenever a task involves brand identity, visual consistency, marketing collateral, or corporate design standards. Triggers include: brand guidelines, brand book, visual identity, corporate identity, brand compliance, brand review, brand audit, marketing materials, social media copy, poster design, banner design, PPT template, presentation template, company brochure, brand colors, typography guidelines, tone of voice, brand voice, logo usage, brand assets7
24. 264Design PsychologyFh-Ndiritu/design-psychology-skillAudit or build any website/UI against research-backed conversion and design-psychology principles (Hick's Law, Von Restorff, Goal Gradient, Peak-End, Fitts's Law, the Aha moment, loss aversion, social proof, feedforward, labor illusion, and ~50 more). Use when reviewing a live URL or a local codebase for conversion/UX quality, or when designing or editing any user-facing surface — landing pages, pricing, onboarding, CTAs, forms, empty states, error flows, mobile screens. Auto-detects whether the target is a live URL or local source files. Brand-agnostic: derives the product's own tokens and vo7
25. 265Game UI Mobile Friendly Designdungnotnull/game-ui-mobile-friendly-design-agent-skillMobile-Friendly Game UI Design & Touch-Friendly Interaction — Bulletproof production-grade harness for Mobile Game UI/UX & Touch Interaction Design analysis with zero placeholder code. Use this skill whenever the user asks for mobile game UI evaluation, touch interaction design, gesture discoverability analysis, accessibility assessment for games, one-handed mobile usability, thumb zone layout optimization, Fitts's Law application to touch targets, colorblind accessibility in games, or any mobile game interface design question. This skill provides evidence-backed analysis with academic citatio7
26. 266Tidyfactor DesignTidyFactor/DesignCode-native UI design lifecycle engine (Figma alternative) with Contextual Decision Layer (CDL). Supports all 7 design stages with zero per-page CSS/JS and pluggable CSS foundations (Native, Tailwind, daisyUI, Pico, Hybrid). Trigger on commands 'brief', 'study', 'init', 'brand', 'tokens', 'palette', 'layout', 'components', 'page', 'dashboard', 'motion', 'i18n', 'audit', 'deploy', or design system requests.7
27. 267Wedding Invitationwyx-sg/wedding-invitation-skillUse this skill when the user wants to design and generate a wedding invitation card in any language. The skill drives a conversational workflow — you gather the couple's info and style preferences, design a bespoke HTML template from scratch (no template selection), render it locally with headless Chrome, produce a print-ready PNG, and include a live tweak panel so the user can adjust colors, fonts, frames, and optional components without rebuilding. All data stays on the user's machine; no cloud, no signups, no data leaves.7
28. 268Yafa UI Dashboardrejourneyco/yafa-ui-dashboardDesign, build, refactor, or review polished responsive analytics dashboards, SaaS admin dashboards, business intelligence interfaces, and data-heavy product UI using Yafa-UI. Covers sidebar navigation, one-row page headers, multi-color KPI cards, charts, tables, filters, Lucide icons, accessible states, and mobile dashboard layouts across React, Next.js, Tailwind CSS, Vue, Svelte, and other frontend stacks. Do not use this visual system as the default for marketing sites, authentication, setup wizards, account or billing settings, or unrelated public pages.7
29. 269Apple Designbowen31337/apple-designBuild web interfaces (HTML/CSS/JS, React, Vue, Tailwind) that look and feel like Apple made them — the real Apple aesthetic, not generic glassmorphism. Covers Liquid Glass / iOS-26 materials as rendered CSS+SVG (specular highlights, refraction, vibrancy, fallbacks), Apple's fluid-motion physics (springs by damping/response, velocity handoff, momentum projection, interruptibility, rubber-banding) implemented in BOTH Motion (motion.dev) and GSAP (Flip, ScrollTrigger, SplitText, Inertia), SF typography optics, a drop-in Apple design-token layer, and complete copy-paste components (glass nav, spri6
30. 270Handdraw SkillToBeWin/HandDraw-SkillCreate deterministic hand-drawn, whiteboard, educational, and explainer MP4 animations from a JSON Animation DSL. Use when a user asks to make or edit a hand-drawn video, whiteboard animation, animated SVG explainer, or programmatic animation video.6
31. 271HTML CSS Firstmacdonst/html-css-firstPrefer modern HTML and CSS solutions over JavaScript-heavy implementations. Use this skill whenever building or reviewing frontend code — especially for UI patterns like modals, accordions, tabs, tooltips, form validation, animations, dropdowns, carousels, sticky headers, and toggles. Trigger on any request to build a UI component or page, even if the user doesn't explicitly ask for "CSS-only" — always check whether a native HTML element or CSS feature can replace a JS solution first. Also trigger when reviewing existing code for opportunities to reduce JavaScript by using modern browser capab6
32. 272Nature StyleZhangyanbo/nature-style-skillNature-journal house style for publication-ready scientific figures, optimised for Python/matplotlib plotting. Bundles palette.py (a drop-in matplotlib style module with the Nature-style house palette, Wong colourblind-safe set, point-scale type, safe stroke weights, and helpers) plus the full design system as CSS tokens and figure components for HTML/SVG. Use this skill whenever creating or restyling any chart, plot, diagram, schematic, or multi-panel figure for a scientific paper or analysis — matplotlib/seaborn code, an HTML/SVG mock, choosing colours for scientific data, or preparing figur6
33. 273Russian Text QualityAnic888/russian-text-qualityUse when reviewing or writing code that contains Russian-language UI strings, i18n locale files (ru.json, ru.yml, ru.po), Russian comments, or transliterated identifiers (polzovatel, tovar, kolichestvo). Triggers on mixed English-code + Russian-content projects. Does not cover typography, spelling, or ё/е.6
34. 274UI UX Fixernerdstalker/ui-ux-fixerAdvise on and critique UI/UX design work through the lens of Luke Wroblewski's published principles, using his MCP archive to retrieve relevant writings, presentations, videos, and other source material for each task. Use this skill whenever the user asks for a design review, UX critique, or feedback on a screen, page, form, sign-up flow, checkout, mobile layout, navigation scheme, or AI/agent interface — or asks "what would LukeW say," mentions Luke Wroblewski, or wants design advice grounded in established best practices rather than taste. Also use it when the user asks to fix or improve a U6
35. 275Design Fidelity Verifyjeltehomminga/figma-design-skillsProve a running app matches its design spec by measuring rendered values, not eyeballing a screenshot. Use when the user says "verify the design", "is this pixel-perfect", "check against Figma", "does the app match the design", or "design QA this screen". Runs a bounded vision+numeric loop over web or mobile, classifying every spec row rather than reporting a bare pixel delta. Consumes the figma-design-extract spec table.5
36. 276Figma Design Extractjeltehomminga/figma-design-skillsExtract exact design values from a Figma node into a build-ready spec table, instead of eyeballing a screenshot. Use when the user shares a figma.com node URL, or says "implement this Figma design", "build this component from Figma", "extract the Figma values", or "match the Figma". This is design-to-code only - to push code into Figma, use figma-generate-design instead.5
37. 277Telegram Premium Emojisabbosahmad/telegram-premium-emojisComprehensive guide, design system, and code generator for Telegram Bot Premium Custom Emojis, Aiogram 3 card UI, icon_custom_emoji_id inline buttons, and sticker pack discovery.5
38. 278Apple DesignXOVIET-GAME/apple-design-skillComplete Apple Human Interface Guidelines (HIG) and Apple Design System standard. Use when designing, building, or auditing UI/UX for iOS, iPadOS, macOS, watchOS, visionOS, or Apple-styled web and mobile applications.6
39. 279Build Your Own Componentethankongee/build-your-own-componentGenerate a complete UI component library with 24 components (Accordion through Tooltip). Supports React or Vanilla JS. Can produce 1-3 design variations for side-by-side comparison. Use when the user wants to create a component library, design system, UI kit, or build reusable UI components.6
40. 280Cockpit UI SkillKrasAndy/cockpit-ui-skill暗色 cockpit 风格的 UI/UX 词库与 cheatsheet。Claude 在开发能源 / 工业驾驶舱、暗色 dashboard、B 端 SaaS 前端时加载本 skill,会按 cheatsheet 中的三主题 token、字号 / 间距 / 圆角 / 阴影梯度、6 个核心组件 API(LayoutShell / SplitPane / ResponsiveGrid / DataTable / ThemeProvider / I18nProvider)以及实际可导出的 React + TypeScript 代码。6
41. 281Elementor Pro Designer Skilljainshwetank/elementor-pro-designer-skillUse this skill whenever helping someone build, design, or troubleshoot layouts in Elementor Pro V4 using the visual editor. Triggers on ANY mention of Elementor, page builder, Flexbox widget, Div block, section layout, widget configuration, responsive breakpoints, dark mode, scroll animations, Interactions tab, Variables Manager, Class Manager, Custom Code snippets, or any visual design work inside the Elementor panel. Also trigger when someone asks how to position elements, set spacing, apply typography, configure dark mode, prevent FOUC, or build scroll-triggered effects in Elementor. ALWAYS5
42. 282Image First Frontendjinshiqwq/image-first-frontendGenerate a polished frontend reference screenshot through a configurable GPT-image-2-compatible generations endpoint, save and show versioned previews inside the project, revise selected previews through a configurable /images/edits endpoint, and reproduce only the user-approved design as functional frontend code with high visual fidelity. Use when Codex is asked to design, build, restyle, or recreate a web page, application screen, dashboard, landing page, or UI component through an image-first workflow, design approval loop, screenshot-driven implementation, pixel matching, or a 1:1 frontend6
43. 283Interface PolishTsavsar/interface-polishA checklist of concrete UI craft rules covering border radius, shadows, animation timing, typography, color tokens, accessibility, layout spacing, and microcopy. Use this skill whenever building, reviewing, or refining any web UI, component, page, landing page, or design system code, even if the user only says "make it look better", "polish this", "review my component", or asks for a button, menu, modal, form, or any frontend work. Also use it when writing UI copy like button labels, empty states, or confirmation dialogs. Distilled from the interfaces.dev cheat sheet.6
44. 284Oh My DesignfavorPotato/oh-my-designUse this skill when the user asks to design / mock up / prototype a UI, iterate on visual design, compare visual candidates, or explore visual approaches before implementation. Triggered by phrases like "design a UI", "mockup", "prototype the screen", "give me 3 visual options", "make it look like…", or any request that is fundamentally about look-and-feel rather than business logic. The skill writes React 18 prototypes under `<cwd>/.design/<slug>/`, hands the user a Tweaks panel to pick / iterate, and returns the selection plus a self-describing manifest the next agent can implement against. 6
45. 285Qiaomu Tldraw Skilljoeseesun/qiaomu-tldraw-skillOfficial-first Qiaomu tldraw creation skill and workflow for building, editing, recreating, scripting, linting, testing, migrating, and packaging tldraw canvases or tldraw SDK apps with the official CLI and official LLM-friendly documentation. Use when the user asks to 画 tldraw、复刻成可编辑画布、制作流程图/信息图/课件、 创建交互或动画画布、写 custom ShapeUtil/document script、检查 .tldraw 文件， or scaffold and migrate a tldraw React application using official sources only.6
46. 286Quasar Vue3felixyakubov91/claude-quasarComprehensive Quasar Framework (v2) and Vue 3 development assistance. Use this skill when working with Quasar projects, components, plugins, directives, composables, CLI configuration, or building apps (SPA, SSR, PWA, Electron, Capacitor, Cordova, Browser Extensions). Triggers on Quasar-specific questions, quasar.config.js, Q-prefixed components (QBtn, QInput, QTable, etc.), Quasar CLI commands, or Vue 3 Composition API with Quasar.5
47. 287Salgadoia Web Design Engineer ProLuispitik/salgadoia-web-design-engineer-proSkill end-to-end para construir webs y landings profesionales con Next.js 16, React 19, Tailwind CSS v4, shadcn/ui y Framer Motion. Pensada para que un usuario sin conocimientos técnicos pueda PREVISUALIZAR estilos en su navegador antes de elegir, y completar la página de principio a fin (intake, brief, diseño, build, QA, deploy). Combina 8 direcciones visuales narrativas (Editorial Serif, Swiss Minimal, Luxury Dark Warm, Corporate Bold, Understated Elegance, Neo-Brutalist, Playful Gradient, Retro Terminal) con 10 paletas y 10 emparejamientos tipográficos en un sistema mix-and-match con build-5
48. 288Screenshot to Design SystemWCF900905/screenshot-to-design-systemExtracts color tokens and component styles from UI screenshots by reading each control region individually (not full-page layout). Generates a complete design system demo with tokens.css and components.html. Ignores backgrounds and icons. Use when the user uploads a UI screenshot, asks for design tokens, color palette extraction, or component library generation from a reference image.6