前端通用 Skills

    以下 Skills 不依赖特定前端框架，适用于任何前端项目的 UI 设计、Web 规范审查和 JavaScript 工具链。

    Tip

    本页属于技能系统的一部分。更多 Skills 资源：技能市场 | Superpowers

    推荐 Skills

    Frontend Design（Anthropic 官方）

    frontend-design 是 Anthropic 官方出品的设计技能，帮助 Claude Code 创建独特、高品质的前端界面，避免千篇一律的 "AI 风格" 设计。

    npx skills add https://github.com/anthropics/skills --skill frontend-design

    核心能力：

    特性说明
    美学方向规划在编码前引导选择视觉方向（极简、复古未来、奢华、有机等）
    设计基础要素强调排版、CSS 变量主题、动效、空间构图和纹理细节
    多框架支持生成 HTML/CSS/JS、React 或 Vue 代码
    反平庸设计避免过度使用的字体、陈旧配色和可预测布局
    Tip

    使用 frontend-design 前，先用自然语言描述你想要的视觉风格和目标受众，Claude Code 会根据这些信息生成更有针对性的设计方案。

    Web Design Guidelines（Vercel）

    web-design-guidelines 来自 Vercel Labs，提供 100+ 条 Web 界面最佳实践规则，用于审查 UI 代码的合规性。

    npx skills add vercel-labs/agent-skills

    审查维度：

    维度规则示例
    无障碍ARIA 标签、语义化 HTML、键盘导航
    表单autocomplete、校验和错误处理
    动画prefers-reduced-motion、合成器友好变换
    图片尺寸声明、懒加载、alt 文本
    性能虚拟化、布局抖动避免、preconnect
    深色模式color-scheme、theme-color meta 标签
    国际化Intl.DateTimeFormat、Intl.NumberFormat
    触控交互touch-action 属性、tap-highlight 处理
    Info

    安装后，直接让 Claude Code "审查我的 UI" 或 "检查无障碍合规性"，它会自动应用这 100+ 条规则进行审查。

    UI/UX Pro Max

    ui-ux-pro-max 是一个全面的设计智能系统，覆盖 10 个技术栈，内置设计系统生成和产品级 UI/UX 建议。

    npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max

    内置资源：

    资源数量
    设计风格50+ 种
    配色方案161 个
    字体搭配57 组
    UX 规则99 条（无障碍、触控、性能、响应式）
    图表类型25 种
    产品模式161 种（含推理规则）
    预建模板网站、落地页、仪表盘、管理后台、电商、SaaS 等

    支持的技术栈： React、Next.js、Vue、Svelte、SwiftUI、React Native、Flutter、Tailwind、shadcn/ui、HTML/CSS

    Tip

    这个 Skill 特别适合从零开始设计页面——告诉 Claude Code 你的产品类型（如"SaaS 仪表盘"或"电商落地页"），它会自动推荐配色、排版、布局和组件组合。

    UnJS

    unjs 提供 UnJS（Unified JavaScript）生态系统的完整知识，涵盖 60+ 个高质量、单一用途的 JavaScript 库和工具。这些库设计为可独立使用，也可协同工作，适用于任何 JavaScript 运行环境。

    npx skills add https://github.com/hairyf/skills --skill unjs

    核心库分类：

    分类代表库说明
    HTTP & 服务端H3, Nitro, Listhen轻量级 HTTP 框架和通用 Web 服务器
    HTTP 客户端Ofetch, Httpxy, Crosswsfetch 替代、HTTP/WebSocket 代理
    路由 & 请求Radix3, Hookable, UnctxRadix Tree 路由、Hooks 系统、组合式模式
    工具库Defu, Destr, Ohash, Pathe, UFO合并、JSON 解析、哈希、路径、URL
    存储 & 数据Unstorage, Db0异步键值存储、轻量 SQL 连接器
    配置管理C12, Confbox, Rc9智能配置加载、YAML/TOML/JSON 解析
    构建工具Unbuild, Unplugin统一构建系统、跨 bundler 插件
    模块系统Jiti, Mlly, Unimport运行时 TS/ESM、模块工具、自动导入
    CLI & 脚手架Citty, Giget, NypmCLI 构建器、模板下载、包管理器统一
    Info

    UnJS 的包大多被 Nuxt 3 和 Nitro 内部使用。即使你的项目不是 Nuxt，这些独立包也可以在任何 JavaScript 项目中使用——例如 ofetch 替代 axios，c12 加载配置文件，consola 替代 console.log。

    下一步