{"data":[{"id":"owl-listener/designer-skills/critique-typography","slug":"critique-typography","name":"critique-typography","description":"Critique a rendered screen's typography — scale usage, readability, consistency, and token compliance. Use when reviewing type on a screen. For defining the scale itself, use `typography-scale` (ui-design).","category":"design","categories":["design"],"functionalCategories":["design"],"technologies":[],"applications":[],"short_description":"Review screen typography for readability, scale usage, consistency, and token compliance.","type":"community","source":"owl-listener/designer-skills","installs":1532,"sourceType":"github","installUrl":"https://github.com/owl-listener/designer-skills","url":"https://skilly.sh/owl-listener/designer-skills/critique-typography"},{"id":"owl-listener/designer-skills/typography-scale","slug":"typography-scale","name":"typography-scale","description":"Create a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For line length only use `readable-measure`; for judging type on an existing screen use `critique-typography` (visual-critique).","category":"design","categories":["design"],"functionalCategories":["design"],"technologies":[],"applications":[],"short_description":"Create modular typography scales with coordinated sizes, weights, and line heights.","type":"community","source":"owl-listener/designer-skills","installs":2121,"sourceType":"github","installUrl":"https://github.com/owl-listener/designer-skills","url":"https://skilly.sh/owl-listener/designer-skills/typography-scale"},{"id":"wondelai/skills/web-typography","slug":"web-typography","name":"web-typography","description":"Select, pair, and implement typefaces for web projects. Use when the user mentions \"font pairing\", \"which typeface\", \"line height\", \"responsive typography\", \"web font loading\", \"type hierarchy\", \"variable fonts\", \"FOUT/FOIT\", \"typographic scale\", or \"the text is hard to read\". Also trigger when choosing between system fonts and web fonts, optimizing font-loading performance, or designing readable long-form content. Covers readability evaluation, CSS implementation, and performance optimization. For overall UI design systems, see refactoring-ui. For dramatic typographic experiences, see top-design.","category":"design","categories":["design","frontend","css"],"functionalCategories":["design","frontend"],"technologies":["css"],"applications":[],"short_description":"Select and implement readable web typography, including font pairing, responsive scales, and font loading.","type":"community","source":"wondelai/skills","installs":7995,"sourceType":"github","installUrl":"https://github.com/wondelai/skills","url":"https://skilly.sh/wondelai/skills/web-typography"},{"id":"jakubkrehel/skills/better-typography","slug":"better-typography","name":"better-typography","description":"Sets and reviews how text renders in your product, from the type scale and spacing to font features, wrapping, truncation and punctuation.","category":"design","categories":["design"],"functionalCategories":["design"],"technologies":[],"applications":[],"short_description":"Sets and reviews how text renders in your product, from the type scale and spacing to font features, wrapping, truncation and punctuation.","type":"community","source":"jakubkrehel/skills","installs":22799,"sourceType":"github","installUrl":"https://github.com/jakubkrehel/skills","url":"https://skilly.sh/jakubkrehel/skills/better-typography"},{"id":"modelscope.cn/frontend-design","slug":"frontend-design","name":"frontend-design","description":"Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.","category":"design","categories":["design","frontend"],"functionalCategories":["design","frontend"],"technologies":[],"applications":[],"short_description":"Guides distinctive UI visual design through intentional aesthetic direction, typography, and styling choices.","type":"community","source":"modelscope.cn","installs":1926,"sourceType":"well-known","installUrl":"https://modelscope.cn/","url":"https://skilly.sh/modelscope.cn/frontend-design","securityAudit":{"status":"partial","risk":"none","coverage":"partial","findingsCount":0,"auditedAt":"2026-10-21T05:01:12.748Z","revision":"sha256:f46b32cb11564c2f84db03b218e12b3c776692ce6d6a980312eb34b8b1a2785c","contentHash":"f46b32cb11564c2f84db03b218e12b3c776692ce6d6a980312eb34b8b1a2785c"}},{"id":"smithery.ai/ui-ux-pro-max","slug":"ui-ux-pro-max","name":"ui-ux-pro-max","description":"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.","category":"design","categories":["design","frontend","accessibility"],"functionalCategories":["design","frontend","accessibility"],"technologies":[],"applications":[],"short_description":"Design, build, review, and improve web, mobile, and desktop interfaces with searchable UI/UX reference data.","type":"community","source":"smithery.ai","installs":1319,"sourceType":"well-known","installUrl":"https://smithery.ai/","url":"https://skilly.sh/smithery.ai/ui-ux-pro-max","securityAudit":{"status":"partial","risk":"none","coverage":"partial","findingsCount":0,"auditedAt":"2026-10-26T05:01:41.631Z","revision":"sha256:63af40d5730c677b9082b74ef820f13a49940e154ad4ab21935fe9012e3a738a","contentHash":"63af40d5730c677b9082b74ef820f13a49940e154ad4ab21935fe9012e3a738a"}},{"id":"doany-ai/skills/ai-image-generation","slug":"ai-image-generation","name":"ai-image-generation","description":"Generate and edit images on RunComfy via the `runcomfy` CLI — a smart router across the full image-model catalog: FLUX 2 (Klein 9B/4B, Pro, Dev, Flash, Turbo, Max), Google Nano Banana 2 / Pro, OpenAI GPT Image 2, ByteDance Seedream 5 / 4-5 / 4-0 and Dreamina 4-0, Alibaba Qwen Image and Z-Image Turbo, Wan 2-7. Covers both text-to-image (t2i) and image-to-image / edit (i2i) endpoints — the skill picks the right model for the user's actual intent (typography precision, photoreal portraits, sub-second iteration, multi-reference brand styling, open-weights workflow) and ships each model's documented prompting patterns plus the minimal `runcomfy run` invoke. Triggers on \"generate image\", \"make a picture\", \"text to image\", \"AI image\", \"make an image of …\", \"image to image\", \"i2i\", or any explicit ask to create or restyle an image.","category":"design","categories":["design"],"functionalCategories":["design"],"technologies":[],"applications":[],"short_description":"Generate and edit images using model selection and prompting guidance for RunComfy.","type":"community","source":"doany-ai/skills","installs":12,"sourceType":"github","installUrl":"https://github.com/doany-ai/skills","url":"https://skilly.sh/doany-ai/skills/ai-image-generation"},{"id":"genmedia-labs/skills/ai-image-generation","slug":"ai-image-generation","name":"ai-image-generation","description":"Generate and edit images on RunComfy via the `runcomfy` CLI — a smart router across the full image-model catalog: FLUX 2 (Klein 9B/4B, Pro, Dev, Flash, Turbo, Max), Google Nano Banana 2 / Pro, OpenAI GPT Image 2, ByteDance Seedream 5 / 4-5 / 4-0 and Dreamina 4-0, Alibaba Qwen Image and Z-Image Turbo, Wan 2-7. Covers both text-to-image (t2i) and image-to-image / edit (i2i) endpoints — the skill picks the right model for the user's actual intent (typography precision, photoreal portraits, sub-second iteration, multi-reference brand styling, open-weights workflow) and ships each model's documented prompting patterns plus the minimal `runcomfy run` invoke. Triggers on \"generate image\", \"make a picture\", \"text to image\", \"AI image\", \"make an image of …\", \"image to image\", \"i2i\", or any explicit ask to create or restyle an image.","category":"design","categories":["design"],"functionalCategories":["design"],"technologies":[],"applications":[],"short_description":"Generate and edit images with RunComfy, selecting models to match the visual task.","type":"community","source":"genmedia-labs/skills","installs":619032,"sourceType":"github","installUrl":"https://github.com/genmedia-labs/skills","url":"https://skilly.sh/genmedia-labs/skills/ai-image-generation"},{"id":"prime-skills/runcomfy-agent-skills/ai-image-generation","slug":"ai-image-generation","name":"ai-image-generation","description":"Generate and edit images on RunComfy via the `runcomfy` CLI — a smart router across the full image-model catalog: FLUX 2 (Klein 9B/4B, Pro, Dev, Flash, Turbo, Max), Google Nano Banana 2 / Pro, OpenAI GPT Image 2, ByteDance Seedream 5 / 4-5 / 4-0 and Dreamina 4-0, Alibaba Qwen Image and Z-Image Turbo, Wan 2-7. Covers both text-to-image (t2i) and image-to-image / edit (i2i) endpoints — the skill picks the right model for the user's actual intent (typography precision, photoreal portraits, sub-second iteration, multi-reference brand styling, open-weights workflow) and ships each model's documented prompting patterns plus the minimal `runcomfy run` invoke. Triggers on \"generate image\", \"make a picture\", \"text to image\", \"AI image\", \"make an image of …\", \"image to image\", \"i2i\", or any explicit ask to create or restyle an image.","category":"design","categories":["design"],"functionalCategories":["design"],"technologies":[],"applications":[],"short_description":"Generate and edit images by selecting suitable models from the RunComfy catalog.","type":"community","source":"prime-skills/runcomfy-agent-skills","installs":366742,"sourceType":"github","installUrl":"https://github.com/prime-skills/runcomfy-agent-skills","url":"https://skilly.sh/prime-skills/runcomfy-agent-skills/ai-image-generation"},{"id":"runcomfy-com/skills/ai-image-generation","slug":"ai-image-generation","name":"ai-image-generation","description":"Generate and edit images on RunComfy via the `runcomfy` CLI — a smart router across the full image-model catalog: FLUX 2 (Klein 9B/4B, Pro, Dev, Flash, Turbo, Max), Google Nano Banana 2 / Pro, OpenAI GPT Image 2, ByteDance Seedream 5 / 4-5 / 4-0 and Dreamina 4-0, Alibaba Qwen Image and Z-Image Turbo, Wan 2-7. Covers both text-to-image (t2i) and image-to-image / edit (i2i) endpoints — the skill picks the right model for the user's actual intent (typography precision, photoreal portraits, sub-second iteration, multi-reference brand styling, open-weights workflow) and ships each model's documented prompting patterns plus the minimal `runcomfy run` invoke. Triggers on \"generate image\", \"make a picture\", \"text to image\", \"AI image\", \"make an image of …\", \"image to image\", \"i2i\", or any explicit ask to create or restyle an image.","category":"design","categories":["design"],"functionalCategories":["design"],"technologies":[],"applications":[],"short_description":"Generate and edit images by selecting suitable models from RunComfy's image catalog.","type":"community","source":"runcomfy-com/skills","installs":12,"sourceType":"github","installUrl":"https://github.com/runcomfy-com/skills","url":"https://skilly.sh/runcomfy-com/skills/ai-image-generation"},{"id":"emilkowalski/skills/apple-design","slug":"apple-design","name":"apple-design","description":"Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading), reduced-motion, or the design foundations (feedback, spatial consistency, restraint) behind Apple-style interfaces.","category":"design","categories":["design","frontend"],"functionalCategories":["design","frontend"],"technologies":[],"applications":[],"short_description":"Apply Apple-inspired interface design, physical motion, typography, depth, and gesture interactions to the web.","type":"community","source":"emilkowalski/skills","installs":157033,"sourceType":"github","installUrl":"https://github.com/emilkowalski/skills","url":"https://skilly.sh/emilkowalski/skills/apple-design"},{"id":"appllama/appllama-skills/appllama-app-design-skill","slug":"appllama-app-design-skill","name":"appllama-app-design-skill","description":"Build native-feeling, benchmark-quality mobile app screens (Expo / React Native). Use when designing or implementing any mobile UI — screens, flows, onboarding, paywalls, tab bars, sheets, settings, empty states — or when polishing motion, navigation, typography, dark mode, or perceived performance. Enforces Apple HIG fidelity, semantic colors, native controls, anti-slop discipline, navigation semantics (push vs replace, modal vs sheet vs overlay, the one-way doors where back must not exist), purposeful Reanimated motion, a full-motion simulator-verified iteration loop, and a study-real-apps-first workflow (pairs with the Appllama MCP). Trigger on \"build a screen\", \"make this screen better\", \"design the onboarding\", \"wire up this flow\", \"polish the UI\", \"make it feel native\", or any mobile design/implementation task.","category":"mobile-development","categories":["mobile-development","expo","react-native"],"functionalCategories":["mobile-development"],"technologies":["expo","react-native"],"applications":[],"short_description":"Build and polish native-feeling Expo and React Native screens using real-app research and simulator verification.","type":"community","source":"appllama/appllama-skills","installs":3040,"sourceType":"github","installUrl":"https://github.com/appllama/appllama-skills","url":"https://skilly.sh/appllama/appllama-skills/appllama-app-design-skill"},{"id":"software-mansion/argent/argent-screenshot-diff","slug":"argent-screenshot-diff","name":"argent-screenshot-diff","description":"Compare saved or live app screenshots with the argent screenshot-diff tool. Use when testing visual regressions, before/after UI comparisons, screenshot diff checks, visible layout, spacing, color, typography, clipping, overflow, text rendering, or image/icon rendering changes.","category":"testing","categories":["testing"],"functionalCategories":["testing"],"technologies":[],"applications":[],"short_description":"Compare live or saved app screenshots to detect visual regressions and UI changes.","type":"community","source":"software-mansion/argent","installs":17510,"sourceType":"github","installUrl":"https://github.com/software-mansion/argent","url":"https://skilly.sh/software-mansion/argent/argent-screenshot-diff"},{"id":"bergside/awesome-design-skills/artistic","slug":"artistic","name":"artistic","description":"High-contrast, expressive style with creative typography and bold color choices for visually striking interfaces.","category":"design","categories":["design"],"functionalCategories":["design"],"technologies":[],"applications":[],"short_description":"Create expressive interfaces with high contrast, creative typography, and bold colors.","type":"community","source":"bergside/awesome-design-skills","installs":1314,"sourceType":"github","installUrl":"https://github.com/bergside/awesome-design-skills","url":"https://skilly.sh/bergside/awesome-design-skills/artistic"},{"id":"ibelick/ui-skills/baseline-ui","slug":"baseline-ui","name":"baseline-ui","description":"Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.","category":"frontend","categories":["frontend","design"],"functionalCategories":["frontend","design"],"technologies":[],"applications":[],"short_description":"Polish UI code by fixing spacing, hierarchy, typography, and minor layout problems.","type":"community","source":"ibelick/ui-skills","installs":20631,"sourceType":"github","installUrl":"https://github.com/ibelick/ui-skills","url":"https://skilly.sh/ibelick/ui-skills/baseline-ui"},{"id":"bencium/bencium-marketplace/bencium-controlled-ux-designer","slug":"bencium-controlled-ux-designer","name":"bencium-controlled-ux-designer","description":"Expert UI/UX design guidance for unique, accessible interfaces. Use for visual decisions, colors, typography, layouts. Always ask before making design decisions. Use this skill when the user asks to build web components, pages, or applications.","category":"design","categories":["design","frontend"],"functionalCategories":["design","frontend"],"technologies":[],"applications":[],"short_description":"Guide accessible UI design for web components, pages, and apps, with user approval of visual decisions.","type":"community","source":"bencium/bencium-marketplace","installs":4165,"sourceType":"github","installUrl":"https://github.com/bencium/bencium-marketplace","url":"https://skilly.sh/bencium/bencium-marketplace/bencium-controlled-ux-designer"},{"id":"bencium/bencium-marketplace/bencium-innovative-ux-designer","slug":"bencium-innovative-ux-designer","name":"bencium-innovative-ux-designer","description":"Develop an independent visual language and turn the human-chosen direction into a production-ready graphic, brand, campaign, publication, web, or product system. Use when originality and differentiation matter enough to escape generic AI and Big Tech aesthetics. Guides a minimum-evidence start, ten isolated typography-led HTML design directions made only from type, color, and space, visual-first human judgement, explicit commitment, and concrete Round 2 production. Do not use for routine UI fixes, small components, or applying an existing design system.","category":"design","categories":["design","html"],"functionalCategories":["design"],"technologies":["html"],"applications":[],"short_description":"Develop original visual directions and turn a selected concept into a production-ready brand, graphic, web, or product system.","type":"community","source":"bencium/bencium-marketplace","installs":6380,"sourceType":"github","installUrl":"https://github.com/bencium/bencium-marketplace","url":"https://skilly.sh/bencium/bencium-marketplace/bencium-innovative-ux-designer"},{"id":"jakubkrehel/skills/better-interface","slug":"better-interface","name":"better-interface","description":"Combines all of the `better-*` skills into a single review across accessibility, layout, writing, typography, color and UI polish.","category":"design","categories":["design","accessibility"],"functionalCategories":["design","accessibility"],"technologies":[],"applications":[],"short_description":"Reviews interfaces across accessibility, layout, copy, typography, color, and UI polish.","type":"community","source":"jakubkrehel/skills","installs":19326,"sourceType":"github","installUrl":"https://github.com/jakubkrehel/skills","url":"https://skilly.sh/jakubkrehel/skills/better-interface"},{"id":"bergside/awesome-design-skills/bold","slug":"bold","name":"bold","description":"Strong visual presence with heavyweight typography, high-contrast colors, and commanding layouts.","category":"design","categories":["design"],"functionalCategories":["design"],"technologies":[],"applications":[],"short_description":"Create strong visual layouts with heavyweight typography and high-contrast colors.","type":"community","source":"bergside/awesome-design-skills","installs":1312,"sourceType":"github","installUrl":"https://github.com/bergside/awesome-design-skills","url":"https://skilly.sh/bergside/awesome-design-skills/bold"},{"id":"anthropics/skills/brand-guidelines","slug":"brand-guidelines","name":"brand-guidelines","description":"Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.","category":"design","categories":["design"],"functionalCategories":["design"],"technologies":[],"applications":[],"short_description":"Applies Anthropic brand colors and typography to artifacts that need its visual identity.","type":"official","source":"anthropics/skills","installs":94895,"sourceType":"github","installUrl":"https://github.com/anthropics/skills","url":"https://skilly.sh/anthropics/skills/brand-guidelines"},{"id":"arnabbagxd/brand-building-skills/brand-guidelines","slug":"brand-guidelines","name":"brand-guidelines","description":"Create a comprehensive brand standards document — covering logo usage, color, typography, voice, messaging, and application rules. Use when the user says \"brand guidelines\", \"brand standards\", \"brand book\", \"style guide\", \"brand guide\", \"brand manual\", \"brand rules\", \"brand documentation\", \"brand toolkit\", \"onboarding designers or copywriters\", \"need a document for the team\", \"brand consistency across teams\", or wants to codify all brand decisions into a reusable reference document.","category":"marketing","categories":["marketing","documentation","design"],"functionalCategories":["marketing","documentation","design"],"technologies":[],"applications":[],"short_description":"Create reusable brand standards for visual identity, voice, messaging, and applications.","type":"community","source":"arnabbagxd/brand-building-skills","installs":1270,"sourceType":"github","installUrl":"https://github.com/arnabbagxd/brand-building-skills","url":"https://skilly.sh/arnabbagxd/brand-building-skills/brand-guidelines"},{"id":"composiohq/awesome-claude-skills/brand-guidelines","slug":"brand-guidelines","name":"brand-guidelines","description":"Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.","category":"design","categories":["design"],"functionalCategories":["design"],"technologies":[],"applications":[],"short_description":"Apply Anthropic brand colors, typography, and visual standards to artifacts.","type":"community","source":"composiohq/awesome-claude-skills","installs":3846,"sourceType":"github","installUrl":"https://github.com/composiohq/awesome-claude-skills","url":"https://skilly.sh/composiohq/awesome-claude-skills/brand-guidelines"},{"id":"nexu-io/open-design/brand-guidelines","slug":"brand-guidelines","name":"brand-guidelines","description":"Apply Anthropic's official brand colors and typography to artifacts for consistent visual identity and professional design standards. A reference for shaping your own.","category":"design","categories":["design"],"functionalCategories":["design"],"technologies":[],"applications":[],"short_description":"Apply Anthropic brand colors and typography to visual artifacts.","type":"community","source":"nexu-io/open-design","installs":2697,"sourceType":"github","installUrl":"https://github.com/nexu-io/open-design","url":"https://skilly.sh/nexu-io/open-design/brand-guidelines"},{"id":"arnabbagxd/brand-building-skills/brand-identity","slug":"brand-identity","name":"brand-identity","description":"Create a visual identity brief for a brand — logo direction, color palette, typography, imagery style, and design system foundations. Use when the user says \"visual identity\", \"brand identity\", \"logo brief\", \"logo direction\", \"design brief\", \"brand design\", \"color palette for my brand\", \"typography for my brand\", \"visual language\", \"design system\", \"brand look and feel\", \"what should my brand look like\", or is briefing a designer or design agency. Also use when the user has a brand strategy and wants to translate it into visual design direction.","category":"design","categories":["design"],"functionalCategories":["design"],"technologies":[],"applications":[],"short_description":"Create a visual identity brief covering logos, colors, typography, imagery, and design foundations.","type":"community","source":"arnabbagxd/brand-building-skills","installs":1511,"sourceType":"github","installUrl":"https://github.com/arnabbagxd/brand-building-skills","url":"https://skilly.sh/arnabbagxd/brand-building-skills/brand-identity"},{"id":"wshobson/agents/brand-landingpage","slug":"brand-landingpage","name":"brand-landingpage","description":"Brand-first landing page designer — runs a brand-identity interview (colors, typography, shape language), then generates and iterates on a polished landing page via Stitch with deployment-ready HTML. Use when the user asks to create, design, or build a landing page, homepage, or marketing page and has no established visual direction. Skip when they have a design mockup, need a dashboard or app UI, are working at component level, building a multi-page app, or restyling with known design tokens — use frontend-design instead.","category":"design","categories":["design","frontend","html"],"functionalCategories":["design","frontend"],"technologies":["html"],"applications":[],"short_description":"Develop brand identity and generate polished landing pages through Stitch with deployment-ready HTML.","type":"community","source":"wshobson/agents","installs":38505,"sourceType":"github","installUrl":"https://github.com/wshobson/agents","url":"https://skilly.sh/wshobson/agents/brand-landingpage"},{"id":"leonxlnx/taste-skill/brandkit","slug":"brandkit","name":"brandkit","description":"Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.","category":"design","categories":["design"],"functionalCategories":["design"],"technologies":[],"applications":[],"short_description":"Generate brand guideline boards, logo systems, identity decks, and visual brand presentations.","type":"community","source":"leonxlnx/taste-skill","installs":310535,"sourceType":"github","installUrl":"https://github.com/leonxlnx/taste-skill","url":"https://skilly.sh/leonxlnx/taste-skill/brandkit"},{"id":"nexu-io/open-design/brandkit","slug":"brandkit","name":"brandkit","description":"Premium brand-kit image generation skill for creating high-end brand-guidelines boards, logo systems, identity decks, and visual-world presentations. Trained for minimalist, cinematic, editorial, dark-tech, luxury, cultural, security, gaming, developer-tool, and consumer-app brand systems. Optimized for intentional logo concepting, refined composition, sparse typography, strong symbolic meaning, premium mockups, art-directed imagery, and flexible grid layouts.","category":"design","categories":["design"],"functionalCategories":["design"],"technologies":[],"applications":[],"short_description":"Generate brand guideline boards, logo systems, identity decks, and visual presentations.","type":"community","source":"nexu-io/open-design","installs":1625,"sourceType":"github","installUrl":"https://github.com/nexu-io/open-design","url":"https://skilly.sh/nexu-io/open-design/brandkit"},{"id":"bergside/awesome-design-skills/cafe","slug":"cafe","name":"cafe","description":"Cozy cafe-inspired interface with warm tones, soft typography, and clean layouts for a relaxed browsing experience.","category":"design","categories":["design"],"functionalCategories":["design"],"technologies":[],"applications":[],"short_description":"Create cozy interfaces with warm tones, soft typography, and clean layouts.","type":"community","source":"bergside/awesome-design-skills","installs":1301,"sourceType":"github","installUrl":"https://github.com/bergside/awesome-design-skills","url":"https://skilly.sh/bergside/awesome-design-skills/cafe"},{"id":"mengto/skills/cinematic-scroll-storytelling","slug":"cinematic-scroll-storytelling","name":"cinematic-scroll-storytelling","description":"Create cinematic scroll-driven landing pages with Lenis smooth scrolling, GSAP ScrollTrigger, scroll-linked progression, staggered text reveals, sticky card stacks, parallax backgrounds, scroll-scrubbed transitions, footer reveals, and immersive preloaders. Use when analyzing or building premium editorial scroll experiences, sticky project stacks, kinetic typography, or section-by-section storytelling.","category":"frontend","categories":["frontend","design"],"functionalCategories":["frontend","design"],"technologies":[],"applications":[],"short_description":"Build cinematic scroll-driven landing pages with Lenis and GSAP ScrollTrigger.","type":"community","source":"mengto/skills","installs":1346,"sourceType":"github","installUrl":"https://github.com/mengto/skills","url":"https://skilly.sh/mengto/skills/cinematic-scroll-storytelling"},{"id":"bergside/awesome-design-skills/clean","slug":"clean","name":"clean","description":"Simplicity-focused design with ample whitespace, legible typography, and a limited color palette to reduce visual clutter.","category":"design","categories":["design"],"functionalCategories":["design"],"technologies":[],"applications":[],"short_description":"Reduce visual clutter with ample whitespace, legible typography, and a limited color palette.","type":"community","source":"bergside/awesome-design-skills","installs":1444,"sourceType":"github","installUrl":"https://github.com/bergside/awesome-design-skills","url":"https://skilly.sh/bergside/awesome-design-skills/clean"},{"id":"minimax-ai/minimax-h3/co-op-game-intro-generator","slug":"co-op-game-intro-generator","name":"co-op-game-intro-generator","description":"For users creating a two-player co-op game menu or opening animation. Users provide two player names, a game title, a target visual style, and optional character reference images. The Skill locks identity cues, generates an approval image from a fixed menu framework with coordinated color, buttons, icons, and typography, then uses the approved result to rebuild the character, UI-copy, and event timing instructions for the final video. It outputs a co-op game intro featuring two characters, player cards, and menu interaction motion. Best for game concepts, character-led menus, and social content; not for playable game development, complex multi-page UI, exact brand-logo replication, or generic character-free title sequences.","category":"video","categories":["video","design","gaming"],"functionalCategories":["video","design","gaming"],"technologies":[],"applications":[],"short_description":"Create two-player co-op game menu animations with consistent characters, player cards, and interface motion.","type":"community","source":"minimax-ai/minimax-h3","installs":2782,"sourceType":"github","installUrl":"https://github.com/minimax-ai/minimax-h3","url":"https://skilly.sh/minimax-ai/minimax-h3/co-op-game-intro-generator"},{"id":"bergside/awesome-design-skills/codex","slug":"codex","name":"codex","description":"A radically minimal, blank-canvas interface built as a pure edge-to-edge surface, with almost no color and typography carrying the visual weight. Black serves as the only filled color, the only divider, and the sole surface tone cards.","category":"design","categories":["design"],"functionalCategories":["design"],"technologies":[],"applications":[],"short_description":"Design minimal, edge-to-edge interfaces where typography and black surfaces carry the visual structure.","type":"community","source":"bergside/awesome-design-skills","installs":1220,"sourceType":"github","installUrl":"https://github.com/bergside/awesome-design-skills","url":"https://skilly.sh/bergside/awesome-design-skills/codex"},{"id":"bergside/awesome-design-skills/creative","slug":"creative","name":"creative","description":"Playful, character-driven design with expressive typography and bold graphics for landing pages and creative projects.","category":"design","categories":["design"],"functionalCategories":["design"],"technologies":[],"applications":[],"short_description":"Playful design with expressive typography and bold graphics for landing pages and creative projects.","type":"community","source":"bergside/awesome-design-skills","installs":1321,"sourceType":"github","installUrl":"https://github.com/bergside/awesome-design-skills","url":"https://skilly.sh/bergside/awesome-design-skills/creative"},{"id":"nexu-io/open-design/design-brief","slug":"design-brief","name":"design-brief","description":"Parse a structured design brief written in I-Lang protocol format into a\nconcrete design spec. Eliminates ambiguity from vague requests like\n\"make it professional\" by requiring explicit dimensions: palette, typography,\nlayout, mood, density, and constraints.\nTrigger keywords: \"design brief\", \"create a design brief\", \"ilang brief\", \"structured brief\".","category":"design","categories":["design","documentation"],"functionalCategories":["design","documentation"],"technologies":[],"applications":[],"short_description":"Convert structured I-Lang design briefs into explicit specifications for visual design.","type":"community","source":"nexu-io/open-design","installs":3148,"sourceType":"github","installUrl":"https://github.com/nexu-io/open-design","url":"https://skilly.sh/nexu-io/open-design/design-brief"},{"id":"mengto/skills/design-first-ui-prompting","slug":"design-first-ui-prompting","name":"design-first-ui-prompting","description":"Use when you need design-first, spec-driven, skimmable prompts for UI generation. Covers prompt structure, constraints, variations, typography/spacing rules, and iteration workflow for consistent UI outputs.","category":"design","categories":["design"],"functionalCategories":["design"],"technologies":[],"applications":[],"short_description":"Create structured, specification-driven prompts for consistent UI generation.","type":"community","source":"mengto/skills","installs":1244,"sourceType":"github","installUrl":"https://github.com/mengto/skills","url":"https://skilly.sh/mengto/skills/design-first-ui-prompting"},{"id":"jezweb/claude-skills/design-review","slug":"design-review","name":"design-review","description":"Review a web app or page for visual design quality — layout, typography, spacing, colour, hierarchy, consistency, interaction patterns, and responsive behaviour. Not a UX audit (that checks usability) — this checks whether it looks professional and polished. Produces a design findings report with screenshots. Triggers: 'design review', 'does this look good', 'review the design', 'check the layout', 'is this polished', 'visual review', 'design audit', 'make it look better', 'it looks off'.","category":"design","categories":["design"],"functionalCategories":["design"],"technologies":[],"applications":[],"short_description":"Review web interfaces for visual quality and produce illustrated design findings.","type":"community","source":"jezweb/claude-skills","installs":1347,"sourceType":"github","installUrl":"https://github.com/jezweb/claude-skills","url":"https://skilly.sh/jezweb/claude-skills/design-review"},{"id":"buildgreatproducts/builder-os/design-system","slug":"design-system","name":"design-system","description":"Translates an image (or a set of image references — screenshots,\nmockups, Figma URLs, live websites) into two mirrored design-system\nartifacts: `docs/design.md` (YAML tokens + prose, following Google's open\n[design.md](https://github.com/google-labs-code/design.md) format, for the\ncoding agent) and `docs/design.html` (a self-contained, token-driven style\nguide rendering every token and component live, for the human to read).\nReads the imagery, asks targeted clarifying questions, derives the design\ntokens (colors, typography, spacing, rounded, components), and writes both\nfiles. Fully standalone — requires no other document or skill. Use when the\nfounder says \"create a design system\", \"design from image\",\n\"translate image to design\", \"create design.md\", \"image to design\nsystem\", \"extract design tokens\", or shares an image with no other\nclear intent.","category":"design","categories":["design","documentation"],"functionalCategories":["design","documentation"],"technologies":[],"applications":[],"short_description":"Extract design tokens and components from visual references into a design document and live HTML style guide.","type":"community","source":"buildgreatproducts/builder-os","installs":1770,"sourceType":"github","installUrl":"https://github.com/buildgreatproducts/builder-os","url":"https://skilly.sh/buildgreatproducts/builder-os/design-system"},{"id":"nextlevelbuilder/ui-ux-pro-max-skill/design-system","slug":"design-system","name":"design-system","description":"Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.","category":"design","categories":["design","frontend","css"],"functionalCategories":["design","frontend"],"technologies":["css"],"applications":[],"short_description":"Define layered design tokens, component specifications, and brand-consistent presentations.","type":"community","source":"nextlevelbuilder/ui-ux-pro-max-skill","installs":30997,"sourceType":"github","installUrl":"https://github.com/nextlevelbuilder/ui-ux-pro-max-skill","url":"https://skilly.sh/nextlevelbuilder/ui-ux-pro-max-skill/design-system"},{"id":"forcedotcom/sf-skills/design-systems-slds2-migrate","slug":"design-systems-slds2-migrate","name":"design-systems-slds2-migrate","description":"Migrate Lightning Web Components from SLDS 1 to SLDS 2 by running the SLDS linter and fixing violations. Use this skill whenever users mention SLDS 2, SLDS uplift, linter violations, LWC token migration, class overrides, hardcoded CSS values that need SLDS hook replacement, or styling hook selection. Covers all styling hook categories — color, spacing, sizing, typography, borders, radius, and shadows. Also use when users mention no-hardcoded-values, no-slds-class-overrides, lwc-to-slds-hooks, no-deprecated-tokens-slds1, or ask about SLDS component migration — even if they don't explicitly say \"uplift\" or \"migration\".","category":"frontend","categories":["frontend","code-quality","salesforce"],"functionalCategories":["frontend","code-quality"],"technologies":[],"applications":["salesforce"],"short_description":"Migrate Lightning Web Component styling from SLDS 1 to SLDS 2.","type":"community","source":"forcedotcom/sf-skills","installs":5385,"sourceType":"github","installUrl":"https://github.com/forcedotcom/sf-skills","url":"https://skilly.sh/forcedotcom/sf-skills/design-systems-slds2-migrate"},{"id":"nexu-io/open-design/doc-kami-parchment","slug":"doc-kami-parchment","name":"doc-kami-parchment","description":"Warm parchment canvas (#f5f4ed), monochrome ink-blue accent (#1B365D), one serif family, and editorial-grade typography.","category":"design","categories":["design"],"functionalCategories":["design"],"technologies":[],"applications":[],"short_description":"Style documents with a warm parchment background, ink-blue accents, and editorial serif typography.","type":"community","source":"nexu-io/open-design","installs":2394,"sourceType":"github","installUrl":"https://github.com/nexu-io/open-design","url":"https://skilly.sh/nexu-io/open-design/doc-kami-parchment"},{"id":"bergside/awesome-design-skills/editorial","slug":"editorial","name":"editorial","description":"Magazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences.","category":"design","categories":["design"],"functionalCategories":["design"],"technologies":[],"applications":[],"short_description":"Magazine-inspired layouts with serif typography, structured grids, and elegant reading experiences.","type":"community","source":"bergside/awesome-design-skills","installs":1523,"sourceType":"github","installUrl":"https://github.com/bergside/awesome-design-skills","url":"https://skilly.sh/bergside/awesome-design-skills/editorial"},{"id":"forcedotcom/sf-skills/experience-cms-brand-apply","slug":"experience-cms-brand-apply","name":"experience-cms-brand-apply","description":"Extracts, retrieves, and applies CMS brand guidelines (voice, tone, style, colors, typography) to generated content. Use this skill ANY TIME a user request involves branding, brand voice, brand tone, brand guidelines, brand identity, brand styling, or applying a brand to content. Triggers for requests like \"apply my brand\", \"use our brand voice\", \"match our brand guidelines\", \"find my brand\", \"search for brand\", \"get brand instructions\", \"apply brand tone\". Handles the full workflow: searching for brands in Salesforce CMS, extracting brand instructions, and applying brand voice/tone/guidelines to generated content. Does not apply to media/image search (use experience-search-coordinate skill), logo search, or creating new brand definitions.","category":"marketing","categories":["marketing","salesforce"],"functionalCategories":["marketing"],"technologies":[],"applications":["salesforce"],"short_description":"Retrieve Salesforce CMS brand guidelines and apply them to generated content.","type":"community","source":"forcedotcom/sf-skills","installs":4877,"sourceType":"github","installUrl":"https://github.com/forcedotcom/sf-skills","url":"https://skilly.sh/forcedotcom/sf-skills/experience-cms-brand-apply"},{"id":"expo/skills/expo-design-system","slug":"expo-design-system","name":"expo-design-system","description":"Build and maintain a design system inside an Expo app - a reusable theme of design tokens (color, spacing, typography, radius, shadow, motion), reusable component structure with variant/size/state prop conventions, and rules for when to extract a repeated view into a shared component. Use when creating or organizing theme files and design tokens (theme.ts / theme/), extending an existing theme or styling library (NativeWind, Tamagui, Restyle, Unistyles) in its own idiom, standardizing styles so screens (including AI-generated ones) look consistent and polished, fixing an app that looks AI-generated or generic instead of native (the named native-slop tells), building an in-app component library, or auditing an app for design-system drift (hardcoded colors, spacing, fonts). For platform styling specifics (semantic colors, HIG rules, native controls) use expo-native-ui; for folder layout of a new app use expo-project-structure.","category":"design","categories":["design"],"functionalCategories":["design"],"technologies":[],"applications":[],"short_description":"Build and maintain a design system inside an Expo app - a reusable theme of design tokens (color, spacing, typography, radius, shadow, motion), reusable component structure with v…","type":"official","source":"expo/skills","installs":8846,"sourceType":"github","installUrl":"https://github.com/expo/skills","url":"https://skilly.sh/expo/skills/expo-design-system"},{"id":"heygen-com/hyperframes/faceless-explainer","slug":"faceless-explainer","name":"faceless-explainer","description":"Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.","category":"video","categories":["video"],"functionalCategories":["video"],"technologies":[],"applications":[],"short_description":"Turn text, notes, topics, or briefs into faceless explainer videos with custom scene visuals.","type":"community","source":"heygen-com/hyperframes","installs":288316,"sourceType":"github","installUrl":"https://github.com/heygen-com/hyperframes","url":"https://skilly.sh/heygen-com/hyperframes/faceless-explainer"},{"id":"bergside/awesome-design-skills/fiction","slug":"fiction","name":"fiction","description":"A playful, energetic, cartoonesque interface inspired by friendly children's-book illustrations — warm cream backgrounds, big bold custom display typography, saturated brand color blocks, thick black outlines, generously rounded shapes","category":"design","categories":["design"],"functionalCategories":["design"],"technologies":[],"applications":[],"short_description":"Cartoon-style interfaces with cream backgrounds, bold typography, saturated colors, and thick outlines.","type":"community","source":"bergside/awesome-design-skills","installs":1207,"sourceType":"github","installUrl":"https://github.com/bergside/awesome-design-skills","url":"https://skilly.sh/bergside/awesome-design-skills/fiction"},{"id":"nexu-io/open-design/field-notes-editorial-template","slug":"field-notes-editorial-template","name":"field-notes-editorial-template","description":"Editorial \"Field Notes\" report template with soft paper background, serif hero\ntypography, rounded pastel insight cards, and a retention chart panel.\nUse when users ask for a premium magazine-style business report, board memo\none-pager, or elegant data storytelling layout.","category":"design","categories":["design"],"functionalCategories":["design"],"technologies":[],"applications":[],"short_description":"Design magazine-style business reports with serif typography, pastel insight cards, and retention charts.","type":"community","source":"nexu-io/open-design","installs":2544,"sourceType":"github","installUrl":"https://github.com/nexu-io/open-design","url":"https://skilly.sh/nexu-io/open-design/field-notes-editorial-template"},{"id":"bergside/awesome-design-skills/flat","slug":"flat","name":"flat","description":"Two-dimensional minimalist style with vibrant colors, clean typography, and no 3D effects for fast, user-friendly interfaces.","category":"design","categories":["design"],"functionalCategories":["design"],"technologies":[],"applications":[],"short_description":"Flat interface design with vibrant colors, clean typography, and no 3D effects.","type":"community","source":"bergside/awesome-design-skills","installs":1314,"sourceType":"github","installUrl":"https://github.com/bergside/awesome-design-skills","url":"https://skilly.sh/bergside/awesome-design-skills/flat"},{"id":"nexu-io/open-design/frame-data-chart-nyt","slug":"frame-data-chart-nyt","name":"frame-data-chart-nyt","description":"NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).","category":"design","categories":["design"],"functionalCategories":["design"],"technologies":[],"applications":[],"short_description":"Create editorial charts with newsroom-style typography and staggered reveal animations.","type":"community","source":"nexu-io/open-design","installs":2379,"sourceType":"github","installUrl":"https://github.com/nexu-io/open-design","url":"https://skilly.sh/nexu-io/open-design/frame-data-chart-nyt"},{"id":"anthropics/claude-code/frontend-design","slug":"frontend-design","name":"frontend-design","description":"Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.","category":"frontend","categories":["frontend","design"],"functionalCategories":["frontend","design"],"technologies":[],"applications":[],"short_description":"Guide distinctive UI design through aesthetic direction, typography, and intentional visual choices.","type":"official","source":"anthropics/claude-code","installs":59836,"sourceType":"github","installUrl":"https://github.com/anthropics/claude-code","url":"https://skilly.sh/anthropics/claude-code/frontend-design"},{"id":"anthropics/claude-plugins-official/frontend-design","slug":"frontend-design","name":"frontend-design","description":"Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.","category":"frontend","categories":["frontend","design"],"functionalCategories":["frontend","design"],"technologies":[],"applications":[],"short_description":"Guide distinctive UI design through aesthetic direction, typography, and intentional visual choices.","type":"official","source":"anthropics/claude-plugins-official","installs":15234,"sourceType":"github","installUrl":"https://github.com/anthropics/claude-plugins-official","url":"https://skilly.sh/anthropics/claude-plugins-official/frontend-design"}],"query":"typography","searchType":"fuzzy","count":50,"durationMs":0}