Mplan/opencloud
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: rename color-system skill to opencloud-style, add .claude to gitignore

Browse Source
This commit is contained in:
Mplan
2026-05-24 16:26:51 +08:00
parent 6fadd63336
commit 09841c06a6
3 changed files with 355 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.agents/skills/opencloud-color-system/SKILL.md
-74
View File
@@ -1,74 +0,0 @@
---
name: opencloud-color-system
description: "Use when modifying OpenCloud UI colors, visual hierarchy, Tailwind classes, buttons, cards, headers, gradients, status chips, or page-level visual design. Ensures the project keeps its current fresh sky/teal/white visual language and avoids inconsistent dark or purple defaults."
---
# OpenCloud Color System
Use this skill whenever changing OpenCloud visual design, component styling, or Tailwind color classes.
## Visual Direction
OpenCloud should feel like a clean sky atlas: airy, fresh, bright, and observational.
- Base surfaces: `white`, `slate-50`, `sky-50`, soft translucent white (`bg-white/80`, `bg-white/88`).
- Main accent: teal/cyan for navigation, identity, account surfaces.
- Secondary accent: sky blue for upload and action highlights.
- Supporting accent: amber only for rarity, badges, pending/review states.
- Danger accent: rose/red only for destructive or rejected states.
- Avoid purple as a default accent.
- Avoid black selected states except for text or rare high-contrast badges.
## Core Palette
Use these Tailwind families first:
- `slate`: text, borders, neutral panels.
- `sky`: page gradients, upload/action emphasis, map/cloud atmosphere.
- `teal`: navigation selected states, account identity, calm success-adjacent UI.
- `cyan`: subtle sky gradients and avatar/logo surfaces.
- `emerald`: explicit success/approved state only.
- `amber`: pending/review/uncommon rarity.
- `rose`: rejected/destructive/rare rarity.
Preferred combinations:
- Page hero: `bg-[linear-gradient(180deg,#e0f2fe_0%,#f8fafc_100%)]`
- Soft app page: `bg-[linear-gradient(180deg,#f0fdfa_0%,#f8fafc_100%)]`
- Brand chip/avatar: `bg-[linear-gradient(135deg,#ecfeff_0%,#ccfbf1_100%)]`
- Selected nav: `bg-teal-100 text-teal-800 ring-1 ring-teal-200`
- Upload button: `border-sky-200 bg-sky-100 text-sky-800 shadow-[4px_4px_0_0_rgba(14,165,233,0.14)]`
## Component Rules
- Header navigation selected state should stay teal, not black.
- Upload action should stay visually distinct from nav, preferably sky blue.
- Username/account entry should be light and calm: white/teal, subtle border, subtle shadow.
- Cards should generally use `bg-white`, `border-slate-200`, and light offset shadows.
- Use gradients for page introductions instead of generic rounded white rectangles.
- When adding hover states, prefer light fills (`hover:bg-teal-50`, `hover:bg-sky-50`) over dark inversion.
## Status Colors
- Approved/success: `emerald-100`, `emerald-700`.
- Pending/review: `amber-100`, `amber-700`.
- Rejected/destructive: `rose-100`, `rose-700` or Naive UI `type="error"`.
- Hidden/private/neutral: `slate-100`, `slate-600`.
## Anti-Patterns
- Do not use purple as a fallback visual direction.
- Do not use `bg-slate-900 text-white` for ordinary selected navigation.
- Do not introduce dark-mode-heavy sections unless the surrounding page already uses that language.
- Do not overuse rounded rectangles; the project has been intentionally moving toward sharper, atlas-like panels.
- Do not mix random accent colors within the same feature. Pick one accent family and keep it consistent.
## Validation
After color/style changes, run:
```bash
npx vue-tsc -b
```
Run `npm run build` if the change touches routes, imported components, or package dependencies.
.agents/skills/opencloud-style/SKILL.md
+354
View File
@@ -0,0 +1,354 @@
---
name: opencloud-style
description: "Use when modifying OpenCloud visual design, Tailwind classes, component styling, layout, typography, or page-level visual hierarchy. Ensures the project keeps its current clean sky-atlas visual language — airy, fresh, bright, observational — and avoids inconsistent dark or purple defaults."
---
# OpenCloud Visual Style
Use this skill whenever changing OpenCloud visual design, component styling, Tailwind classes, layout, typography, or any page-level appearance.
## Visual Direction
OpenCloud should feel like a clean sky atlas: airy, fresh, bright, and observational.
- Base surfaces: `white`, `slate-50`, `sky-50`, soft translucent white (`bg-white/80`, `bg-white/88`).
- Main accent: teal/cyan for navigation, identity, account surfaces.
- Secondary accent: sky blue for upload and action highlights.
- Supporting accent: amber only for rarity, badges, pending/review states.
- Danger accent: rose/red only for destructive or rejected states.
- Avoid purple as a default accent.
- Avoid black selected states except for text or rare high-contrast badges.
---
## Typography
**Font stack** (`src/style.css`, `App.vue`):
```
"IBM Plex Sans", "Noto Sans SC", "PingFang SC", sans-serif
```
Monospace: `"IBM Plex Mono", "SFMono-Regular", monospace`
**Type scale:**
| Size | Use |
|------|-----|
| `text-[11px]` | Header subtitle, heatmap weekday labels |
| `text-xs` | Uppercase section labels, captions, metadata, tags, help text |
| `text-sm` | Body text, descriptions, nav items, form labels, detail sections |
| `text-base` | Hero description paragraphs |
| `text-lg` | Logo brand name, card titles, item counters |
| `text-xl` | Modal titles, subsection headings, stat cards |
| `text-2xl` | Subsection headings, stat values, settings section titles |
| `text-3xl` | Stat values, avatar initials |
| `text-4xl` | Page H1 headings (all page heroes) |
| `text-5xl` | Login/Register hero text only |
| `text-6xl`+ | Decorative single characters, error page emoji |
**Font weights:**
- `font-medium` (500) — body text, nav items, form labels, tags
- `font-semibold` (600) — modal titles, item names, emphasis
- `font-bold` (700) — headings, stat values, card titles
- `font-black` (900) — Login/Register hero only, with `leading-[1.05]`
**Letter tracking:**
| Tracking | Where |
|----------|-------|
| `tracking-[0.12em]` | Nav links, upload/button text (uppercase) |
| `tracking-[0.18em]` | Info panel section labels |
| `tracking-[0.20em]` | Stat card labels |
| `tracking-[0.22em]` | Header subtitle, modal subtitle, quick-upload header |
| `tracking-[0.24em]` | Page hero section labels |
| `tracking-[0.26em]` | Login/Register hero labels |
---
## Border Radius
**All border-radius is `0px` by default** — enforced via Naive UI theme override and global CSS:
```css
[class~='rounded'], [class*='rounded-'] { border-radius: 0 !important; }
```
Only exceptions (all `!important` or explicit inline):
- Close/map buttons: `rounded-full` / `border-radius: 9999px`
- ImageDetailModal shell: `rounded-[30px]`
- MapView info panel cards: `rounded-2xl`
- MiniLocationMap marker dot: `rounded-full`
- UploadView native inputs: `rounded-lg`
---
## Shadows
**Signature pattern: hard offset box shadows** — `shadow-[Xpx_Xpx_0_0_rgba(...)]` with zero blur.
| Shadow | Offset | Use |
|--------|--------|-----|
| `shadow-[3px_3px_0_0_rgba(...)]` | 3/3 | Small header buttons, login button |
| `shadow-[4px_4px_0_0_rgba(...)]` | 4/4 | Logo box, primary CTAs, hidden header, profile avatar |
| `shadow-[6px_6px_0_0_rgba(...)]` | 6/6 | Navigation bar, search box |
| `shadow-[8px_8px_0_0_rgba(...)]` | 8/8 | Dropdown menus, archive panel, account card |
| `shadow-[10px_10px_0_0_rgba(...)]` | 10/10 | Login/Register hero sections |
| `shadow-[12px_12px_0_0_rgba(...)]` | 12/12 | Login/Register cards, CommunityView section, AuthConfirm card |
**Shadow colors by context:**
- `rgba(15,23,42,...)` — slate-900, neutral (most common)
- `rgba(14,165,233,...)` — sky-500 (sky-colored buttons)
- `rgba(20,184,166,...)` — teal-500 (teal accents)
**Standard Tailwind shadows** also used sparingly:
- `shadow-sm` — stat cards, gallery cards, encyclopedia cards
- `shadow-lg` — cloud card hover lift
- `shadow-2xl` — modal shells
---
## Gradients
All page backgrounds use gradients — avoid flat single-color backgrounds.
| Gradient | Where |
|----------|-------|
| `linear-gradient(180deg,#e0f2fe_0%,#f8fafc_100%)` | Page hero sections (standard) |
| `linear-gradient(180deg,#f0fdfa_0%,#f8fafc_100%)` | Community page, soft app pages |
| `linear-gradient(135deg,#f0fdfa_0%,#fff_48%,#eff6ff_100%)` | Login hero |
| `linear-gradient(135deg,#eff6ff_0%,#fff_42%,#f0fdfa_100%)` | Register hero |
| `linear-gradient(180deg,#f8fafc_0%,#eef6ff_55%,#f8fafc_100%)` | Admin page |
| `linear-gradient(135deg,#ecfeff_0%,#ccfbf1_100%)` | Brand chip/avatar |
| `linear-gradient(180deg,#f0fdfa_0%,#fff_100%)` | Account card header |
**App shell background** (`App.vue`):
```
radial-gradient(circle_at_top_left, rgba(12,148,136,0.12), transparent 28%)
linear-gradient(180deg, #f8fbfd 0%, #eef4f8 100%)
```
Plus a dotted grid overlay: `bg-[size:32px_32px] opacity-35`.
**Body background** (`style.css`):
```
linear-gradient(180deg, rgba(15,23,42,0.02), rgba(15,23,42,0)), #eef4f8
```
---
## Layout
**Page max-widths:**
- `max-w-7xl` — AppHeader, GalleryView, AdminView
- `max-w-6xl` — UploadView, ProfileView, EncyclopediaView
- `max-w-4xl` — ProfileSettingsView, CommunityView
- `max-w-3xl` — QuickUploadModal, MapPickerModal, AuthConfirmView
- `max-w-2xl` — ResetPasswordView, NotFoundView, ForbiddenView, CloudEditModal
**Page hero pattern** (consistent across all views):
```
border-b border-sky-100 bg-[linear-gradient(180deg,#e0f2fe_0%,#f8fafc_100%)]
max-w-{6xl|7xl} mx-auto px-4 py-10
text-sm font-medium uppercase tracking-[0.24em] text-sky-700 (subtitle)
h1 mt-3 text-4xl font-bold text-slate-900 (title)
p mt-4 max-w-2xl text-sm leading-7 text-slate-600 (description)
```
**Horizontal padding:** `px-4` / `sm:px-6` / `lg:px-8`
**Column systems:**
- Gallery masonry: `columns-2 gap-3 md:columns-3 xl:columns-4 [column-gap:0.75rem]`
- Card grids: `gap-4 md:grid-cols-2 xl:grid-cols-3` or `gap-4 md:grid-cols-4`
- Two-column splits: `lg:grid-cols-[1.1fr_0.9fr]`, `lg:grid-cols-[1.4fr_0.9fr]`
**Gap scale:** `gap-4`, `gap-5`, `gap-6` for card grids; `gap-2` for nav items; `space-y-6`/`space-y-8` between sections.
---
## Component Conventions
### Buttons
**Primary CTA (upload, action):**
```
inline-flex h-8 items-center border border-sky-200 bg-sky-100 px-3
text-sm font-medium uppercase tracking-[0.12em] text-sky-800
shadow-[4px_4px_0_0_rgba(14,165,233,0.14)]
transition-colors hover:bg-sky-50 hover:text-sky-900
```
Mobile: `h-8 md:h-10 md:px-4`
**Secondary/neutral:**
```
inline-flex h-8 items-center border border-slate-200 bg-white/80 px-3
text-sm font-medium text-slate-700
shadow-[3px_3px_0_0_rgba(15,23,42,0.06)]
hover:border-teal-200 hover:bg-teal-50 hover:text-teal-800
```
**Danger/delete:** `text-rose-600 hover:bg-rose-50 hover:text-rose-700`
**Map floating buttons:** `w-10 h-10 bg-white rounded-lg shadow-md flex items-center justify-center hover:bg-gray-50`
**Naive UI buttons** use `secondary strong` as default; `type="primary"` for primary actions; `block size="large"` for block forms.
### Cards
**Standard card:**
```
border bg-white text-left shadow-sm
transition-all hover:-translate-y-1 hover:shadow-lg
```
**Encyclopedia unlocked variant:** `border-amber-300 shadow-amber-100/60`
**Naive UI NCard:** `class="border border-slate-200 shadow-sm"`
### Modals
**Overlay:** `fixed inset-0 z-[110|130] bg-slate-950/60` (or `bg-black/85` for image detail)
**Shell:** `bg-white shadow-2xl` with max-w matching content width. ImageDetailModal uses `rounded-[30px]`; others are square.
**Close button:** Circular (`rounded-full`, `border-radius: 9999px`), semi-transparent background.
**Sections:** `border-b border-slate-200` separates header/body/footer.
### Inputs & Forms
**Native HTML inputs:**
```
border border-slate-300 px-3 py-2.5 text-sm
focus:border-sky-500 focus:outline-none focus:ring-2 focus:ring-sky-500
```
**Labels:** `block text-sm font-medium text-slate-700 mb-1`
**Required marker:** `<span class="text-red-500">*</span>`
**Error text:** `text-sm text-red-500 mt-1`
**Checkboxes:** `h-5 w-5 border-slate-300 text-sky-500 focus:ring-sky-500`
### Tags & Badges
All use `inline-flex border px-3 py-1 text-xs font-medium` with color variants:
- `common`: `bg-sky-100 text-sky-700 border-sky-200`
- `uncommon`: `bg-amber-100 text-amber-700 border-amber-200`
- `rare`: `bg-rose-100 text-rose-700 border-rose-200`
- `approved`/`success`: `bg-emerald-100 text-emerald-700 border-emerald-200`
- `pending`: `bg-amber-100 text-amber-700 border-amber-200`
- `rejected`: `bg-rose-100 text-rose-700 border-rose-200`
- `hidden`/neutral: `bg-slate-100 text-slate-600`
### Menus & Dropdowns
**Account dropdown:**
```
border border-slate-200 bg-white shadow-[8px_8px_0_0_rgba(15,23,42,0.08)]
```
**Menu items:**
```
flex items-center gap-3 px-4 py-2.5 text-sm font-medium text-slate-700
transition-colors hover:bg-teal-50 hover:text-teal-800
```
**Danger menu item:** `text-rose-600 hover:bg-rose-50 hover:text-rose-700`
### Navigation
**Header:** `sticky top-0 z-50 h-28 md:h-16 bg-white/88 backdrop-blur-xl border-b border-slate-200/80`, scroll-hides with `transition-transform duration-300`.
**Selected nav item:** `bg-teal-100 text-teal-800 ring-1 ring-teal-200`
---
## Core Palette
Use these Tailwind families first:
- `slate` — text, borders, neutral panels
- `sky` — page gradients, upload/action emphasis, map/cloud atmosphere
- `teal` — navigation selected states, account identity, calm success-adjacent UI
- `cyan` — subtle sky gradients and avatar/logo surfaces
- `emerald` — explicit success/approved state only
- `amber` — pending/review/uncommon rarity
- `rose` — rejected/destructive/rare rarity
**Key hex values:**
| Role | Value |
|------|-------|
| Page background | `#eef4f8` / `#f3f7fb` |
| Body text | `#0f172a` (slate-900) |
| Secondary text | `#334155` (slate-700) |
| Muted text | `#64748b` (slate-500) |
| Borders | `#d9e3ee`, `#e2e8f0`, `#cbd5e1` |
| Selection | `rgba(15,118,110,0.18)` (teal-700) |
| Text on primary | `#0f172a` (dark, not white — Naive UI override) |
**Naive UI theme tokens** (`App.vue`):
```
primaryColor: '#0f766e' (teal-700)
infoColor: '#0369a1' (sky-700)
successColor: '#0f766e' (teal-700)
warningColor: '#d97706' (amber-600)
errorColor: '#dc2626' (red-600)
```
---
## Animation & Transitions
**Hover effects:**
- Cards: `transition-all hover:-translate-y-1 hover:shadow-lg` (lift)
- Images: `transition duration-500 group-hover:scale-[1.04]` (subtle zoom)
- Gallery items: `transition-transform duration-300 hover:-translate-y-1`
- Badges on cards: `transition-opacity md:opacity-0 md:group-hover:opacity-100`
**Modal transitions:**
- ImageDetailModal: opacity 180ms, shell scale+translateY 220ms, `cubic-bezier(0.22, 1, 0.36, 1)`
- Other modals: default Vue transitions
**Header scroll:** `transition-transform duration-300`
**Image loading:** `transition-opacity duration-300` for thumbnail-to-hires crossfade, low-res preview gets `blur-[1px]` until full-res loads.
**Skeleton shimmer:**
```
animate-pulse bg-[linear-gradient(110deg,#0f172a_0%,#1e293b_45%,#334155_55%,#0f172a_100%)]
bg-[length:220%_100%]
```
---
## Icons
**Library:** `@vicons/tabler` (Tabler Icons), rendered via `<NIcon size="16|18|20|22|30|42">` from Naive UI.
Common icons: `User`, `Settings`, `Logout`, `Shield`, `Search`, `X`, `Clock`, `Location`/`MapIcon`, `CloudUpload`, `Map`/`Satellite`, `Adjustments`, `Calendar`, `Refresh`, `InfoCircle`, `Lock`, `Check`, `Eye`/`EyeOff`, `Trash`
---
## Anti-Patterns
- Do not use purple as a fallback visual direction.
- Do not use `bg-slate-900 text-white` for ordinary selected navigation.
- Do not introduce dark-mode-heavy sections unless the surrounding page already uses that language.
- Do not overuse rounded rectangles; the project uses sharp, atlas-like panels.
- Do not mix random accent colors within the same feature. Pick one accent family and keep it consistent.
- Do not use flat single-color backgrounds where a gradient belongs.
- Do not add border-radius without an explicit reason — `0px` is the project default.
- Do not use white text on primary buttons — Naive UI primary buttons use dark text (`#0f172a`).
---
## Validation
After style changes, run:
```bash
npx vue-tsc -b
```
Run `npm run build` if the change touches routes, imported components, or package dependencies.