hueyexe/frontend-agent-skills

Эта страница переведена автоматически. Технические детали смотрите в оригинале. Открыть оригинал

23 stars Качество 61 Тренд 14MIT

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.