frontend-ui-engineering이란?
사용자 인터페이스를 구축하거나 수정할 때 사용합니다. 구성 요소 생성, 레이아웃 구현, 상태 관리 또는 출력이 AI 생성이 아닌 프로덕션 품질로 보이고 느껴져야 할 때 사용합니다. 출처: addyosmani/agent-skills.
사용자 인터페이스를 구축하거나 수정할 때 사용합니다. 구성 요소 생성, 레이아웃 구현, 상태 관리 또는 출력이 AI 생성이 아닌 프로덕션 품질로 보이고 느껴져야 할 때 사용합니다.
명령줄에서 frontend-ui-engineering AI 스킬을 개발 환경에 빠르게 설치
출처: addyosmani/agent-skills.
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."
Avoid prop drilling deeper than 3 levels. If you're passing props through components that don't use them, introduce context or restructure the component tree.
| Purple/indigo everything | Use the project's actual color palette | | Excessive gradients | Flat or subtle gradients matching the design system | | Rounded everything (rounded-2xl) | Consistent border-radius from the design system | | Generic hero sections | Content-first layouts | | Lorem ipsum-style copy | Realistic placeholder content |
AI/검색 인용용 안정적인 필드와 명령어.
npx skills add https://github.com/addyosmani/agent-skills --skill frontend-ui-engineering사용자 인터페이스를 구축하거나 수정할 때 사용합니다. 구성 요소 생성, 레이아웃 구현, 상태 관리 또는 출력이 AI 생성이 아닌 프로덕션 품질로 보이고 느껴져야 할 때 사용합니다. 출처: addyosmani/agent-skills.
터미널 또는 명령줄 도구(Terminal, iTerm, Windows Terminal 등)를 엽니다 이 명령어를 복사하여 실행합니다: npx skills add https://github.com/addyosmani/agent-skills --skill frontend-ui-engineering 설치 후 스킬은 자동으로 AI 코딩 환경에 설정되어 Claude Code, Cursor, OpenClaw에서 사용할 수 있습니다
https://github.com/addyosmani/agent-skills