astro7-tailwind4-starter

Skill for reviewing, optimizing, and migrating Tailwind CSS code, including HTML accessibility checks. Always use this skill when: · Asked to "review", "clean up", "check", or "look at" Tailwind classes · v3 classes like `space-y-*`, `space-x-*`, `flex-shrink`, `shadow-sm`, `bg-opacity-*` are present · Hardcoded arbitrary values like `text-[#1e40af]` or `w-[320px]` are used · Conflicting or redundant classes like `flex` and `block` on the same element are found · Asked whether to use `cn()` / `clsx`, or whether to consolidate with `*:` variants · Asked to migrate or rewrite from v3 to v4 · Asked to check HTML accessibility structure: `aria-label`, `ul/li`, `button type`, `label`, etc. · Asked to review `.html`, `.tsx`, `.jsx`, `.vue`, or `.astro` files (if Tailwind is used) Framework-agnostic (HTML / React / Vue / Svelte / Astro, etc.). Also use for vague requests like "something looks off with the classes", "the design changed after upgrading to v4", or "migrating from CSS modules".

Reads all Variables from a Figma file URL and writes them as Tailwind CSS v4 @theme tokens into the project's Tailwind CSS entry file (found via grep, or src/index.css if none exists).

Finds the Tailwind CSS v4 entry file by searching for @import "tailwindcss", reads @theme tokens, and writes them to a Figma file as Variables organized into appropriate collections by type.

Apply a harmonious type scale to a Tailwind CSS v4 project by choosing a base font size and a named scale ratio (from typescale.com). Sets --text-xs through --text-9xl in @theme (covering all Tailwind text size classes) and maps h1–h6 font sizes in @layer base. Use this skill when the user says things like: "タイプスケール変えたいんだけど", "フォントサイズを整えたい", "見出しのサイズをちゃんとしたい", "タイポグラフィのスケールを設定して", "apply a type scale", "set up typography scale", "change font sizes".