goldcard-web-devloper-skill
Gold Card (金卡) web frontend developer guidelines covering component library docs, coding standards, and portal identity center design. Use when working on Gold Card frontend components, applying 金卡前端编码规范, or integrating with the portal/identity center.
When & Why to Use This Skill
The Goldcard Web Developer Skill serves as a comprehensive technical reference for frontend engineers, providing instant access to Gold Card's official component library documentation, Vue 3 coding standards, and portal identity center design patterns. It streamlines the development workflow by ensuring all frontend implementations align with the organization's specific architectural requirements and UI/UX standards.
Use Cases
- Developing new web or mobile features using the standardized Gold Card component library to ensure UI consistency.
- Applying the '金卡前端编码规范' (Gold Card Frontend Coding Standards) during development or code reviews to maintain high code quality.
- Integrating frontend applications with the Portal Identity Center using micro-app initialization and post-message utilities.
- Quickly looking up API references, props, and event patterns for specific UI components, directives, or JS-bridge functions.
- Onboarding new developers to the Gold Card ecosystem by providing a centralized source of truth for project structures and naming conventions.
| name | goldcard-web-devloper-skill |
|---|---|
| description | Gold Card (金卡) web frontend developer guidelines covering component library docs, coding standards, and portal identity center design. Use when working on Gold Card frontend components, applying 金卡前端编码规范, or integrating with the portal/identity center. |
Goldcard Web Developer Skill
Overview
Use these references to implement Gold Card frontend features with the approved component library, coding standards, and portal identity center design patterns.
When to use
Quick start
- Identify whether the task is component usage, coding standards, or portal integration.
- Open the matching reference file(s) listed below.
- Follow the doc's API, props, and demo patterns; reuse existing examples where possible.
Reference map
- Component library:
references/components/- Web components, directives, utilities, and presets in
references/components/web/ - Mobile components in
references/components/mobile/ - JS-bridge docs in
references/components/js-bridge/ - CLI/i18n docs in
references/components/cli/ - Open API docs in
references/components/open-api/ - Three.js docs in
references/components/threejs/
- Web components, directives, utilities, and presets in
- Coding standards:
references/rule/code/index.md(examples inreferences/rule/code/demo1.vue) - Portal design (Identity Center):
references/scheme/identityCenter.md
Repositories
- Portal frontend:
http://10.200.1.145/web/platform/portal-front.git(branch:dev) - Operations management system frontend:
http://10.200.1.145/web/platform/operations-management-system.git(branch:dev)
Usage notes
- Prefer each component's
index.mdfor the main API and usage, then consult demo.vue/.jsfiles for concrete patterns. - Treat the coding standards as source-of-truth for naming, project structure, and Vue 3 + Vite defaults.
- Resolve portal integration helpers like
microAppInitviareferences/components/web/utils/. - Note that some docs link to internal URLs; treat them as references if the links are not reachable.
Search tips
- Find a component or directive:
rg -n "ui-" references/components - Find a specific prop or API:
rg -n "props|emit|event" references/components - Find portal integration mentions:
rg -n "portal|microApp|postMessage" references