addyosmani/agent-skills✦ 精选0°

frontend-ui-engineering

仓库创建 2026年2月16日最近提交 21 小时前SkillHot 收录 20 天前

⬈ GitHub 仓库 ⬈ SKILL.md 原文件 ⬇ Raw 原始文件

▸ 精选理由

侧重工程级实现与设计系统一致性，适合交付级界面开发。

这个 Skill 做什么

指导构建可访问、性能优化且设计良好的生产级前端界面。

帮你把页面和组件做成可上线的界面：可访问（WCAG）、响应式且性能优化，界面看起来像顶级工程师做的而不是 AI 生成。适合在构建或改造页面、实现布局、做状态管理或需要严格可访问性时用。特别强调设计系统一致性、交互细节和真实的视觉打磨。

▸ 展开 SKILL.md 英文原文

Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.

开发编程前端组件化可访问性通用

8.1w

Stars

8.7k

Forks

仓库内 Skill

+10.0k

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/addyosmani/agent-skills/main/skills/frontend-ui-engineering/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/addyosmani/agent-skills/main/skills/frontend-ui-engineering/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

# Frontend UI Engineering

## Overview

Build production-quality user interfaces that are accessible, performant, and visually polished. The goal is UI that looks like it was built by a design-aware engineer at a top company — not like it was generated by an AI. This means real design system adherence, proper accessibility, thoughtful interaction patterns, and no generic "AI aesthetic."

## When to Use

- Building new UI components or pages
- Modifying existing user-facing interfaces
- Implementing responsive layouts
- Adding interactivity or state management
- Fixing visual or UX issues

## Component Architecture

### File Structure

Colocate everything related to a component:

```
src/comp

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有