Content Preview
# Responsive Design Calculations Reference for breakpoint math, fluid typography, and responsive layout patterns. --- ## Table of Contents - [Breakpoint System](#breakpoint-system) - [Fluid Typography](#fluid-typography) - [Responsive Spacing](#responsive-spacing) - [Container Queries](#container-queries) - [Grid Systems](#grid-systems) --- ## Breakpoint System ### Standard Breakpoints ``` ┌─────────────────────────────────────────────────────────────┐ │ BREAKPOINT RAN
How to Use
Recommended: Install to project (local)
mkdir -p .claude/skills
curl -o .claude/skills/responsive-calculations.md \
https://raw.githubusercontent.com/alirezarezvani/claude-skills/main/product-team/ui-design-system/references/responsive-calculations.mdSkill is scoped to this project only. Add .claude/skills/ to your .gitignoreif you don't want to commit it.
Alternative: Clone full repo
git clone https://github.com/alirezarezvani/claude-skillsThen reference at product-team/ui-design-system/references/responsive-calculations.md
Related Skills
SKILL
10 product agent skills and plugins for Claude Code, Codex, Gemini CLI, Cursor, OpenClaw. PM toolkit (RICE), agile PO, product strategist (OKR), UX researcher, UI design system, competitive teardown, landing page generator, SaaS scaffolder, research summarizer. Python tools (stdlib-only).
product-teamskillagentpython
by alirezarezvani · alirezarezvani-claude-skills
sample-prd-readme
My App — Product Requirements Document
product-teamsampleprdreadme
by alirezarezvani · alirezarezvani-claude-skills
statistics-reference
Statistics Reference for Product Managers
product-teamstatisticsreference
by alirezarezvani · alirezarezvani-claude-skills
metrics-frameworks
AARRR breaks the product journey into five stages.
product-teammetricsframeworks
by alirezarezvani · alirezarezvani-claude-skills