# Project Architecture

> 本技能应在涉及项目架构设计时使用，包括目录结构、文件组织、命名规范等。提供标准化指导以保持项目结构一致性。

- Skill: `zjc0230-code/project-architecture` (Agent Skill)
- Install (CLI): `npx skillmds@latest add zjc0230-code/project-architecture`
- Raw SKILL.md: https://api.skillmd.com/api/skills/zjc0230-code/project-architecture/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: zjc0230-code (https://skillmd.com/u/zjc0230-code)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/zjc0230-code/project-architecture

---


# 项目架构设计

本技能为项目架构设计提供标准化指导，确保项目结构的一致性和可维护性。

## 项目概述

这是一个简单的个人简历网站项目，采用纯 HTML + CSS + JavaScript 实现，同时作为知识库存储个人专业信息。

## 核心目录结构

项目根目录必须保持以下主要目录结构：

```
/
├── public/           # 静态资源（图片、字体、简历 HTML）
├── images/           # 项目 SVG 图标和图形
├── 知识库/           # 知识库（个人数据）
├── index.html        # 首页
└── .codebuddy/       # CodeBuddy 工作空间
```

## 命名规范

### 文件和目录命名

- **HTML 文件**: 小写 + 下划线或中划线（如 `contact.html`、`about_page.html`）
- **CSS 文件**: 小写 + 下划线（如 `main_style.css`）
- **JavaScript 文件**: 小驼峰（如 `main.js`、`utils.js`）
- **Markdown 文件**: 使用描述性中文名（如 `项目经验.md`）

### 变量命名（JavaScript）

- **变量和函数**: 小驼峰（如 `userName`、`fetchData`）
- **常量**: 全大写下划线（如 `MAX_ITEMS`、`API_ENDPOINT`）
- **CSS 类名**: 小写 + 中划线（如 `user-profile`、`contact-form`）

## 代码组织原则

1. **扁平结构**: 目录层级尽可能扁平（最多 2-3 层）
2. **就近原则**: HTML、CSS 和 JavaScript 相关文件保持接近
3. **单一职责**: 每个 HTML 页面只负责一个功能模块

## 何时使用本技能

在以下情况下触发本技能：

- 创建新的目录或文件
- 命名组件、函数或变量
- 组织代码结构
- 添加新功能或页面
- 重构现有代码
- 新人接手项目

## 关键架构决策

1. **纯 HTML 方案**：简单直接的实现，无需框架
2. **内联或外部 CSS**：根据页面复杂度选择样式组织方式
3. **原生 JavaScript**：保持轻量级，按需添加交互
4. **知识库分离**：数据源与应用代码分离

## 维护指南

- 保持目录结构简单清晰
- 引入重大架构变更时更新本技能
- 避免不必要的功能复杂化
- 优先使用原生 Web 标准
- 记录重要的架构决策