The Question Can I use the counter(skill) inside a calc()
No. You can’t.
The calc function does not permit the use of counter functions as its components. From the specs here – https://www.w3.org/TR/css3-values/#calc-notation:
Components of a
calc()expression
can be literal values or
attr()or
calc()
expressions.
There have been many requests for this but always declined. The underlying reason seems to be that the counter() function represents (outputs) a <string> and hence cannot be used directly in calc. Moreover, the counters are considered very expensive for the browsers.
Reference: https://lists.w3.org/Archives/Public/www-style/2016Aug/0082.html
However, there have been proposals for adding a counter-value() function which would return the value as integer and could be used in calc. See here: https://drafts.csswg.org/css-lists-3/#counter-functions (Scroll down to see Issue 4).
So as of now, you cannot use counter inside of calc and the counter-value does not exist yet.