tw-typography-fluid
Apply fluid, responsive text sizing that scales smoothly across different screen sizes.
Install
mkdir -p .claude/skills/tw-typography-fluid && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/15044" && unzip -o skill.zip -d .claude/skills/tw-typography-fluid && rm skill.zipInstalls to .claude/skills/tw-typography-fluid
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Fluid typography: clamp(), viewport-relative sizing. Use when: creating text that scales smoothly between breakpoints, responsive headings, hero text.Key capabilities
- →Create fluid hero headings that scale with viewport
- →Avoid abrupt text size jumps between breakpoints
- →Adapt large display text to any screen size
- →Use `clamp()` for fluid sizing with min, preferred, and max values
- →Set preferred values using `vw` units for viewport scaling
- →Test fluid typography at 320px and 2560px viewport widths
How it works
The skill applies CSS `clamp()` functions to font sizes, using viewport-width units for the preferred value and fixed minimum/maximum bounds, to achieve fluid typography.
Inputs & outputs
When to use tw-typography-fluid
- →Creating responsive hero section headings
- →Implementing fluid scale across breakpoints
- →Applying dynamic font sizes to UI elements
About this skill
Fluid Typography
When to Use
- Hero headings that scale smoothly with viewport
- Avoiding abrupt text size jumps between breakpoints
- Large display text that adapts to any screen size
Rules
- Use
clamp()for fluid sizing —clamp(min, preferred, max) - Preferred value uses
vwunits — scales with viewport width - Always set min and max bounds — prevents unreadable extremes
- Body text stays fixed — fluid sizing for headings/display text only
- Test at 320px and 2560px — verify both extremes
Patterns
Fluid Hero Heading
<h1 class="font-bold tracking-tight text-[var(--color-text-primary)]"
style="font-size: clamp(1.875rem, 4vw + 1rem, 3.75rem)">
GSM Firmware Distribution
</h1>
Fluid Scale Reference
| Element | clamp() Value | 320px | 768px | 1440px |
|---|---|---|---|---|
| Hero H1 | clamp(1.875rem, 4vw + 1rem, 3.75rem) | 30px | ~42px | 60px |
| Page H1 | clamp(1.5rem, 2.5vw + 0.75rem, 2.25rem) | 24px | ~30px | 36px |
| Section H2 | clamp(1.25rem, 1.5vw + 0.75rem, 1.75rem) | 20px | ~24px | 28px |
| Large body | clamp(1rem, 0.5vw + 0.875rem, 1.125rem) | 16px | ~17px | 18px |
Using CSS Custom Properties
/* static/css/src/_typography.scss */
:root {
--text-fluid-hero: clamp(1.875rem, 4vw + 1rem, 3.75rem);
--text-fluid-h1: clamp(1.5rem, 2.5vw + 0.75rem, 2.25rem);
--text-fluid-h2: clamp(1.25rem, 1.5vw + 0.75rem, 1.75rem);
}
<h1 class="font-bold text-[var(--text-fluid-hero)]
text-[var(--color-text-primary)]">
Fluid Hero Title
</h1>
With Tailwind Arbitrary Values
<!-- Fluid without inline style -->
<h1 class="text-[clamp(1.5rem,3vw+0.5rem,3rem)]
font-bold text-[var(--color-text-primary)]">
Scales Smoothly
</h1>
Anti-Patterns
| Pattern | Problem | Fix |
|---|---|---|
font-size: 5vw without clamp | Too small on mobile, too large on 4K | Wrap in clamp() |
| Fluid body text | Unnecessary, confusing | Keep body at text-base (1rem) |
clamp(0.5rem, ...) | Minimum too small to read | Min at least 1rem for body, 1.25rem for headings |
| Only using breakpoint classes for headings | Abrupt size jumps | Use clamp() for smooth scaling |
Red Flags
- Viewport-relative units (
vw,vh) withoutclamp()bounds - Fluid sizing on body paragraph text (keep fixed)
- Min value below readable threshold
Quality Gate
& .\.venv\Scripts\python.exe -m ruff check . --fix
& .\.venv\Scripts\python.exe -m ruff format .
& .\.venv\Scripts\python.exe manage.py check --settings=app.settings_dev
References
static/css/src/_variables.scss— typography variablestemplates/base/base.html— viewport meta tag
When not to use it
- →When applying fluid sizing to body text
- →When using viewport-relative units without `clamp()` bounds
Limitations
- →Fluid sizing is not recommended for body paragraph text
- →Minimum font size values should be readable
- →Viewport-relative units without `clamp()` bounds can lead to unreadable extremes
How it compares
This skill provides a method for smooth, continuous text scaling across all viewport sizes using `clamp()`, avoiding the discrete jumps associated with traditional media queries and breakpoints.
Compared to similar skills
tw-typography-fluid side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| tw-typography-fluid (this skill) | 0 | 4mo | No flags | Beginner |
| ui-styling | 12 | 9mo | Review | Beginner |
| tailwind-design-system | 34 | 2mo | No flags | Intermediate |
| figma | 22 | 4mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by engremran07
View all by engremran07 →You might also like
ui-styling
mrgoonie
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
tailwind-design-system
wshobson
Build scalable design systems with Tailwind CSS, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.
figma
openai
Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.
design-system-patterns
wshobson
Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching, building component libraries, or establishing design system foundations.
interaction-design
wshobson
Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.
web-design-reviewer
github
This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.