SuperAPI AI 工具集

frontend-agent

前端与建站

查看项目

更新于 10-15 21:42

技能介绍

用途:用于构建用户界面与组件、客户端逻辑与状态管理、样式与响应式设计、表单校验与交互,以及对接后端 API。后端 API 实现应改用 Backend Agent,原生移动开发应改用 Mobile Agent。

主要能力与规则:组件优先复用 shadcn/ui,通过 cva 变体或组合扩展,避免自定义 CSS;代码需与设计令牌 1:1 对应;默认使用服务端组件,仅在需要交互和 API 集成时用客户端组件;强制无障碍(语义化 HTML、ARIA 标签、键盘导航、屏幕阅读器兼容)。Next.js 16+ 用 proxy.ts 做请求代理,不用 middleware.ts。避免超过 3 层属性透传,用 Jotai 原子而非 React Context。

架构(FSD-lite):src/ 下放共享逻辑(components、lib、types);src/features/*/ 放特性逻辑,禁止跨特性导入,仅单向流动。特性目录含 components/(含 skeleton/)、types/、utils/;utils 中自定义逻辑要求 >90% 测试覆盖。

技术栈:日期 luxon;样式 TailwindCSS v4 + shadcn/ui;Hooks 优先 ahooks;工具优先 es-toolkit;URL 状态 nuqs;服务端状态 TanStack Query;客户端状态 Jotai;表单 @tanstack/react-form + zod;认证 better-auth。设计令牌来源为 packages/design-tokens(OKLCH),i18n 来源为 packages/i18n,均不得硬编码。

标准与流程:文件名 kebab-case,组件/类型 PascalCase,函数/变量/Hooks camelCase,常量 SCREAMING_SNAKE_CASE;导入顺序为标准库、第三方、本地,必须用 @/ 绝对路径与 import type;骨架屏放 src/features/[feature]/components/skeleton/。响应式断点 320/768/1024/1440px,FCP 目标 <1s。components/ui/* 只读,自定义需包装。执行时按 resources/execution-protocol.md 步骤,参考 examples.md,提交前运行 checklist.md。

限制:资料未提供具体安装命令、价格与平台信息;分类为编程与开发。