frontend-ui-engineering

仓库创建 2026年7月5日最近提交 22 天前SkillHot 收录 22 天前

▸ 精选理由

强调设计系统与可用性，适合产品化界面开发。

这个 Skill 做什么

构建生产级、可访问且性能优化的前端界面与组件。

做可上生产的前端界面，兼顾可访问性、性能和视觉打磨，让页面看起来像经验丰富工程师做的而不是 AI 生成的。构建组件、布局、状态管理或要达到设计级别质量时会用。重点是遵循 design system、处理交互细节和无障碍，而不是随手堆 UI。

▸ 展开 SKILL.md 英文原文

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

开发编程前端可访问性交互设计性能通用

Stars

Forks

仓库内 Skill

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

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

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/kulapoo/opencode-agent-harness/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 公开信息 · 原文版权归作者所有