Skills.md

---
name: leading-icon-alignment
description: Ensures leading icons in lists are properly aligned to the first line of text when text wraps, preventing icons from vertically centering across multiple lines. Use when implementing list items with leading icons, SVG icons in flex containers, or when fixing icon alignment issues in wrapped text.
license: MIT
metadata:
  version: "1.0.0"
  author: alexcarpenter
---

# Leading Icon Alignment

Ensures leading icons within lists are always properly aligned to the first line of text when the text wraps, rather than centering vertically across the full height of the wrapped text.

## Rules

- **MUST**: Use `flex` on the list item container
- **MUST**: Use height on the SVG that matches the line height of the adjacent text `height: 1lh` (or `h-lh` in Tailwind)
- **MUST**: Use `flex-shrink: 0` (`shrink-0` in Tailwind) on the icon to prevent it from compressing at narrow widths
- **NEVER**: Use `align-items: center` (`items-center` in Tailwind) on the flex container — it vertically centers the icon across all lines of wrapped text instead of aligning to the first line

## Implementation

```html
<ul>
  <li class="flex gap-2">
    <svg
      class="h-lh w-4 shrink-0"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <circle cx="12" cy="12" r="10" />
      <path d="m9 12 2 2 4-4" />
    </svg>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </li>
</ul>
```

## Key Points

- The SVG height uses (`h-lh`) to match the text line height so the icon visually centers within the first line of text
- `shrink-0` prevents the icon from compressing when the container is narrow — without it the icon distorts before text wraps
- Flex defaults to `align-items: stretch`, but because the SVG has a fixed height, it effectively sits at the top — aligned to the first line
- `gap-2` provides consistent spacing between icon and text without needing padding or margin on either element

---
name: trailing-icon-alignment
description: Ensures trailing icons remain visually attached to the last line of text when text wraps. Use when implementing inline text with trailing icons, external link indicators, or when fixing trailing icon alignment issues in wrapped text.
license: MIT
metadata:
  version: "1.0.0"
  author: alexcarpenter
---

# Trailing Icon Alignment

Ensures trailing icons always remain visually attached to the last line of text when the text wraps, preventing the icon from being orphaned on a new line.

## Rules

- **MUST**: Use `relative inline-block` on the container element
- **MUST**: Use padding-right (`pr-5` or equivalent) to reserve space for the icon
- **MUST**: Use `absolute inline` positioning on the SVG icon
- **MUST**: Use height on the SVG that matches the line height of the text (`h-6` or equivalent)
- **NEVER**: Place the icon as a flex sibling or block-level sibling — it will not wrap with the text

## Implementation

```html
<a href="/" class="relative inline-block pr-5">
  View documentation
  <svg
    class="absolute ml-1 inline h-lh w-4 shrink-0"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    <path d="M7 7h10v10" />
    <path d="M7 17 17 7" />
  </svg>
</a>
```

## Key Points

- `inline-block` on the container causes the trailing padding and icon to stay attached to the last word, wrapping together as a unit
- `pr-5` (padding-right) must be at least as wide as the icon (`w-4`) to prevent text overlap
- `absolute` positions the icon within its container; `inline` keeps it participating in the text flow
- This approach prevents the icon from being orphaned on a new line at narrow widths