Shadcn UI
BuilderIO/agent-native
Project-aware shadcn/ui components, registry MCP, theming, and design-system lint feedback.
Set up oxlint-tailwindcss — Tailwind CSS v4 lint rules for oxlint — in a project, and act on its diagnostics.
Install Oxlint Tailwindcss
$ npx skills add sergioazoc/oxlint-tailwindcss --skill oxlint-tailwindcss -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install sergioazoc/oxlint-tailwindcss oxlint-tailwindcss --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/sergioazoc/oxlint-tailwindcss.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/oxlint-tailwindcss .claude/skills/oxlint-tailwindcss && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "oxlint-tailwindcss" agent skill from https://github.com/sergioazoc/oxlint-tailwindcss/tree/main/skills/oxlint-tailwindcss into .claude/skills/oxlint-tailwindcss/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "oxlint-tailwindcss", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/sergioazoc/oxlint-tailwindcss/tree/main/skills/oxlint-tailwindcssType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add sergioazoc/oxlint-tailwindcss --skill oxlint-tailwindcss -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install sergioazoc/oxlint-tailwindcss oxlint-tailwindcss --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sergioazoc/oxlint-tailwindcss.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/oxlint-tailwindcss .agents/skills/oxlint-tailwindcss && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "oxlint-tailwindcss" agent skill from https://github.com/sergioazoc/oxlint-tailwindcss/tree/main/skills/oxlint-tailwindcss into .agents/skills/oxlint-tailwindcss/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "oxlint-tailwindcss", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add sergioazoc/oxlint-tailwindcss --skill oxlint-tailwindcss -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install sergioazoc/oxlint-tailwindcss oxlint-tailwindcss --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sergioazoc/oxlint-tailwindcss.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/oxlint-tailwindcss .cursor/skills/oxlint-tailwindcss && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "oxlint-tailwindcss" agent skill from https://github.com/sergioazoc/oxlint-tailwindcss/tree/main/skills/oxlint-tailwindcss into .cursor/skills/oxlint-tailwindcss/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "oxlint-tailwindcss", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/sergioazoc/oxlint-tailwindcss.git --path skills/oxlint-tailwindcss--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add sergioazoc/oxlint-tailwindcss --skill oxlint-tailwindcss -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install sergioazoc/oxlint-tailwindcss oxlint-tailwindcss --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sergioazoc/oxlint-tailwindcss.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/oxlint-tailwindcss .gemini/skills/oxlint-tailwindcss && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "oxlint-tailwindcss" agent skill from https://github.com/sergioazoc/oxlint-tailwindcss/tree/main/skills/oxlint-tailwindcss into .gemini/skills/oxlint-tailwindcss/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "oxlint-tailwindcss", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install sergioazoc/oxlint-tailwindcss oxlint-tailwindcssInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add sergioazoc/oxlint-tailwindcss --skill oxlint-tailwindcss -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/sergioazoc/oxlint-tailwindcss.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/oxlint-tailwindcss .github/skills/oxlint-tailwindcss && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "oxlint-tailwindcss" agent skill from https://github.com/sergioazoc/oxlint-tailwindcss/tree/main/skills/oxlint-tailwindcss into .github/skills/oxlint-tailwindcss/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "oxlint-tailwindcss", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add sergioazoc/oxlint-tailwindcss --skill oxlint-tailwindcss -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install sergioazoc/oxlint-tailwindcss oxlint-tailwindcss --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sergioazoc/oxlint-tailwindcss.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/oxlint-tailwindcss .opencode/skills/oxlint-tailwindcss && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "oxlint-tailwindcss" agent skill from https://github.com/sergioazoc/oxlint-tailwindcss/tree/main/skills/oxlint-tailwindcss into .opencode/skills/oxlint-tailwindcss/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "oxlint-tailwindcss", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
oxlint-tailwindcss- GitHub stars
- 101
- Token cost
- ~1.9k tokens
- SKILL.md length
- 566 words
- Files
- 1
- Repo updated
- First seen
- Licence
- MIT
At a glance
Set up oxlint-tailwindcss — Tailwind CSS v4 lint rules for oxlint — in a project, and act on its diagnostics.
- Works in 4 steps: Check the requirements. Tailwind CSS… → Install, with the project's package… → Find the entry point: the CSS file with… → …
- A project uses Tailwind CSS v4 and oxlint
- SKILL.md covers Set it up, Act on a diagnostic, Fix with --fix and Good to know
- Calls npm and npx
What it does
Oxlint Tailwindcss is an agent skill from sergioazoc/oxlint-tailwindcss. Set up oxlint-tailwindcss — Tailwind CSS v4 lint rules for oxlint — in a project, and act on its diagnostics. Use when a project uses Tailwind CSS v4 and oxlint, when adding Tailwind class linting, or when fixing tailwindcss(...) diagnostics.
Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering Linting and formatting, CSS and styling and Design systems. It works with Tailwind CSS and shadcn/ui. The repository describes itself as: Tailwind CSS v4 lint rules for oxlint that read your design system: unknown, conflicting and deprecated classes, theme colors and class order, with autofixes. The licence is MIT.
When your agent uses it
- A project uses Tailwind CSS v4 and oxlint
- Adding Tailwind class linting
- Fixing tailwindcss(...) diagnostics
Example prompts
- “/oxlint-tailwindcss”
Requirements
- Node.js
Workflow steps
4 steps, taken from the first numbered list in SKILL.md.
- Check the requirements. Tailwind CSS v4.1.15 or newer, with its CSS entry point — Tailwind v3
- Install, with the project's package manager
- Find the entry point: the CSS file with @import "tailwindcss" (often src/index.css,
- Configure .oxlintrc.json with the plugin, the entry point and the recommended rules.
What it can do on your machine
Read from SKILL.md and the folder at commit 1e4b9ee. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
npmnpx
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
oxlint-tailwindcss.pages.dev
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Oxlint Tailwindcss loads about 1.9k tokens when it runs. Until then it costs about 66 tokens; SKILL.md has 566 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from sergioazoc/oxlint-tailwindcss at commit 1e4b9ee, republished under its MIT licence (© sergioazoc). 566 words, ~1,868 tokens.
Download SKILL.mdSave it as
.claude/skills/oxlint-tailwindcss/SKILL.md (or your agent's skills folder).- name
- oxlint-tailwindcss
- description
- Set up oxlint-tailwindcss — Tailwind CSS v4 lint rules for oxlint — in a project, and act on its diagnostics. Use when a project uses Tailwind CSS v4 and oxlint, when adding Tailwind class linting, or when fixing `tailwindcss(...)` diagnostics.
oxlint-tailwindcss
An oxlint plugin that checks Tailwind CSS v4 classes against the project's own design system: that each class exists, that classes don't override each other, that they aren't deprecated, and that colors and values come from the theme. It reads the project's Tailwind build, so it knows its custom utilities, variants and theme. It runs under oxlint only; there is no ESLint version.
Docs: https://oxlint-tailwindcss.pages.dev — every page is also plain markdown at the same path with
.md (https://oxlint-tailwindcss.pages.dev/setup.md), and
https://oxlint-tailwindcss.pages.dev/llms.txt lists them.
Set it up
Check the requirements. Tailwind CSS v4.1.15 or newer, with its CSS entry point — Tailwind v3 and
tailwind.config.jsprojects are not supported. oxlint 1.43.0 or newer, and Node^20.19.0 || >=22.12.0.Install, with the project's package manager:
bash npm install -D oxlint oxlint-tailwindcssFind the entry point: the CSS file with
@import "tailwindcss"(oftensrc/index.css,app/globals.cssorsrc/styles.css). It is required: the plugin never guesses it.Configure
.oxlintrc.jsonwith the plugin, the entry point and the recommended rules.categoriesdon't turn on a JS plugin's rules: only the rules listed run.
<!-- generated:recommended-config -->{
"$schema": "./node_modules/oxlint/configuration_schema.json",
"jsPlugins": ["oxlint-tailwindcss"],
"settings": {
"tailwindcss": {
"entryPoint": "src/styles.css"
}
},
"rules": {
// Correctness
"tailwindcss/no-conflicting-classes": "error",
"tailwindcss/no-contradicting-variants": "warn",
"tailwindcss/no-dark-without-light": "warn",
"tailwindcss/no-duplicate-classes": "warn",
"tailwindcss/no-dynamic-classes": "error",
"tailwindcss/no-unknown-classes": "error",
// Modernization
"tailwindcss/enforce-canonical": "warn",
"tailwindcss/enforce-negative-arbitrary-values": "warn",
"tailwindcss/no-deprecated-classes": "error",
"tailwindcss/no-unnecessary-arbitrary-value": "warn",
// Consistency
"tailwindcss/consistent-variant-order": "warn",
"tailwindcss/enforce-consistent-important-position": "warn",
"tailwindcss/enforce-consistent-variable-syntax": "warn",
"tailwindcss/enforce-shorthand": "warn",
"tailwindcss/enforce-sort-order": "warn",
"tailwindcss/no-unnecessary-whitespace": "warn",
// Design-system guardrails
"tailwindcss/no-hardcoded-colors": "warn"
}
}<!-- /generated:recommended-config -->- Run
npx oxlint. AdesignSystemUnavailablediagnostic means the entry point is wrong or missing: its message says which, and how to fix it.
In a monorepo, map each package's files to its own CSS, or give each package its own
.oxlintrc.json: https://oxlint-tailwindcss.pages.dev/monorepo.md. For shadcn/ui projects, the
combined config with @shadcn/lint is at https://oxlint-tailwindcss.pages.dev/shadcn.md.
Act on a diagnostic
Each message says what is wrong and, where there is one, the replacement. Fix the code, not the
rule: turn a rule off only when the project decided so, and for one line use
// oxlint-disable-next-line tailwindcss/<rule>.
| Diagnostic | What to do |
|---|---|
no-unknown-classes | A typo, or a class from CSS the entry point doesn't import. Use the suggestion (Did you mean …?), or import that CSS from the entry point; allowlist is for classes that are hooks for JavaScript. |
no-conflicting-classes | Two classes set the same property and one always wins. Remove the one the message says has no effect. |
no-deprecated-classes, enforce-canonical | Replace the class with the one the message names; oxlint --fix does it. |
no-dynamic-classes | A class built at runtime (`bg-${color}-500`) gets no CSS. Map each value to a full class name instead. |
no-default-palette, no-hardcoded-colors, no-arbitrary-value | A color or value from outside the theme. Use one of the theme colors the message lists, or a theme token. |
no-dark-without-light | A dark: color with no light one. Add the light-mode class. |
no-borrowed-component-styles | A plain element that rebuilds one of the project's components. Use the component the message names. |
designSystemUnavailable | The design system couldn't load. Fix settings.tailwindcss.entryPoint as the message says. |
Show full SKILL.md (140 more words)Show less
Fix with --fix
oxlint --fix applies each rule's autofix: sorting, duplicates, whitespace, deprecated and
non-canonical names, shorthands. On the shadcn/ui corpus of the benchmark, every class string it
changed kept its style (https://oxlint-tailwindcss.pages.dev/benchmark.md). oxlint applies one fix
per class string per run, so run it again until nothing changes. oxlint --fix --fix-suggestions
also applies suggestions, such as typo corrections: review those, since they change what the classes
do.
Good to know
- Only the
<script>of.vue,.svelteand.astrofiles is linted, not their templates: https://oxlint-tailwindcss.pages.dev/frameworks.md. - Classes are read from
className/class, fromcn(),clsx(),cva(),tv()and the other helpers (~14 callees), and fromtwtemplates;settings.tailwindcssadds others: https://oxlint-tailwindcss.pages.dev/settings.md. - The design system is computed once per entry point and cached on disk; in CI, keep the cache between jobs: https://oxlint-tailwindcss.pages.dev/ci.md.
- It works alongside oxfmt's or prettier-plugin-tailwindcss's class sorting: https://oxlint-tailwindcss.pages.dev/interop.md.
© sergioazoc, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in skills/oxlint-tailwindcss of sergioazoc/oxlint-tailwindcss.
Open the folder on GitHubat commit 1e4b9ee
Compare with similar skills
Oxlint Tailwindcss next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Oxlint Tailwindcss this skillsergioazoc/oxlint-tailwindcss | 101 | — | ~1.9k | Automated safety check: Pass | MIT | |
| Shadcn UIBuilderIO/agent-native | 7.1k | — | ~3k | Automated safety check: Pass | None | |
| UI StylingOhh-889/skyroc | 795 | 13 repos | ~2.5k | Automated safety check: Pass | MIT | |
| Cosscrafter-station/petdex | 4.2k | — | ~1.4k | Automated safety check: Pass | MIT | |
| Avoid AI Designsunkaifei/FlyCms | 656 | — | ~3.5k | Automated safety check: Pass | MIT | |
| Extract DesignManavarya09/design-extract | 4.2k | — | ~786 | Automated safety check: Notes | MIT |
Similar skills
UI Styling
Ohh-889/skyroc
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.
Coss
crafter-station/petdex
Helps implement coss UI components correctly. An agent skill from crafter-station/petdex.
Avoid AI Design
sunkaifei/FlyCms
Audit and rewrite frontend UI to remove generic AI design patterns ("AI slop"), both the first-order defaults (purple gradients, Inter, a centered hero over three cards, untouched shadcn) and the…
Extract Design
Manavarya09/design-extract
Extract the full design language from any website URL. An agent skill from Manavarya09/design-extract.
Unslop UI
JCarterJohnson/vibecoded-design-tells
Strips the cues that make a website read as AI-generated and forces a deliberate, project-specific design choice instead of the model's default.
More from sergioazoc/oxlint-tailwindcss
Write Rule
sergioazoc/oxlint-tailwindcss
Patterns, conventions, and examples for implementing new oxlint Tailwind CSS rules and their tests.
Related
Works with
Categories
Questions about Oxlint Tailwindcss
What does Oxlint Tailwindcss do?
Set up oxlint-tailwindcss — Tailwind CSS v4 lint rules for oxlint — in a project, and act on its diagnostics. Oxlint Tailwindcss is an agent skill from sergioazoc/oxlint-tailwindcss. Set up oxlint-tailwindcss — Tailwind CSS v4 lint rules for oxlint — in a project, and act on its diagnostics.
When should I use Oxlint Tailwindcss?
Oxlint Tailwindcss fits situations like: A project uses Tailwind CSS v4 and oxlint; adding Tailwind class linting; fixing tailwindcss(...) diagnostics.
How do I install Oxlint Tailwindcss in Claude Code?
Run `npx skills add sergioazoc/oxlint-tailwindcss --skill oxlint-tailwindcss -a claude-code`. Or copy the skill folder (skills/oxlint-tailwindcss in sergioazoc/oxlint-tailwindcss) into .claude/skills/oxlint-tailwindcss in your project. Claude Code loads it when a task matches its description.
How do I install Oxlint Tailwindcss in Codex?
Run `npx skills add sergioazoc/oxlint-tailwindcss --skill oxlint-tailwindcss -a codex`. Or copy the skill folder (skills/oxlint-tailwindcss in sergioazoc/oxlint-tailwindcss) into .agents/skills/oxlint-tailwindcss in your project. Codex loads it when a task matches its description.
Can I use Oxlint Tailwindcss in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add sergioazoc/oxlint-tailwindcss --skill oxlint-tailwindcss -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/oxlint-tailwindcss, .gemini/skills/oxlint-tailwindcss, .github/skills/oxlint-tailwindcss and .opencode/skills/oxlint-tailwindcss in your project.
What does Oxlint Tailwindcss need to run?
Going by SKILL.md and its folder, Oxlint Tailwindcss needs the command-line tools its instructions call (npm and npx). Our summary lists: Node.js.
Does Oxlint Tailwindcss access the network?
SKILL.md names 1 domain. As links in the text: oxlint-tailwindcss.pages.dev. This is read from the text; nothing was executed.
Is Oxlint Tailwindcss safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Oxlint Tailwindcss use?
Oxlint Tailwindcss is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Oxlint Tailwindcss use?
About 1.9k tokens (SKILL.md is roughly 7.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Oxlint Tailwindcss?
Skills that share tags, products or a category with Oxlint Tailwindcss: Shadcn UI (BuilderIO/agent-native, 7.1k stars), UI Styling (Ohh-889/skyroc, 795 stars), Coss (crafter-station/petdex, 4.2k stars) and Avoid AI Design (sunkaifei/FlyCms, 656 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Oxlint Tailwindcss?
sergioazoc (a GitHub user) maintains it in sergioazoc/oxlint-tailwindcss, which has 101 GitHub stars. The repository was last updated on October 10, 2026.
Source: sergioazoc/oxlint-tailwindcss on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.