From d3ae074456030556e2b51ef2478065c9bc88bcb0 Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Tue, 19 May 2026 21:16:10 +0800
Subject: [PATCH] chore(web): remove generic tailwind skill (#36402)
---
.../skills/how-to-write-component/SKILL.md | 2 +-
.agents/skills/tailwind-css-rules/SKILL.md | 367 ------------------
2 files changed, 1 insertion(+), 368 deletions(-)
delete mode 100644 .agents/skills/tailwind-css-rules/SKILL.md
diff --git a/.agents/skills/how-to-write-component/SKILL.md b/.agents/skills/how-to-write-component/SKILL.md
index ac77112993..55ad08941c 100644
--- a/.agents/skills/how-to-write-component/SKILL.md
+++ b/.agents/skills/how-to-write-component/SKILL.md
@@ -12,7 +12,7 @@ Use this as the decision guide for React/TypeScript component structure. Existin
- Search before adding UI, hooks, helpers, or styling patterns. Reuse existing base components, feature components, hooks, utilities, and design styles when they fit.
- Group code by feature workflow, route, or ownership area: components, hooks, local types, query helpers, atoms, constants, and small utilities should live near the code that changes with them.
- Promote code to shared only when multiple verticals need the same stable primitive. Otherwise keep it local and compose shared primitives inside the owning feature.
-- Use Tailwind CSS v4.1+ rules via the `tailwind-css-rules` skill. Prefer v4 utilities, `gap`, `text-size/line-height`, `min-h-dvh`, and avoid deprecated utilities and `@apply`.
+- Follow Dify's CSS-first Tailwind v4 contract from `packages/dify-ui/README.md` and `packages/dify-ui/AGENTS.md`. Prefer design-system tokens, utilities, and radius mappings over generic Tailwind guidance.
## Ownership
diff --git a/.agents/skills/tailwind-css-rules/SKILL.md b/.agents/skills/tailwind-css-rules/SKILL.md
deleted file mode 100644
index 3528548036..0000000000
--- a/.agents/skills/tailwind-css-rules/SKILL.md
+++ /dev/null
@@ -1,367 +0,0 @@
----
-name: tailwind-css-rules
-description: Tailwind CSS v4.1+ rules and best practices. Use when writing, reviewing, refactoring, or upgrading Tailwind CSS classes and styles, especially v4 utility migrations, layout spacing, typography, responsive variants, dark mode, gradients, CSS variables, and component styling.
----
-
-# Tailwind CSS Rules and Best Practices
-
-## Core Principles
-
-- **Always use Tailwind CSS v4.1+** - Ensure the codebase is using the latest version
-- **Do not use deprecated or removed utilities** - ALWAYS use the replacement
-- **Never use `@apply`** - Use CSS variables, the `--spacing()` function, or framework components instead
-- **Check for redundant classes** - Remove any classes that aren't necessary
-- **Group elements logically** to simplify responsive tweaks later
-
-## Upgrading to Tailwind CSS v4
-
-### Before Upgrading
-
-- **Always read the upgrade documentation first** - Read https://tailwindcss.com/docs/upgrade-guide and https://tailwindcss.com/blog/tailwindcss-v4 before starting an upgrade.
-- Ensure the git repository is in a clean state before starting
-
-### Upgrade Process
-
-1. Run the upgrade command: `npx @tailwindcss/upgrade@latest` for both major and minor updates
-2. The tool will convert JavaScript config files to the new CSS format
-3. Review all changes extensively to clean up any false positives
-4. Test thoroughly across your application
-
-## Breaking Changes Reference
-
-### Removed Utilities (NEVER use these in v4)
-
-| ❌ Deprecated | ✅ Replacement |
-| ----------------------- | ------------------------------------------------- |
-| `bg-opacity-*` | Use opacity modifiers like `bg-black/50` |
-| `text-opacity-*` | Use opacity modifiers like `text-black/50` |
-| `border-opacity-*` | Use opacity modifiers like `border-black/50` |
-| `divide-opacity-*` | Use opacity modifiers like `divide-black/50` |
-| `ring-opacity-*` | Use opacity modifiers like `ring-black/50` |
-| `placeholder-opacity-*` | Use opacity modifiers like `placeholder-black/50` |
-| `flex-shrink-*` | `shrink-*` |
-| `flex-grow-*` | `grow-*` |
-| `overflow-ellipsis` | `text-ellipsis` |
-| `decoration-slice` | `box-decoration-slice` |
-| `decoration-clone` | `box-decoration-clone` |
-
-### Renamed Utilities
-
-Use the v4 name when migrating code that still carries Tailwind v3 semantics. Do not blanket-replace existing v4 classes: classes such as `rounded-sm`, `shadow-sm`, `ring-1`, and `ring-2` are valid in this codebase when they intentionally represent the current design scale.
-
-| ❌ v3 pattern | ✅ v4 pattern |
-| ------------------- | -------------------------------------------------- |
-| `bg-gradient-*` | `bg-linear-*` |
-| old shadow scale | verify against the current Tailwind/design scale |
-| old blur scale | verify against the current Tailwind/design scale |
-| old radius scale | use the Dify radius token mapping when applicable |
-| `outline-none` | `outline-hidden` |
-| bare `ring` utility | use an explicit ring width such as `ring-1`/`ring-2`/`ring-3` |
-
-For Figma radius tokens, follow `packages/dify-ui/AGENTS.md`. For example, `--radius/xs` maps to `rounded-sm`; do not rewrite it to `rounded-xs`.
-
-## Layout and Spacing Rules
-
-### Flexbox and Grid Spacing
-
-#### Always use gap utilities for internal spacing
-
-Gap provides consistent spacing without edge cases (no extra space on last items). It's cleaner and more maintainable than margins on children.
-
-```html
-
-
-
Item 1
-
Item 2
-
Item 3
-
-
-
-
-
-
Item 1
-
Item 2
-
Item 3
-
-```
-
-#### Gap vs Space utilities
-
-- **Never use `space-x-*` or `space-y-*` in flex/grid layouts** - always use gap
-- Space utilities add margins to children and have issues with wrapped items
-- Gap works correctly with flex-wrap and all flex directions
-
-```html
-
-
-
-
-
-
-
-
-
-```
-
-### General Spacing Guidelines
-
-- **Prefer top and left margins** over bottom and right margins (unless conditionally rendered)
-- **Use padding on parent containers** instead of bottom margins on the last child
-- **Always use `min-h-dvh` instead of `min-h-screen`** - `min-h-screen` is buggy on mobile Safari
-- **Prefer `size-*` utilities** over separate `w-*` and `h-*` when setting equal dimensions
-- For max-widths, prefer the container scale (e.g., `max-w-2xs` over `max-w-72`)
-
-## Typography Rules
-
-### Line Heights
-
-- **Never use `leading-*` classes** - Always use line height modifiers with text size
-- **Always use fixed line heights from the spacing scale** - Don't use named values
-
-```html
-
-
Text with separate line height
-
Text with named line height
-
-
-
Text with line height modifier
-
Text with specific line height
-```
-
-### Font Size Reference
-
-Be precise with font sizes - know the actual pixel values:
-
-- `text-xs` = 12px
-- `text-sm` = 14px
-- `text-base` = 16px
-- `text-lg` = 18px
-- `text-xl` = 20px
-
-## Color and Opacity
-
-### Opacity Modifiers
-
-**Never use `bg-opacity-*`, `text-opacity-*`, etc.** - use the opacity modifier syntax:
-
-```html
-
-
Old opacity syntax
-
-
-
Modern opacity syntax
-```
-
-## Responsive Design
-
-### Breakpoint Optimization
-
-- **Check for redundant classes across breakpoints**
-- **Only add breakpoint variants when values change**
-
-```html
-
-
-
-
-
-
-
-
-
-```
-
-## Dark Mode
-
-### Dark Mode Best Practices
-
-- Use the plain `dark:` variant pattern
-- Put light mode styles first, then dark mode styles
-- Ensure `dark:` variant comes before other variants
-
-```html
-
-
-
-
-```
-
-## Gradient Utilities
-
-- **ALWAYS Use `bg-linear-*` instead of `bg-gradient-*` utilities** - The gradient utilities were renamed in v4
-- Use the new `bg-radial` or `bg-radial-[]` to create radial gradients
-- Use the new `bg-conic` or `bg-conic-*` to create conic gradients
-
-```html
-
-
-
-
-
-
-
-```
-
-## Working with CSS Variables
-
-### Accessing Theme Values
-
-Tailwind CSS v4 exposes all theme values as CSS variables:
-
-```css
-/* Access colors, and other theme values */
-.custom-element {
- background: var(--color-red-500);
- border-radius: var(--radius-lg);
-}
-```
-
-### The `--spacing()` Function
-
-Use the dedicated `--spacing()` function for spacing calculations:
-
-```css
-.custom-class {
- margin-top: calc(100vh - --spacing(16));
-}
-```
-
-### Extending theme values
-
-Use CSS to extend theme values:
-
-```css
-@import "tailwindcss";
-
-@theme {
- --color-mint-500: oklch(0.72 0.11 178);
-}
-```
-
-```html
-
-
-
-```
-
-## New v4 Features
-
-### Container Queries
-
-Use the `@container` class and size variants:
-
-```html
-
-
-
-
-
-
-
-
-```
-
-### Container Query Units
-
-Use container-based units like `cqw` for responsive sizing:
-
-```html
-
-
Responsive to container width
-
-```
-
-### Text Shadows (v4.1)
-
-Use text-shadow-\* utilities from text-shadow-2xs to text-shadow-lg:
-
-```html
-
-
Large shadow
-
Small shadow with opacity
-```
-
-### Masking (v4.1)
-
-Use the new composable mask utilities for image and gradient masks:
-
-```html
-
-
Top fade
-
Bottom gradient
-
- Fade from white to black
-
-
-
-
- Radial mask
-
-```
-
-## Component Patterns
-
-### Avoiding Utility Inheritance
-
-Don't add utilities to parents that you override in children:
-
-```html
-
-
-
Centered Heading
-
Left-aligned content
-
-
-
-
-
Centered Heading
-
Left-aligned content
-
-```
-
-### Component Extraction
-
-- Extract repeated patterns into framework components, not CSS classes
-- Keep utility classes in templates/JSX
-- Use data attributes for complex state-based styling
-
-## CSS Best Practices
-
-### Nesting Guidelines
-
-- Use nesting when styling both parent and children
-- Avoid empty parent selectors
-
-```css
-/* ✅ Good nesting - parent has styles */
-.card {
- padding: --spacing(4);
-
- > .card-title {
- font-weight: bold;
- }
-}
-
-/* ❌ Avoid empty parents */
-ul {
- > li {
- /* Parent has no styles */
- }
-}
-```
-
-## Common Pitfalls to Avoid
-
-1. **Using old opacity utilities** - Always use `/opacity` syntax like `bg-red-500/60`
-2. **Redundant breakpoint classes** - Only specify changes
-3. **Space utilities in flex/grid** - Always use gap
-4. **Leading utilities** - Use line-height modifiers like `text-sm/6`
-5. **Arbitrary values** - Use the design scale
-6. **@apply directive** - Use components or CSS variables
-7. **min-h-screen on mobile** - Use min-h-dvh
-8. **Separate width/height** - Use size utilities when equal
-9. **Arbitrary values** - Always use Tailwind's predefined scale whenever possible (e.g., use `ml-4` over `ml-[16px]`)