From 56a64601b3e57f1afb495b7f8f86dec44fe30f6a Mon Sep 17 00:00:00 2001
From: Stephen Zhou <38493346+hyoban@users.noreply.github.com>
Date: Sat, 9 May 2026 17:08:14 +0800
Subject: [PATCH] tweak style
---
.../skills/how-to-write-component/SKILL.md | 1 +
.agents/skills/tailwind-css-rules/SKILL.md | 370 ++++++++++++++++++
.../deployments/list/instance-card.tsx | 36 +-
3 files changed, 389 insertions(+), 18 deletions(-)
create 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 e7de1fe09f..9551a5e8c0 100644
--- a/.agents/skills/how-to-write-component/SKILL.md
+++ b/.agents/skills/how-to-write-component/SKILL.md
@@ -10,6 +10,7 @@ Do not copy existing code patterns blindly. Existing implementations are referen
## Reuse Existing Implementations
- Before creating new UI, hooks, helpers, or styling patterns, search for and reuse existing base components, feature components, shared hooks, utilities, and established design styles. Add new implementations only when the existing ones cannot express the required behavior cleanly.
+- When styling components with Tailwind CSS, use Tailwind CSS v4.1+ syntax and the `tailwind-css-rules` skill: prefer v4 utility names, opacity modifiers, `gap`, `text-size/line-height`, `min-h-dvh`, and avoid deprecated utilities and `@apply`.
## Feature Verticals And Local Ownership
diff --git a/.agents/skills/tailwind-css-rules/SKILL.md b/.agents/skills/tailwind-css-rules/SKILL.md
new file mode 100644
index 0000000000..0bbc20c21c
--- /dev/null
+++ b/.agents/skills/tailwind-css-rules/SKILL.md
@@ -0,0 +1,370 @@
+---
+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 (ALWAYS use the v4 name)
+
+| ❌ v3 | ✅ v4 |
+| ------------------ | ------------------ |
+| `bg-gradient-*` | `bg-linear-*` |
+| `shadow-sm` | `shadow-xs` |
+| `shadow` | `shadow-sm` |
+| `drop-shadow-sm` | `drop-shadow-xs` |
+| `drop-shadow` | `drop-shadow-sm` |
+| `blur-sm` | `blur-xs` |
+| `blur` | `blur-sm` |
+| `backdrop-blur-sm` | `backdrop-blur-xs` |
+| `backdrop-blur` | `backdrop-blur-sm` |
+| `rounded-sm` | `rounded-xs` |
+| `rounded` | `rounded-sm` |
+| `outline-none` | `outline-hidden` |
+| `ring` | `ring-3` |
+
+## 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]`)
diff --git a/web/features/deployments/list/instance-card.tsx b/web/features/deployments/list/instance-card.tsx
index dcff431ad9..3bd37cb91c 100644
--- a/web/features/deployments/list/instance-card.tsx
+++ b/web/features/deployments/list/instance-card.tsx
@@ -84,7 +84,7 @@ export function InstanceCard({ app }: {
const statusTooltip = primaryStatus === 'none'
? t('card.tooltip.notDeployed')
: (
-