fontsChoose and implement web typography avoiding common rendering, pairing, and hierarchy mistakes.
Install via ClawdBot CLI:
clawdbot install ivangdavila/fontsGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Generated Mar 22, 2026
A company wants to update its website to improve user engagement and accessibility. The skill helps select appropriate text fonts like Inter or Roboto for body copy, pair them with a contrasting serif heading font like Playfair Display, and apply correct line heights and widths to enhance readability across devices.
An app developer is creating a mobile application that supports dark mode. The skill guides adjusting font weights for light fonts on dark backgrounds, using system font stacks for native performance, and preloading WOFF2 fonts with font-display: swap to ensure fast loading and consistent rendering on all platforms.
A marketing agency needs to design brochures and digital ads that capture attention without sacrificing readability. The skill advises using display fonts like Bebas Neue for headlines only, establishing clear hierarchy with type scales, and avoiding pairing traps like similar fonts to create professional and impactful materials.
An e-commerce business is launching a new website and wants to ensure text is legible on all operating systems. The skill helps avoid thin weights that render poorly on Windows, implement safe font pairs like Roboto and Roboto Slab, and set max-width in ch units to prevent long line lengths that can deter shoppers.
A content creator is setting up a blog to publish articles and needs to optimize for reader retention. The skill provides tips on using text fonts like Georgia for body text, applying text-wrap: pretty to prevent orphans, and ensuring proper line height and spacing to make paragraphs easy to read on various screen sizes.
Offer typography consulting and implementation for clients' websites, using the skill to avoid common mistakes like poor font pairing or rendering issues. Charge per project or hourly, with revenue generated from improved user experience leading to higher client satisfaction and referrals.
Develop a software-as-a-service platform that analyzes websites and provides automated recommendations based on the skill's guidelines, such as font loading performance and hierarchy fixes. Monetize through subscription tiers, with revenue from businesses seeking to enhance their online presence efficiently.
Create and sell online courses or in-person workshops teaching designers and developers how to apply the skill's principles, covering topics like font pairing and cross-platform rendering. Generate revenue from course sales, certifications, and corporate training packages for teams.
💬 Integration Tip
Integrate this skill into design systems by creating reusable CSS classes for font stacks and typography scales, and use it during code reviews to catch common issues like faux bold or improper line heights.
Scored Apr 15, 2026
生成和编辑各种类型的图表(drawio、mermaid、excalidraw)。支持流程图、时序图、类图、ER图、思维导图、架构图、网络拓扑图等常见图表类型。能够根据自然语言描述创建新图表,也能读取并修改已有的 drawio/mermaid/excalidraw 文件。使用独立的 MCP server (mcp-diagram-generator) 生成图表文件,减少 token 消耗并保证输出一致性。支持自动配置管理,默认输出路径为项目目录下的 diagrams/{format}/,支持自定义路径和自动创建目录。
Analyzes article structure, identifies positions requiring visual aids, generates illustrations with Type × Style × Palette three-dimension approach. Use whe...
Support design understanding from basic visuals to professional production and theory.
Generate diagrams from descriptions with Mermaid, PlantUML, or ASCII for architecture, flows, sequences, and data models.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
Create, export, and manage Canva designs via the Connect API. Generate social posts, carousels, and graphics programmatically.