frontend-component-design

前端组件设计规范与最佳实践。在编写任何前端代码（React/Next.js 组件、页面、hooks）时自动触发。确保代码复用性、封装性、单一职责原则。触发场景包括创建新的前端组件或页面、重构现有前端代码、添加新功能到前端、任何涉及 frontend 目录的代码修改。此技能始终生效。

11 stars

bycongwa

View on GitHub Installation ↓

Best use case

frontend-component-design is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Teams using frontend-component-design should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/frontend-component-design/SKILL.md --create-dirs "https://raw.githubusercontent.com/congwa/mobile-agent/main/.windsurf/skills/frontend-component-design/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/frontend-component-design/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How frontend-component-design Compares

Feature / Agent	frontend-component-design	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# 前端组件设计规范

确保前端代码的复用性、封装性和可维护性。

## 核心原则

### 1. 单一职责原则
- 每个文件只包含一个组件
- 每个组件只负责一个业务功能
- 组件代码不超过 **500 行**，超过则拆分

### 2. 组件拆分规则

```
# 拆分时机判断
if 组件 > 500 行:
    拆分为子组件
if 相同代码出现 >= 2 次:
    抽取为公共组件
if 业务逻辑复杂:
    抽取为 hooks
if 配置数据多:
    抽取为配置文件
```

### 3. 目录结构规范

```
frontend/
├── components/           # 公共组件
│   ├── ui/              # shadcn 基础组件
│   └── admin/           # 业务公共组件
├── app/                 # 页面
│   └── admin/
│       └── [feature]/
│           ├── page.tsx         # 主页面（协调逻辑）
│           └── components/      # 页面私有组件（可选）
├── lib/
│   ├── api/             # API 请求函数
│   ├── config/          # 配置和映射
│   └── hooks/           # 公共 hooks
├── hooks/               # 全局 hooks
└── types/               # 类型定义
```

### 4. 配置外置原则

将以下内容抽取到 `lib/config/` 目录：
- **标签映射** → `labels.ts` (英文→中文)
- **枚举常量** → `constants.ts`
- **表单配置** → `forms.ts`
- **主题配置** → `theme.ts`

示例：
```typescript
// lib/config/labels.ts
export const MIDDLEWARE_LABELS = {
  MemoryOrchestration: { label: "记忆编排", desc: "..." },
  // ...
};
export function getMiddlewareLabel(name: string) {
  return MIDDLEWARE_LABELS[name] || { label: name, desc: "" };
}
```

### 5. Hooks 抽取规则

抽取为 hook 的时机：
- 状态逻辑复杂（>5 个 useState）
- 数据获取逻辑
- 副作用逻辑复杂
- 相同逻辑在多处使用

命名规范：`use[业务名][动作]`
```typescript
// lib/hooks/use-agents.ts
export function useAgentDetail({ agentId }: { agentId: string }) {
  const [agent, setAgent] = useState<Agent | null>(null);
  // ...
  return { agent, isLoading, error, refresh };
}
```

### 6. 导入路径规范

始终使用 `@/` 别名，避免相对路径：
```typescript
// ✅ 正确
import { Button } from "@/components/ui/button";
import { getAgentEffectiveConfig } from "@/lib/api/agents";

// ❌ 错误
import { Button } from "../../components/ui/button";
```

## 编码前规划清单

编写前端代码前，必须回答：

1. **组件边界**：这个组件的职责是什么？是否单一？
2. **复用性**：是否有已存在的类似组件可复用？
3. **配置外置**：是否有硬编码的中文/配置需要抽取？
4. **文件大小**：预估代码行数，是否需要拆分？
5. **命名规范**：组件/文件命名是否清晰表达业务含义？

## 代码审查要点

完成编码后，检查：

- [ ] 单文件不超过 500 行
- [ ] 无重复代码（相同代码不超过 2 处）
- [ ] 所有中文标签来自配置文件
- [ ] 使用 `@/` 路径别名
- [ ] 组件职责单一
- [ ] 复杂逻辑已抽取为 hooks

Related Skills

web-design-guidelines

from congwa/mobile-agent

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

frontend-design

from congwa/mobile-agent

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

vercel-react-best-practices

from congwa/mobile-agent

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

ui-ux-pro-max

from congwa/mobile-agent

Comprehensive design guide for web and mobile applications. Contains 67 styles, 96 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 13 technology stacks. Searchable database with priority-based recommendations.

theme-factory

from congwa/mobile-agent

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

tailwindcss

from congwa/mobile-agent

Tailwind CSS v4 utility-first styling patterns including responsive design, dark mode, and custom configuration. Use when styling with Tailwind, adding utility classes, configuring Tailwind, setting up dark mode, or customizing the theme.

skill-creator

from congwa/mobile-agent

Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.

run-tests

from congwa/mobile-agent

后端代码测试验证规则。此技能在以下情况下自动触发： - 任何后端代码修改（backend/ 目录下的 .py 文件） - 新增功能开发 - Bug 修复 - 代码重构核心原则： 1. 后端代码修改必须有对应的测试用例 2. 修改业务逻辑时必须同步更新相关测试用例 3. 测试全部通过才算功能完成触发关键词：后端、backend、python、测试、test、pytest、功能、feature、修复、fix、实现、修改、完成、验证 alwaysApply: true

release

from congwa/mobile-agent

发版流程 - 仔细阅读上个版本到现在版本的内容，把更改功能放到项目CHANGELOG.md目录下，处理README图片引用，然后提交且推送所有源码到GitHub和Gitee双平台，再之后打tag 触发条件：用户要求发版、发布、release、打tag

readme-images

from congwa/mobile-agent

Handle README.md image references for GitHub and Gitee platforms. Use when writing or converting README.md files that contain images, ensuring correct image paths for each platform. GitHub READMEs use Qiniu cloud URLs (via qiniu-upload skill), Gitee READMEs use local relative image paths.

qiniu-upload

from congwa/mobile-agent

Upload images to Qiniu Cloud (七牛云) via local PicList/PicGo service and return the public access URL. Use when the user needs to upload images, screenshots, or any picture files to Qiniu cloud storage, get image hosting URLs, or publish images to http://qiniu.biomed168.com/pic/.

mobile-automation

from congwa/mobile-agent

Mobile MCP + 飞书 MCP 双协作自动化测试专家。