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