From 5aaba718198016efc4a63ab39670ea08724503b0 Mon Sep 17 00:00:00 2001 From: dark Date: Sun, 15 Feb 2026 01:54:56 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=8F=9C=E5=8D=95=E6=8B=96=E6=8B=BD?= =?UTF-8?q?=E6=8E=92=E5=BA=8F=E3=80=81=E4=BE=A7=E8=BE=B9=E6=A0=8F=E6=A0=91?= =?UTF-8?q?=E5=BD=A2=E7=BB=93=E6=9E=84=E3=80=81=E7=B3=BB=E7=BB=9F=E5=AF=86?= =?UTF-8?q?=E9=92=A5=E7=AE=A1=E7=90=86=E3=80=81API=20=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 菜单管理支持拖拽排序（dnd-kit） - 侧边栏改为递归树形渲染，支持折叠展开 - 修复 RouteGuard 嵌套菜单路径匹配 - 修复 getcurrentmenuslogic 祖先节点回溯保证树形完整 - 新增系统密钥 CRUD（后端 4 接口 + Casbin admin 策略） - AI 模型管理页新增"系统密钥"tab（仅 admin 可见） - 生成 API 接口文档（api-reference.md + openapi.yaml） - 清理根目录截图和测试临时文件 - .gitignore 增加 uploads/、test-results/、__pycache__/ --- .claude/skills/casdoor-sso/README.md | 74 + .claude/skills/casdoor-sso/snippets/api.md | 105 + .../skills/casdoor-sso/snippets/callback.md | 306 +++ .../skills/casdoor-sso/snippets/casdoorx.md | 114 + .claude/skills/casdoor-sso/snippets/config.md | 94 + .claude/skills/casdoor-sso/snippets/jwtx.md | 130 + .claude/skills/casdoor-sso/snippets/model.md | 77 + .claude/skills/ui-ux-pro-max/SKILL.md | 377 +++ .claude/skills/ui-ux-pro-max/data/charts.csv | 26 + .claude/skills/ui-ux-pro-max/data/colors.csv | 97 + .claude/skills/ui-ux-pro-max/data/icons.csv | 101 + .claude/skills/ui-ux-pro-max/data/landing.csv | 31 + .../skills/ui-ux-pro-max/data/products.csv | 97 + .../ui-ux-pro-max/data/react-performance.csv | 45 + .../ui-ux-pro-max/data/stacks/astro.csv | 54 + .../ui-ux-pro-max/data/stacks/flutter.csv | 53 + .../data/stacks/html-tailwind.csv | 56 + .../data/stacks/jetpack-compose.csv | 53 + .../ui-ux-pro-max/data/stacks/nextjs.csv | 53 + .../ui-ux-pro-max/data/stacks/nuxt-ui.csv | 51 + .../ui-ux-pro-max/data/stacks/nuxtjs.csv | 59 + .../data/stacks/react-native.csv | 52 + .../ui-ux-pro-max/data/stacks/react.csv | 54 + .../ui-ux-pro-max/data/stacks/shadcn.csv | 61 + .../ui-ux-pro-max/data/stacks/svelte.csv | 54 + .../ui-ux-pro-max/data/stacks/swiftui.csv | 51 + .../skills/ui-ux-pro-max/data/stacks/vue.csv | 50 + .claude/skills/ui-ux-pro-max/data/styles.csv | 68 + .../skills/ui-ux-pro-max/data/typography.csv | 58 + .../ui-ux-pro-max/data/ui-reasoning.csv | 101 + .../ui-ux-pro-max/data/ux-guidelines.csv | 100 + .../ui-ux-pro-max/data/web-interface.csv | 31 + .claude/skills/ui-ux-pro-max/scripts/core.py | 253 ++ .../ui-ux-pro-max/scripts/design_system.py | 1067 ++++++++ .../skills/ui-ux-pro-max/scripts/search.py | 114 + .gitignore | 10 +- backend/api/file.api | 58 + backend/api/menu.api | 10 + backend/api/user.api | 7 + backend/base.api | 24 + backend/base.go | 22 + backend/etc/base-api.yaml | 29 + backend/go.mod | 6 + backend/go.sum | 14 + backend/internal/config/config.go | 41 + .../handler/ai/aisystemkeycreatehandler.go | 32 + .../handler/ai/aisystemkeydeletehandler.go | 32 + .../handler/ai/aisystemkeylisthandler.go | 32 + .../handler/ai/aisystemkeyupdatehandler.go | 32 + backend/internal/handler/auth/ssohandler.go | 41 + .../handler/file/deletefilehandler.go | 32 + .../internal/handler/file/getfilehandler.go | 32 + .../handler/file/getfilelisthandler.go | 32 + .../handler/file/getfileurlhandler.go | 50 + .../handler/file/updatefilehandler.go | 32 + .../handler/file/uploadfilehandler.go | 34 + .../internal/handler/menu/sortmenushandler.go | 32 + backend/internal/handler/routes.go | 36 + .../logic/ai/aisystemkeycreatelogic.go | 63 + .../logic/ai/aisystemkeydeletelogic.go | 46 + .../internal/logic/ai/aisystemkeylistlogic.go | 71 + .../logic/ai/aisystemkeyupdatelogic.go | 67 + .../internal/logic/file/deletefilelogic.go | 75 + .../internal/logic/file/getfilelistlogic.go | 105 + backend/internal/logic/file/getfilelogic.go | 94 + .../internal/logic/file/getfileurllogic.go | 72 + .../internal/logic/file/updatefilelogic.go | 110 + .../internal/logic/file/uploadfilelogic.go | 142 ++ .../logic/menu/getcurrentmenuslogic.go | 31 +- backend/internal/logic/menu/sortmenuslogic.go | 60 + .../logic/profile/changepasswordlogic.go | 1 + .../internal/logic/user/createuserlogic.go | 12 + .../internal/logic/user/getuserlistlogic.go | 3 + backend/internal/logic/user/getuserlogic.go | 3 + backend/internal/logic/user/rbac_test.go | 196 ++ .../internal/logic/user/updateuserlogic.go | 9 + .../internal/middleware/authzmiddleware.go | 52 + backend/internal/storage/local.go | 71 + backend/internal/storage/minio.go | 82 + backend/internal/storage/oss.go | 62 + backend/internal/storage/storage.go | 31 + backend/internal/svc/servicecontext.go | 7 + backend/internal/types/types.go | 10 + backend/model/constants.go | 17 + backend/model/file_entity.go | 24 + backend/model/file_model.go | 83 + backend/model/file_model_test.go | 498 ++++ backend/model/menu_model.go | 19 + backend/model/menu_model_test.go | 269 ++ backend/model/organization_model_test.go | 685 +++++ backend/model/role_model_test.go | 211 ++ .../tests/menu_role_org/test_menu_role_org.sh | 404 +++ backend/tests/rbac/test_rbac.sh | 364 +++ backend/tests/sso/test_sso.sh | 190 ++ docs/api-reference.md | 143 ++ docs/casdoor-setup-guide.md | 343 +++ docs/casdoor.md | 161 ++ docs/openapi.yaml | 1691 ++++++++++++ docs/plans/2026-02-14-file-storage-impl.md | 2257 +++++++++++++++++ docs/plans/2026-02-14-file-storage-module.md | 305 +++ .../2026-02-14-light-dark-theme-design.md | 124 + .../plans/2026-02-14-light-dark-theme-impl.md | 589 +++++ docs/plans/2026-02-14-rbac-e2e-tests.md | 911 +++++++ frontend/react-shadcn/pc/package-lock.json | 62 + frontend/react-shadcn/pc/package.json | 3 + .../pc/src/components/layout/Header.tsx | 8 +- .../src/components/layout/ProtectedRoute.tsx | 2 +- .../pc/src/components/layout/RouteGuard.tsx | 43 + .../pc/src/components/layout/Sidebar.tsx | 137 +- .../pc/src/components/ui/Button.tsx | 8 +- .../pc/src/components/ui/Card.tsx | 6 +- .../pc/src/components/ui/Input.tsx | 11 +- .../pc/src/components/ui/Modal.tsx | 10 +- .../pc/src/components/ui/Table.tsx | 34 +- .../pc/src/contexts/ThemeContext.tsx | 42 + frontend/react-shadcn/pc/src/index.css | 103 +- .../pc/src/pages/AIModelManagementPage.tsx | 402 ++- .../pc/src/pages/DashboardPage.tsx | 24 +- .../react-shadcn/pc/src/pages/LoginPage.tsx | 36 +- .../pc/src/pages/MenuManagementPage.tsx | 703 +++++ frontend/react-shadcn/pc/src/pages/MyPage.tsx | 98 + .../src/pages/OrganizationManagementPage.tsx | 48 +- .../pc/src/pages/RoleManagementPage.tsx | 524 ++++ .../pc/src/pages/SSOCallbackPage.tsx | 65 + .../pc/src/pages/SettingsPage.tsx | 51 +- .../pc/src/pages/UserManagementPage.tsx | 83 +- frontend/react-shadcn/pc/src/services/api.ts | 24 + frontend/react-shadcn/pc/tests/config.ts | 22 + .../pc/tests/menu-role-org.e2e.test.ts | 333 +++ .../react-shadcn/pc/tests/rbac.e2e.test.ts | 124 + .../pc/tests/settings.e2e.test.ts | 139 + .../react-shadcn/pc/tests/theme.e2e.test.ts | 148 ++ 132 files changed, 18729 insertions(+), 164 deletions(-) create mode 100644 .claude/skills/casdoor-sso/README.md create mode 100644 .claude/skills/casdoor-sso/snippets/api.md create mode 100644 .claude/skills/casdoor-sso/snippets/callback.md create mode 100644 .claude/skills/casdoor-sso/snippets/casdoorx.md create mode 100644 .claude/skills/casdoor-sso/snippets/config.md create mode 100644 .claude/skills/casdoor-sso/snippets/jwtx.md create mode 100644 .claude/skills/casdoor-sso/snippets/model.md create mode 100644 .claude/skills/ui-ux-pro-max/SKILL.md create mode 100644 .claude/skills/ui-ux-pro-max/data/charts.csv create mode 100644 .claude/skills/ui-ux-pro-max/data/colors.csv create mode 100644 .claude/skills/ui-ux-pro-max/data/icons.csv create mode 100644 .claude/skills/ui-ux-pro-max/data/landing.csv create mode 100644 .claude/skills/ui-ux-pro-max/data/products.csv create mode 100644 .claude/skills/ui-ux-pro-max/data/react-performance.csv create mode 100644 .claude/skills/ui-ux-pro-max/data/stacks/astro.csv create mode 100644 .claude/skills/ui-ux-pro-max/data/stacks/flutter.csv create mode 100644 .claude/skills/ui-ux-pro-max/data/stacks/html-tailwind.csv create mode 100644 .claude/skills/ui-ux-pro-max/data/stacks/jetpack-compose.csv create mode 100644 .claude/skills/ui-ux-pro-max/data/stacks/nextjs.csv create mode 100644 .claude/skills/ui-ux-pro-max/data/stacks/nuxt-ui.csv create mode 100644 .claude/skills/ui-ux-pro-max/data/stacks/nuxtjs.csv create mode 100644 .claude/skills/ui-ux-pro-max/data/stacks/react-native.csv create mode 100644 .claude/skills/ui-ux-pro-max/data/stacks/react.csv create mode 100644 .claude/skills/ui-ux-pro-max/data/stacks/shadcn.csv create mode 100644 .claude/skills/ui-ux-pro-max/data/stacks/svelte.csv create mode 100644 .claude/skills/ui-ux-pro-max/data/stacks/swiftui.csv create mode 100644 .claude/skills/ui-ux-pro-max/data/stacks/vue.csv create mode 100644 .claude/skills/ui-ux-pro-max/data/styles.csv create mode 100644 .claude/skills/ui-ux-pro-max/data/typography.csv create mode 100644 .claude/skills/ui-ux-pro-max/data/ui-reasoning.csv create mode 100644 .claude/skills/ui-ux-pro-max/data/ux-guidelines.csv create mode 100644 .claude/skills/ui-ux-pro-max/data/web-interface.csv create mode 100644 .claude/skills/ui-ux-pro-max/scripts/core.py create mode 100644 .claude/skills/ui-ux-pro-max/scripts/design_system.py create mode 100644 .claude/skills/ui-ux-pro-max/scripts/search.py create mode 100644 backend/api/file.api create mode 100644 backend/internal/handler/ai/aisystemkeycreatehandler.go create mode 100644 backend/internal/handler/ai/aisystemkeydeletehandler.go create mode 100644 backend/internal/handler/ai/aisystemkeylisthandler.go create mode 100644 backend/internal/handler/ai/aisystemkeyupdatehandler.go create mode 100644 backend/internal/handler/auth/ssohandler.go create mode 100644 backend/internal/handler/file/deletefilehandler.go create mode 100644 backend/internal/handler/file/getfilehandler.go create mode 100644 backend/internal/handler/file/getfilelisthandler.go create mode 100644 backend/internal/handler/file/getfileurlhandler.go create mode 100644 backend/internal/handler/file/updatefilehandler.go create mode 100644 backend/internal/handler/file/uploadfilehandler.go create mode 100644 backend/internal/handler/menu/sortmenushandler.go create mode 100644 backend/internal/logic/ai/aisystemkeycreatelogic.go create mode 100644 backend/internal/logic/ai/aisystemkeydeletelogic.go create mode 100644 backend/internal/logic/ai/aisystemkeylistlogic.go create mode 100644 backend/internal/logic/ai/aisystemkeyupdatelogic.go create mode 100644 backend/internal/logic/file/deletefilelogic.go create mode 100644 backend/internal/logic/file/getfilelistlogic.go create mode 100644 backend/internal/logic/file/getfilelogic.go create mode 100644 backend/internal/logic/file/getfileurllogic.go create mode 100644 backend/internal/logic/file/updatefilelogic.go create mode 100644 backend/internal/logic/file/uploadfilelogic.go create mode 100644 backend/internal/logic/menu/sortmenuslogic.go create mode 100644 backend/internal/logic/user/rbac_test.go create mode 100644 backend/internal/middleware/authzmiddleware.go create mode 100644 backend/internal/storage/local.go create mode 100644 backend/internal/storage/minio.go create mode 100644 backend/internal/storage/oss.go create mode 100644 backend/internal/storage/storage.go create mode 100644 backend/model/constants.go create mode 100644 backend/model/file_entity.go create mode 100644 backend/model/file_model.go create mode 100644 backend/model/file_model_test.go create mode 100644 backend/model/menu_model_test.go create mode 100644 backend/model/organization_model_test.go create mode 100644 backend/model/role_model_test.go create mode 100644 backend/tests/menu_role_org/test_menu_role_org.sh create mode 100644 backend/tests/rbac/test_rbac.sh create mode 100644 backend/tests/sso/test_sso.sh create mode 100644 docs/api-reference.md create mode 100644 docs/casdoor-setup-guide.md create mode 100644 docs/casdoor.md create mode 100644 docs/openapi.yaml create mode 100644 docs/plans/2026-02-14-file-storage-impl.md create mode 100644 docs/plans/2026-02-14-file-storage-module.md create mode 100644 docs/plans/2026-02-14-light-dark-theme-design.md create mode 100644 docs/plans/2026-02-14-light-dark-theme-impl.md create mode 100644 docs/plans/2026-02-14-rbac-e2e-tests.md create mode 100644 frontend/react-shadcn/pc/src/components/layout/RouteGuard.tsx create mode 100644 frontend/react-shadcn/pc/src/contexts/ThemeContext.tsx create mode 100644 frontend/react-shadcn/pc/src/pages/MenuManagementPage.tsx create mode 100644 frontend/react-shadcn/pc/src/pages/MyPage.tsx create mode 100644 frontend/react-shadcn/pc/src/pages/RoleManagementPage.tsx create mode 100644 frontend/react-shadcn/pc/src/pages/SSOCallbackPage.tsx create mode 100644 frontend/react-shadcn/pc/tests/menu-role-org.e2e.test.ts create mode 100644 frontend/react-shadcn/pc/tests/rbac.e2e.test.ts create mode 100644 frontend/react-shadcn/pc/tests/settings.e2e.test.ts create mode 100644 frontend/react-shadcn/pc/tests/theme.e2e.test.ts diff --git a/.claude/skills/casdoor-sso/README.md b/.claude/skills/casdoor-sso/README.md new file mode 100644 index 0000000..53e1127 --- /dev/null +++ b/.claude/skills/casdoor-sso/README.md @@ -0,0 +1,74 @@ +# Casdoor SSO 单点登录 Skill + +本 skill 提供在 Go + go-zero 项目中集成 Casdoor SSO 的完整指南和代码模板。 + +## 适用场景 + +- 需要统一身份认证的多系统环境 +- 外部人员（监管、巡检、审计）需要访问系统 +- 已有 Casdoor 身份中心，需要对接新系统 + +## 核心特点 + +- 支持本地用户 + Casdoor 用户混合模式 +- 自动用户创建（JIT Provision） +- JWT Token 本地签发 +- 美观的回调页面 + +## 快速开始 + +### 1. 安装依赖 + +```bash +go get github.com/casdoor/casdoor-go-sdk +go get github.com/golang-jwt/jwt/v5 +``` + +### 2. 配置文件 + +```yaml +Casdoor: + Endpoint: https://your-casdoor-domain.com + ClientId: your-client-id + ClientSecret: your-client-secret + Organization: your-org + Application: your-app + RedirectUrl: http://localhost:8888/api/v1/auth/callback + JwtPublicKey: | + -----BEGIN CERTIFICATE----- + ... + -----END CERTIFICATE----- + +JWT: + Secret: your-jwt-secret + Expire: 86400 +``` + +### 3. 核心代码 + +- [配置结构](snippets/config.md) - Config 结构定义 +- [Casdoor 客户端](snippets/casdoorx.md) - SDK 封装 +- [JWT 处理](snippets/jwtx.md) - Token 签发验证 +- [回调逻辑](snippets/callback.md) - 登录回调处理 +- [用户模型](snippets/model.md) - GORM 用户模型 + +## 完整流程 + +1. 前端请求 `/api/v1/auth/login-url` 获取登录链接 +2. 用户跳转到 Casdoor 登录页面 +3. 登录成功后重定向到回调地址 +4. 后端处理回调，交换 Token，创建用户 +5. 返回本地 JWT Token +6. 前端使用 Token 访问受保护接口 + +## 注意事项 + +- 生产环境必须使用 HTTPS +- JWT Secret 需要安全保管 +- Casdoor 证书需要定期更新 +- 建议使用 state 参数防止 CSRF + +## 参考 + +- [Casdoor 官方文档](https://casdoor.org/docs/overview) +- [go-zero 文档](https://go-zero.dev) diff --git a/.claude/skills/casdoor-sso/snippets/api.md b/.claude/skills/casdoor-sso/snippets/api.md new file mode 100644 index 0000000..a2c887e --- /dev/null +++ b/.claude/skills/casdoor-sso/snippets/api.md @@ -0,0 +1,105 @@ +# API 定义 + +## devops.api + +```go +syntax = "v1" + +info( + title: "DevOps API" + desc: "DevOps 平台 API 定义" + author: "DevOps Team" + version: "1.0" +) + +type ( + // 登录相关 + LoginUrlResp { + LoginUrl string `json:"login_url"` + } + + CallbackReq { + Code string `form:"code"` + State string `form:"state,optional"` + } + + CallbackResp { + Token string `json:"token"` + ExpiresAt int64 `json:"expires_at"` + User UserInfo `json:"user"` + } + + UserInfo { + Id int64 `json:"id"` + Username string `json:"username"` + Email string `json:"email"` + Status int `json:"status"` + CreatedAt string `json:"created_at"` + } + + UserResp { + Id int64 `json:"id"` + Username string `json:"username"` + Email string `json:"email"` + Role string `json:"role"` + Status int `json:"status"` + } +) + +service devops-api { + @handler getLoginUrlHandler + get /api/v1/auth/login-url returns (LoginUrlResp) + + @handler callbackHandler + get /api/v1/auth/callback (CallbackReq) returns (CallbackResp) + + @handler getUserHandler + get /api/v1/auth/user returns (UserResp) +} +``` + +## 生成代码 + +```bash +cd backend +goctl api go -api api/devops.api -dir . +``` + +## 接口说明 + +### 1. 获取登录链接 + +**GET** `/api/v1/auth/login-url` + +**响应:** +```json +{ + "login_url": "https://casdoor.example.com/login/oauth/authorize?client_id=xxx&..." +} +``` + +### 2. 登录回调 + +**GET** `/api/v1/auth/callback?code=xxx&state=yyy` + +由 Casdoor 重定向调用，返回 HTML 页面。 + +### 3. 获取当前用户 + +**GET** `/api/v1/auth/user` + +**请求头:** +``` +Authorization: Bearer {token} +``` + +**响应:** +```json +{ + "id": 1, + "username": "testuser", + "email": "test@example.com", + "role": "member", + "status": 1 +} +``` diff --git a/.claude/skills/casdoor-sso/snippets/callback.md b/.claude/skills/casdoor-sso/snippets/callback.md new file mode 100644 index 0000000..dc30be5 --- /dev/null +++ b/.claude/skills/casdoor-sso/snippets/callback.md @@ -0,0 +1,306 @@ +# 登录回调处理 + +## Handler + +```go +package auth + +import ( + "fmt" + "html/template" + "net/http" + + "backend/internal/logic/auth" + "backend/internal/svc" + "backend/internal/types" + "github.com/zeromicro/go-zero/rest/httpx" +) + +const callbackHTMLTemplate = ` + + + + + DevOps 登录回调 + + + +
+
+

DevOps 平台

+

Casdoor 单点登录

+
+ {{if .Success}} +
+
✅
+
登录成功！
+
+ +
+

访问令牌 (Token)

+
{{.Token}}
+
已复制到剪贴板！
+
+
+ + +
+ {{else}} +
+
❌
+
登录失败：{{.Error}}
+
+ {{end}} +
+ + +` + +type CallbackPageData struct { + Success bool + Token string + User *types.UserInfo + Error string +} + +func CallbackHandler(svcCtx *svc.ServiceContext) http.HandlerFunc { + return func(w http.ResponseWriter, r *http.Request) { + var req types.CallbackReq + if err := httpx.Parse(r, &req); err != nil { + renderCallbackPage(w, false, "", nil, err.Error()) + return + } + + l := auth.NewCallbackLogic(r.Context(), svcCtx) + resp, err := l.Callback(&req) + if err != nil { + renderCallbackPage(w, false, "", nil, err.Error()) + return + } + + renderCallbackPage(w, true, resp.Token, &resp.User, "") + } +} + +func renderCallbackPage(w http.ResponseWriter, success bool, token string, user *types.UserInfo, errMsg string) { + w.Header().Set("Content-Type", "text/html; charset=utf-8") + data := CallbackPageData{ + Success: success, + Token: token, + User: user, + Error: errMsg, + } + tmpl, _ := template.New("callback").Parse(callbackHTMLTemplate) + tmpl.Execute(w, data) +} +``` + +## Logic + +```go +package auth + +import ( + "backend/internal/svc" + "backend/internal/types" + "backend/model" + "context" + "time" + + "github.com/casdoor/casdoor-go-sdk/casdoorsdk" + "gorm.io/gorm" +) + +type CallbackLogic struct { + ctx context.Context + svcCtx *svc.ServiceContext +} + +func NewCallbackLogic(ctx context.Context, svcCtx *svc.ServiceContext) *CallbackLogic { + return &CallbackLogic{ctx: ctx, svcCtx: svcCtx} +} + +func (l *CallbackLogic) Callback(req *types.CallbackReq) (*types.CallbackResp, error) { + // 换取 Casdoor Token + authConfig, err := l.svcCtx.Casdoor.ExchangeToken(req.Code) + if err != nil { + return nil, err + } + + casdoorUser := authConfig.Claims.User + + // 查找或创建本地用户 + user, err := l.findOrCreateUser(casdoorUser) + if err != nil { + return nil, err + } + + // 生成本地 JWT + token, expiresAt, _ := l.svcCtx.JWT.GenerateToken(user.ID, user.Username, user.Email) + + return &types.CallbackResp{ + Token: token, + ExpiresAt: expiresAt, + User: types.UserInfo{ + Id: user.ID, + Username: user.Username, + Email: user.Email, + Status: user.Status, + }, + }, nil +} + +func (l *CallbackLogic) findOrCreateUser(casdoorUser *casdoorsdk.User) (*model.User, error) { + var user model.User + + // 用用户名查询 + err := l.svcCtx.DB.Where("username = ?", casdoorUser.Name).First(&user).Error + if err == nil { + return &user, nil + } + + if err != gorm.ErrRecordNotFound { + return nil, err + } + + // 自动创建新用户 + user = model.User{ + UserType: "casdoor", + Username: casdoorUser.Name, + Email: casdoorUser.Email, + Avatar: casdoorUser.Avatar, + Role: "member", + Status: 1, + CreatedAt: time.Now(), + } + l.svcCtx.DB.Create(&user) + return &user, nil +} +``` diff --git a/.claude/skills/casdoor-sso/snippets/casdoorx.md b/.claude/skills/casdoor-sso/snippets/casdoorx.md new file mode 100644 index 0000000..df475d5 --- /dev/null +++ b/.claude/skills/casdoor-sso/snippets/casdoorx.md @@ -0,0 +1,114 @@ +# Casdoor 客户端封装 + +## 代码 + +```go +package casdoorx + +import ( + "context" + "fmt" + + "github.com/casdoor/casdoor-go-sdk/casdoorsdk" +) + +type Client struct { + client *casdoorsdk.Client +} + +func NewClient(endpoint, clientId, clientSecret, certificate, organization, application string) *Client { + client := casdoorsdk.NewClient( + endpoint, + clientId, + clientSecret, + certificate, + organization, + application, + ) + return &Client{client: client} +} + +// GetSignInUrl 获取登录链接 +func (c *Client) GetSignInUrl(state string) string { + return c.client.GetSignInUrl(state) +} + +// ExchangeToken 用 code 换取 access token +func (c *Client) ExchangeToken(code string) (*casdoorsdk.AuthConfig, error) { + token, err := c.client.GetOAuthToken(code, state) + if err != nil { + return nil, fmt.Errorf("exchange token failed: %w", err) + } + + claims, err := c.client.ParseJwtToken(token.AccessToken) + if err != nil { + return nil, fmt.Errorf("parse token failed: %w", err) + } + + return &casdoorsdk.AuthConfig{ + AccessToken: token.AccessToken, + Claims: claims, + }, nil +} + +// ParseToken 解析 JWT Token +func (c *Client) ParseToken(token string) (*casdoorsdk.Claims, error) { + return c.client.ParseJwtToken(token) +} +``` + +## ServiceContext 集成 + +```go +package svc + +import ( + "backend/internal/casdoorx" + "backend/internal/config" + "backend/internal/jwtx" + "backend/model" + + "gorm.io/driver/mysql" + "gorm.io/gorm" +) + +type ServiceContext struct { + Config config.Config + DB *gorm.DB + Casdoor *casdoorx.Client + JWT *jwtx.JWTManager +} + +func NewServiceContext(c config.Config) *ServiceContext { + // 数据库连接 + dsn := fmt.Sprintf("%s:%s@tcp(%s:%d)/%s?charset=utf8mb4&parseTime=true", + c.MySQL.Username, c.MySQL.Password, c.MySQL.Host, c.MySQL.Port, c.MySQL.Database) + db, err := gorm.Open(mysql.Open(dsn), &gorm.Config{}) + if err != nil { + panic(err) + } + + // 自动迁移 + db.AutoMigrate(&model.User{}) + + // Casdoor 客户端 + casdoorClient := casdoorx.NewClient( + c.Casdoor.Endpoint, + c.Casdoor.ClientId, + c.Casdoor.ClientSecret, + c.Casdoor.JwtPublicKey, + c.Casdoor.Organization, + c.Casdoor.Application, + ) + + // JWT 管理器 + jwtManager := jwtx.NewJWTManager(c.JWT.Secret, c.JWT.Expire) + + return &ServiceContext{ + Config: c, + DB: db, + Casdoor: casdoorClient, + JWT: jwtManager, + } +} +``` diff --git a/.claude/skills/casdoor-sso/snippets/config.md b/.claude/skills/casdoor-sso/snippets/config.md new file mode 100644 index 0000000..e423ada --- /dev/null +++ b/.claude/skills/casdoor-sso/snippets/config.md @@ -0,0 +1,94 @@ +# Casdoor 配置结构 + +## 配置定义 + +```go +package config + +import "github.com/zeromicro/go-zero/rest" + +type Config struct { + rest.RestConf + MySQL MySQLConfig + Casdoor CasdoorConfig + JWT JWTConfig +} + +type MySQLConfig struct { + Host string + Port int + Database string + Username string + Password string +} + +type CasdoorConfig struct { + Endpoint string + ClientId string + ClientSecret string + Organization string + Application string + RedirectUrl string + JwtPublicKey string +} + +type JWTConfig struct { + Secret string + Expire int64 +} +``` + +## YAML 配置示例 + +```yaml +Name: devops-api +Host: 0.0.0.0 +Port: 8888 +Timeout: 30000 + +Log: + Mode: console + Level: info + +MySQL: + Host: localhost + Port: 3306 + Database: devops + Username: root + Password: "" + +Casdoor: + Endpoint: https://casdoor.example.com + ClientId: your-client-id + ClientSecret: your-client-secret + Organization: built-in + Application: devops-app + RedirectUrl: http://localhost:8888/api/v1/auth/callback + JwtPublicKey: | + -----BEGIN CERTIFICATE----- + MIIDXTCCAkWgAwIBAgIJAJC1HiIAZAiU... + -----END CERTIFICATE----- + +JWT: + Secret: your-32-char-secret-key-here + Expire: 86400 +``` + +## 获取 Casdoor 配置 + +### Client ID / Client Secret + +1. 登录 Casdoor 管理后台 +2. 进入 Applications 菜单 +3. 选择对应应用，复制 Client ID 和 Client Secret + +### JWT Public Key + +1. 进入 Certs 菜单 +2. 找到 built-in/cert-built-in +3. 复制 Certificate 内容（包含 BEGIN/END） + +### Organization + +- 默认使用 `built-in` +- 或创建新的 Organization，使用其名称 diff --git a/.claude/skills/casdoor-sso/snippets/jwtx.md b/.claude/skills/casdoor-sso/snippets/jwtx.md new file mode 100644 index 0000000..7895a8e --- /dev/null +++ b/.claude/skills/casdoor-sso/snippets/jwtx.md @@ -0,0 +1,130 @@ +# JWT 处理 + +## JWT Manager + +```go +package jwtx + +import ( + "fmt" + "time" + + "github.com/golang-jwt/jwt/v5" +) + +type Claims struct { + UserId int64 `json:"userId"` + Username string `json:"username"` + Email string `json:"email"` + jwt.RegisteredClaims +} + +type JWTManager struct { + secret string + expire time.Duration +} + +func NewJWTManager(secret string, expireSeconds int64) *JWTManager { + return &JWTManager{ + secret: secret, + expire: time.Duration(expireSeconds) * time.Second, + } +} + +// GenerateToken 生成 JWT Token +func (j *JWTManager) GenerateToken(userId int64, username, email string) (string, int64, error) { + now := time.Now() + expiresAt := now.Add(j.expire).Unix() + + claims := Claims{ + UserId: userId, + Username: username, + Email: email, + RegisteredClaims: jwt.RegisteredClaims{ + ExpiresAt: jwt.NewNumericDate(now.Add(j.expire)), + NotBefore: jwt.NewNumericDate(now), + IssuedAt: jwt.NewNumericDate(now), + }, + } + + token := jwt.NewWithClaims(jwt.SigningMethodHS256, claims) + tokenString, err := token.SignedString([]byte(j.secret)) + if err != nil { + return "", 0, err + } + + return tokenString, expiresAt, nil +} + +// ParseToken 解析 JWT Token +func (j *JWTManager) ParseToken(tokenString string) (*Claims, error) { + token, err := jwt.ParseWithClaims(tokenString, &Claims{}, func(token *jwt.Token) (interface{}, error) { + if _, ok := token.Method.(*jwt.SigningMethodHMAC); !ok { + return nil, fmt.Errorf("unexpected signing method: %v", token.Header["alg"]) + } + return []byte(j.secret), nil + }) + + if err != nil { + return nil, err + } + + if claims, ok := token.Claims.(*Claims); ok && token.Valid { + return claims, nil + } + + return nil, fmt.Errorf("invalid token") +} +``` + +## 认证中间件 + +```go +package middleware + +import ( + "backend/internal/jwtx" + "backend/internal/svc" + "context" + "net/http" + "strings" +) + +type contextKey string + +const UserIdKey contextKey = "userId" + +func AuthMiddleware(svcCtx *svc.ServiceContext) func(http.HandlerFunc) http.HandlerFunc { + return func(next http.HandlerFunc) http.HandlerFunc { + return func(w http.ResponseWriter, r *http.Request) { + authHeader := r.Header.Get("Authorization") + if authHeader == "" { + http.Error(w, "missing authorization header", http.StatusUnauthorized) + return + } + + parts := strings.SplitN(authHeader, " ", 2) + if len(parts) != 2 || strings.ToLower(parts[0]) != "bearer" { + http.Error(w, "invalid authorization header", http.StatusUnauthorized) + return + } + + claims, err := svcCtx.JWT.ParseToken(parts[1]) + if err != nil { + http.Error(w, "invalid token", http.StatusUnauthorized) + return + } + + ctx := context.WithValue(r.Context(), UserIdKey, claims.UserId) + next(w, r.WithContext(ctx)) + } + } +} + +func GetUserId(ctx context.Context) int64 { + if userId, ok := ctx.Value(UserIdKey).(int64); ok { + return userId + } + return 0 +} +``` diff --git a/.claude/skills/casdoor-sso/snippets/model.md b/.claude/skills/casdoor-sso/snippets/model.md new file mode 100644 index 0000000..e89af2f --- /dev/null +++ b/.claude/skills/casdoor-sso/snippets/model.md @@ -0,0 +1,77 @@ +# 用户模型 + +## GORM 模型定义 + +```go +package model + +import ( + "time" + + "gorm.io/gorm" +) + +type User struct { + ID int64 `gorm:"primaryKey" json:"id"` + UserType string `gorm:"default:'casdoor'" json:"user_type"` // casdoor/local + Username string `gorm:"uniqueIndex;size:64" json:"username"` + Password string `gorm:"size:128" json:"-"` // Casdoor 用户为空 + Email string `gorm:"size:128" json:"email"` + Avatar string `gorm:"size:256" json:"avatar"` + Role string `gorm:"default:'member'" json:"role"` + Status int `gorm:"default:1" json:"status"` + CreatedAt time.Time `json:"created_at"` + UpdatedAt time.Time `json:"updated_at"` + DeletedAt gorm.DeletedAt `gorm:"index" json:"-"` +} +``` + +## 混合用户模式 + +如果需要支持本地管理员 + Casdoor 用户，可以扩展模型： + +```go +type User struct { + ID int64 `gorm:"primaryKey" json:"id"` + UserType string `gorm:"default:'casdoor'" json:"user_type"` // casdoor/local/federation + CasdoorID string `gorm:"size:64" json:"casdoor_id,omitempty"` // Casdoor 用户 ID + ExternalID string `gorm:"size:64" json:"external_id,omitempty"` // 外部系统 ID + Source string `gorm:"size:64" json:"source,omitempty"` // 来源系统 + Username string `gorm:"uniqueIndex;size:64" json:"username"` + Password string `gorm:"size:128" json:"-"` + Email string `gorm:"size:128" json:"email"` + Avatar string `gorm:"size:256" json:"avatar"` + Role string `gorm:"default:'member'" json:"role"` + Status int `gorm:"default:1" json:"status"` + CreatedAt time.Time `json:"created_at"` + UpdatedAt time.Time `json:"updated_at"` + DeletedAt gorm.DeletedAt `gorm:"index" json:"-"` +} +``` + +## 用户类型说明 + +| UserType | 说明 | 密码存储 | +|---------|------|---------| +| `local` | 本地管理员，在数据库中管理 | 本地加密存储 | +| `casdoor` | Casdoor 用户，SSO 登录 | 空（Casdoor 管理） | +| `federation` | 联邦用户，来自第三方系统 | 空（源系统管理） | + +## 自动迁移 + +```go +func NewServiceContext(c config.Config) *ServiceContext { + dsn := fmt.Sprintf("%s:%s@tcp(%s:%d)/%s?charset=utf8mb4&parseTime=true", + c.MySQL.Username, c.MySQL.Password, c.MySQL.Host, c.MySQL.Port, c.MySQL.Database) + + db, err := gorm.Open(mysql.Open(dsn), &gorm.Config{}) + if err != nil { + panic(err) + } + + // 自动创建表 + db.AutoMigrate(&model.User{}) + + return &ServiceContext{DB: db} +} +``` diff --git a/.claude/skills/ui-ux-pro-max/SKILL.md b/.claude/skills/ui-ux-pro-max/SKILL.md new file mode 100644 index 0000000..9f317df --- /dev/null +++ b/.claude/skills/ui-ux-pro-max/SKILL.md @@ -0,0 +1,377 @@ +--- +name: ui-ux-pro-max +description: "UI/UX design intelligence. 67 styles, 96 palettes, 57 font pairings, 25 charts, 13 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples." +--- +# UI/UX Pro Max - Design Intelligence + +Comprehensive design guide for web and mobile applications. Contains 67 styles, 96 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 13 technology stacks. Searchable database with priority-based recommendations. + +## When to Apply + +Reference these guidelines when: +- Designing new UI components or pages +- Choosing color palettes and typography +- Reviewing code for UX issues +- Building landing pages or dashboards +- Implementing accessibility requirements + +## Rule Categories by Priority + +| Priority | Category | Impact | Domain | +|----------|----------|--------|--------| +| 1 | Accessibility | CRITICAL | `ux` | +| 2 | Touch & Interaction | CRITICAL | `ux` | +| 3 | Performance | HIGH | `ux` | +| 4 | Layout & Responsive | HIGH | `ux` | +| 5 | Typography & Color | MEDIUM | `typography`, `color` | +| 6 | Animation | MEDIUM | `ux` | +| 7 | Style Selection | MEDIUM | `style`, `product` | +| 8 | Charts & Data | LOW | `chart` | + +## Quick Reference + +### 1. Accessibility (CRITICAL) + +- `color-contrast` - Minimum 4.5:1 ratio for normal text +- `focus-states` - Visible focus rings on interactive elements +- `alt-text` - Descriptive alt text for meaningful images +- `aria-labels` - aria-label for icon-only buttons +- `keyboard-nav` - Tab order matches visual order +- `form-labels` - Use label with for attribute + +### 2. Touch & Interaction (CRITICAL) + +- `touch-target-size` - Minimum 44x44px touch targets +- `hover-vs-tap` - Use click/tap for primary interactions +- `loading-buttons` - Disable button during async operations +- `error-feedback` - Clear error messages near problem +- `cursor-pointer` - Add cursor-pointer to clickable elements + +### 3. Performance (HIGH) + +- `image-optimization` - Use WebP, srcset, lazy loading +- `reduced-motion` - Check prefers-reduced-motion +- `content-jumping` - Reserve space for async content + +### 4. Layout & Responsive (HIGH) + +- `viewport-meta` - width=device-width initial-scale=1 +- `readable-font-size` - Minimum 16px body text on mobile +- `horizontal-scroll` - Ensure content fits viewport width +- `z-index-management` - Define z-index scale (10, 20, 30, 50) + +### 5. Typography & Color (MEDIUM) + +- `line-height` - Use 1.5-1.75 for body text +- `line-length` - Limit to 65-75 characters per line +- `font-pairing` - Match heading/body font personalities + +### 6. Animation (MEDIUM) + +- `duration-timing` - Use 150-300ms for micro-interactions +- `transform-performance` - Use transform/opacity, not width/height +- `loading-states` - Skeleton screens or spinners + +### 7. Style Selection (MEDIUM) + +- `style-match` - Match style to product type +- `consistency` - Use same style across all pages +- `no-emoji-icons` - Use SVG icons, not emojis + +### 8. Charts & Data (LOW) + +- `chart-type` - Match chart type to data type +- `color-guidance` - Use accessible color palettes +- `data-table` - Provide table alternative for accessibility + +## How to Use + +Search specific domains using the CLI tool below. + +--- + + +## Prerequisites + +Check if Python is installed: + +```bash +python3 --version || python --version +``` + +If Python is not installed, install it based on user's OS: + +**macOS:** +```bash +brew install python3 +``` + +**Ubuntu/Debian:** +```bash +sudo apt update && sudo apt install python3 +``` + +**Windows:** +```powershell +winget install Python.Python.3.12 +``` + +--- + +## How to Use This Skill + +When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow: + +### Step 1: Analyze User Requirements + +Extract key information from user request: +- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc. +- **Style keywords**: minimal, playful, professional, elegant, dark mode, etc. +- **Industry**: healthcare, fintech, gaming, education, etc. +- **Stack**: React, Vue, Next.js, or default to `html-tailwind` + +### Step 2: Generate Design System (REQUIRED) + +**Always start with `--design-system`** to get comprehensive recommendations with reasoning: + +```bash +python3 skills/ui-ux-pro-max/scripts/search.py " " --design-system [-p "Project Name"] +``` + +This command: +1. Searches 5 domains in parallel (product, style, color, landing, typography) +2. Applies reasoning rules from `ui-reasoning.csv` to select best matches +3. Returns complete design system: pattern, style, colors, typography, effects +4. Includes anti-patterns to avoid + +**Example:** +```bash +python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa" +``` + +### Step 2b: Persist Design System (Master + Overrides Pattern) + +To save the design system for hierarchical retrieval across sessions, add `--persist`: + +```bash +python3 skills/ui-ux-pro-max/scripts/search.py "" --design-system --persist -p "Project Name" +``` + +This creates: +- `design-system/MASTER.md` — Global Source of Truth with all design rules +- `design-system/pages/` — Folder for page-specific overrides + +**With page-specific override:** +```bash +python3 skills/ui-ux-pro-max/scripts/search.py "" --design-system --persist -p "Project Name" --page "dashboard" +``` + +This also creates: +- `design-system/pages/dashboard.md` — Page-specific deviations from Master + +**How hierarchical retrieval works:** +1. When building a specific page (e.g., "Checkout"), first check `design-system/pages/checkout.md` +2. If the page file exists, its rules **override** the Master file +3. If not, use `design-system/MASTER.md` exclusively + +### Step 3: Supplement with Detailed Searches (as needed) + +After getting the design system, use domain searches to get additional details: + +```bash +python3 skills/ui-ux-pro-max/scripts/search.py "" --domain [-n ] +``` + +**When to use detailed searches:** + +| Need | Domain | Example | +|------|--------|---------| +| More style options | `style` | `--domain style "glassmorphism dark"` | +| Chart recommendations | `chart` | `--domain chart "real-time dashboard"` | +| UX best practices | `ux` | `--domain ux "animation accessibility"` | +| Alternative fonts | `typography` | `--domain typography "elegant luxury"` | +| Landing structure | `landing` | `--domain landing "hero social-proof"` | + +### Step 4: Stack Guidelines (Default: html-tailwind) + +Get implementation-specific best practices. If user doesn't specify a stack, **default to `html-tailwind`**. + +```bash +python3 skills/ui-ux-pro-max/scripts/search.py "" --stack html-tailwind +``` + +Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter`, `shadcn`, `jetpack-compose` + +--- + +## Search Reference + +### Available Domains + +| Domain | Use For | Example Keywords | +|--------|---------|------------------| +| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service | +| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism | +| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern | +| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service | +| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof | +| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie | +| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading | +| `react` | React/Next.js performance | waterfall, bundle, suspense, memo, rerender, cache | +| `web` | Web interface guidelines | aria, focus, keyboard, semantic, virtualize | +| `prompt` | AI prompts, CSS keywords | (style name) | + +### Available Stacks + +| Stack | Focus | +|-------|-------| +| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) | +| `react` | State, hooks, performance, patterns | +| `nextjs` | SSR, routing, images, API routes | +| `vue` | Composition API, Pinia, Vue Router | +| `svelte` | Runes, stores, SvelteKit | +| `swiftui` | Views, State, Navigation, Animation | +| `react-native` | Components, Navigation, Lists | +| `flutter` | Widgets, State, Layout, Theming | +| `shadcn` | shadcn/ui components, theming, forms, patterns | +| `jetpack-compose` | Composables, Modifiers, State Hoisting, Recomposition | + +--- + +## Example Workflow + +**User request:** "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp" + +### Step 1: Analyze Requirements +- Product type: Beauty/Spa service +- Style keywords: elegant, professional, soft +- Industry: Beauty/Wellness +- Stack: html-tailwind (default) + +### Step 2: Generate Design System (REQUIRED) + +```bash +python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa" +``` + +**Output:** Complete design system with pattern, style, colors, typography, effects, and anti-patterns. + +### Step 3: Supplement with Detailed Searches (as needed) + +```bash +# Get UX guidelines for animation and accessibility +python3 skills/ui-ux-pro-max/scripts/search.py "animation accessibility" --domain ux + +# Get alternative typography options if needed +python3 skills/ui-ux-pro-max/scripts/search.py "elegant luxury serif" --domain typography +``` + +### Step 4: Stack Guidelines + +```bash +python3 skills/ui-ux-pro-max/scripts/search.py "layout responsive form" --stack html-tailwind +``` + +**Then:** Synthesize design system + detailed searches and implement the design. + +--- + +## Output Formats + +The `--design-system` flag supports two output formats: + +```bash +# ASCII box (default) - best for terminal display +python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system + +# Markdown - best for documentation +python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown +``` + +--- + +## Tips for Better Results + +1. **Be specific with keywords** - "healthcare SaaS dashboard" > "app" +2. **Search multiple times** - Different keywords reveal different insights +3. **Combine domains** - Style + Typography + Color = Complete design system +4. **Always check UX** - Search "animation", "z-index", "accessibility" for common issues +5. **Use stack flag** - Get implementation-specific best practices +6. **Iterate** - If first search doesn't match, try different keywords + +--- + +## Common Rules for Professional UI + +These are frequently overlooked issues that make UI look unprofessional: + +### Icons & Visual Elements + +| Rule | Do | Don't | +|------|----|----- | +| **No emoji icons** | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons | +| **Stable hover states** | Use color/opacity transitions on hover | Use scale transforms that shift layout | +| **Correct brand logos** | Research official SVG from Simple Icons | Guess or use incorrect logo paths | +| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly | + +### Interaction & Cursor + +| Rule | Do | Don't | +|------|----|----- | +| **Cursor pointer** | Add `cursor-pointer` to all clickable/hoverable cards | Leave default cursor on interactive elements | +| **Hover feedback** | Provide visual feedback (color, shadow, border) | No indication element is interactive | +| **Smooth transitions** | Use `transition-colors duration-200` | Instant state changes or too slow (>500ms) | + +### Light/Dark Mode Contrast + +| Rule | Do | Don't | +|------|----|----- | +| **Glass card light mode** | Use `bg-white/80` or higher opacity | Use `bg-white/10` (too transparent) | +| **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text | +| **Muted text light** | Use `#475569` (slate-600) minimum | Use gray-400 or lighter | +| **Border visibility** | Use `border-gray-200` in light mode | Use `border-white/10` (invisible) | + +### Layout & Spacing + +| Rule | Do | Don't | +|------|----|----- | +| **Floating navbar** | Add `top-4 left-4 right-4` spacing | Stick navbar to `top-0 left-0 right-0` | +| **Content padding** | Account for fixed navbar height | Let content hide behind fixed elements | +| **Consistent max-width** | Use same `max-w-6xl` or `max-w-7xl` | Mix different container widths | + +--- + +## Pre-Delivery Checklist + +Before delivering UI code, verify these items: + +### Visual Quality +- [ ] No emojis used as icons (use SVG instead) +- [ ] All icons from consistent icon set (Heroicons/Lucide) +- [ ] Brand logos are correct (verified from Simple Icons) +- [ ] Hover states don't cause layout shift +- [ ] Use theme colors directly (bg-primary) not var() wrapper + +### Interaction +- [ ] All clickable elements have `cursor-pointer` +- [ ] Hover states provide clear visual feedback +- [ ] Transitions are smooth (150-300ms) +- [ ] Focus states visible for keyboard navigation + +### Light/Dark Mode +- [ ] Light mode text has sufficient contrast (4.5:1 minimum) +- [ ] Glass/transparent elements visible in light mode +- [ ] Borders visible in both modes +- [ ] Test both modes before delivery + +### Layout +- [ ] Floating elements have proper spacing from edges +- [ ] No content hidden behind fixed navbars +- [ ] Responsive at 375px, 768px, 1024px, 1440px +- [ ] No horizontal scroll on mobile + +### Accessibility +- [ ] All images have alt text +- [ ] Form inputs have labels +- [ ] Color is not the only indicator +- [ ] `prefers-reduced-motion` respected diff --git a/.claude/skills/ui-ux-pro-max/data/charts.csv b/.claude/skills/ui-ux-pro-max/data/charts.csv new file mode 100644 index 0000000..9463c37 --- /dev/null +++ b/.claude/skills/ui-ux-pro-max/data/charts.csv @@ -0,0 +1,26 @@ +No,Data Type,Keywords,Best Chart Type,Secondary Options,Color Guidance,Performance Impact,Accessibility Notes,Library Recommendation,Interactive Level +1,Trend Over Time,"trend, time-series, line, growth, timeline, progress",Line Chart,"Area Chart, Smooth Area",Primary: #0080FF. Multiple series: use distinct colors. Fill: 20% opacity,⚡ Excellent (optimized),✓ Clear line patterns for colorblind users. Add pattern overlays.,"Chart.js, Recharts, ApexCharts",Hover + Zoom +2,Compare Categories,"compare, categories, bar, comparison, ranking",Bar Chart (Horizontal or Vertical),"Column Chart, Grouped Bar",Each bar: distinct color. Category: grouped same color. Sorted: descending order,⚡ Excellent,✓ Easy to compare. Add value labels on bars for clarity.,"Chart.js, Recharts, D3.js",Hover + Sort +3,Part-to-Whole,"part-to-whole, pie, donut, percentage, proportion, share",Pie Chart or Donut,"Stacked Bar, Treemap",Colors: 5-6 max. Contrasting palette. Large slices first. Use labels.,⚡ Good (limit 6 slices),⚠ Hard for accessibility. Better: Stacked bar with legend. Avoid pie if >5 items.,"Chart.js, Recharts, D3.js",Hover + Drill +4,Correlation/Distribution,"correlation, distribution, scatter, relationship, pattern",Scatter Plot or Bubble Chart,"Heat Map, Matrix",Color axis: gradient (blue-red). Size: relative. Opacity: 0.6-0.8 to show density,⚠ Moderate (many points),⚠ Provide data table alternative. Use pattern + color distinction.,"D3.js, Plotly, Recharts",Hover + Brush +5,Heatmap/Intensity,"heatmap, heat-map, intensity, density, matrix",Heat Map or Choropleth,"Grid Heat Map, Bubble Heat",Gradient: Cool (blue) to Hot (red). Scale: clear legend. Divergent for ±data,⚡ Excellent (color CSS),⚠ Colorblind: Use pattern overlay. Provide numerical legend.,"D3.js, Plotly, ApexCharts",Hover + Zoom +6,Geographic Data,"geographic, map, location, region, geo, spatial","Choropleth Map, Bubble Map",Geographic Heat Map,Regional: single color gradient or categorized colors. Legend: clear scale,⚠ Moderate (rendering),⚠ Include text labels for regions. Provide data table alternative.,"D3.js, Mapbox, Leaflet",Pan + Zoom + Drill +7,Funnel/Flow,funnel/flow,"Funnel Chart, Sankey",Waterfall (for flows),Stages: gradient (starting color → ending color). Show conversion %,⚡ Good,✓ Clear stage labels + percentages. Good for accessibility if labeled.,"D3.js, Recharts, Custom SVG",Hover + Drill +8,Performance vs Target,performance-vs-target,Gauge Chart or Bullet Chart,"Dial, Thermometer",Performance: Red→Yellow→Green gradient. Target: marker line. Threshold colors,⚡ Good,✓ Add numerical value + percentage label beside gauge.,"D3.js, ApexCharts, Custom SVG",Hover +9,Time-Series Forecast,time-series-forecast,Line with Confidence Band,Ribbon Chart,Actual: solid line #0080FF. Forecast: dashed #FF9500. Band: light shading,⚡ Good,✓ Clearly distinguish actual vs forecast. Add legend.,"Chart.js, ApexCharts, Plotly",Hover + Toggle +10,Anomaly Detection,anomaly-detection,Line Chart with Highlights,Scatter with Alert,Normal: blue #0080FF. Anomaly: red #FF0000 circle/square marker + alert,⚡ Good,✓ Circle/marker for anomalies. Add text alert annotation.,"D3.js, Plotly, ApexCharts",Hover + Alert +11,Hierarchical/Nested Data,hierarchical/nested-data,Treemap,"Sunburst, Nested Donut, Icicle",Parent: distinct hues. Children: lighter shades. White borders 2-3px.,⚠ Moderate,⚠ Poor - provide table alternative. Label large areas.,"D3.js, Recharts, ApexCharts",Hover + Drilldown +12,Flow/Process Data,flow/process-data,Sankey Diagram,"Alluvial, Chord Diagram",Gradient from source to target. Opacity 0.4-0.6 for flows.,⚠ Moderate,⚠ Poor - provide flow table alternative.,"D3.js (d3-sankey), Plotly",Hover + Drilldown +13,Cumulative Changes,cumulative-changes,Waterfall Chart,"Stacked Bar, Cascade",Increases: #4CAF50. Decreases: #F44336. Start: #2196F3. End: #0D47A1.,⚡ Good,✓ Good - clear directional colors with labels.,"ApexCharts, Highcharts, Plotly",Hover +14,Multi-Variable Comparison,multi-variable-comparison,Radar/Spider Chart,"Parallel Coordinates, Grouped Bar",Single: #0080FF 20% fill. Multiple: distinct colors per dataset.,⚡ Good,⚠ Moderate - limit 5-8 axes. Add data table.,"Chart.js, Recharts, ApexCharts",Hover + Toggle +15,Stock/Trading OHLC,stock/trading-ohlc,Candlestick Chart,"OHLC Bar, Heikin-Ashi",Bullish: #26A69A. Bearish: #EF5350. Volume: 40% opacity below.,⚡ Good,⚠ Moderate - provide OHLC data table.,"Lightweight Charts (TradingView), ApexCharts",Real-time + Hover + Zoom +16,Relationship/Connection Data,relationship/connection-data,Network Graph,"Hierarchical Tree, Adjacency Matrix",Node types: categorical colors. Edges: #90A4AE 60% opacity.,❌ Poor (500+ nodes struggles),❌ Very Poor - provide adjacency list alternative.,"D3.js (d3-force), Vis.js, Cytoscape.js",Drilldown + Hover + Drag +17,Distribution/Statistical,distribution/statistical,Box Plot,"Violin Plot, Beeswarm",Box: #BBDEFB. Border: #1976D2. Median: #D32F2F. Outliers: #F44336.,⚡ Excellent,"✓ Good - include stats table (min, Q1, median, Q3, max).","Plotly, D3.js, Chart.js (plugin)",Hover +18,Performance vs Target (Compact),performance-vs-target-(compact),Bullet Chart,"Gauge, Progress Bar","Ranges: #FFCDD2, #FFF9C4, #C8E6C9. Performance: #1976D2. Target: black 3px.",⚡ Excellent,✓ Excellent - compact with clear values.,"D3.js, Plotly, Custom SVG",Hover +19,Proportional/Percentage,proportional/percentage,Waffle Chart,"Pictogram, Stacked Bar 100%",10x10 grid. 3-5 categories max. 2-3px spacing between squares.,⚡ Good,✓ Good - better than pie for accessibility.,"D3.js, React-Waffle, Custom CSS Grid",Hover +20,Hierarchical Proportional,hierarchical-proportional,Sunburst Chart,"Treemap, Icicle, Circle Packing",Center to outer: darker to lighter. 15-20% lighter per level.,⚠ Moderate,⚠ Poor - provide hierarchy table alternative.,"D3.js (d3-hierarchy), Recharts, ApexCharts",Drilldown + Hover +21,Root Cause Analysis,"root cause, decomposition, tree, hierarchy, drill-down, ai-split",Decomposition Tree,"Decision Tree, Flow Chart",Nodes: #2563EB (Primary) vs #EF4444 (Negative impact). Connectors: Neutral grey.,⚠ Moderate (calculation heavy),✓ clear hierarchy. Allow keyboard navigation for nodes.,"Power BI (native), React-Flow, Custom D3.js",Drill + Expand +22,3D Spatial Data,"3d, spatial, immersive, terrain, molecular, volumetric",3D Scatter/Surface Plot,"Volumetric Rendering, Point Cloud",Depth cues: lighting/shading. Z-axis: color gradient (cool to warm).,❌ Heavy (WebGL required),❌ Poor - requires alternative 2D view or data table.,"Three.js, Deck.gl, Plotly 3D",Rotate + Zoom + VR +23,Real-Time Streaming,"streaming, real-time, ticker, live, velocity, pulse",Streaming Area Chart,"Ticker Tape, Moving Gauge",Current: Bright Pulse (#00FF00). History: Fading opacity. Grid: Dark.,⚡ Optimized (canvas/webgl),⚠ Flashing elements - provide pause button. High contrast.,Smoothed D3.js, CanvasJS +24,Sentiment/Emotion,"sentiment, emotion, nlp, opinion, feeling",Word Cloud with Sentiment,"Sentiment Arc, Radar Chart",Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Size = Frequency.,⚡ Good,⚠ Word clouds poor for screen readers. Use list view.,"D3-cloud, Highcharts, Nivo",Hover + Filter +25,Process Mining,"process, mining, variants, path, bottleneck, log",Process Map / Graph,"Directed Acyclic Graph (DAG), Petri Net",Happy path: #10B981 (Thick). Deviations: #F59E0B (Thin). Bottlenecks: #EF4444.,⚠ Moderate to Heavy,⚠ Complex graphs hard to navigate. Provide path summary.,"React-Flow, Cytoscape.js, Recharts",Drag + Node-Click diff --git a/.claude/skills/ui-ux-pro-max/data/colors.csv b/.claude/skills/ui-ux-pro-max/data/colors.csv new file mode 100644 index 0000000..a187845 --- /dev/null +++ b/.claude/skills/ui-ux-pro-max/data/colors.csv @@ -0,0 +1,97 @@ +No,Product Type,Primary (Hex),Secondary (Hex),CTA (Hex),Background (Hex),Text (Hex),Border (Hex),Notes +1,SaaS (General),#2563EB,#3B82F6,#F97316,#F8FAFC,#1E293B,#E2E8F0,Trust blue + orange CTA contrast +2,Micro SaaS,#6366F1,#818CF8,#10B981,#F5F3FF,#1E1B4B,#E0E7FF,Indigo primary + emerald CTA +3,E-commerce,#059669,#10B981,#F97316,#ECFDF5,#064E3B,#A7F3D0,Success green + urgency orange +4,E-commerce Luxury,#1C1917,#44403C,#CA8A04,#FAFAF9,#0C0A09,#D6D3D1,Premium dark + gold accent +5,Service Landing Page,#0EA5E9,#38BDF8,#F97316,#F0F9FF,#0C4A6E,#BAE6FD,Sky blue trust + warm CTA +6,B2B Service,#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,Professional navy + blue CTA +7,Financial Dashboard,#0F172A,#1E293B,#22C55E,#020617,#F8FAFC,#334155,Dark bg + green positive indicators +8,Analytics Dashboard,#1E40AF,#3B82F6,#F59E0B,#F8FAFC,#1E3A8A,#DBEAFE,Blue data + amber highlights +9,Healthcare App,#0891B2,#22D3EE,#059669,#ECFEFF,#164E63,#A5F3FC,Calm cyan + health green +10,Educational App,#4F46E5,#818CF8,#F97316,#EEF2FF,#1E1B4B,#C7D2FE,Playful indigo + energetic orange +11,Creative Agency,#EC4899,#F472B6,#06B6D4,#FDF2F8,#831843,#FBCFE8,Bold pink + cyan accent +12,Portfolio/Personal,#18181B,#3F3F46,#2563EB,#FAFAFA,#09090B,#E4E4E7,Monochrome + blue accent +13,Gaming,#7C3AED,#A78BFA,#F43F5E,#0F0F23,#E2E8F0,#4C1D95,Neon purple + rose action +14,Government/Public Service,#0F172A,#334155,#0369A1,#F8FAFC,#020617,#E2E8F0,High contrast navy + blue +15,Fintech/Crypto,#F59E0B,#FBBF24,#8B5CF6,#0F172A,#F8FAFC,#334155,Gold trust + purple tech +16,Social Media App,#E11D48,#FB7185,#2563EB,#FFF1F2,#881337,#FECDD3,Vibrant rose + engagement blue +17,Productivity Tool,#0D9488,#14B8A6,#F97316,#F0FDFA,#134E4A,#99F6E4,Teal focus + action orange +18,Design System/Component Library,#4F46E5,#6366F1,#F97316,#EEF2FF,#312E81,#C7D2FE,Indigo brand + doc hierarchy +19,AI/Chatbot Platform,#7C3AED,#A78BFA,#06B6D4,#FAF5FF,#1E1B4B,#DDD6FE,AI purple + cyan interactions +20,NFT/Web3 Platform,#8B5CF6,#A78BFA,#FBBF24,#0F0F23,#F8FAFC,#4C1D95,Purple tech + gold value +21,Creator Economy Platform,#EC4899,#F472B6,#F97316,#FDF2F8,#831843,#FBCFE8,Creator pink + engagement orange +22,Sustainability/ESG Platform,#059669,#10B981,#0891B2,#ECFDF5,#064E3B,#A7F3D0,Nature green + ocean blue +23,Remote Work/Collaboration Tool,#6366F1,#818CF8,#10B981,#F5F3FF,#312E81,#E0E7FF,Calm indigo + success green +24,Mental Health App,#8B5CF6,#C4B5FD,#10B981,#FAF5FF,#4C1D95,#EDE9FE,Calming lavender + wellness green +25,Pet Tech App,#F97316,#FB923C,#2563EB,#FFF7ED,#9A3412,#FED7AA,Playful orange + trust blue +26,Smart Home/IoT Dashboard,#1E293B,#334155,#22C55E,#0F172A,#F8FAFC,#475569,Dark tech + status green +27,EV/Charging Ecosystem,#0891B2,#22D3EE,#22C55E,#ECFEFF,#164E63,#A5F3FC,Electric cyan + eco green +28,Subscription Box Service,#D946EF,#E879F9,#F97316,#FDF4FF,#86198F,#F5D0FE,Excitement purple + urgency orange +29,Podcast Platform,#1E1B4B,#312E81,#F97316,#0F0F23,#F8FAFC,#4338CA,Dark audio + warm accent +30,Dating App,#E11D48,#FB7185,#F97316,#FFF1F2,#881337,#FECDD3,Romantic rose + warm orange +31,Micro-Credentials/Badges Platform,#0369A1,#0EA5E9,#CA8A04,#F0F9FF,#0C4A6E,#BAE6FD,Trust blue + achievement gold +32,Knowledge Base/Documentation,#475569,#64748B,#2563EB,#F8FAFC,#1E293B,#E2E8F0,Neutral grey + link blue +33,Hyperlocal Services,#059669,#10B981,#F97316,#ECFDF5,#064E3B,#A7F3D0,Location green + action orange +34,Beauty/Spa/Wellness Service,#EC4899,#F9A8D4,#8B5CF6,#FDF2F8,#831843,#FBCFE8,Soft pink + lavender luxury +35,Luxury/Premium Brand,#1C1917,#44403C,#CA8A04,#FAFAF9,#0C0A09,#D6D3D1,Premium black + gold accent +36,Restaurant/Food Service,#DC2626,#F87171,#CA8A04,#FEF2F2,#450A0A,#FECACA,Appetizing red + warm gold +37,Fitness/Gym App,#F97316,#FB923C,#22C55E,#1F2937,#F8FAFC,#374151,Energy orange + success green +38,Real Estate/Property,#0F766E,#14B8A6,#0369A1,#F0FDFA,#134E4A,#99F6E4,Trust teal + professional blue +39,Travel/Tourism Agency,#0EA5E9,#38BDF8,#F97316,#F0F9FF,#0C4A6E,#BAE6FD,Sky blue + adventure orange +40,Hotel/Hospitality,#1E3A8A,#3B82F6,#CA8A04,#F8FAFC,#1E40AF,#BFDBFE,Luxury navy + gold service +41,Wedding/Event Planning,#DB2777,#F472B6,#CA8A04,#FDF2F8,#831843,#FBCFE8,Romantic pink + elegant gold +42,Legal Services,#1E3A8A,#1E40AF,#B45309,#F8FAFC,#0F172A,#CBD5E1,Authority navy + trust gold +43,Insurance Platform,#0369A1,#0EA5E9,#22C55E,#F0F9FF,#0C4A6E,#BAE6FD,Security blue + protected green +44,Banking/Traditional Finance,#0F172A,#1E3A8A,#CA8A04,#F8FAFC,#020617,#E2E8F0,Trust navy + premium gold +45,Online Course/E-learning,#0D9488,#2DD4BF,#F97316,#F0FDFA,#134E4A,#5EEAD4,Progress teal + achievement orange +46,Non-profit/Charity,#0891B2,#22D3EE,#F97316,#ECFEFF,#164E63,#A5F3FC,Compassion blue + action orange +47,Music Streaming,#1E1B4B,#4338CA,#22C55E,#0F0F23,#F8FAFC,#312E81,Dark audio + play green +48,Video Streaming/OTT,#0F0F23,#1E1B4B,#E11D48,#000000,#F8FAFC,#312E81,Cinema dark + play red +49,Job Board/Recruitment,#0369A1,#0EA5E9,#22C55E,#F0F9FF,#0C4A6E,#BAE6FD,Professional blue + success green +50,Marketplace (P2P),#7C3AED,#A78BFA,#22C55E,#FAF5FF,#4C1D95,#DDD6FE,Trust purple + transaction green +51,Logistics/Delivery,#2563EB,#3B82F6,#F97316,#EFF6FF,#1E40AF,#BFDBFE,Tracking blue + delivery orange +52,Agriculture/Farm Tech,#15803D,#22C55E,#CA8A04,#F0FDF4,#14532D,#BBF7D0,Earth green + harvest gold +53,Construction/Architecture,#64748B,#94A3B8,#F97316,#F8FAFC,#334155,#E2E8F0,Industrial grey + safety orange +54,Automotive/Car Dealership,#1E293B,#334155,#DC2626,#F8FAFC,#0F172A,#E2E8F0,Premium dark + action red +55,Photography Studio,#18181B,#27272A,#F8FAFC,#000000,#FAFAFA,#3F3F46,Pure black + white contrast +56,Coworking Space,#F59E0B,#FBBF24,#2563EB,#FFFBEB,#78350F,#FDE68A,Energetic amber + booking blue +57,Cleaning Service,#0891B2,#22D3EE,#22C55E,#ECFEFF,#164E63,#A5F3FC,Fresh cyan + clean green +58,Home Services (Plumber/Electrician),#1E40AF,#3B82F6,#F97316,#EFF6FF,#1E3A8A,#BFDBFE,Professional blue + urgent orange +59,Childcare/Daycare,#F472B6,#FBCFE8,#22C55E,#FDF2F8,#9D174D,#FCE7F3,Soft pink + safe green +60,Senior Care/Elderly,#0369A1,#38BDF8,#22C55E,#F0F9FF,#0C4A6E,#E0F2FE,Calm blue + reassuring green +61,Medical Clinic,#0891B2,#22D3EE,#22C55E,#F0FDFA,#134E4A,#CCFBF1,Medical teal + health green +62,Pharmacy/Drug Store,#15803D,#22C55E,#0369A1,#F0FDF4,#14532D,#BBF7D0,Pharmacy green + trust blue +63,Dental Practice,#0EA5E9,#38BDF8,#FBBF24,#F0F9FF,#0C4A6E,#BAE6FD,Fresh blue + smile yellow +64,Veterinary Clinic,#0D9488,#14B8A6,#F97316,#F0FDFA,#134E4A,#99F6E4,Caring teal + warm orange +65,Florist/Plant Shop,#15803D,#22C55E,#EC4899,#F0FDF4,#14532D,#BBF7D0,Natural green + floral pink +66,Bakery/Cafe,#92400E,#B45309,#F8FAFC,#FEF3C7,#78350F,#FDE68A,Warm brown + cream white +67,Coffee Shop,#78350F,#92400E,#FBBF24,#FEF3C7,#451A03,#FDE68A,Coffee brown + warm gold +68,Brewery/Winery,#7C2D12,#B91C1C,#CA8A04,#FEF2F2,#450A0A,#FECACA,Deep burgundy + craft gold +69,Airline,#1E3A8A,#3B82F6,#F97316,#EFF6FF,#1E40AF,#BFDBFE,Sky blue + booking orange +70,News/Media Platform,#DC2626,#EF4444,#1E40AF,#FEF2F2,#450A0A,#FECACA,Breaking red + link blue +71,Magazine/Blog,#18181B,#3F3F46,#EC4899,#FAFAFA,#09090B,#E4E4E7,Editorial black + accent pink +72,Freelancer Platform,#6366F1,#818CF8,#22C55E,#EEF2FF,#312E81,#C7D2FE,Creative indigo + hire green +73,Consulting Firm,#0F172A,#334155,#CA8A04,#F8FAFC,#020617,#E2E8F0,Authority navy + premium gold +74,Marketing Agency,#EC4899,#F472B6,#06B6D4,#FDF2F8,#831843,#FBCFE8,Bold pink + creative cyan +75,Event Management,#7C3AED,#A78BFA,#F97316,#FAF5FF,#4C1D95,#DDD6FE,Excitement purple + action orange +76,Conference/Webinar Platform,#1E40AF,#3B82F6,#22C55E,#EFF6FF,#1E3A8A,#BFDBFE,Professional blue + join green +77,Membership/Community,#7C3AED,#A78BFA,#22C55E,#FAF5FF,#4C1D95,#DDD6FE,Community purple + join green +78,Newsletter Platform,#0369A1,#0EA5E9,#F97316,#F0F9FF,#0C4A6E,#BAE6FD,Trust blue + subscribe orange +79,Digital Products/Downloads,#6366F1,#818CF8,#22C55E,#EEF2FF,#312E81,#C7D2FE,Digital indigo + buy green +80,Church/Religious Organization,#7C3AED,#A78BFA,#CA8A04,#FAF5FF,#4C1D95,#DDD6FE,Spiritual purple + warm gold +81,Sports Team/Club,#DC2626,#EF4444,#FBBF24,#FEF2F2,#7F1D1D,#FECACA,Team red + championship gold +82,Museum/Gallery,#18181B,#27272A,#F8FAFC,#FAFAFA,#09090B,#E4E4E7,Gallery black + white space +83,Theater/Cinema,#1E1B4B,#312E81,#CA8A04,#0F0F23,#F8FAFC,#4338CA,Dramatic dark + spotlight gold +84,Language Learning App,#4F46E5,#818CF8,#22C55E,#EEF2FF,#312E81,#C7D2FE,Learning indigo + progress green +85,Coding Bootcamp,#0F172A,#1E293B,#22C55E,#020617,#F8FAFC,#334155,Terminal dark + success green +86,Cybersecurity Platform,#00FF41,#0D0D0D,#FF3333,#000000,#E0E0E0,#1F1F1F,Matrix green + alert red +87,Developer Tool / IDE,#1E293B,#334155,#22C55E,#0F172A,#F8FAFC,#475569,Code dark + run green +88,Biotech / Life Sciences,#0EA5E9,#0284C7,#10B981,#F0F9FF,#0C4A6E,#BAE6FD,DNA blue + life green +89,Space Tech / Aerospace,#F8FAFC,#94A3B8,#3B82F6,#0B0B10,#F8FAFC,#1E293B,Star white + launch blue +90,Architecture / Interior,#171717,#404040,#D4AF37,#FFFFFF,#171717,#E5E5E5,Minimal black + accent gold +91,Quantum Computing,#00FFFF,#7B61FF,#FF00FF,#050510,#E0E0FF,#333344,Quantum cyan + interference purple +92,Biohacking / Longevity,#FF4D4D,#4D94FF,#00E676,#F5F5F7,#1C1C1E,#E5E5EA,Bio red/blue + vitality green +93,Autonomous Systems,#00FF41,#008F11,#FF3333,#0D1117,#E6EDF3,#30363D,Terminal green + alert red +94,Generative AI Art,#18181B,#3F3F46,#EC4899,#FAFAFA,#09090B,#E4E4E7,Canvas neutral + creative pink +95,Spatial / Vision OS,#FFFFFF,#E5E5E5,#007AFF,#888888,#000000,#CCCCCC,Glass white + system blue +96,Climate Tech,#059669,#10B981,#FBBF24,#ECFDF5,#064E3B,#A7F3D0,Nature green + solar gold diff --git a/.claude/skills/ui-ux-pro-max/data/icons.csv b/.claude/skills/ui-ux-pro-max/data/icons.csv new file mode 100644 index 0000000..a85e97f --- /dev/null +++ b/.claude/skills/ui-ux-pro-max/data/icons.csv @@ -0,0 +1,101 @@ +No,Category,Icon Name,Keywords,Library,Import Code,Usage,Best For,Style +1,Navigation,menu,hamburger menu navigation toggle bars,Lucide,import { Menu } from 'lucide-react',,Mobile navigation drawer toggle sidebar,Outline +2,Navigation,arrow-left,back previous return navigate,Lucide,import { ArrowLeft } from 'lucide-react',,Back button breadcrumb navigation,Outline +3,Navigation,arrow-right,next forward continue navigate,Lucide,import { ArrowRight } from 'lucide-react',,Forward button next step CTA,Outline +4,Navigation,chevron-down,dropdown expand accordion select,Lucide,import { ChevronDown } from 'lucide-react',,Dropdown toggle accordion header,Outline +5,Navigation,chevron-up,collapse close accordion minimize,Lucide,import { ChevronUp } from 'lucide-react',,Accordion collapse minimize,Outline +6,Navigation,home,homepage main dashboard start,Lucide,import { Home } from 'lucide-react',,Home navigation main page,Outline +7,Navigation,x,close cancel dismiss remove exit,Lucide,import { X } from 'lucide-react',,Modal close dismiss button,Outline +8,Navigation,external-link,open new tab external link,Lucide,import { ExternalLink } from 'lucide-react',,External link indicator,Outline +9,Action,plus,add create new insert,Lucide,import { Plus } from 'lucide-react',,Add button create new item,Outline +10,Action,minus,remove subtract decrease delete,Lucide,import { Minus } from 'lucide-react',,Remove item quantity decrease,Outline +11,Action,trash-2,delete remove discard bin,Lucide,import { Trash2 } from 'lucide-react',,Delete action destructive,Outline +12,Action,edit,pencil modify change update,Lucide,import { Edit } from 'lucide-react',,Edit button modify content,Outline +13,Action,save,disk store persist save,Lucide,import { Save } from 'lucide-react',,Save button persist changes,Outline +14,Action,download,export save file download,Lucide,import { Download } from 'lucide-react',,Download file export,Outline +15,Action,upload,import file attach upload,Lucide,import { Upload } from 'lucide-react',,Upload file import,Outline +16,Action,copy,duplicate clipboard paste,Lucide,import { Copy } from 'lucide-react',,Copy to clipboard,Outline +17,Action,share,social distribute send,Lucide,import { Share } from 'lucide-react',,Share button social,Outline +18,Action,search,find lookup filter query,Lucide,import { Search } from 'lucide-react',,Search input bar,Outline +19,Action,filter,sort refine narrow options,Lucide,import { Filter } from 'lucide-react',,Filter dropdown sort,Outline +20,Action,settings,gear cog preferences config,Lucide,import { Settings } from 'lucide-react',,Settings page configuration,Outline +21,Status,check,success done complete verified,Lucide,import { Check } from 'lucide-react',,Success state checkmark,Outline +22,Status,check-circle,success verified approved complete,Lucide,import { CheckCircle } from 'lucide-react',,Success badge verified,Outline +23,Status,x-circle,error failed cancel rejected,Lucide,import { XCircle } from 'lucide-react',,Error state failed,Outline +24,Status,alert-triangle,warning caution attention danger,Lucide,import { AlertTriangle } from 'lucide-react',,Warning message caution,Outline +25,Status,alert-circle,info notice information help,Lucide,import { AlertCircle } from 'lucide-react',,Info notice alert,Outline +26,Status,info,information help tooltip details,Lucide,import { Info } from 'lucide-react',,Information tooltip help,Outline +27,Status,loader,loading spinner processing wait,Lucide,import { Loader } from 'lucide-react',,Loading state spinner,Outline +28,Status,clock,time schedule pending wait,Lucide,import { Clock } from 'lucide-react',,Pending time schedule,Outline +29,Communication,mail,email message inbox letter,Lucide,import { Mail } from 'lucide-react',,Email contact inbox,Outline +30,Communication,message-circle,chat comment bubble conversation,Lucide,import { MessageCircle } from 'lucide-react',,Chat comment message,Outline +31,Communication,phone,call mobile telephone contact,Lucide,import { Phone } from 'lucide-react',,Phone contact call,Outline +32,Communication,send,submit dispatch message airplane,Lucide,import { Send } from 'lucide-react',,Send message submit,Outline +33,Communication,bell,notification alert ring reminder,Lucide,import { Bell } from 'lucide-react',,Notification bell alert,Outline +34,User,user,profile account person avatar,Lucide,import { User } from 'lucide-react',,User profile account,Outline +35,User,users,team group people members,Lucide,import { Users } from 'lucide-react',,Team group members,Outline +36,User,user-plus,add invite new member,Lucide,import { UserPlus } from 'lucide-react',,Add user invite,Outline +37,User,log-in,signin authenticate enter,Lucide,import { LogIn } from 'lucide-react',,Login signin,Outline +38,User,log-out,signout exit leave logout,Lucide,import { LogOut } from 'lucide-react',,Logout signout,Outline +39,Media,image,photo picture gallery thumbnail,Lucide,import { Image } from 'lucide-react',,Image photo gallery,Outline +40,Media,video,movie film play record,Lucide,import { Video } from 'lucide-react',