Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add hueyexe/frontend-agent-skills --skill interaction-patterns-componentsgit clone --depth 1 https://github.com/hueyexe/frontend-agent-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/hueyexe/frontend-agent-skills/interaction-patterns-components)<a href="https://agentmods.dev/skills/hueyexe/frontend-agent-skills/interaction-patterns-components"><img src="https://agentmods.dev/badge/skills/hueyexe/frontend-agent-skills/interaction-patterns-components.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00035 | $0.05333 |
| Opus 5 | $0.00017 | $0.02667 |
| Sonnet 5 | $0.00007 | $0.01067 |
| Haiku 4.5 | $0.00003 | $0.00533 |
Grade A, and why
interaction-patterns-components scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 474 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Interaction Patterns Components
Purpose
Help an agent choose, critique, and design effective UI interaction patterns and reusable product components.
The skill covers navigation patterns, menus, cards, tables, dashboards, modals, flows, states, and component behavior. It treats visual polish only where it affects interaction clarity, hierarchy, accessibility, or component usability.
When to use this skill
Use this skill when the user asks for any of the following:
- Critique, redesign, or UX review of an app screen, website, product flow, wireframe, component, or frontend implementation.
- Selection of UI patterns such as navigation, menus, breadcrumbs, dashboards, cards, tables, forms, modals, wizards, split panes, tabs, accordions, toolbars, hover tools, lists, grids, or feedback states.
- Design of reusable components or design-system behavior.
- Frontend guidance for interaction behavior, accessibility, responsive behavior, component APIs, or UI state handling.
- Creation of product UX recommendations where the best answer depends on tasks, user skill, device context, data complexity, or risk.
When not to use this skill
Do not use this skill as the main framework when the user primarily needs:
- Brand identity, illustration, mood boards, or visual polish not tied to interaction clarity.
- Deep copywriting, messaging strategy, or content design beyond labels, help text, errors, and microcopy.
- Pure graphic design, logo design, or marketing creative.
- Native voice, AR/VR, spatial, or non-screen interaction design unless the task also includes screen-based controls or companion UI.
- Backend architecture, database design, or API design except where implementation constraints affect component behavior.
Core principles
1. Start with people, goals, and context
Identify what the user is trying to accomplish before choosing a component. A form, menu, table, modal, or dashboard is only a means to a user goal. Ask “why” until the job, risk, and success criteria are clear enough to design the simplest useful interface.
What ships with it
4 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 8d ago First seen · 474 lines · 35 tokens per session scan A 07becf183405
interaction-patterns-components is a skill published in the GitHub repository hueyexe/frontend-agent-skills (9 stars, last pushed 1mo ago), licensed MIT. It adds 35 tokens to every session and 5,333 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
accessibility-audit
Conduct accessibility audits against WCAG 2.2 guidelines. Evaluate pages, components, and flows for conformance at A, AA, and AAA levels. Identify issues, assess severity, provide code fixes, and generate audit reports. Covers automated testing, manual testing, keyboard navigation, screen reader compatibility, color…
website-studio
Plans, designs, builds, validates, and prepares polished responsive websites and lightweight web apps from brief through hosting handoff. Use when creating or redesigning a landing page, portfolio, editorial site, knowledge hub, directory, dashboard, portal, tracker, internal tool, microsite, or small web app…
web-a11y-css
Reviews and writes CSS that preserves accessibility across contrast, focus styles, reduced motion, forced colors, zoom, target size, semantic integrity, and custom-styled controls. Use for UI styling and design-system changes.
premium-web-design
Transform any website into a premium, Apple-quality web experience. Use when building new websites, redesigning existing ones, reviewing web design quality, implementing landing pages, or when the user mentions "premium", "luxury", "high-end", "Apple-like", or "professional" website design. Also activate when creating…
scroll-craft
Build premium scroll-driven landing pages for service, product, food, and drink brands. Plan the visitor journey, page grammar, emotional peak, and bespoke signature move. Create dimensional heroes with independent visual planes, restrained motion, and separate mobile composition. Use supplied photos and footage or…
top-design
Create award-winning, immersive web experiences at the level of Awwwards-featured agencies. Use when the user mentions "Awwwards quality", "make my site stunning", "scroll animations", "parallax storytelling", "cinematic web design", "portfolio site", or "brand experience". Also trigger when elevating a standard…