tailwind-css

Name: tailwind-css
Author: PaulRBerg

2.3kinstalls3forks

How to install tailwind-css?

paulrberg/agent-skills/tailwind-css

$npx -y skills add PaulRBerg/agent-skills --skill tailwind-css

Installs into the current project.

Summary

Use for Tailwind v4 styling: add/fix classes, configure or migrate Tailwind, use tailwind-variants, or tw-animate-css.

Files · 1

View on GitHub

SKILL.md

1	# Tailwind CSS
2
3	Style within the installed Tailwind version, existing design tokens, component patterns, and product context.
4
5	## Authority and Defaults
6
7	- Inspect package versions, CSS entrypoints, theme declarations, shared components, class-merging utilities, and nearby
8	UI before editing. Those are authoritative.
9	- Apply this catalog's preferences only where the project is silent. Read
10	[references/coding-preferences.md](references/coding-preferences.md) for that fallback style.
11	- Prefer existing semantic tokens and components over arbitrary values, new colors, or one-off utilities.
12	- Preserve responsive states, interaction states, accessibility, and dark-mode conventions. Do not add decorative UI or
13	redesign beyond the request.
14	- Use CSS Modules only when the behavior is materially clearer than utilities; preserve any project-specific Tailwind
15	reference mechanism.
16
17	## Routing
18
19	- For v4 configuration, migration, removed utilities, variables, gradients, or CSS-first directives, read
20	`references/tailwind-v4-rules.md` after confirming v4 is installed.
21	- For component variants or slots with `tailwind-variants`, read `references/tailwind-variants.md`.
22	- For `tw-animate-css`, read `references/tw-animate-css.md`.
23	- For Tailwind ESLint integration, read `references/eslint.md`.
24
25	Do not apply v4 syntax to an older project merely because this skill targets v4. If the installed version differs, use
26	its official documentation or ask whether migration is intended.
27
28	## Workflow
29
30	1. Define the visual outcome and affected states from the request and product context.
31	2. Reuse local tokens, spacing, typography, breakpoints, components, and variant conventions. Make the smallest
32	class/config change that achieves the outcome.
33	3. Run the repository's relevant lint/type/build checks.
34	4. Render the affected screen or component at representative viewport sizes and inspect it visually, including changed
35	interaction and theme states. Fix visible regressions before completion.
36
37	Completion requires code checks plus rendered inspection; textual class review alone is insufficient.
38
39	Finish with `### 🎨 Tailwind — ✅ styling updated` after edits or `### 🎨 Tailwind — 🔎 inspected, no files written` for
40	read-only work, a compact viewport/theme/changed-states/result table, and separate `### 🧪 Code checks` and
41	`### 🔎 Rendered inspection` evidence. Add `### ⚠️ Remaining` only when non-empty. Do not inject decorative emoji into
42	source classes, product copy, or snapshots unless the request calls for it; keep commands and diagnostics exact.

People who liked this also viewed

6 picks

Type

web-design-guidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".SkillsJul 2026483k29k
lark-slides飞书幻灯片：创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面（创建、删除、读取、局部替换）。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时，也应直接使用本 skill，不要因为域名不是飞书而回退到 WebFetch；路由依据是 URL 路径模式和 token，而不是域名。不负责：云文档内容编辑（走 SkillsJul 2026332k16k
design-taste-frontendTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop SkillsJul 2026280k66k
ui-ux-pro-maxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presSkillsJul 2026280k109k
caveman-helpQuick-reference card for all caveman modes, skills, and commands. One-shot display, not a persistent mode. Trigger: /caveman-help, "caveman help", "what caveman commands", "how do I use caveman".SkillsJul 2026249k92k
codebase-designShared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-nSkillsJul 2026225k182k

tailwind-css

2.3kinstalls3forks

View on GitHub

How to install tailwind-css?

paulrberg/agent-skills/tailwind-css

$npx -y skills add PaulRBerg/agent-skills --skill tailwind-css

Installs into the current project.

Summary

Use for Tailwind v4 styling: add/fix classes, configure or migrate Tailwind, use tailwind-variants, or tw-animate-css.

Files · 1

View on GitHub

SKILL.md

1	# Tailwind CSS
2
3	Style within the installed Tailwind version, existing design tokens, component patterns, and product context.
4
5	## Authority and Defaults
6
7	- Inspect package versions, CSS entrypoints, theme declarations, shared components, class-merging utilities, and nearby
8	UI before editing. Those are authoritative.
9	- Apply this catalog's preferences only where the project is silent. Read
10	[references/coding-preferences.md](references/coding-preferences.md) for that fallback style.
11	- Prefer existing semantic tokens and components over arbitrary values, new colors, or one-off utilities.
12	- Preserve responsive states, interaction states, accessibility, and dark-mode conventions. Do not add decorative UI or
13	redesign beyond the request.
14	- Use CSS Modules only when the behavior is materially clearer than utilities; preserve any project-specific Tailwind
15	reference mechanism.
16
17	## Routing
18
19	- For v4 configuration, migration, removed utilities, variables, gradients, or CSS-first directives, read
20	`references/tailwind-v4-rules.md` after confirming v4 is installed.
21	- For component variants or slots with `tailwind-variants`, read `references/tailwind-variants.md`.
22	- For `tw-animate-css`, read `references/tw-animate-css.md`.
23	- For Tailwind ESLint integration, read `references/eslint.md`.
24
25	Do not apply v4 syntax to an older project merely because this skill targets v4. If the installed version differs, use
26	its official documentation or ask whether migration is intended.
27
28	## Workflow
29
30	1. Define the visual outcome and affected states from the request and product context.
31	2. Reuse local tokens, spacing, typography, breakpoints, components, and variant conventions. Make the smallest
32	class/config change that achieves the outcome.
33	3. Run the repository's relevant lint/type/build checks.
34	4. Render the affected screen or component at representative viewport sizes and inspect it visually, including changed
35	interaction and theme states. Fix visible regressions before completion.
36
37	Completion requires code checks plus rendered inspection; textual class review alone is insufficient.
38
39	Finish with `### 🎨 Tailwind — ✅ styling updated` after edits or `### 🎨 Tailwind — 🔎 inspected, no files written` for
40	read-only work, a compact viewport/theme/changed-states/result table, and separate `### 🧪 Code checks` and
41	`### 🔎 Rendered inspection` evidence. Add `### ⚠️ Remaining` only when non-empty. Do not inject decorative emoji into
42	source classes, product copy, or snapshots unless the request calls for it; keep commands and diagnostics exact.

People who liked this also viewed

6 picks

Type