skills.rest
cherishwins
cherishwinsCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

fluid-scale

Converts hard-pixel CSS typography and spacing into identity-anchored fluid clamp() scales.

3|Updated Apr 25, 2026
Search Tags:#accessibility#clamp#type scale#fluid typography#responsive css#print stylesheet#css migration
One-click install
npx skills add https://github.com/cherishwins/npsi-site --skill fluid-scale-cherishwins
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fluid-scale
Source: https://github.com/cherishwins/npsi-site/tree/main/.claude/skills/fluid-scale
Command: npx skills add https://github.com/cherishwins/npsi-site --skill fluid-scale-cherishwins

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Migrating an existing brand-locked website to fluid responsive typography normally risks changing the approved visual design. This Skill converts hard-pixel font sizes and spacing into clamp() tokens whose max equals the current desktop value and min equals the current small-screen value, so the site renders pixel-identical at both anchor widths while gaining smooth interpolation in between. ## Core Features & Use Cases - Identity-anchored clamp generation: A bundled Python script computes the exact rem + vw fluid term through two anchor points, always keeping the rem term for WCAG 1.4.4 zoom compliance. - Print and accessibility guardrails: Paste-ready ISO-216/A4 print stylesheet, ch-based measure, focus-visible, scroll-padding, and prefers-reduced-motion blocks. - Review checklist and reference tokens: A canonical shipped :root block and a verification checklist ensure no per-breakpoint font-size overrides survive the migration. - Use Case: You maintain a static HTML/CSS site with hard-coded pixel sizes and media queries. Run the clamp generator per role, replace values with var() tokens, collapse the media query to layout-only rules, and verify identical rendering at 360px and 1280px. ## Quick Start Ask the AI to migrate your stylesheet to fluid typography using the fluid-scale protocol, generating clamp tokens with scripts/clamp.py for each type and spacing role.

Frequently Asked Questions about fluid-scale

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert fixed pixel font sizes to fluid clamp() in CSS?▼

Compute the line through two anchor points: the small-screen size at Wmin and the desktop size at Wmax. The slope becomes the vw term and the intercept becomes the rem term, giving clamp(minPx, rem + vw, maxPx). The bundled clamp.py script generates these tokens automatically.

How to make fluid typography without changing the existing design?▼

Set each clamp's max to the current desktop value and its min to the current small-screen value. Both anchor widths then render pixel-identical to the old design, and only the interpolation between them is new, making adoption review-trivial and reversible.

Why should a CSS clamp() include a rem term instead of vw only?▼

A vw-only clamp ignores the user's browser font-size setting and fails WCAG 1.4.4, which requires text to scale to 200%. The rem term carries user zoom while the vw term carries viewport width, so both must be present.

Does this fluid scale approach work with print stylesheets?▼

Yes, the Skill includes a paste-ready A4 print block using @page size A4, ISO-216 aspect-ratio tokens, break-inside avoidance for figures and cards, and URL surfacing for external links. It standardizes on A4 over US Letter because Letter is not self-similar under folding.

When should I not use identity-anchored fluid scaling?▼

Skip it for greenfield projects with no established sizes, where a plain modular scale is simpler, and for pixel-art or fixed-canvas layouts where scaling is undesirable. The anchoring discipline only pays off when an approved brand identity must be preserved.

Related Skills

Explore More Design & Creative Skills→
IsKenKenYaIsKenKenYa
35

mobile-first-design

Create responsive interfaces using CSS Grid, fluid typography, adaptive spacing, prioritizing mobile-first layouts for all devices.

Community
Intermediate
aemdemosaemdemos

Get General Styling — Design System Extraction Skill

Extract site-wide styling and design tokens from a live website.

Official
Advanced
andronicsandronics
1

a11y-checker

Audit CSS stylesheets for WCAG 2.2 conformance issues.

Community
Advanced
vudovnvudovn
8.1k

tailwind-patterns

Automate Tailwind CSS v4 adoption with CSS-first configuration and semantic tokens.

Community
Advanced