apply-premium-backgroundlisted
Install: claude install-skill phamlongh230-lgtm/yamtam-engine
# apply-premium-background
## When to Use
- Building hero sections, landing pages, or splash screens that need depth
- Card backgrounds that feel more polished than a flat color
- Dark-mode UIs that benefit from subtle animated grain or aurora effects
- When the design calls for layered CSS backgrounds without JS overhead
## Do NOT use for
- Content-heavy reading areas (backgrounds distract from text)
- Tables, data grids, code blocks — use `--color-background-subtle` token instead
- Any surface where reduced-motion users will see animation — always respect `prefers-reduced-motion`
---
## Dot Grid Background
```css
/* Dot grid — light and dark variants */
.bg-dot-grid {
background-color: var(--color-background);
background-image: radial-gradient(
circle,
hsl(var(--dot-color, 215 20% 65%) / 0.4) 1px,
transparent 1px
);
background-size: 24px 24px;
}
/* Dark mode */
.dark .bg-dot-grid {
--dot-color: 215 20% 35%;
}
```
```jsx
// Tailwind + inline CSS
export function DotGrid({ children }) {
return (
<div
className="relative min-h-screen bg-white dark:bg-gray-950"
style={{
backgroundImage:
"radial-gradient(circle, rgba(99,102,241,0.15) 1px, transparent 1px)",
backgroundSize: "24px 24px",
}}
>
{children}
</div>
);
}
```
---
## Line Grid Background
```css
.bg-line-grid {
background-color: var(--color-background);
background-image:
linear-gradient(var(--grid-color, rgba(100,100,