| 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
- Read
guidelines.md to select the smallest relevant file set.
- Load
references/math-foundations/rules.md for implementation decisions.
- Load
references/math-foundations/examples.md when editing code.
- 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.
