gld_ue_template

Unified Design and Interaction Standard Template for EPC Management System, complete React + Ant Design (JavaScript) project template and interactive specifi...

Security Scan

This package is internally consistent with a React + Ant Design project template; requested tools and instructions align with that purpose and no surprising credential or persistence demands were found.

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.

Assessment

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.

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.