#SkillRepo stars

1. 97Claude Designjiji262/claude-design-skillProduce thoughtful, high-fidelity design artifacts in HTML — landing pages, slide decks, interactive prototypes, animated videos, posters, wireframes, and visual explorations. Use whenever the user asks to design, mock up, prototype, visualize, storyboard, or explore UI options — including phrases like "make a deck", "design a landing page", "prototype this flow", "animate this concept", "build a pitch deck", "create a poster", "visualize this idea", or "design something for a brand". Enforces fact verification (WebSearch before assuming a product exists or its version), the Core Asset Protoco213
2. 982dimg2motionWU-HAOTIAN34/2dimg2motionUse when a user provides one baseline image and requests game animation frames, sprite sequences, attack/walk/idle/hit/death/casting motion, transparent PNG frames, a spritesheet, keyframe prompts, or consistent whole-character pose animation.239
3. 99Apple Hig Designeraxiaoge2/Apple-Hig-DesignerDesign Apple-style iOS/macOS interfaces following Human Interface Guidelines. Creates HIG-compliant components with SF Symbols, San Francisco typography, and proper accessibility. Supports optional modern effects. Use when designing Apple-style UI, iOS/macOS interfaces, HIG-compliant components, or implementing design system specifications.212
4. 100Dioramasloemo01/dioramaUse when building a pixel diorama in Three.js — one-prompt autonomous builds with staged systems, detailed props, real animation, and social/service choreography.196
5. 101Code Brand Filmnutllwhy/code-brand-filmProduce a short brand film or product promo (10-60s, typically 15s) entirely as code: one static HTML page with a paused GSAP timeline that a renderer seeks frame by frame, plus a music score synthesized in Python. Use when the user wants a 品牌宣传片, 广告片, 宣传动画, 产品短片, 发布会开场视频, brand film, promo video, product teaser, logo animation, or a generated ad spot — especially when they ask for 高级感 / 艺术感 / 电影感 / 别像模板, or when an existing video "looks like AI made it" or "too simple" and needs to be redone properly. Also use when a film already exists and needs a score, a soundtrack, background music, or 配乐181
6. 102Blcaptain Style Skilldososo/blcaptain-style-skill当用户需要把内容（文章、笔记、截图、数据、产品说明）做成中文图文卡片组图时使用——小红书 / Rednote 3:4 竖图、公众号封面、社交卡。提供三套独家视觉语言（静纸 Still Paper本手记 / Signal Proof 证据层 / Bridge Canvas 跨平台桥），由 Claude 读懂内容、自己撰写 brief.json，交给确定性引擎渲染出第一眼惊艳、一眼可辨、国内开箱即用的图文组图。178
7. 103Frontend DesignIlm-Alan/frontend-designBuild a frontend with a deliberate visual direction held through palette, typography, structure, and texture, with on-screen strings that name real information rather than fabricated demo data or filler labels. Use when building or restyling a frontend.154
8. 104Brand System Builderamirmushichge/brand-system-skillGuides Lovart Agent from one visual reference to a coherent brand system, campaign assets, and packaging concepts through a gated creative-direction workflow.168
9. 105Aria IconsLeulAria/Aria-IconsUse when working with icons in any project. Search 1.4M icons, add them as source files (no giant dependency), migrate existing icon libraries, and run as an MCP server. Commands: `aria-icons search`, `aria-icons add`, `aria-icons get`, `aria-icons migrate`, `aria-icons doctor`.103
10. 106Material Design 3 UIskydashnet/material-design-3-ui-skillDesign, redesign, review, or implement user interfaces using Google Material Design 3 (M3), Material You, and optional Material 3 Expressive principles. Use for UI/UX screens, app flows, design systems, component selection, theming, responsive/adaptive layouts, accessibility audits, Figma-ready specifications, or developer handoff where Material Design 3 is required.159
11. 107Brickswpgaurav/bricks-skillsAuthor Bricks Builder (WordPress) layouts, templates, and full designs as paste-ready JSON. Use for any Bricks task — sections, pages, headers/footers, query loops, ACF/dynamic data, faceted filters, conditions, interactions/animations, popups, WooCommerce templates, custom elements, or hooks. Verified against Bricks 2.3.6 source.143
12. 108HTML Anythingclockless-org/html-anythingTurn rich agent answers and any file, folder, URL, or export into a polished single-file HTML page. Auto-picks a default route plus 17 concrete design systems (teaching, dashboard, atlas, timeline-story, document, …).161
13. 109Prototype to Figmaalima-max/prototype-to-figma-skillConverts a working Claude Code prototype into a structured Figma design file — exploding each interaction flow into separate frames, using the target file's design system components, and annotating interaction details natively in Figma. Use this skill whenever the user asks to turn a prototype into Figma frames, generate design specs from a prototype, create a Figma handoff from code, explode a prototype into states, or make a prototype reviewable by cross-functional partners. Also trigger when the user mentions "prototype to Figma", "design review from prototype", "async feedback on prototype141
14. 110Persian Motion Directoratmirrr/persian-motion-directorDirect and build professional motion design (promo and launch films, kinetic typography, animated explainers, social clips, title sequences) with correct Persian/Farsi and right-to-left typography, in Remotion or plain web code. Use this skill whenever the user wants a video, animation, motion graphics, teaser or animated text that contains Persian, Farsi, Arabic-script or RTL text, and whenever they say a motion piece looks "default", "like a slideshow", "AI-made" or "not pro", or that the Persian looks off, broken or disconnected, even if they never say "motion design". It brings the anti-sl148
15. 111Design AuditorAshutos1997/claude-design-auditor-skillAudit designs against 19 rules across Figma files and code (HTML/CSS/React/Vue/Tailwind). Auto-detects framework and design system (MUI, Chakra, shadcn/ui, Ant Design, Radix, Bootstrap). Runs code superpowers across all 19 categories: aria, focus, contrast, tokens, responsive, motion, forms, navigation, spacing, states, microcopy, elevation, iconography/SVG. Flags color blindness risk. Audits dark patterns, ethical design, Nielsen's heuristics. Outputs before/after diffs, developer handoff reports, wireframe-to-spec. English and Korean. Triggers on: check my design, review my UI, audit my layo92
16. 112Oil Frontendoil-oil/oil-frontend当任务需要实现、修改、重构或评审产品前端的可见界面、交互行为、前端状态与数据流、组件或样式组织时主动使用，无需用户点名；也用于这些前端行为的测试与验证策略。适用于页面、表单、列表、弹窗、响应式、样式与动效实现和前端代码归属调整。不用于视觉风格、配色、排版与设计方向这类设计判断，也不用于纯后端、构建部署、依赖升级、只修导入路径的机械改动、仅操作现有网站、仅生成设计图片或讨论本 Skill；用户明确要求不使用时不触发。139
17. 113Tidyfactor StylerTidyFactor/StylerProduction framework styler and surgical RTL UI polish engine with Contextual Decision Layer (CDL). Operates directly inside existing codebases across React/Next.js, PHP, WordPress, and Vanilla HTML/CSS/JS. Trigger on commands 'brief', 'component', 'section', 'page', 'redesign', 'typography', 'palette', 'layout', 'rtl', 'motion', 'styles', or requests for UI polishing and RTL refactoring.120
18. 114Nerv UImdrbx/nerv-uiBuild original, accessible React command-center interfaces with the published @mdrbx/nerv-ui component library. Use for dashboards, monitoring terminals, operational tools, authentication screens, or sharp industrial HUD-style UI in React, Vite, or Next.js.96
19. 115Anti UI Slopuizze/uizzeStop coding agents from shipping generic UI. Use UIZZE's 800,000+ real web and iOS screens to build product-specific interfaces, define a design contract, cover required states, and run a hard finish gate. Use when designing, implementing, redesigning, critiquing, or pre-ship reviewing a web or iOS interface in Codex, Claude Code, Cursor, Copilot, or another coding agent. Trigger with "anti-ui-slop", "stop UI slop", "ground this UI in real screens", or "run the UI finish gate".78
20. 116Cinematic UIakseolabs-seo/cinematic-uiDirect a website the way a film is made: cast a director and a film, choose the medium the film calls for (photoreal 3D, hand-drawn, ink wash, print, pixel, neon, type, photography…), cast a lead, ask for the assets, write a shot list for every section, then shoot it with a scroll-driven camera, designed cuts, a grade, and a screening pass on rendered frames. Use for Awwwards / Framer-grade landing pages, brand, product, portfolio and studio sites, immersive or WebGL / 3D sites, scrollytelling, "cinematic", "film style", "director style", "電影感", "導演風格", "分鏡", "像拍電影一樣做網站", a director's colour o90
21. 117Frontend Textbooksonepixelaway/frontend-textbooksCreate designed US Letter HTML textbooks, manuals, field guides, business books, and coffee-table books from supplied manuscripts, then verify and export matching PDFs. Use for new manuscript-to-book work, existing HTML book enhancement, print/mobile layout repair, manuscript-preserving diagrams or editorial imagery, and final book production.108
22. 118Data2motion Litenolangz/data2motionLightweight, script-driven variant of data2motion for turning data into a smooth, on-brand animated chart (one self-contained HTML) — built for a TEXT-ONLY model that cannot see its own output. You never write HTML/CSS/SVG/animation; you extract the data, pick a chart, fill a small JSON spec, and run one build script that owns 100% of the look and the motion, so the result cannot drift from the house template style or lose its smoothness. Use to turn a number/stat/table/CSV/paragraph into a quick animated chart, data reveal, or KPI when you want guaranteed template fidelity with minimal reason92
23. 119Shader for Interfacesv2space-labs/shader-for-interfacesDecide whether an interface effect should stay in CSS, SVG, or Canvas 2D or needs WebGL or WebGPU, then create, integrate, diagnose, and visually verify focused GPU effects inside product interfaces. Use for contained Three.js/WebGL2/GLSL or vgpu/WebGPU/WGSL surfaces, modest particles, GPU data views, and responsive canvases in TypeScript or React. Do not use for dependent passes, persistent simulations, formal render graphs, adaptive-quality systems, or renderer migrations.120
24. 120Design Tasteh3nryprod01/design-tasteElite frontend design taste for building, reviewing, and polishing web interfaces. Use whenever the user wants to design, redesign, shape, critique, audit, polish, or improve any UI (landing pages, portfolios, dashboards, product UI, components, forms, onboarding, empty states) or asks to make something look better / premium / modern, fix the styling, add or fix animations, or make a design feel less generic ("AI slop"). Covers typography, color, spacing, layout, visual hierarchy, motion, micro-interactions, component states, accessibility, responsive behavior, UX copy, and anti-pattern detect87
25. 121Nextjs App Architectureaurorascharff/nextjs-app-architecture-skillBuild or audit Next.js 16 App Router apps using a next-beats-style React Server Components architecture. Use when scaffolding a new app, adding a feature, reviewing an existing app, refactoring route-loader-shaped pages into feature-owned async server components, deciding where queries/actions/components live, keeping pages synchronous with `params.then()`, placing Suspense boundaries, choosing the client/server boundary, designing skeletons, preventing CLS, or enabling Cache Components. Also use when the user asks about RSC composition, components receiving IDs instead of route params, `'use 97
26. 122Audit Frontend Designmemi-design/memiUse when reviewing or changing a React, Next.js, Tailwind, or shadcn interface and you need evidence-backed findings for accessibility, hierarchy, tokens, states, and responsive design before editing code.49
27. 123Poster Style Transferjiemianduan/poster-style-transferAnalyze an uploaded or local reference poster, extract its reusable design system, and transpose that system to an original poster with a new theme, title, subtitle, or campaign copy.66
28. 124UX Wise Agentmarvinrez/ux-wise-agentActivate for any UX, product design, or interaction design reasoning task: UX critique, design decisions, interface pattern recommendations, accessibility reviews, research methodology, stakeholder communication, AI/UX trade-offs, or deceptive pattern identification. Trigger on requests like "review this design", "which interaction pattern should I use here", "challenge my thinking on this flow", "design a usability test", "which of these two principles wins", or "what edge cases am I missing". It works at senior practitioner level: it interrogates premises, holds positions under pushback, and52
29. 125Wp Block Theme Convertersiddik-web/wp-block-theme-converterConvert HTML/CSS/JavaScript projects into production-ready WordPress block themes (Full Site Editing) with theme.json v3, FSE templates and parts, block patterns, the Interactivity API, Block Bindings, and optional WooCommerce support. Use whenever the user wants to convert, port, or rebuild a static site, landing page, or classic WordPress theme as a block, FSE, or Gutenberg theme; scaffold a block theme from scratch; generate theme.json from design tokens; turn HTML into block patterns or templates; build custom blocks or style variations; migrate content or page builders (Elementor, Divi) t49
30. 126Kunpeng Skillhufeng173/kunpeng-skill跨智能体、本地优先的多源蒸馏与迁移工作流。用于收录或蒸馏代码仓库、网站、App、UI/交互、图片与品牌、视频、音频、文章、文档、书籍、课程及混合素材，形成带证据的可迁移画像、再生成规范、产品方案和本地方法库；也用于把画像应用到新主题或新 idea 并验收结果。55
31. 127Lecture DeckRinDig/lecture-deck-skillBuild a high-quality animated HTML lecture or workshop deck from a storyboard, in any theme. Use whenever someone asks for a slide deck, session deck, workshop slides, lecture screens, a run-of-show deck, or speaker notes for a talk, especially one delivered live (in a room or on Zoom) with breakouts, share-screen moments and handoffs. Produces one self-contained HTML file with keyboard navigation, speaker notes, overview, print, copy-to-clipboard prompts and a mode strip on every screen, plus PNG renders for checking. Ships with three themes and a kit for diagrams, animation, a recurring cast49
32. 128Qiaomu Icon Generatorjoeseesun/qiaomu-icon-generatorGenerate multiple app, favicon, or website icon candidates with either the local QM Icon Studio CLI or Codex built-in image generation with reference icons, then present a contact sheet so the user can choose. Use when building websites or apps and needing reusable icon options.55
33. 129Explodeddiip3sh/explodedTurn a real, rendered UI component (button, input, switch, card, menu, dialog, any React/Vue/HTML component) into a live, interactive exploded spec sheet. The component is pulled apart in isometric into its paint layers (elevation, surface, stroke, inner surfaces, content, focus ring), every state (hover, focus, pressed, disabled, invalid, on/off) can be switched, and every measurement (padding, radius, gap, type, shadow, ring) plus the design token the author actually wrote is read from the browser, never typed. Use this whenever someone wants component documentation, a design-system or Story59
34. 130Feeldiip3sh/feelBuild UI interactions whose motion comes from a physical model instead of durations and easing curves. Turn a feel described in words ("a toggle that feels heavy", "a drawer with a magnetic snap", "a card you throw into a corner", "a knob with heavy detents", "a sticky slider") into a production component driven by mass, stiffness, damping and force fields (magnets, friction, walls), on a line, in a plane or around a dial, plus a test rig that plots position, velocity and the force field, overlays the model's prediction on the measured motion, and exports the same spring to Framer Motion, reac61
35. 131Website Auditappariciojunior/website-audit-skillComprehensive website content and UX audit. Use this skill whenever someone asks to review, audit, check, or improve a website, landing page, or web product. Triggers include: "audit my website", "review my site", "check my content", "is my website ready to launch", "what's wrong with my site", "content review", "UX review", "website feedback", "check for broken links", "check for lorem ipsum", "review my copy", or any request that involves evaluating an existing website's content quality, UX structure, copy, or readiness for launch. Also trigger when someone shares a URL and asks for feedback49
36. 132Work with Design Systemsnatdexterra/work-with-design-systemsInspect, build, or extend Figma design systems — and optionally sync them to code. Two modes in one skill: inspect mode (read-only audits with WCAG checks, component scoring, detached instance detection, handoff docs) and build mode (creating components with variable bindings, slot-based composition, structured descriptions, validation, and optional export of tokens.css + AI rules to the user's codebase). Use when the user says 'audit my design system', 'check component quality', 'create design system', 'build DS in Figma', 'generate component library', 'add slots to my components', 'sync desi52
37. 133Ak Elementor Studioabanoubkhaliil/Ak-Elementor-StudioAK Elementor Studio — built by Abanoub Khalil (akstudio.me). Converts ANY input — HTML/CSS/JS code, screenshots, images (PNG, JPG, WebP), PDFs, Figma exports, design mockups, wireframes, or any visual file — into fully structured Elementor page JSON templates importable into WordPress. Activate this skill whenever the user: uploads a design image or screenshot and wants it built in WordPress, shares HTML/CSS/JS to convert to Elementor, pastes code or attaches a file and mentions Elementor, WordPress, or page builder, says anything like "convert this to Elementor", "build this in WordPress", "t44
38. 134Sboxgavogavogavo/claude-sboxUse when writing or modifying code for s&box, sbox, the Facepunch sandbox engine, or any Source 2 game project in C#. Triggers on mentions of s&box, sbox, sandbox game, Facepunch engine, Source 2 game, `.sbproj`, `.razor` with `PanelComponent`, `@inherits PanelComponent`, `Sandbox.Component`, `GameObject` + `Components.Get<T>`, `Scene.Trace`, `CharacterController` + `.Move()`, `SkinnedModelRenderer`, `NavMeshAgent`, `[Sync]`, `[Rpc.Broadcast]`, `[Property]`, `INetworkListener`, `ISceneEvent`, `PlayerController` in C#. Also triggers on any file with `using Sandbox;` or `using Sandbox.UI;` that 45
39. 135Animate Textsakuraoxo-clio/sakura-animate-textCurated text animation catalog with exact JSON specs for headings, labels, counters, and text swaps. Use when an agent needs to pick or translate named effects like soft blur in, typewriter, shared axis, line reveal, stagger, crossfade, or kinetic builds into WAAPI, Motion, Framer Motion, GSAP, CSS, Lottie, Rive, or similar stacks.47
40. 136Modern React Guidanceadhhamdev/modern-react-guidanceAuthoritative guidance for modern React 19+ (Actions, use, Compiler, View Transitions, Fragment refs, Activity, browser, useEffectEvent). Use when writing, reviewing, refactoring, or migrating React components, forms, data fetching, concurrent UI, or upgrading to React 19+. Triggers on React, React 19, useActionState, useOptimistic, forwardRef, useEffect data fetch, React Compiler, ViewTransition, Suspense patterns, or codemods. Always prefer latest official patterns over training data.49
41. 137Vibe to UIMonkeyUI-dev/vibe-to-uiDesign systems, motion, mood boards, spatial layout, visual assets, Design Context profiles, and a global Inspiration Library from screenshots, website URLs, inspiration images, music, or fuzzy aesthetic intent. Classifies page archetype, explores 3 product-aware directions before locking tokens (unless exact restoration), and applies only after confirmation. Use when designing or restyling UI, collecting design inspiration under ~/.vibe-to-ui/inspirations, extracting tokens/motion, generating assets, saving brand context under ~/.vibe-to-ui, or Git remote sync of Design Context for cross-devi39
42. 138Canvas Coworkflowith-ai/canvas-coworkGenerate text, images and videos on Flowith's canvas from the CLI, headless or with a live cursor. Use for any image/video generation (Seedance, Veo, Kling, gpt-image, Gemini image), "canvas", "Flowith", "Neo", drawing/creating visual content, or past canvas work. /canvas-cowork39
43. 139Design Mdarumwu/design-md-skillReference library of 74 real-world brand design systems (Claude, Linear, Stripe, Vercel, Figma, Apple, Tesla, Spotify, Notion, Supabase, and more) captured as DESIGN.md files — colors, typography, components, layout, elevation. Use when the user wants UI, a landing page, or a component that matches a specific brand's look; wants to pick a design direction from real design systems; says "like <brand>", "make it feel like Linear / Stripe / Apple"; or needs a concrete design-token starting point before frontend work. Pairs with frontend-design and tailwind-design-system.49
44. 140StylekitAnxForever/stylekit-skillApply StyleKit visual styles and public assets when building, restyling, or reviewing UI. Use for named StyleKit styles, visual direction, mobile interface patterns, and component-library selection; preserve the target platform and existing product behavior.38
45. 141Jiujiastudyjiujiastudy/jiujiastudy救驾（jiujiastudy）是留学生的 Canvas / Moodle 学习手帐：盯 deadline、排本周该学什么、按状态给建议。用户提到课程、作业、deadline、考试、Canvas、Moodle、老师，或说「现在什么情况」「最近要交什么」「这周学什么」「做完了」「没状态 / 累 / 来不及」「交之前检查」「想问老师」「做学习页」「一直在拖 / 开不了头」时使用；第一次用时自己完成设置，只向用户要学校网址（Canvas 另要 token）。33
46. 142Product Promo AnimationjitOffice/jit-motionGenerate a single-file, self-contained HTML product promotional animation video (15-30s) from a product brief/PRD. Produces a multi-scene GSAP timeline storyboard, a four aspect-ratio switcher (16:9/4:3/1:1/9:16), a zero-emoji SVG icon system, brand colors harvested from the official site, playback controls, and SEO video metadata. Use when the user asks for a product promo animation, marketing/ad video, animated HTML demo, or product launch video, or mentions building a product video with GSAP/motion/SVG. 基于产品需求文档/PRD/简介生成单文件、自包含的 HTML 产品宣传动画视频；当用户要求制作产品宣传动画、营销/广告视频、HTML 动画演示或产品发布视频时使用。34
47. 143Clone TeamVaralix-Digitech-Solutions/clone-teamClone any website with a coordinated team of AI agents — a Manager (you), a Frontend Developer, a Backend Architect, and a Tester — that iteratively and autonomously build a pixel-perfect UI clone AND produce thorough architecture documentation of how the site works. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, mirror, or copy a website — especially when they want it done thoroughly, in a specific tech stack (React, Vue, Svelte, Angular, etc.), behind a login, or with proper documentation. Triggers on "clone this site", "rebuild this app", "make a copy of <u26
48. 144Social CardsDennisWei9898/social-cards-engine品牌無關的 IG/Threads/X/FB 圖卡引擎——把任何主題（idea / 文章 / 教學）變成輪播圖卡 + 4 平台文案。HTML+CSS 模板 → Chrome headless 渲染 PNG。風格由 brand pack 決定（brands/），接哪個 pack 出哪個風格，引擎不綁死品牌。觸發詞：做圖卡、生 carousel、social card、IG 圖卡、Threads 卡片、貼文文案、教學圖卡、infographic、輪播圖、carousel post。35