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 build-with-dhiraj/ai-workflow-framework-portability-kit --skill ai-product-uxgit clone --depth 1 https://github.com/build-with-dhiraj/ai-workflow-framework-portability-kitWrote 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/build-with-dhiraj/ai-workflow-framework-portability-kit/ai-product-ux)<a href="https://agentmods.dev/skills/build-with-dhiraj/ai-workflow-framework-portability-kit/ai-product-ux"><img src="https://agentmods.dev/badge/skills/build-with-dhiraj/ai-workflow-framework-portability-kit/ai-product-ux/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/build-with-dhiraj/ai-workflow-framework-portability-kit/ai-product-ux"><img src="https://agentmods.dev/badge/skills/build-with-dhiraj/ai-workflow-framework-portability-kit/ai-product-ux.svg" alt="Reviewed on agentmods" width="80" 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.00029 | $0.01597 |
| Opus 5.5 | $0.00012 | $0.00639 |
| Sonnet 5.5 | $0.00006 | $0.00319 |
| Haiku 4.5 | $0.00003 | $0.00160 |
Grade A, and why
ai-product-ux 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 25d 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 — 138 lines — stays where its author put it; the contents beside it link to each section on GitHub.
AI Product UX
Reference implementation: https://github.com/vercel/ai-chatbot (Next.js App Router + Vercel AI SDK + shadcn/ui)
This skill covers the UX design layer — what to show, when, and why. For SDK mechanics see vercel-plugin:ai-sdk. For chat SDK wiring see vercel-plugin:chat-sdk.
1. AI UX Primitives
Typing indicator — show immediately on send, before the first token arrives. Three-dot pulse or skeleton. Never leave the user staring at nothing.
Streaming text — render tokens as they arrive using useChat from @ai-sdk/react. Sentence-boundary rendering (buffer until ./?/!) works better for TTS or screen readers; character-level is fine for visual chat.
Error recovery — always surface a retry button inline with the failed message, not as a toast. The message is the context; that's where the action belongs.
Retry affordance — for transient failures, auto-retry once silently, then surface the error. For content-filter hits, explain without alarming: "I can't help with that specific question — try rephrasing."
2. Multi-Turn State
Persist: message array (role + content + id + timestamp), conversation ID, model/persona used per turn.
Derive, don't persist: loading state, error state, scroll position, whether a message is streaming.
Context window awareness: when conversation grows long, show a subtle "Summarizing earlier context…" notice rather than silently truncating. Users notice when AI "forgets."
3. Optimistic UI for AI
Send the user's message to the UI immediately (optimistic insert) before the API call resolves. If the call fails, mark the optimistic message as failed and show retry — do not remove it. Removing it disorients the user.
For file uploads or tool calls, show a pending state on the attachment/tool card, not a spinner over the whole chat.
4. Streaming Display Patterns
character-level → feels alive, best for general chat
sentence-level → better for accessibility, TTS integration
paragraph-level → best for long-form content (essay, explanation)
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.
- 25d ago First seen · 138 lines · 29 tokens per session scan A 9e943478a8c2
ai-product-ux is a skill published in the GitHub repository build-with-dhiraj/ai-workflow-framework-portability-kit (5 stars, last pushed 12d ago), licensed MIT. It adds 29 tokens to every session and 1,597 once invoked, about $0.0001 per session on Opus 5.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-09-21.
Other skills, from other repositories
prototype
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
anatomy
Explain an idea as an interactive isometric machine figure.
qa-test-planner
Generate comprehensive test plans, manual test cases, regression test suites, and bug reports for QA engineers. Includes Figma MCP integration for design validation.
ux-design
Section-by-section UX spec authoring for a screen, flow or HUD. Reads the player journey to provide context; also project-wide accessibility.
visual-artifact-design
A general workflow for creating, editing, diagnosing, or checking things people will see, read, or use. It defines the intended medium, audience, required outcome, evidence, and final consumer before work begins.
visualize
Render a polished visual inline in the chat as part of your answer — a diagram, a chart, an interactive explainer, or a UI mockup. Load it proactively whenever an explanation would land better as a picture than as prose. Do not wait to be asked.