Typography calculator

Skill a5c-ai/babysitter/library/specializations/ux-ui-design/skills/typography-calculator

Babysitter enforces obedience on agentic workforces and enables them to manage extremely complex tasks and workflows through deterministic, hallucination-free self-orchestration

Install

npx -y skills add a5c-ai/babysitter --skill typography-calculator

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Calculate typography scales, metrics, and responsive font sizing

SKILL.md

2.9 KB, as published. Nobody here has run it

Typography Calculator Skill

Purpose

Calculate typography scales and metrics for design systems, including modular scales, line heights, and responsive font sizing.

Capabilities

Generate type scales (modular, golden ratio, major third, etc.)
Calculate optimal line heights for readability
Generate responsive font sizing with fluid typography
Calculate vertical rhythm and baseline grids
Generate font-size/line-height pairings
Create typography tokens

Target Processes

design-system.js
component-library.js (typographySystemDesignTask)
responsive-design.js (responsiveTypographySpacingTask)

Integration Points

type-scale.com algorithms
CSS clamp() for fluid typography
Modular scale calculations

Input Schema

{
  "type": "object",
  "properties": {
    "baseSize": {
      "type": "number",
      "default": 16,
      "description": "Base font size in pixels"
    },
    "scaleRatio": {
      "type": "string",
      "enum": ["minor-second", "major-second", "minor-third", "major-third", "perfect-fourth", "augmented-fourth", "perfect-fifth", "golden-ratio"],
      "default": "perfect-fourth"
    },
    "steps": {
      "type": "number",
      "default": 6,
      "description": "Number of scale steps above and below base"
    },
    "lineHeightRatio": {
      "type": "number",
      "default": 1.5,
      "description": "Base line height ratio"
    },
    "fluidTypography": {
      "type": "boolean",
      "default": true
    },
    "minViewport": {
      "type": "number",
      "default": 320
    },
    "maxViewport": {
      "type": "number",
      "default": 1440
    }
  },
  "required": ["baseSize"]
}

Output Schema

{
  "type": "object",
  "properties": {
    "scale": {
      "type": "array",
      "description": "Typography scale with sizes"
    },
    "lineHeights": {
      "type": "object",
      "description": "Optimal line heights for each size"
    },
    "fluidSizes": {
      "type": "object",
      "description": "CSS clamp values for fluid typography"
    },
    "verticalRhythm": {
      "type": "object",
      "description": "Vertical rhythm calculations"
    },
    "tokens": {
      "type": "object",
      "description": "Typography design tokens"
    }
  }
}

Usage Example

const result = await skill.execute({
  baseSize: 16,
  scaleRatio: 'perfect-fourth',
  steps: 6,
  fluidTypography: true,
  minViewport: 320,
  maxViewport: 1440
});