‹ 首页

frontend-engineering

@developersglobal · 收录于 1 周前

Accessible, performant, responsive UI patterns. Component design, state management discipline, and Core Web Vitals compliance.

场景前端开发组件设计性能调优

适合你，如果你在开发前端界面，追求可访问性与性能

/ 下载安装
frontend-engineering.skill双击,或拖进 Claude 桌面版 / Cowork,即完成安装↓ .skill↓ .zip
用别的 agent?下载 .zip 解压,把文件夹放进它的技能目录
Claude Code~/.claude/skills/(项目级 .claude/skills/)
Codex CLI~/.codex/skills/
Cursor自动读取上面两处目录
其他工具见其文档的「skills」目录;两个下载是同一份文件,只是名字不同
/ 通过 npx 安装 校验哈希
npx oh-my-skill add developersglobal/ai-agent-skills/frontend-engineering
/ 通过 bash 安装
curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- developersglobal/ai-agent-skills/frontend-engineering
/ 已经装过?验证本机副本,不用重装
npx oh-my-skill verify developersglobal/ai-agent-skills/frontend-engineering
安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。
64GitHub stars
~575上下文体积 · 单文件
镜像托管

怎么用

技能原文 SKILL.md作者撰写 · MIT · f47f948
Overview

Frontend code touches every user. Poor UI engineering causes accessibility barriers, performance degradation, and broken experiences on non-standard devices. This skill enforces the discipline of building UI that works for everyone.

When to Use
  • Building any user-facing UI component
  • Reviewing frontend PRs
  • Before any UI ships to production
Process
Step 1: Accessibility First
  1. Every interactive element has a visible focus state.
  2. All images have meaningful alt text (or alt="" for decorative).
  3. Color contrast ratio ≥ 4.5:1 for normal text.
  4. All functionality operable by keyboard alone.
  5. Use semantic HTML: <button> not <div onclick>, <nav> not <div class="nav">.

Verify: Run axe DevTools or Lighthouse accessibility audit. Score ≥ 90.

Step 2: Performance (Core Web Vitals)
  1. LCP (Largest Contentful Paint) < 2.5s: Optimize images, preload critical resources.
  2. FID/INP < 100ms: Avoid long tasks on the main thread.
  3. CLS (Cumulative Layout Shift) < 0.1: Reserve space for dynamic content.
  4. Lazy load below-the-fold images and non-critical JS.
  5. Bundle size: measure before and after. No unneeded dependencies.

Verify: Lighthouse performance score ≥ 80. CWV within targets.

Step 3: Responsive Design
  1. Test at 320px, 768px, 1024px, 1440px viewports.
  2. No horizontal scrolling at any standard viewport.
  3. Touch targets ≥ 44px × 44px.
Step 4: State Management Discipline
  1. Server state vs. client state are separate concerns — don't mix.
  2. No prop drilling more than 2 levels — use context or state management.
  3. Loading, error, and empty states handled for every async operation.

Verify: Loading, error, and empty states all visible in Storybook/dev environment.

Common Rationalizations (and Rebuttals)

| Excuse | Rebuttal | |--------|----------| | "Accessibility is for edge cases" | 1 in 4 adults has a disability. It's not an edge case. | | "We'll optimize performance later" | Users leave after 3 seconds. "Later" is too late. |

Verification
  • [ ] Accessibility audit score ≥ 90
  • [ ] Core Web Vitals within targets
  • [ ] Responsive at 320px/768px/1024px/1440px
  • [ ] Loading, error, empty states handled
  • [ ] All interactive elements keyboard-operable
References
  • [references/accessibility-checklist.md](../../references/accessibility-checklist.md)
  • [performance-optimization skill](../performance-optimization/SKILL.md)
按 MIT 许可原样转载,未经改动 · 在 GitHub 查看 →

评论

登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。
…