---

name: frontend-math-foundations description: "Explain and apply foundational math for front-end development, including arithmetic, algebra, ratios, exponents, roots, linear equations, inequalities, geometry, trigonometry, coordinates, and choosing CSS versus JavaScript math. Use when a web design calculation needs first-principles explanation before applying CSS, JavaScript, Grid, Flexbox, responsive, or color-specific skills." license: MIT compatibility: Codex, Claude Code, and other Agent Skills-compatible clients. metadata: version: "0.1.0" displayName: Frontend Math Foundations category: Frontend tags: frontend,math,design,css,javascript

Frontend Math Foundations

Use this skill as the foundation layer for front-end math. It helps translate a visual or interaction problem into arithmetic, algebra, ratios, geometry, trigonometry, coordinates, or a CSS-vs-JavaScript ownership decision.

Quick Start

1. Read guidelines.md to select the smallest relevant file set.
2. Load references/math-foundations/rules.md for implementation decisions.
3. Load references/math-foundations/examples.md when editing code.
4. Use workflows/choose-math-approach.md for multi-step derivation or debugging.

Contents

Resource	Purpose
guidelines.md	Routes tasks to the right reference files
references/source-map.md	Book source and chapter/section traceability
references/math-foundations/knowledge.md	Core concepts and terminology
references/math-foundations/rules.md	Practical rules, guidelines, and exceptions
references/math-foundations/examples.md	Bad/good examples and refactoring approach
references/math-foundations/patterns.md	Reusable formula and implementation patterns
references/math-foundations/checklist.md	Review checklist and red flags
workflows/choose-math-approach.md	Step-by-step workflow

Source

Derived from Math for Web Design by Paul McFedries, Chapter 1: Web dev math fundamentals. Citations are tracked in references/source-map.md.