hueyexe/frontend-agent-skills
Developer tools이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요. 원문 보기
Agent skills for frontend UX/UI design that actually looks good
개요
You know the look. Gradient blob hero. Perfectly symmetrical 3-column grid. A "Get Started" button floating in space with no visual weight. Technically correct. Completely forgettable. AI agents are fast but tasteless. They scaffold a full page in seconds and make every decision with the confidence of someone who has never actually used the thing they're building. These 9 skills fix that. They inject real design thinking into your agent's workflow so the output stops looking like it was assembled from a template. The difference isn't subtle. It's the difference between a user finishing the task and a user closing the tab. Works with Claude Code, Cursor, OpenCode, Kiro, and anything that supports the skills format. Not the "add alt text and call it done" version. Keyboard flows, screen reader awareness, semantic structure, resilient layouts, readable content, inclusive defaults. The kind of accessibility that works across devices and abilities without feeling bolted on.
README
원문 README의 일부입니다. 원문 보기.
Frontend Agent Skills
You know the look. Gradient blob hero. Perfectly symmetrical 3-column grid. A “Get Started” button floating in space with no visual weight. Technically correct. Completely forgettable.
AI agents are fast but tasteless. They scaffold a full page in seconds and make every decision with the confidence of someone who has never actually used the thing they’re building.
These 9 skills fix that. They inject real design thinking into your agent’s workflow so the output stops looking like it was assembled from a template.
The problem, side by side
| Without skills | With skills | |
|---|---|---|
| Forms | Dumps every field on one page, no grouping, inline validation that fires on first keystroke | Groups related fields, progressive disclosure, validates on blur, explains errors in plain language |
| Navigation | Flat list of every page in a hamburger menu | Hierarchy based on user tasks, clear wayfinding, breadcrumbs where depth demands it |
| Error states | Something went wrong. |
We couldn't save your changes because the file is too large. Try one under 10MB. |
| Visual hierarchy | Everything the same size and weight. Important actions buried. | Primary action is obvious. Secondary content recedes. Your eye knows where to go. |
| Accessibility | alt="" on every image, calls it done |
Keyboard flows, focus management, semantic structure, screen reader announcements, resilient across zoom and user settings |
The difference isn’t subtle. It’s the difference between a user finishing the task and a user closing the tab.
Install
npx skills@latest add hueyexe/frontend-agent-skills
Works with Claude Code, Cursor, OpenCode, Kiro, and anything that supports the skills format.
Install all 9, or pick what you need:
npx skills@latest add hueyexe/frontend-agent-skills --skill ui-visual-composition
The 9 skills
♿ accessibility-inclusive-design
Not the “add alt text and call it done” version. Keyboard flows, screen reader awareness, semantic structure, resilient layouts, readable content, inclusive defaults. The kind of accessibility that works across devices and abilities without feeling bolted on.
🧱 design-systems-frontend-architecture
Turns isolated screens into reusable systems. Design tokens, component contracts, responsive layouts, semantic markup, CSS strategy, documentation, governance. For when you need the agent to think in systems instead of one-off pages.
📝 forms-inputs-checkout
추천 도구
다른 키워드를 입력하거나 필터를 제거해 보세요.
설치
npx skillfish add hueyexe/frontend-agent-skills