Token导航 LogoToken导航TokenDH.com
中转站排行榜
前端设计external-servicegithub未标认证来源可访问clear审计未展示

frontend-ui-ux（前端用户界面用户体验）

Agent Skill

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码，整理组件结构，或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式，避免只生成孤立片段；涉及页面改动时，应配合本地预览和构建检查确认视觉效果。

总安装

220

周安装

9

GitHub Stars

公开资料未说明

下载量

71
CodexClaudeCursorGemini CLI

安装说明

本站只整理中文说明和来源信息，不托管安装包，也不代用户安装。

GitHub

来源数

3

许可证

MIT

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：frontend-ui-ux（前端用户界面用户体验）
来源仓库：https://github.com/huynhsang2005/blog-tanstack
仓库路径：skills/frontend-ui-ux
安装命令：
npx skills add https://github.com/huynhsang2005/blog-tanstack --skill frontend-ui-ux
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。不同来源提供的安装方式可能略有差异；本站展示可直接复制的安装命令，安装前请核对来源页面。

skills.shnpx skills
npx skills add https://github.com/huynhsang2005/blog-tanstack --skill frontend-ui-ux

简介

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。

  • 适合处理 React、Next.js、Vue、Tailwind、CSS 等主流技术栈的代码生成与审查。
  • 可整理组件结构、定位布局问题，并建议性能优化方案。
  • 需结合项目现有设计系统和构建流程使用，避免生成孤立代码片段。
  • 涉及页面改动时应配合本地预览和构建检查确认实际效果。

SKILL.md

Frontend UI/UX Skill

Role mindset

  • Act like a designer who codes: spacing, rhythm, micro-interactions, and flow.
  • Blend into existing patterns; improve clarity and polish without breaking consistency.

Work principles

  1. Execute the exact task; no scope creep.
  2. Leave the app in a working state.
  3. Study existing patterns before changes.
  4. Make changes that look like the team wrote them.
  5. Be transparent about decisions and tradeoffs.

UX checklist

  • Visual hierarchy: clear primary action and content flow.
  • Spacing system: consistent rhythm (8px/4px grid), avoid ad-hoc gaps.
  • Interaction feedback: hover, focus, active, disabled states.
  • Accessibility: semantic HTML, labels, focus order, contrast.
  • Responsiveness: mobile-first, graceful scaling.

Tooling

  • Use shadcn MCP for components/variants and TanStack MCP for routing/data UX.

适合场景

01

用户想查找某类 Agent Skill 时

02

需要根据任务场景推荐可安装能力包时

03

需要对比不同来源的安装命令和来源信息时

04

需要参考平台分布和安装热度时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明，方便继续核验

能力 4

补充不同宿主或平台的使用分布数据

安装后应在对应宿主中按原始 README 的触发条件使用；具体调用方式请以来源页面和 README 为准。

平台分布

Claude Code

27.27%
按下载量换算19

OpenCode

23%
按下载量换算16

Codex

17.54%
按下载量换算12

Gemini CLI

10.24%
按下载量换算7

trae

7.8%
按下载量换算6

Cursor

3.46%
按下载量换算2

安全审计

暂无安全审计结果可展示。

权限和风险

external-service

该 Skill 可能调用第三方服务、云服务或外部模型 API，使用前需要确认账号、额度、数据发送范围和服务条款。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。

来源信息

GitHub 仓库

github.com

/huynhsang2005/blog-tanstack

SKILL.md 来源

github.com

/huynhsang2005/blog-tanstack/tree/main/skills/frontend-ui-ux

skills-sh

skills.sh

/huynhsang2005/blog-tanstack/frontend-ui-ux

agentskills-to

agentskills.to

/huynhsang2005/blog-tanstack/frontend-ui-ux

继续浏览同类 Skills

更多前端设计 Skills（10,216）返回 Skills 目录

上一个 Skill

frontend-ui-integration（前端用户界面集成）

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码，整理组件结构，或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式，避免只生成孤立片段；涉及页面改动时，应配合本地预览和构建检查确认视觉效果。

下一个 Skill

frontend-ui-ux（前端用户界面用户体验）

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码，整理组件结构，或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式，避免只生成孤立片段；涉及页面改动时，应配合本地预览和构建检查确认视觉效果。