Design & Media

vaisala-xweather Bundle

This skill should be used when working with the Xweather MapsGL SDK for Apple platforms (the MapsGL iOS/iPadOS/macCatalyst/visionOS SDK) — installing it via Swift Package Manager, CocoaPods, Carthage or xcframeworks, creating a MapboxMapController or MapLibreMapController, and adding, removing, styling, animating or inspecting MapsGL weather layers in Swift. Use it whenever a task mentions MapsGL on iOS or Apple platforms, mapsgl-apple-sdk, MapsGLMaps, MapsGLMapbox, MapsGLMapLibre, XweatherAccount, WeatherService.LayerCode, addWeatherLayer in Swift, or a native weather map in SwiftUI or UIKit. Also use it for questions about MapsGL session usage or cost in an Apple app — sessions, the 5-minute clock intervals, the access multiplier, and which view and app lifecycle events should attach and detach weather layers. Also covers Xweather's attribution requirement — the 'Powered by Vaisala Xweather' credit and logo rules that apply wherever Xweather data or imagery is displayed.

lucasaero-pr Skill

Acts as a Senior Frontend and UX Design Specialist (10+ years). Delivers Next.js 14+ (App Router, Server Components), React 18+, TypeScript, Tailwind/Shadcn, design systems, WCAG 2.2, Core Web Vitals. Use when the user asks for frontend design, React/Next.js implementation, dashboards, UX flows, Figma-to-code, accessibility, performance (LCP, CLS), or integration with NestJS/tRPC/React Query.

bigpengsays Bundle

Build a reusable personal IP character and create consistent mini pen-doodle visuals, including article illustrations and information-rich 3:4 article infographics with an automatically selected page count. Use when the user asks to establish a mascot, make a turnaround sheet, illustrate a long article, create cute knowledge cards or infographics, visualize timelines, processes, comparisons, or data, or keep one IP character consistent across multiple images. Require Codex with GPT Image 2 for direct generation; otherwise hand off a complete prompt package and the official GPT Image 2 API links.

profpowell Skill

CSS typography patterns for readable, beautiful text. Covers type scale, hierarchy, rhythm, font pairing, text-wrap, hanging punctuation, and OpenType features.

dohyeon-kr Skill

Use when designing or reviewing typography for a UI whose primary running text is Korean (or any CJK script). Decides font-family / size / line-height / letter-spacing / word-break with Korean-specific defaults rather than copy-pasting from English design articles (Stripe/Linear/Smashing/Refactoring UI — all Latin-first). Triggers when picking a font stack, setting type scale tokens, when a user says "글자가 작아 보여" / "행간이 답답해" / "끝 정렬이 어색해", or when Korean copy renders inside a system originally designed for English.

dohyeon-kr Skill

Use whenever a code change can ripple into the rendered UI of pages you are not currently editing — design token edits, theme/palette/typography changes, shared CSS module edits, common component refactors, breakpoint additions, third-party UI lib upgrades, font/asset CDN bumps. Runs in two phases — (1) **before** the change, capture baseline screenshots of every plausibly-affected screen; (2) **after** the change, re-capture the same screens and diff. If diffs exceed threshold, walks a 4-step recovery (locate → hypothesize → bisect → route to the responsible skill). Distinct from `visual-design-audit` (which judges absolute quality) and `visual-reference-compare` (which compares against an external reference) — this skill compares "after" against "before by the same author." Triggers when a change can affect multiple screens and on user prompts like "다른 페이지에 영향 없는지 확인해 / 회귀 잡아줘".

getabyssale Skill

Import a design into Abyssale from a JSON payload (e.g. exported from Figma, hand-built, or round-tripped from an existing Abyssale design), including uploading local image assets. Use when the user wants to create an Abyssale template/design programmatically instead of building it by hand in the editor, or asks to "import a design into Abyssale", "turn this JSON/Figma export into an Abyssale template", or "recreate this design in Abyssale".

getabyssale Skill

Recreate a Figma design (Design file or FigJam board) as a native, multi-layer, fully-editable Abyssale design via the abyssale_preprod MCP. Use whenever the user gives a Figma URL and wants it rebuilt in Abyssale (import_design_from_json), not just referenced.

prangishviliabe Bundle

Create, implement, or critique refined, human-quality digital product design while preventing generic AI-looking output. Use for websites, landing pages, SaaS products, dashboards, mobile apps, UI components, design systems, wireframes, Figma work, frontend styling, visual direction, brand-led interfaces, and image or illustration direction where hierarchy, brand specificity, restraint, accessibility, responsive behavior, and implementation realism matter. Trigger on requests to design, redesign, polish, modernize, beautify, review, or implement an interface, especially when the result risks template-like SaaS layouts, decorative excess, fake-premium styling, stock-feeling imagery, or generic generated visuals.

etolucy Bundle

Design original, scalable logos and production-ready asset sets for a specific usage context. Use when Codex needs to create or refine a logo, symbol, wordmark, app icon, repository identity, CLI mark, website brand, social preview, or Codex skill/plugin icon; adapt concepts, formats, dimensions, variants, and delivery checks to the target platform instead of producing a context-free image.

angzeli Bundle

Apply Angze's evidence-backed personal web design system. Use when creating, modifying, reviewing, or refactoring HTML/CSS websites for Angze, including research sites, technical documentation, portfolios, personal writing archives, responsive layouts, and Day/Night theme support, or when a request mentions angze-web-style or matching Angze's existing websites.

chouswei Skill

Use when strengthening comic or illustration construction -- storytelling focal point, forms before detail, multi-angle character consistency, clean ink over underdrawing, hair in stages; pairs with the other observational skills.

lovstudio Bundle

从文章命题生成无文字艺术底图，并用官方 Logo 确定性合成 2.35:1 公众号分享封面与独立的 4:3 横向正文首图。Use when the user asks for“双尺寸封面”“cover package”或“wide cover and 4:3 body hero”。

space-software-ltda Bundle

QA de front-end Space: wizard de escopo, validação no browser (visual, console, network), comparação feito × mock/task, Design System em docs/design-system.md (ler inteiro; mapa em docs/README.md), anti-padrões júnior/IA, contrato REST e relatório incremental em .task/REPORT.md. Use com /qa-space, "validar front", "QA", "revisar implementação" ou quando o PO pedir inspeção antes de gerar task de correção.

yuming-captain518 Bundle

Use when the user asks to identify, analyze, generate, recreate, or make prompts for retro newspaper, risograph, editorial halftone, vintage magazine, letterpress, philosophical quote poster, Chinese quote card, brand knowledge card, or premium lifestyle poster visuals; especially tea, cigar, wine, collecting, long-termism, preservation, seasonal, or brand-culture content.

yuming-captain518 Bundle

基于参考海报与产品名称或白底图，检索项目资料并锁定产品事实、结构和文案，输出两套可直接复制给图像模型的精简十字段中文提示词，再生成可对比的产品海报与视觉结论。用于“参考这张海报做产品海报”“生成 9:16 产品海报”“拆解海报提示词”“做参考色彩版和产品适配版”“生成双方案海报”等任务。

jiahuiqu17 Bundle

Art-direct and generate one high-craft minimal-zine bitmap from a landscape, portrait, person, object, product, food, plant, building, interior, photograph, mood, sentence, or article concept. Use when the user wants a standalone poetic poster, editorial cover, visual concept, aesthetic photo upgrade, photo-to-zine restyle, or a subject-aware minimal-zine image without the overhead of a social carousel. Chooses adaptive composition and a physically coherent print process, preserves subject identity, saves the final prompt, invokes the runtime-native image generator, and audits the raster result.

laramarcodes Bundle

Build native Apple iOS & iPadOS apps (iPhone / iPad) in Swift with SwiftUI, SwiftData, and the iOS 26 stack. Use when creating, scaffolding, designing, debugging, or extending an iPhone or iPad app. Covers SwiftUI views and navigation, the Liquid Glass design system, @Observable state, SwiftData/CloudKit persistence, Convex + Clerk cloud backends (accounts, shared data), Swift 6 concurrency & networking, iPad windowing/multitasking, widgets, App Intents, Live Activities, on-device Apple Intelligence (Foundation Models), StoreKit 2 in-app purchases, system frameworks (MapKit, HealthKit, Swift Charts, PhotosUI…), accessibility, Swift Testing, performance, Xcode project setup, simulators, privacy manifests, and App Store submission. Not for visionOS / Apple Vision Pro, React / Capacitor / Flutter / web apps wrapped for iPad, Unity/Unreal games, or legacy UIKit/Storyboard maintenance (use a dedicated skill for those if you have one).

metapages Skill

How this repo's visual style (the editor AND the docs) is derived from framejs.app's design system, and the exact steps to re-merge it when framejs.app changes. Load whenever restyling the editor or docs, updating palette/fonts/tokens, syncing the "Offprint" look from the framejs-nhost sibling repo, or editing editor/src/styles/blueprint.css, theme.ts, or docs/.vitepress/theme/blueprint.css.

nolly-studio Bundle

Create or update a repo's DESIGN.md — a living design-language contract for AI agents and humans — plus a portable frontend-design skill. Classifies the repo first (document an existing design language, merge with existing design docs, or propose a new direction with user approval) so it never overwrites a project's current design. Use when setting up design docs for a frontend project. Triggers on "add a DESIGN.md", "document our design language", "set up design docs", "create a design system doc", "bootstrap design".

nahisaho Bundle

Copilot agent that assists with user interface and experience design, wireframes, prototypes, design systems, and usability testing Trigger terms: UI design, UX design, wireframe, mockup, prototype, user interface, user experience, design system, component library, accessibility, responsive design Use when: User requests involve ui ux designer tasks.

amitsharma1994 Bundle

System design helper for architecting scalable, reliable backend systems. Use when asked to: gather requirements, design an architecture, choose a database, plan for scaling, model events with Kafka, cache with Redis, design an API, deploy on AWS, orchestrate with Kubernetes, or reason about trade-offs. Triggers: "system design", "architecture", "scalability", "scale", "database design", "schema", "Kafka", "event streaming", "Redis", "caching", "API design", "REST", "gRPC", "AWS", "Kubernetes", "k8s", "high availability", "load balancing", "trade-offs", "HLD", "high level design", "design a system like".

aojili Bundle

Create fast, desktop-first, Apple-style HTML visual explainers from user-provided concepts, formulas, documents, or software repositories. Use when the user wants a polished standalone HTML explanation, interactive teaching page, architecture walkthrough, codebase map, process or data-flow visualization, or explicitly invokes apple-html-explainer. Default to one self-contained index.html, strong Apple-inspired typography and composition, focused diagrams, restrained interaction, and one quick desktop browser check. Do not default to mobile verification, full web-app states, multi-agent work, broad research, or gesture-physics engineering.

mrwogu Skill

UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 stacks.

igniteui Bundle

Generates and customizes Ignite UI for Angular themes including color palettes, typography, elevations, and component-level styles using the Sass theming system and the igniteui-theming MCP server. Use when users ask to theme, restyle, or style Ignite UI components, change colors or the color palette, switch between light and dark themes, create or apply a global theme, customize typography or elevation shadows, adjust spacing, sizing, or roundness, or configure per-component design tokens. Do NOT use for component behavior, APIs, or data binding — use igniteui-angular-components or igniteui-angular-grids instead.

unreadlogs Skill

Use this skill when designing or redesigning a website, web app, or any interface and you want the result to feel intentional and distinctive rather than generic. Covers art direction, typography, color systems, layout, motion, and the craft of interface copy. Load this when a user asks to build a new page, style an existing one, or make something look better.

wpgaurav Bundle

Convert Figma designs to GenerateBlocks V2 format for WordPress

memi-design Skill

Use when a Hermes session involves UI design, interface craft, Figma, design systems, shadcn/ui, Tailwind, Atomic Design, research synthesis, component specs, design audits, or code generation from design evidence.

memi-design Skill

Use when a Hermes session involves UI design, interface craft, Figma, design systems, shadcn/ui, Tailwind, Atomic Design, research synthesis, component specs, design audits, or code generation from design evidence.

railly Skill

Agent-native design system infrastructure. Browse, install, and preview design systems from tinte.dev. Use when user asks about themes, design systems, presets, color palettes, or says "tinte". Works with shadcn/cli v4 presets and registries.

alvarsp Bundle

Guides product designers from vague input to a structured Jira Epic with linked Story tickets in SpecX Design (OD), auto-assigned to the current user with Team inferred from their Jira history. Always asks clarifying questions via AskQuestion (one at a time, selectable options) before drafting tickets. Use when designers want to create, draft, or file design work — exploration, UI design, research, handoff, design system, or design epics/stories in Jira.

dxos Skill

Use when building or styling plugin UI with Composer's design system — the `@dxos/react-ui*` packages. Covers theme tokens, primitives (Panel/Card/List/Input/Button/Icon), the standard container layout (Panel + ScrollArea), lists/pickers/stacks, schema-driven forms, toolbar/menu wiring, reactivity (useObject), attention/density, translations, and storybook setup. The UI adjunct to the composer-plugins skill; consult it whenever you write a container/component, reach for a Tailwind color class, build a toolbar, render a form or list, or add a story.

eva813 Bundle

AI PM 逆向工程規格產生器。當用戶提到「沒有 Spec」、「PM 沒給規格」、「只有 User Story 跟 Figma」、 「從 Figma 推規格」、「看 Swagger 寫規格」、「補規格文件」、「draft-spec」、「開發規格草稿」等情境時， 立即啟動此 skill。根據 Figma 畫面結構 + OpenAPI/Swagger schema，逆向推導並產生可交付工程師審閱的 `draft-spec.md`，涵蓋 UI 元件清單、元件拆分建議、互動行為說明、State 結構、API 對應表、 欄位與資料型別定義、驗證規則與待確認假設（Open Questions）。 凡是「無 Spec 開發」、「前端規格不完整」、「需要對齊 API 與畫面」的任務，都應使用此 skill。

eva813 Bundle

Vue 3 + SCSS 切版技能（切版 Agent）。當使用者提供 Figma 連結或設計稿 spec，需要產出 Vue 3 純展示元件（Dumb Components）時使用。觸發情境包含：「幫我切版」、「根據 Figma 產出元件」、「根據 spec 建立 UI」、「幫我建 Vue 元件」、「切這個畫面」、有提到 Figma URL 或 Node ID 加上 Vue/元件/切版等字詞。僅產出 props/emits 介面的純 UI 結構，不含 API 呼叫或業務邏輯。

mongodb-industry-solutions Bundle

Produce React artifacts and web UIs that match MongoDB's LeafyGreen design system — the official component library used across Atlas, Charts, Compass, and all MongoDB products. Use this skill whenever the user asks for MongoDB-branded UI, LeafyGreen-styled components, Atlas-style interfaces, or any frontend that should look like an official MongoDB product. Also trigger when the user mentions 'leafygreen', 'lg-', '@leafygreen-ui', 'mongodb UI', 'Atlas style', 'mongodb design system', or asks to build internal tools, dashboards, or demos that should match MongoDB's visual identity. This skill provides the complete design token set and component patterns so Claude can faithfully reproduce LeafyGreen components using Tailwind + CSS custom properties in artifact environments where npm packages are unavailable. Works standalone or as a design-system layer for the Imprint skill.

frappe Skill

General UI/UX judgment for layout, polish, visual hierarchy, spacing, typography, color, and accessibility. Use when no product-specific or Frappe-specific design system skill applies.