AgentStack
Browse Sign in
Browse Why AgentStack Sell Docs
Sign in
SKILL verified MIT Self-run

Frontend Ui Best Practices

skill-jinsyin-skills-frontend-ui-best-practices · by JinsYin

React + shadcn/ui 后台管理系统的界面与交互规范。涵盖表单校验时机与错误呈现、弹窗抽屉的状态重置与破坏性操作确认、列表分页与表格对齐、日期数字格式、图标与提示的一致性、模块 README 文档要求。在编写、审查或重构前端页面时使用——尤其是做表单、列表页、弹窗抽屉、删除等破坏性操作、或调整界面文案与格式时。

↗ Repository
— No reviews yet
0 installs
33 views
0.0% view→install

Install

$ agentstack add skill-jinsyin-skills-frontend-ui-best-practices

✓ scanned · ✓ verified, works with Claude Code, Cursor, and more.

Security review

✓ Passed

No issues found. Passed automated security review. · v0.1.0 How review works →

  • ✓ Prompt-injection patterns
  • ✓ Secret / credential exfiltration
  • ✓ Dangerous shell & filesystem operations
  • ✓ Untrusted network calls
  • ✓ Known-malicious package signatures

What it can access

  • ✓ Network access No
  • ✓ Filesystem access No
  • ✓ Shell / process execution No
  • ✓ Environment & secrets No
  • ✓ Dynamic code execution No

From automated source analysis of v0.1.0. “Used” means the capability is present in the source — more access means more to trust, not that it’s unsafe.

View the full security report →

Verified badge

Passed review? Show it. Paste this badge into your README, it links to the public security report.

AgentStack Verified badge Links to your public security report.
[![AgentStack Verified](https://agentstack.voostack.com/badges/verified.svg)](https://agentstack.voostack.com/security/report/skill-jinsyin-skills-frontend-ui-best-practices)

Reliability & compatibility

✓ Security review passed
0 installs to date
— no reviews yet
● 1mo ago

Declared compatibility

Claude CodeClaude Desktop

Compatibility is declared by the source manifest. End-to-end runtime verification is coming, see below.

Preview Execution monitoring

We're building live execution health for every listing: tool-call success rate, median latency, uptime, and last-checked timestamps, measured, not self-reported. It isn't live yet, so we don't show numbers we can't stand behind.

How agent discovery & health will work →
Are you the author of Frontend Ui Best Practices? Claim this listing to set pricing, connect Stripe payouts, and keep 70% of every sale.
Sign up to claim

About

Frontend UI Best Practices

React + shadcn/ui 后台管理系统的界面规范，17 条规则分 6 类，按违反给用户造成的后果排序。

如何使用本 skill

不要一次读完所有规则。 先在下面的索引里定位与当前任务相关的条目，再按需 Read 对应文件：

rules/form-validation-timing.md
rules/overlay-reset-on-close.md

每条规则含：为什么、错误示例、正确示例。

| 你在做什么 | 先读 | |---|---| | 做表单（新建/编辑） | form-*、overlay-reset-on-close | | 做列表页 | list-*、format-date-number | | 做弹窗 / 抽屉 | overlay-* | | 做删除等破坏性操作 | overlay-confirm-destructive | | 调文案与格式 | format-* | | 加图标或提示 | consistency-* | | 新增子包 / 写模块文档 | stack-module-readme | | 界面走查 / 审查 | 按改动涉及的组件类型选对应分类 |

分类与影响级别

影响级别按用户后果划分：CRITICAL = 数据丢失或不可恢复的误操作；HIGH = 用户无法完成任务或被明确误导；MEDIUM = 能完成但体验受损；LOW = 观感不一致。

| 优先级 | 分类 | 影响 | 前缀 | 条数 | |---|---|---|---|---| | 1 | 弹层与破坏性操作 | CRITICAL | overlay- | 3 | | 2 | 表单 | HIGH | form- | 4 | | 3 | 列表与表格 | HIGH | list- | 3 | | 4 | 格式与文案 | MEDIUM | format- | 2 | | 5 | 视觉一致性 | LOW | consistency- | 3 | | 6 | 技术栈基线 | LOW | stack- | 2 |

规则索引

1. 弹层与破坏性操作 (CRITICAL)

  • overlay-confirm-destructive — 删除类操作用自定义确认弹窗，禁用原生 confirm，说清对象与后果
  • overlay-reset-on-close — 弹层关闭后必须重置表单值与校验错误，否则脏状态会被误提交
  • overlay-consistent-size — 同资源的新建/编辑/查看弹层尺寸一致，抽屉与弹窗遮罩一致

2. 表单 (HIGH)

  • form-validation-timing — blur 首验、出错后转 change 复验、submit 兜底
  • form-error-display — 错误三件套：边框变色 + 字段下方具体文案 + 输入时实时清除
  • form-disable-autofill — 关自动填充，密码框须用 new-password（off 对密码无效）
  • form-readonly-styling — 不可编辑时灰化文字而非输入框，悬停 not-allowed

3. 列表与表格 (HIGH)

  • list-windowed-pagination — 页码必须开窗，全量渲染在大数据量下卡死页面
  • list-table-alignment — 表头与单元格一律左对齐，空值显示 -
  • list-toolbar-order — 工具栏顺序：搜索 → 筛选 → 图标刷新；行内操作风格统一

4. 格式与文案 (MEDIUM)

  • format-date-number — 日期 YYYY-MM-DD，数字不加千分位逗号
  • format-language-naming — 界面默认中文，不暴露内部项目代号

5. 视觉一致性 (LOW)

  • consistency-toast — Toast 须图标 + 文字，图标按级别变色，错误须给具体原因
  • consistency-icons — 同功能全站同图标，集中导出而非各页自选
  • consistency-page-chrome — favicon / logo / 总条数 / 必填标记 / 可搜索下拉

6. 技术栈基线 (LOW)

  • stack-baseline — pnpm + Vite + React + TS + shadcn/ui + Tailwind
  • stack-module-readme — 根目录必有 README；monorepo 下每个子包也各有一份，单包只需根 README

与项目 CLAUDE.md 的关系

本 skill 是跨项目通用规范。凡涉及具体组织或项目的内容——平台中文名、邮箱域名、logo 规格、顶栏构成、目录结构、路由划分——一律以该项目的 CLAUDE.md 为准，冲突时 CLAUDE.md 优先。

不要把这里的内容复制进项目的 CLAUDE.md：CLAUDE.md 每会话常驻，重复内容的成本按会话数累计，且两份副本必然漂移。

全量编译版

需要一次性获取全部规则时读 AGENTS.md。该文件由 scripts/build.sh 从 rules/ 生成，不要手工编辑。

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

Install and usage instructions live in the source repository linked above.

Reviews

No reviews yet, be the first.

Write a review

Versions

  • v0.1.0 Imported from the upstream source.

More in Agent Skills