该技能提供一套可维护、可访问且与设计系统一致的前端开发规范，核心是组件复用、设计保真、渲染策略与无障碍。
用途与主要能力：优先使用 shadcn/ui 组件，通过 cva 变体或组合扩展，避免自定义 CSS；代码需与 Design Tokens 1:1 对应，实现前先解决差异；默认使用 Server Components，仅在交互和 API 集成时用 Client Components；强制语义化 HTML 与屏幕阅读器兼容；编码前先查找既有工具或方案。
工具与性能：参考 react-best-practices 技能；目标 FCP<1s；用 next/dynamic 加载重组件、next/image 处理媒体、并行路由。Shadcn 流程为 shadcn_search_items_in_registries、shadcn_get_item_examples_from_registries、shadcn_get_add_command_for_items。
架构采用 FSD-lite：src/ 放共享逻辑，src/features/*/ 放特性逻辑，禁止跨特性导入，单向数据流。技术栈含 luxon、TailwindCSS v4 + shadcn/ui、ahooks、es-toolkit。工具函数优先用 es-toolkit，自实现逻辑需 >90% 单元测试覆盖率。设计令牌源在 packages/design-tokens（OKLCH），更新后运行 mise tokens:build；i18n 源在 packages/i18n，更新后运行 mise i18n:build，均不得硬编码。
组件策略：Server Components 用于布局、营销页与 SEO 元数据；Client Components 用于交互与 useQuery（Orval）钩子；每文件一个组件。文件用 kebab-case.tsx，组件/类型/接口用 PascalCase，函数/变量/钩子用 camelCase，常量用 SCREAMING_SNAKE_CASE；骨架屏放 src/features/[feature]/components/skeleton/。导入顺序为标准库、第三方、本地，必须用 @/ 绝对路径，禁止 ../../ 相对路径，接口/类型必须用 import type。状态管理：URL 用 jotai-location，服务端用 TanStack Query，客户端全局用 Jotai（尽量少用），表单用 @tanstack/react-form + zod，禁用已废弃 API。
UI 实现：参考 .agent/skills/frontend-engineer/examples/ 中的强制模式；优先使用 shadcn 原语（Card、Sheet、Typography、Table），而非 div 或通用类；通过 useResponsive 实现移动端 Drawer 与桌面端 Dialog；components/ui/* 视为只读，不可直接修改，正确做法是创建包装组件或用 cva 组合，错误做法是编辑 components/ui/button.tsx。
与设计师协作：将代码变量映射到 Figma 图层名；确保关键操作在首屏可见。评审清单：交互元素有 aria-label，标题语义化；移动端功能验证；无 CLS 且加载快；实现错误边界与加载骨架；复杂逻辑用 Vitest 覆盖；重构至 typecheck 与 bun lint 通过。限制：资料未提供具体平台、收费、价格或效果数据。