baseline-uilisted
Install: claude install-skill phamlongh230-lgtm/yamtam-engine
## When to Use
- Use when: starting a new project and setting up global styles
- Use when: font rendering looks inconsistent across macOS/Windows
- Use when: Tailwind utility soup is making components unreadable
- Use when: auditing a project's base CSS before a UI polish pass
- Do NOT use for: full token system — that's design-system-gen
- Do NOT use for: component animation patterns — that's motion-design
---
## Essential CSS Baseline
```css
/* globals.css — apply before any component styles */
*, *::before, *::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%; /* prevent iOS font inflation */
text-size-adjust: 100%;
tab-size: 4;
}
body {
margin: 0;
line-height: 1.5; /* browser default is ~1.2 — too tight */
-webkit-font-smoothing: antialiased; /* macOS: crisp text */
-moz-osx-font-smoothing: grayscale;
font-synthesis: none; /* prevent fake bold/italic */
text-rendering: optimizeLegibility;
}
img, svg, video, canvas, audio, iframe, embed, object {
display: block; /* removes 4px phantom gap under inline media */
max-width: 100%;
}
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word; /* prevent text overflow on small viewports */
}
/* Remove default focus outline ONLY for mouse, keep for keyboard */
:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
:focus:not(:focus-visible) {
outline: none;
}
```
---
## Tailwind Anti-Patterns
```