← 返回 Skills 市场
liuganghao

gld_ue_template

作者 liuganghao · GitHub ↗ · v1.0.0 · MIT-0
cross-platform ✓ 安全检测通过
186
总下载
0
收藏
0
当前安装
1
版本数
在 OpenClaw 中安装
/install gld-ue-template
功能描述
Unified Design and Interaction Standard Template for EPC Management System, complete React + Ant Design (JavaScript) project template and interactive specifi...
使用说明 (SKILL.md)

gld_ue_template

Unified Design and Interaction Standard Template for EPC Management System. This SKILL provides a complete React + Ant Design (JavaScript) project template and interactive specification documentation.

1. Design System Specifications

1.1 Color System

Primary Colors (主色)

  • Primary Blue: #3c83f8 (Brand color, active states, primary buttons)
  • Blue Hover: #5995f9
  • Blue Active/Click: #2b6bd9
  • Blue Soft: #ecf3ff (Backgrounds for active items)

Functional Colors (功能色)

  • Success Green: #46bc46 (Success states, positive metrics)
  • Warning Orange: #f7c03e (Warning states, medium risk)
  • Danger Red: #ef5f59 (Error states, high risk, negative metrics)
  • Purple: #a855f7 (Categorization, special items)

Neutral Colors (中性色)

  • Page Background: #E9F2FB
  • Surface (Cards/Panels): #ffffff
  • Surface Soft: #fafafa
  • Line/Border: #dfdfdf
  • Line Soft: #e5e5e5
  • Text Main: #262626
  • Text Sub: #595959
  • Text Faint: #8c8c8c

1.2 Typography System

Font Family "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif

Font Sizes & Weights

  • Base Size: 14px (Regular 400)
  • Page Title: 24px (Bold 700)
  • Section Title: 16px (Medium 450/500)
  • Metric Value: 34px (Medium 450/500)
  • Small Text/Meta: 12px (Regular 400)

Line Heights

  • Tight: 1.2
  • Normal: 1.5
  • Relaxed: 1.8

1.3 Spacing & Layout System

Spacing Scale

  • xs: 4px
  • sm: 8px
  • md: 16px
  • lg: 24px
  • xl: 32px
  • 2xl: 48px

Border Radius

  • sm: 2px
  • md: 4px
  • lg: 8px
  • Cards/Panels: 12px or 14px
  • Pills/Badges: 16px or 50%

Shadows

  • sm: 0 1px 2px rgba(0, 0, 0, 0.05)
  • md: 0 4px 6px rgba(0, 0, 0, 0.1)
  • lg: 0 10px 15px rgba(0, 0, 0, 0.15)
  • hover: 0 8px 25px rgba(0, 0, 0, 0.2)

2. Navigation System Standards

2.1 Global Navigation (Top Header)

  • Represents first-level menus.
  • Default first item is "首页" (Home).
  • Header height: 54px, rounded corners (30px), gradient background (linear-gradient(90deg, #ffffff 0%, #eef5ff 76%, #dcecff 100%)).

2.2 Secondary Navigation (Left Sidebar)

  • "首页" (Home) has NO secondary left sidebar menu. The content area takes full width.
  • All other first-level menus have 2/3 level nested left sidebar menus.
  • Parent items in the sidebar are only navigation groups (click to expand/collapse).
  • Only final level navigation items correspond to actual page routes.
  • Active state styling: Background #fff3e6, Text #f0932b, Font Weight 450.

2.3 Breadcrumb Navigation

  • Component: Located in src/components/Breadcrumb.jsx.
  • Functionality: Automatically generates breadcrumbs by parsing the current route path.
  • Mapping: Uses a breadcrumbMap object to map URL segments to their display names.
  • Styling:
    • Container (.crumb-row): Flex layout with a 6px gap and 10px bottom padding.
    • Items (.breadcrumb): Uses text-faint color. Hovering changes the color to the brand primary blue.
    • Current Page: Marked with the current class, uses text-main color, 600 font weight, and is not a link.
    • Separators: Displays a / character between items.
  • Integration: Included by default in SidebarLayout.

3. Component Specifications

3.1 Buttons

  • Primary Button: Background #3c83f8, Text #fff, Border Radius 4px, Height 32px.
  • Ghost Button: Background #fff, Text #595959, Border #dfdfdf, Height 32px. Hover: Border #5995f9, Text #5995f9.

3.2 Tags & Badges

  • Blue Tag: Color #3c83f8, Background #ecf3ff.
  • Orange Tag: Color #f7c03e, Background #fff9f2.
  • Green Tag: Color #46bc46, Background #f7fff2.
  • Red Tag: Color #ef5f59, Background #fff2f4.
  • Gray Tag: Color #8c8c8c, Background #f2f2f2.

3.3 Metric Cards

  • White background, 12px border radius, 1px solid #e5e5e5 border.
  • Header with label and icon tile (32x32px, 10px radius).
  • Large value text (34px, #0f348c or status color).
  • Footer with muted description text.

3.4 Tables

  • Header: Background #f6faff, Text #595959, Font Weight 600, Border Bottom #e5e5e5.
  • Body: Text #595959, Border Bottom #e5e5e5. Hover Background #ecf3ff.
  • Category Rows: Background #f3f7ff, Font Weight 450, Left border indicating category color.

3.5 Modals

  • Overlay: rgba(0,0,0,0.45).
  • Content: Background #fff, Border Radius 12px, Max Width 800px.
  • Header: Title 16px Medium, Close button.
  • Animation: modalIn 0.2s ease-out (scale 0.95 to 1, opacity 0 to 1).

4. How to Use This Template

When a user requests to create or modify a frontend project using this standard:

  1. Initialize Project: Copy the contents of the template directory to the target project folder.
  2. Install Dependencies: Run npm install (React 18, Ant Design 5.x, React Router v6, Chart.js).
  3. Follow Navigation Rules: Ensure "首页" has no sidebar, and other sections use the nested sidebar structure.
  4. Use Provided Components: Utilize the pre-built layout and UI components to maintain 100% design consistency.
  5. No TypeScript: Write all code in JavaScript (.js / .jsx).

5. Template Structure

The template directory contains a complete React application:

  • src/App.jsx: Routing configuration.
  • src/layouts/: GlobalLayout, SidebarLayout.
  • src/pages/: Home, ListManagement (Demo pages).
  • src/components/: Reusable UI components (MetricCard, Tag, etc.).
  • src/styles/: Global CSS variables and overrides.
安全使用建议
This appears to be a legitimate React + Ant Design template. Before installing or using it: 1) Verify the source repository (the SKILL homepage points to a placeholder org — confirm the real upstream repo/maintainer). 2) Review package-lock.json (included) for unexpected or high-risk dependencies and known-vulnerable package versions. 3) Run npm install / build in an isolated environment (container or VM) if you are unsure, and avoid running scripts with elevated privileges. 4) If you will deploy produced code to production, perform your usual supply-chain and dependency audits (SCA) and scan the compiled/dist assets for any unexpected network calls; the provided files here contain only frontend code and no obvious exfiltration endpoints. 5) If you need provenance, ask the publisher for the canonical GitHub/org link and commit history to confirm authenticity.
功能分析
Type: OpenClaw Skill Name: gld-ue-template Version: 1.0.0 The skill bundle is a legitimate React + Ant Design project template for an EPC (Engineering, Procurement, and Construction) management system. The SKILL.md file provides detailed design specifications and usage instructions that align with the provided source code in the template directory. The project uses standard dependencies (React 18, Ant Design 5, Chart.js), and the minified production assets in the dist folder are consistent with the source code in src/. No indicators of data exfiltration, malicious execution, or prompt injection were detected.
能力评估
ℹ Purpose & Capability
Name/description claim a React + Ant Design project template and the skill requires node/npm and includes a template directory with expected source files — this matches. Minor mismatches: registry metadata said "No install spec — instruction-only" while SKILL.md contains an install step (npm install). The homepage URL uses a placeholder org (https://github.com/your-org/gld_ue_template), which may indicate the published metadata wasn't updated.
✓ Instruction Scope
SKILL.md instructs copying the template directory into a project and running `npm install`. The runtime instructions and included source files only reference frontend build/run actions and local file copying. There are no instructions to read unrelated system files, access credentials, or send data to external endpoints.
ℹ Install Mechanism
There is no external download URL or custom installer; the intended install step is `npm install`, which will fetch dependencies from the public npm registry. This is expected for a JS template but does carry the usual supply-chain risk of installing many packages; the repo includes package-lock.json so the dependency list is visible.
✓ Credentials
The skill requests no environment variables, credentials, or config paths. Requiring node and npm is proportionate for a JavaScript project template.
✓ Persistence & Privilege
The skill is not always-enabled and doesn't request elevated persistence or modify other skills. It is user-invocable and allows autonomous invocation (platform default), which is not by itself a problem here.
如何使用
  1. 确保已安装 OpenClaw（本地或 Docker 部署）
  2. 在对话框中输入安装命令：/install gld-ue-template
  3. 安装完成后，直接呼叫该 Skill 的名称或使用 /gld-ue-template 触发
  4. 根据 Skill 的参数说明提供必要输入，即可获得结构化输出
版本历史
v1.0.0
Initial release: EPC管理系统统一设计与交互标准模板，包含完整React+Ant Design项目模板和交互规范文档
元数据
Slug gld-ue-template
版本 1.0.0
许可证 MIT-0
累计安装 0
当前安装数 0
历史版本数 1
常见问题

gld_ue_template 是什么？

Unified Design and Interaction Standard Template for EPC Management System, complete React + Ant Design (JavaScript) project template and interactive specifi... 它是一个面向 Claude Code / OpenClaw 的 AI Agent Skill 插件，目前累计下载 186 次。

如何安装 gld_ue_template？

在 OpenClaw 或 Claude Code 对话框中运行命令「/install gld-ue-template」即可一键安装，无需额外配置。

gld_ue_template 是免费的吗？

是的，gld_ue_template 完全免费，采用 MIT-0 许可证，可自由下载、安装和使用。

gld_ue_template 支持哪些平台？

gld_ue_template 跨平台运行，可在任意部署了 OpenClaw / Claude Code 的环境中使用（cross-platform）。

谁开发了 gld_ue_template？

由 liuganghao（@liuganghao）开发并维护，当前版本 v1.0.0。

推荐 Skills
self-improving agent
Captures learnings, errors, and corrections to enable continuous improvement. Use when: (1) A command or operation fails unexpectedly, (2) User corrects Clau...
⬇ 463283 · by pskoett
Skill Vetter
Security-first skill vetting for AI agents. Use before installing any skill from ClawdHub, GitHub, or other sources. Checks for red flags, permission scope, and suspicious patterns.
⬇ 259410 · by spclaudehome
Polymarket
Query Polymarket prediction markets. Check odds, find trending markets, search events, track price movements.
⬇ 232503 · by joelchance
Self-Improving + Proactive Agent
Self-reflection + Self-criticism + Self-learning + Self-organizing memory. Agent evaluates its own work, catches mistakes, and improves permanently. Use when...
⬇ 200423 · by ivangdavila
Github
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
⬇ 191115 · by steipete
ontology
Typed knowledge graph for structured agent memory and composable skills. Use when creating/querying entities (Person, Project, Task, Event, Document), linkin...
⬇ 190156 · by oswalpalash

💬 留言讨论