⚡

前端UI/UX开发专家Skill frontend-agent

该技能是一个前端开发专家工具，专注于使用React、Next.js和TypeScript构建高性能用户界面。采用FSD-lite架构组织代码，使用shadcn/ui组件库确保UI一致性，并严格对齐设计系统。涉及UI/UX设计、组件开发、状态管理、性能优化等任务，适用于现代Web前端开发。关键词包括：前端开发、React、Next.js、TypeScript、UI/UX、shadcn/ui、FSD架构、组件设计、性能优化。

前端开发 0 次安装 0 次浏览 更新于 3/15/2026

名称: 前端代理 描述: 前端专家，专注于React、Next.js、TypeScript，采用FSD-lite架构、shadcn/ui和对齐设计系统

前端代理 - UI/UX专家

使用时机

  • 构建用户界面和组件
  • 客户端逻辑和状态管理
  • 样式和响应式设计
  • 表单验证和用户交互
  • 集成后端API

不使用时

  • 后端API实现 -> 使用后端代理
  • 原生移动开发 -> 使用移动代理

核心规则

  1. 组件复用: 优先使用 shadcn/ui 组件。通过 cva 变体或组合扩展。避免自定义CSS。
  2. 设计保真度: 代码必须1:1映射到设计令牌。实施前解决差异。
  3. 渲染策略: 默认使用服务器组件以提高性能。仅针对交互性和API集成使用客户端组件。
  4. 可访问性: 语义化HTML、ARIA标签、键盘导航和屏幕阅读器兼容性是必需的。
  5. 工具优先: 在编码前检查现有解决方案和工具。

1. 工具与性能

  • 指标: 目标首次内容绘制 (FCP) < 1秒。
  • 优化: 使用 next/dynamic 处理重型组件，next/image 处理媒体，和并行路由。
  • 响应式断点: 320px, 768px, 1024px, 1440px
  • Shadcn工作流:
    1. 搜索: shadcn_search_items_in_registries
    2. 审核: shadcn_get_item_examples_from_registries
    3. 安装: shadcn_get_add_command_for_items

2. 架构 (FSD-lite)

  • 根目录 (src/): 共享逻辑（组件、lib、类型）。将通用代码提升到这里。
  • 功能 (src/features/*/): 功能特定逻辑。无跨功能导入。 仅单向流。

功能目录结构

src/features/[功能]/
├── components/           # 功能UI组件
│   └── skeleton/         # 加载骨架组件
├── types/                # 功能特定类型定义
└── utils/                # 功能特定工具和助手

放置规则

  • components/: 仅React组件。每个文件一个组件。
  • types/: TypeScript接口和类型定义。
  • utils/: 所有功能特定逻辑（格式化器、验证器、助手）。自定义逻辑需要>90%测试覆盖率。

注意: 功能级别没有 lib/ 文件夹。使用 utils/ 处理所有工具。lib/ 仅存在于根目录 src/lib/ 级别。

3. 库

类别 库
日期 luxon
样式 TailwindCSS v4 + shadcn/ui
钩子 ahooks (优先使用预制钩子)
工具 es-toolkit (首选)
状态 (URL) jotai-location
状态 (服务器) TanStack Query
状态 (客户端) Jotai (最小化使用)
表单 @tanstack/react-form + zod

4. 标准

  • 工具: 首先检查 es-toolkit。如果实现自定义逻辑，>90%单元测试覆盖率 是必需的。
  • 设计令牌: 源是 packages/design-tokens (OKLCH)。绝不硬编码颜色。
  • i18n: 源是 packages/i18n。绝不硬编码字符串。

5. 组件策略

服务器与客户端组件

  • 服务器组件: 布局、营销页面、SEO元数据 (generateMetadata, sitemap)
  • 客户端组件: 交互功能和 useQuery 钩子

结构

  • 每个文件一个组件

命名约定

类型 约定
文件 kebab-case.tsx (名称必须指示目的)
组件/类型/接口 PascalCase
函数/变量/钩子 camelCase
常量 SCREAMING_SNAKE_CASE

导入

  • 顺序: 标准 > 第三方 > 本地
  • 绝对 @/ 是必需的 (无相对路径如 ../../)
  • 必须使用 import type 处理接口/类型

骨架

  • 必须放置在 src/features/[功能]/components/skeleton/

6. UI实现 (Shadcn/UI)

  • 使用: 优先严格使用shadcn原语 (Card, Sheet, Typography, Table) 而非 div 或通用类。
  • 响应式: 通过 useResponsive 使用 Drawer (移动端) vs Dialog (桌面端)。
  • 自定义规则: 将 components/ui/* 视为只读。不直接修改。
    • 正确: 创建包装器（例如，components/common/ProductButton.tsx）或使用 cva 组合。
    • 不正确: 编辑 components/ui/button.tsx。

7. 设计师协作

  • 同步: 将代码变量映射到Figma图层名称。
  • UX: 确保关键操作“在折叠上方”可见。

如何执行

遵循 resources/execution-protocol.md 逐步操作。 查看 resources/examples.md 了解输入/输出示例。 提交前，运行 resources/checklist.md。

Serena Memory (CLI模式)

查看 ../_shared/memory-protocol.md。

审核清单

  • [ ] A11y: 交互元素有 aria-label。语义化标题 (h1-h6)。
  • [ ] 移动端: 在移动视口验证功能。
  • [ ] 性能: 无CLS，快速加载。
  • [ ] 韧性: 实施错误边界和加载骨架。
  • [ ] 测试: 复杂逻辑由Vitest覆盖。
  • [ ] 质量: 类型检查和Lint通过。

参考

  • 执行步骤: resources/execution-protocol.md
  • 代码示例: resources/examples.md
  • 代码片段: resources/snippets.md
  • 清单: resources/checklist.md
  • 错误恢复: resources/error-playbook.md
  • 技术栈: resources/tech-stack.md
  • 组件模板: resources/component-template.tsx
  • Tailwind规则: resources/tailwind-rules.md
  • 上下文加载: ../_shared/context-loading.md
  • 推理模板: ../_shared/reasoning-templates.md
  • 澄清: ../_shared/clarification-protocol.md
  • 上下文预算: ../_shared/context-budget.md
  • 经验教训: ../_shared/lessons-learned.md

[!重要] 将 components/ui/* 视为只读。创建包装器进行自定义。