Design & Media

tetherto Skill

Use whenever creating or editing UI in this repo — React components, modals, dialogs, forms, buttons, inputs, typography, styling, icons, or any .tsx/.jsx work. The repo uses `@tetherto/pearpass-lib-ui-kit` as the single source for UI primitives; do not roll custom ones. Load this before suggesting any UI change, especially when touching src/components, src/containers/Modal, or src/pages.

touchine-ojo Bundle

Comprehensive App UI/UX design best practices. Supports two tracks: Convention Track (adopt a proven design language for SaaS/utility products) and Innovation Track (multiple brand-driven design methodologies — Material Metaphor, archetype-driven, narrative-driven, cultural-semiotic — for brand-driven products). Use when users want to: (1) Define visual identity for a new product, (2) Create design specifications and tokens, (3) Establish UI component guidelines, (4) Build a cohesive design language, (5) Review UI/UX quality, (6) Refine existing designs, (7) Audit design quality. Triggers: 'design system', 'UI design', 'UX design', 'visual identity', 'design specs', 'design tokens', 'component guidelines', 'look and feel', 'app design', 'design refine', 'design audit', '视觉设计', '设计规范', '设计系统', 'UI最佳实践', 'UX最佳实践'.

vladzima Bundle

Generates a complete color system from a single brand color - perceptually even OKLCH ramps (50-950) plus WCAG-checked semantic design tokens (backgrounds, text, borders, focus ring) with light/dark values - via a zero-dependency local Python script. Use when starting or restyling a project's colors, generating design tokens or a Tailwind theme from a brand hex, building a light/dark palette, picking accessible UI colors, or when the user mentions color palette, design tokens, theme colors, brand color, OKLCH, or WCAG color contrast.

wilbert-md-phd Bundle

制作、返修或审阅医学插画、科普漫画与涉及医学结构的科研示意图、机制图与图形摘要，兼顾视觉叙事、真实参考、可编辑排字及出版交付。也支持本 Skill 的更新检查、安装更新与回退。普通非医学插画不触发。

karthick1827 Bundle

Inspects Figma designs, extracts structured visual/interaction specifications, and outputs implementation-ready Markdown files for BMAD UX Agents.

khan Bundle

Implements user interfaces using the Wonder Blocks (WB) design system — Khan Academy's React component library. Use this skill whenever the user asks you to build, modify, or review UI components in a project that uses Wonder Blocks, even when similar usage patterns already exist in the codebase; mentions any WB package (e.g. wonder-blocks-button, wonder-blocks-modal, wonder-blocks-tokens); wants to use or map WB tokens for colors/spacing/typography (including translating Figma designs to WB components and tokens); or asks how to do something "the Wonder Blocks way". If the user is building any kind of form, layout, modal, button, dropdown, or typography treatment in a WB-enabled codebase, this skill applies — even if they don't explicitly say "Wonder Blocks". Do NOT trigger for debugging TypeScript errors, writing tests, setting up Storybook stories, or fixing CI/lint issues in WB packages.

nexu-io Bundle

One-click contribution flow for Open Design (nexu-io/open-design) — even for non-coders. Pick one of four cards (ship a Skill or Design System you made with OD; translate docs; fix a typo / write a blog; report a bug), the agent validates and opens a PR (or issue) for you. Trigger words contribute to open design, ship my OD skill, ship my OD design system, translate OD docs, report an OD bug, od-contribute.

qwwiwi Bundle

Use when asked to generate an image, picture, photo, cover, banner art or illustration (сгенерируй картинку, фоточку, обложку, изображение) using the Codex/ChatGPT subscription — no OPENAI_API_KEY, no per-image billing; supports up to 5 reference images (по референсу, в стиле картинки). Also use when tempted to answer that image generation is impossible without an API key, that Codex is text-only, or that references don't work over the subscription.

tanishqkancharla Bundle

Conventions and design constraints for consuming the Maui design system. Use when building UI with Maui tokens, components, patterns, or purse-styles. Prefer this skill and its references for composition knowledge.

moonlin1213 Bundle

Generate Muted Zine Poster v0.1 poetic paper-poster prompts and the matching generated image. Use when the user gives a theme, sentence, object, mood, article idea, photo, or content brief and wants a quiet Japanese/Korean zine-like editorial poster with large negative space, aged paper texture, experimental typography, and a restrained muted palette without high-chroma color blocks. This is the low-saturation sibling of gc-minimal-zine-poster-v0-1.

castor6 Bundle

Use this skill when the user asks to build, create, design, develop, or improve ANY frontend interface, web page, UI component, or visual element. This includes: - Building landing pages, websites, web apps, dashboards, portfolios, or any web interface - Creating UI components (buttons, forms, cards, navbars, modals, etc.) - Designing pages with React, Vue, Next.js, Svelte, or any frontend framework - Adding styling or improving visual design of existing components - Implementing specific design aesthetics (modern, dark, minimalist, brutalist, etc.) - User mentions "frontend", "UI", "UX", "design", "interface", "web design", or "styling" - User asks for "beautiful", "modern", "professional", "clean", or any aesthetic adjective - User requests help with CSS, Tailwind, styled-components, or any styling approach This skill automatically retrieves the appropriate design system prompt (Neo-brutalism, Modern Dark, Bauhaus, Cyberpunk, Material, etc.) to help create visually distinctive, production-grade frontend cod

fivetaku Bundle

Extracts a deterministic design system from any URL by fetching real CSS, parsing custom properties, and generating a 19-section design.md plus an interactive HTML report. v0.2 writes frontmatter schema_version 3.1 with medium detection (web / slide / design-system / card-news / motion / print). Pairs with insane-apply and insane-build via the §18 DON'T hex-grep contract. Korean triggers: "디자인 분석해줘", "이 사이트 디자인 시스템 뽑아줘", "CSS 뜯어봐", "design.md 만들어줘", "레퍼런스 리포트 만들어줘", "사이트 분석", "디자인 토큰 추출". English triggers: "analyze design", "extract design tokens", "rip the design system", "what CSS does this site use".

ricocc Bundle

UI/UX design optimization toolkit with 20 built-in themes and custom theme generation. Applies design systems with color, typography, spacing optimization for any tech stack. Use when user says "rico optimize", "rico 优化设计", "rico use style", "rico 用风格", "rico theme","rico 应用主题", "rico 生成主题", "rico design".

usetrmnl Bundle

Use when working on anything TRMNL — building plugins, writing or editing markup, designing layouts using the TRMNL CSS framework, calling the TRMNL MCP server (mcp__trmnl__*), or any task that mentions "trmnl", "e-ink display", "trmnl.com", "TRMNL plugin", "Liquid markup", "image-dither", "title_bar", or screen sizes 800x480 / 800x240 / 400x480 / 400x240. References embed the production prompts TRMNL's external MCP server ships — agent rules, the full design system template guide, and the framework v3 supplement.

zhayujie Bundle

Generate or edit images from text prompts. Use when the user asks to create, draw, design, or edit an image, illustration, photo, icon, poster, or any visual content.

aliyun Bundle

Troubleshoot and repair Alibaba Cloud ECS Windows instances from inside the GuestOS or remotely via Cloud Assistant. Use whenever the user reports any Windows symptom or asks for a health check on an ECS Windows instance, even vague ones like "check this machine": boot failures (BSOD, black screen, boot loop, stuck at logo), crashes and hangs, RDP/VNC login failures, network problems (internet access, ping, DNS, DHCP, firewall, SMB), a port unreachable from outside while the service is running (8080, 3389), inbound firewall port blocking, disk and storage, Windows activation, Windows Update, time synchronization, user accounts and permissions, BitLocker, drivers, application crashes, certificates and TLS, scheduled tasks, slow performance, configuration not taking effect, Cloud Assistant and management channel issues. Supports online diagnosis (running system) and offline diagnosis (faulty system disk mounted as a data disk) via a direct in-GuestOS channel or remote aliyun ecs run-command.

asmyshlyaev177 Bundle

Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.

fayazara Bundle

Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, box shadows.

yangyue1974 Bundle

Braun-era Dieter Rams visual design system for web/app UI. Produces interfaces that look and behave like Braun products (1955–1995) — warm-neutral chassis surfaces, a single functional accent color, all-lowercase labels, strict functional grouping, one global corner radius, matte flat surfaces. Use this skill whenever the user asks for Rams style, Braun style, "less but better", functionalist / Ulm-school design, German industrial minimalism, or wants a calm instrument-like interface — even if they only say "make it feel like a Braun product" or "拉姆斯风格". Applies to landing pages, dashboards, apps, and components generated in HTML/React.

yaniv-golan Bundle

Help developers use @chenglou/pretext, a small TypeScript text measurement library that computes exact text metrics without DOM reflows. Use when users mention pretext, @chenglou/pretext, @chenglou/pretext/rich-inline, measuring text height without triggering DOM reflow, measuring text height or line count in JS, auto-fitting font size to a container, flowing text around obstacles or images, laying out text per-line with variable widths, computing the natural/widest line width of a paragraph, rich inline runs with chips or mentions, layoutNextLine, or layoutNextLineRange. Covers API usage, integration patterns, and gotchas (lineHeight must be CSS pixels, font loading timing, system-ui caveats, ESM-only packaging). Do NOT use for CSS-only text layout questions, generic typography advice, or unrelated "shrink-to-fit" CSS questions.

aradotso Skill

Stream live Figma document data to AI tools via MCP server, bypassing API rate limits for free users

avroracl Bundle

Convert a supplied raster reference into a faithful, standalone HTML/CSS illustration using offline color segmentation, contour tracing and local gradients. Use when the user asks for pure CSS art, image-to-HTML illustration, or high-fidelity reference recreation that forbids img, SVG, Canvas, JavaScript, base64 and external assets. Requires a local reference image and permission to run offline Python authoring tools. Do not use for website screenshot implementation, semantic hand-authored CSS characters, vector editing, or bitmap image generation.

boriwatopal Bundle

Build kinetic-typography / logo / brand promo motion graphics as code with Remotion (React) and ship an MP4. Covers analysing a reference clip and the brand SVG logo, build a scene-per-beat project with reusable animation helpers, verify by contact sheet, output 9:16 and 16:9, tweak in Remotion Studio. Use this whenever the user wants a "motion", "motion graphics", "animated logo", "logo reveal", "kinetic text", "promo clip", "intro/outro", "Reels/TikTok/YouTube video" made from a brand, a website, an SVG, or "like this video" — including Thai asks such as "ทำ motion", "ทำโมชั่นโลโก้", "ทำคลิปโปรโมท", "อนิเมทโลโก้", "ทำวิดีโอแบบนี้" — and whenever Remotion code needs writing or fixing. Trigger even if they never say Remotion; if they hand over an .svg logo and a sample .mp4 and say "make one like this", this is the skill. (For a 6-scene product-demo built from a website's screenshots, product-demo-video is the narrower fit; for captioning talking-head clips use hyperframes-captioned-video.)

cripacx Skill

Generate images and video from text prompts via the mediagen CLI, across Gemini, OpenAI and Kie AI. Use when asked to create, generate, render, or edit an image or a video — a logo, an illustration, a mockup, a photo, a banner, a clip — or to mark existing media as AI-generated. Also covers choosing a provider or model for a generation task.

elaraby0 Bundle

Write, rewrite, edit, review, or teach clear and natural scientific and scholarly prose, including statistical interpretation, without changing evidence or inventing facts. Use this skill whenever a user works on a manuscript, abstract, title, introduction, methods, results, discussion, literature review, grant, protocol, thesis, academic assignment, poster, figure legend, research correspondence, scientific presentation, data-analysis narrative, statistical claim, clinical or biomedical research text, or public-facing science communication, even when the user does not explicitly ask to “humanize” the writing. Also use it for academic work in adjacent disciplines when evidence, argument, and scholarly structure matter. When revising paragraphs pasted directly into chat, return tracked changes followed by a clean version. Do not use it for ordinary non-academic prose; use the general Humanizer skill instead.

vm0-ai Bundle

Editorial magazine op-ed cover illustration — flat-vector + paper-grain scene with elongated ink-line characters, a muted retro palette, and a serif headline overlay block in the lower-right corner. Trigger when the user says /op-ed-cover, asks for an "editorial magazine illustration", an "op-ed cover", a "magazine essay illustration", or a scene with a headline overlay in this style.

asavvin-pixel Bundle

Removes signs of AI generation from English text and prevents them from appearing in new writing. Works on three levels: typography and mechanics, vocabulary and rhetoric, structure and epistemics. Use whenever the user asks to "humanize", "unslop", "de-AI", "make this sound human", "remove the AI style", "make it not sound generated". Also apply from the first draft when writing ANY English text for people: posts, articles, emails, reports, docs, landing pages, product copy. Do not wait to be asked. If the text is in English and a person will read it, this skill applies.

boachir123-bot Bundle

AndroidAPS Book Illustration Director

chainepic Skill

AI-powered editorial post cover generator with Google E-E-A-T optimization, dynamic font-fitting typography, automated HD image retrieval, and native multilingual (zh/en/ru/ja) rendering.

daronthedragon Bundle

Generate and decode real ASCII, braille, ANSI, and 3D text art with the ditherlab CLI/MCP — from images, from geometry you describe (scene DSL), from 3D scenes and extruded text, with auto-tuned settings — apply and teach named themes, and draw by hand only with measured technique and exemplars. Use whenever the user asks for ASCII art, text art, a banner or logo for a CLI/README/MOTD, braille art, ANSI color art, dithering, a pixel/retro look, a spinning/3D terminal piece, converting an image, video, or webcam to text, an animated text GIF, identifying or decoding pasted art, or "make it look like <style>" — even if they only say "draw X in the terminal" or "make it look retro". Also use for flowcharts, sequence diagrams, state machines, timelines, mindmaps, and architecture diagrams in text (Mermaid in, box drawing out), bar/column/ spark charts from data, box-drawing tables, directory/outline trees, boxed notes, FIGlet banners, and for checking or repairing any hand-drawn text art (`ditherlab lint`). Stays

myswallow Bundle

ALWAYS invoke for any request touching Mockplus or 摹客 design sources. This is the ONLY skill for fetching Mockplus page data (structure, 标注, 字号, 颜色, 尺寸, layout, 切图/icon export) and feeding it into UI/code work. Trigger immediately, without asking, on ANY of these signals: - The string "Mockplus" or "摹客" appears anywhere in the user's message - Any URL containing `mockplus.cn`, `app.mockplus.cn`, or `idoc` (full or partial, e.g. `app.mockplus.cn/app/.../develop/design/...`) - A Mockplus link plus phrases like 看看 / 按这个做 / 还原 / 复刻 / 转成 Vue / 转成 React / 转成 Flutter / 转成小程序 / 对比 / 取源数据 / 拿标注 / 切图 / icon The link or keyword ALONE is enough — never wait for the user to say "use the skill" or "use a tool". Pairing with a frontend framework (Vue/React/Flutter/小程序/Tailwind) makes it MORE relevant, not less. Skip ONLY for: Figma URLs, isolated PNG/PDF/screenshot files with no Mockplus link, local .sketch parsing, building a Mockplus-clone product, or Mockplus desktop-app UI bugs.

onemoh Bundle

把任意主题做成「讲解/科普视频」并渲染成 MP4：调研→审查→解说词→字幕→edge-tts 配音→并行构建 HTML 场景→确定性逐帧渲染→成片后出双方案封面。**画面语言内置 23 个模板风格 / 8 个类别**（大胆信号卡、奢华极简、NYT 数据图表、瑞士网格、故障艺术、胶片漏光、流体 Hero、Logo 收尾、东方柔和有机、VFX 文字光标…共 23 种风格，含每种的画布/配色/字体/时间轴规范，见 references/style-catalog.md），流程规范与音画同步体系承自 anything2explainer（词边界字幕、两级时钟、语速标定、多 agent 分工与 QC 判据），渲染层为自研 seek 式渲染器。**封面双方案**：抖音主封面 1920×1080 + 兼容 3:4 的 1440×1080（独立重排，防主页栅格切字）。独立可移植：GSAP 内置、playwright-core 随包、ffmpeg 走 imageio-ffmpeg 回退、浏览器自动探测 Chrome/Edge；**不依赖 html-video / anything2explainer 任何代码或目录**。触发场景：要做科普/讲解/教学/知识/产品类视频、"讲一下 X 做成视频"、要用 html-video 那种模板化画面但更稳的音画同步、要挑某种视觉风格（极简/数据/赛博/电影感/品牌）出片、要出抖音封面/竖版封面、anything2explainer 换 HTML 渲染、或提到 html-explainer / HTML 讲解视频 / explainer video / MG 视频。

pymodel Bundle

Keep interface work anchored to the product it belongs to instead of a generic template. Sets a short design contract, builds from the components and tokens already in the codebase, covers the states a surface can actually reach, and closes by looking at the rendered result. Use when building, reworking, or assessing a web or native interface. Trigger with "niblet", "niblet skill", "niblet designer ui", or "niblet review". Skip backend, CLI, data, and infrastructure work, prose-only tasks, and questions the product's own design system already settles.

songzhi-lab Bundle

中文字体选配与排版决策专家。为中文为主的设计场景（小红书卡片、产品册/宣传物料、 网页/UI、图书内页排版、海报标题）选择可免费商用的中文字体并给出中英混排方案。 内置授权安全分级（开源 OFL 铁稳 / 厂商免费商用 / 慎用），场景×气质选字矩阵， 中文排版规则（字号阶梯、行距、标点、避头尾）。当用户要求"选字体/字体搭配/字体推荐/ 中文排版/小红书字体/产品册字体/网页字体/标题字体"，或任何中文视觉设计任务涉及字体 决策时触发。Triggers on: 中文字体, 中文字体推荐, 字体选择, 字体搭配, 字体配对, 字体筛选, 字体审美, 免费商用字体, 可商用字体, 开源字体, 思源黑体, 思源宋体, 霞鹜文楷, 得意黑, 中文排版, 中英混排, 小红书字体, 海报字体, 标题字体, Chinese font, Chinese typography, CJK fonts, Chinese font pairing, Chinese font selection, free commercial Chinese fonts, 中文商用字体, font pairing Chinese, typeface selection Chinese, Source Han Sans, LXGW WenKai。

kemiljk Skill

Use this skill whenever building interfaces that should feel physically responsive, alive, and polished. Trigger for spring animations, gesture-driven UI, interruptible animations, physics-based motion, drag interactions, momentum scrolling, layout animations, shared element transitions, spatial UI, micro-interactions, haptic feel, or any request to make an interface feel alive, snappy, smooth, natural, polished, or less static. Also trigger when building interactive components (drawers, sheets, carousels, modals, accordions, reorderable lists) without specified animation, or any interactive prototype, component library, or design system.

kemiljk Bundle

Modern CSS and HTML standards reference. Use this skill whenever writing CSS or HTML in any context — components, pages, layouts, animations, forms, dialogs, colours, typography, selectors, or responsive design. Trigger on any frontend code generation, code review, or refactoring that involves CSS or HTML. Also trigger when the user asks about browser support, modern alternatives to old CSS hacks, or how to replace JavaScript with native CSS/HTML. This skill ensures output uses the latest standards supported by WebKit (Safari) and Chrome/Edge (Blink), avoiding outdated patterns.