fix(skill): vertically center pill text, dynamic pill width, teal separator

- Text: dominant-baseline="middle" at pill_y + pill_h/2 for true vertical center
- Pill width: computed from label char count (9.5px/char + 28px padding) so
  short labels like 'AI' and long ones like 'Platform Engineering' both fit
- Separator: color changed from near-invisible white to teal matching the pill,
  width now matches the pill width instead of a hardcoded 260px

Signed-off-by: Lee Calcote <lee.calcote@layer5.io>

Author: leecalcote