Skip to content

Commit fb968f2

Browse files
Copilothotlong
andcommitted
Add bilingual quick reference guide for AI prompts
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
1 parent 46362d5 commit fb968f2

File tree

1 file changed

+243
-0
lines changed

1 file changed

+243
-0
lines changed

.github/prompts/QUICK_REFERENCE.md

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
# ObjectUI AI 开发提示词快速参考 / Quick Reference
2+
3+
[English](#english) | [中文](#中文)
4+
5+
---
6+
7+
## 中文
8+
9+
### 概述
10+
11+
这个目录包含了 ObjectUI 各个核心组件的 AI 开发和优化提示词。这些提示词可以用于指导 AI 助手(如 GitHub Copilot、ChatGPT、Claude 等)在开发 ObjectUI 组件时遵循正确的模式和最佳实践。
12+
13+
### 文件组织
14+
15+
```
16+
.github/prompts/
17+
├── README.md # 主文档(英文)
18+
├── QUICK_REFERENCE.md # 本文件(中英双语)
19+
├── core-packages/ # 核心包提示词
20+
│ ├── types-package.md # 类型定义包
21+
│ ├── core-package.md # 核心引擎包
22+
│ ├── react-package.md # React 绑定包
23+
│ └── components-package.md # UI 组件包
24+
├── components/ # 组件类别提示词
25+
│ ├── basic-components.md # 基础组件
26+
│ ├── layout-components.md # 布局组件
27+
│ ├── form-components.md # 表单组件
28+
│ ├── data-display-components.md # 数据展示组件
29+
│ ├── feedback-components.md # 反馈组件
30+
│ ├── overlay-components.md # 浮层组件
31+
│ ├── navigation-components.md # 导航组件
32+
│ └── disclosure-complex-components.md # 折叠与复杂组件
33+
├── plugins/ # 插件开发
34+
│ └── plugin-development.md # 插件开发指南
35+
└── tools/ # 开发工具
36+
└── designer-cli-runner.md # 设计器、CLI 和运行器
37+
```
38+
39+
### 使用方法
40+
41+
#### 1. 开发新组件时
42+
43+
选择对应类别的提示词文件,例如:
44+
45+
- 开发按钮组件 → `components/form-components.md`
46+
- 开发网格布局 → `components/layout-components.md`
47+
- 开发对话框 → `components/overlay-components.md`
48+
49+
#### 2. 使用 AI 助手
50+
51+
将提示词内容复制给 AI 助手:
52+
53+
```
54+
我需要开发一个新的表单组件。请参考这个开发指南:
55+
[粘贴 form-components.md 的内容]
56+
57+
现在帮我创建一个日期选择器组件...
58+
```
59+
60+
#### 3. 使用 GitHub Copilot Chat
61+
62+
```
63+
使用 .github/prompts/components/form-components.md 中的指南帮我添加一个新的日期选择器组件
64+
```
65+
66+
### 核心原则
67+
68+
所有 ObjectUI 组件开发都应遵循以下原则:
69+
70+
1. **JSON Schema 优先**: 所有组件必须完全可通过 JSON 配置
71+
2. **零运行时开销**: 只使用 Tailwind CSS,禁止内联样式
72+
3. **无状态组件**: 组件由 schema props 控制
73+
4. **关注点分离**: types → core → react → components
74+
5. **TypeScript 严格模式**: 所有代码必须通过 `tsc --strict`
75+
6. **可访问性优先**: WCAG 2.1 AA 标准
76+
7. **测试要求**: 逻辑单元测试 + 渲染器集成测试
77+
78+
### 快速链接
79+
80+
**核心包开发:**
81+
- [类型定义 (types)](core-packages/types-package.md) - 纯 TypeScript 接口
82+
- [核心逻辑 (core)](core-packages/core-package.md) - Schema 验证和引擎
83+
- [React 绑定 (react)](core-packages/react-package.md) - Hooks 和 Context
84+
- [UI 组件 (components)](core-packages/components-package.md) - Shadcn 实现
85+
86+
**组件类别:**
87+
- [基础组件](components/basic-components.md) - text, image, icon, div
88+
- [布局组件](components/layout-components.md) - grid, flex, container, card
89+
- [表单组件](components/form-components.md) - input, select, checkbox, button
90+
- [数据展示](components/data-display-components.md) - list, table, badge, avatar
91+
- [反馈组件](components/feedback-components.md) - loading, progress, skeleton
92+
- [浮层组件](components/overlay-components.md) - dialog, popover, tooltip
93+
- [导航组件](components/navigation-components.md) - tabs, breadcrumb, menu
94+
- [复杂组件](components/disclosure-complex-components.md) - accordion, crud, calendar
95+
96+
**扩展开发:**
97+
- [插件开发](plugins/plugin-development.md) - 创建自定义插件
98+
- [工具开发](tools/designer-cli-runner.md) - Designer、CLI、Runner
99+
100+
### 统计信息
101+
102+
- **总文件数**: 15 个 Markdown 文件
103+
- **总行数**: ~6,500 行
104+
- **覆盖组件**: 60+ 组件类型
105+
- **包含示例**: 200+ 代码示例
106+
107+
---
108+
109+
## English
110+
111+
### Overview
112+
113+
This directory contains AI development and optimization prompts for each core component of ObjectUI. These prompts guide AI assistants (like GitHub Copilot, ChatGPT, Claude, etc.) to follow correct patterns and best practices when developing ObjectUI components.
114+
115+
### File Organization
116+
117+
See the Chinese section above for the directory structure.
118+
119+
### How to Use
120+
121+
#### 1. When Developing a New Component
122+
123+
Choose the corresponding prompt file, for example:
124+
125+
- Developing a button → `components/form-components.md`
126+
- Developing a grid layout → `components/layout-components.md`
127+
- Developing a dialog → `components/overlay-components.md`
128+
129+
#### 2. With AI Assistants
130+
131+
Copy the prompt content to your AI assistant:
132+
133+
```
134+
I need to develop a new form component. Please refer to this development guide:
135+
[Paste content from form-components.md]
136+
137+
Now help me create a date picker component...
138+
```
139+
140+
#### 3. With GitHub Copilot Chat
141+
142+
```
143+
Use the guide from .github/prompts/components/form-components.md to help me add a new date picker component
144+
```
145+
146+
### Core Principles
147+
148+
All ObjectUI component development should follow these principles:
149+
150+
1. **JSON Schema First**: All components must be fully configurable via JSON
151+
2. **Zero Runtime Overhead**: Only Tailwind CSS, no inline styles
152+
3. **Stateless Components**: Controlled by schema props
153+
4. **Separation of Concerns**: types → core → react → components
154+
5. **TypeScript Strict Mode**: All code must pass `tsc --strict`
155+
6. **Accessibility First**: WCAG 2.1 AA minimum
156+
7. **Testing Required**: Unit tests for logic + integration tests for renderers
157+
158+
### Quick Links
159+
160+
**Core Packages:**
161+
- [Types (types)](core-packages/types-package.md) - Pure TypeScript interfaces
162+
- [Core Logic (core)](core-packages/core-package.md) - Schema validation & engine
163+
- [React Bindings (react)](core-packages/react-package.md) - Hooks & Context
164+
- [UI Components (components)](core-packages/components-package.md) - Shadcn implementation
165+
166+
**Component Categories:**
167+
- [Basic Components](components/basic-components.md) - text, image, icon, div
168+
- [Layout Components](components/layout-components.md) - grid, flex, container, card
169+
- [Form Components](components/form-components.md) - input, select, checkbox, button
170+
- [Data Display](components/data-display-components.md) - list, table, badge, avatar
171+
- [Feedback Components](components/feedback-components.md) - loading, progress, skeleton
172+
- [Overlay Components](components/overlay-components.md) - dialog, popover, tooltip
173+
- [Navigation Components](components/navigation-components.md) - tabs, breadcrumb, menu
174+
- [Complex Components](components/disclosure-complex-components.md) - accordion, crud, calendar
175+
176+
**Extensions:**
177+
- [Plugin Development](plugins/plugin-development.md) - Creating custom plugins
178+
- [Tools Development](tools/designer-cli-runner.md) - Designer, CLI, Runner
179+
180+
### Statistics
181+
182+
- **Total Files**: 15 Markdown files
183+
- **Total Lines**: ~6,500 lines
184+
- **Component Coverage**: 60+ component types
185+
- **Code Examples**: 200+ examples
186+
187+
### Usage Examples
188+
189+
#### Example 1: Creating a New Form Component
190+
191+
```bash
192+
# 1. Read the form components guide
193+
cat .github/prompts/components/form-components.md
194+
195+
# 2. Ask AI to help
196+
"Using the patterns in form-components.md, create a DatePicker component
197+
that supports:
198+
- Single date selection
199+
- Date range selection
200+
- Min/max date validation
201+
- Custom date format"
202+
```
203+
204+
#### Example 2: Developing a Plugin
205+
206+
```bash
207+
# 1. Read the plugin development guide
208+
cat .github/prompts/plugins/plugin-development.md
209+
210+
# 2. Create plugin structure
211+
"Following the plugin-development.md guide, scaffold a new maps plugin
212+
that integrates Google Maps with ObjectUI schemas"
213+
```
214+
215+
#### Example 3: Optimizing Existing Component
216+
217+
```bash
218+
# 1. Identify component category
219+
# 2. Read relevant guide
220+
cat .github/prompts/components/overlay-components.md
221+
222+
# 3. Ask for optimization
223+
"Review my Dialog component against the overlay-components.md guide
224+
and suggest improvements for accessibility and performance"
225+
```
226+
227+
---
228+
229+
## Contributing
230+
231+
To add or update prompts:
232+
233+
1. Follow the existing structure and format
234+
2. Include concrete, working examples
235+
3. Specify constraints clearly
236+
4. Link to relevant documentation
237+
5. Test the prompt with an AI agent before committing
238+
239+
---
240+
241+
**Version**: 1.0.0
242+
**Last Updated**: 2026-01-21
243+
**Maintainer**: ObjectUI Team

0 commit comments

Comments
 (0)