Line Length Optimizer for Openclaw

Check whether body text has a readable line length and get a concrete, responsive CSS width recommendation.

monikazapisek
v0.1.1
Oct 8, 2026
1
535
0

Install & Download

1. ClawHub CLI

The fastest way to install a skill directly from the registry.

npx clawhub@latest install line-length-optimizer

2. Manual Installation

Copy the skill folder to one of these locations

Global
~/.openclaw/skills/
Workspace
<project>/skills/

Priority: Workspace > Local > Bundled

3. Prompt Installation

Copy this prompt to OpenClaw to install it automatically.

Help me install line-length-optimizer using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).

Prefer to download?

Get the raw skill files in a ZIP archive.

What is Line Length Optimizer?

Line Length Optimizer audits the measure—the number of characters per line—of body copy and recommends a practical container width when text is too wide or too narrow. It uses typographic guidance of 45–75 characters per line on desktop and 35–45 on mobile, favoring max-width in ch so the width relates to the font rather than relying on a fixed pixel value.

This Openclaw Skills tool works from a text sample, CSS dimensions, or—when Figma access is available—the selected text node. It reports its assumptions, estimated or measured characters per line, verdict, and reasoning. It suggests changes rather than silently editing files or Figma nodes, and is intended for wrapping body prose, not headings or single-line UI text.

Line Length Optimizer Use Cases

  • Review an article, blog post, or card description to check whether its text column is comfortable to read.
  • Assess a paragraph when the user asks whether a column is too wide or too narrow.
  • Evaluate a CSS max-width, container width, and font size against desktop and mobile measure guidelines.
  • Recommend a readable max-width when a text block is provided without existing layout dimensions.
  • Inspect a selected Figma text node and identify fixed-width, auto-width, or truncated text behavior.
  • Compare desktop and mobile measure and determine whether responsive width rules are warranted.

How Line Length Optimizer Works

  1. Read the available inputs. Use the supplied text, CSS, dimensions, font size, and target device. If Figma access is available, inspect the selected text node instead of asking the user to paste its content.
  2. Estimate characters per line. Count or estimate the average line length from the text, or interpret a ch width as an approximate character target. For pixel widths, account for font size and typeface because glyph widths vary.
  3. Compare with the target range. Assess desktop text against 45–75 characters per line and mobile against 35–45. Treat serif tolerance and font characteristics as context, not separate hard limits.
  4. Report a verdict and fix. State whether the measure is in range, too wide, or too narrow, then suggest a suitable max-width or a width adjustment. Prefer ch unless the existing codebase convention indicates otherwise.
  5. Explain the reasoning. Include the character estimate, assumptions, and relevant desktop/mobile considerations. Mention when narrower columns may increase ragged-edge or hyphenation pressure.
  6. Leave changes for approval. Present CSS as a suggestion. Edit a file or resize a Figma node only when the user explicitly requests that action.

Line Length Optimizer Setup

The SKILL.md does not specify a package, installer, CLI command, or required runtime dependency. Add the skill to the skills directory or configuration used by your AI coding agent, following that host's skill-loading instructions, then make it available to the agent. No separate configuration is required for text or CSS audits.

For Figma-based audits, provide the agent with Figma MCP or plugin access and a selected text node. Directly resizing a node is optional and should only happen when the user explicitly requests a fix; otherwise, report the recommended dimensions.

Line Length Optimizer Data Schema & Taxonomy

The skill is instruction-driven and does not define a persistent data store, generated files, or a machine-readable output schema. It uses the following information during an audit:

Input or metadata Purpose
Text block Estimate or measure average characters per line.
CSS width and font size Assess an existing text container; font-family improves pixel-based estimates when known.
Target device Select desktop, mobile, or both; both are reported by default.
Figma text-node properties Use textAutoResize, width, height, font size, and font family to assess the selected node.
Skill metadata Name: line-length-optimizer; version: 1.1.0; status: accepted; project: Design Engineering Playbook.

The response organizes findings as a verdict, measured or estimated characters per line, a concrete width recommendation, and a brief explanation of the calculation. It does not write files by default. In Figma, WIDTH_AND_HEIGHT indicates auto-width text with no fixed measure to assess; NONE and HEIGHT use the node's fixed width; TRUNCATE also requires flagging hidden overflow.

Line Length Optimizer Advanced Features

  • Responsive assessment: Reports desktop and mobile guidance, and identifies when different breakpoint-specific widths may be needed.
  • Font-aware estimation: Interprets ch as an approximate character measure and notes that pixel-to-character estimates vary by font, size, and typeface.
  • Figma node inspection: Uses text auto-resize behavior and node dimensions to distinguish fixed-width, auto-width, and truncated text.
  • Explicit-change safeguards: Suggests CSS and Figma adjustments without silently applying them; direct edits require the user's request.
  • Typography-aware recommendations: Flags how narrower measures can increase ragged-edge and hyphenation pressure, and excludes headings and single-line UI strings from the audit.

SKILL.md


Loading

Related Openclaw Skills

METADATA

Github Stars: 0
forks: 0

Featured*