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 makifbaysal/tasktrooper --skill ui-ux-craftgit clone --depth 1 https://github.com/makifbaysal/tasktrooperWrote 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/makifbaysal/tasktrooper/ui-ux-craft)<a href="https://agentmods.dev/skills/makifbaysal/tasktrooper/ui-ux-craft"><img src="https://agentmods.dev/badge/skills/makifbaysal/tasktrooper/ui-ux-craft/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/makifbaysal/tasktrooper/ui-ux-craft"><img src="https://agentmods.dev/badge/skills/makifbaysal/tasktrooper/ui-ux-craft.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.00043 | $0.02077 |
| Opus 5.5 | $0.00017 | $0.00831 |
| Sonnet 5.5 | $0.00009 | $0.00415 |
| Haiku 4.5 | $0.00004 | $0.00208 |
Grade A, and why
ui-ux-craft 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 — 138 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI/UX Craft
Overview
Visual design is not decoration bolted on at the end — hierarchy, spacing, and states are load-bearing parts of the UI. The two most common failures are structural sameness (every screen reads as the same generic SaaS template) and a happy-path-only build (no loading/empty/error states).
Core principle: Decide the mode first — Marketing or App — then build to the quality floor: one primary action, systematic spacing, semantic tokens, and every state designed, never just the happy path.
Pick the mode first
| Marketing / landing | App / product UI | |
|---|---|---|
| Visitor wants to | decide and act | complete a task |
| Optimise for | one strong idea per section, a visual direction grounded in the product's actual subject matter, generous whitespace, real imagery | density appropriate to the task, predictability, consistency over novelty |
| Call to action | a single primary CTA, repeated | no persuasion chrome — tables/forms/filters done right |
Ground the direction in the real subject (industry, materials, audience) — a toy brand's landing page and a financial dashboard should never default to the same look.
Rules
Hierarchy
- One primary action per view. Emphasise with size → weight → colour, in that order; de-emphasise secondary content instead of shouting the primary one louder.
- Squint test: if you can't tell what matters most with eyes half-closed, the hierarchy isn't set yet.
Spacing & rhythm
- Use the token scale:
gap-1 gap-2 gap-3 gap-4 gap-6 gap-8 gap-12 gap-16 gap-24(4px steps). - Proximity: tight spacing inside a group, ≥2× that spacing between sections.
- More space above a heading than below it; align everything to one left edge or grid.
Typography
text-xs…text-6xl; body istext-base(16px); line-height 1.5–1.7 for body, 1.1–1.25 for display.- Measure 60–75ch (
max-w-prose); max two font families; weights 400/500/600/700 only. text-balanceon headings,text-prettyon body paragraphs;tabular-numson prices and stats.- No letter-spacing hacks except a sparing uppercase small label — never a decorative eyebrow (see below).
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 · 138 lines · 43 tokens per session scan A b7ae6456ae53
ui-ux-craft is a skill published in the GitHub repository makifbaysal/tasktrooper (113 stars, last pushed yesterday), licensed Apache-2.0. It adds 43 tokens to every session and 2,077 once invoked, about $0.0002 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-10-05.
Other skills, from other repositories
wireframe
Produce low-fidelity black-and-white UI wireframes as SVGs or viewer pages. Use when asked to wireframe, sketch a screen, draft a layout, make a low-fi mockup, or publish wireframes.
design-critique
Give a structured product design critique — user job clarity, hierarchy, affordance, error states, accessibility, and consistency — focused on what to change, in what order, and why.
paperclip-capsules
Generate, implement, or review Paperclip capsule visuals. Use for capsule art, agent capsules, heartbeat status capsules, identicons, capsule banks, or brand-usage validation.
presentation-template-designer
Plan reusable presentation templates from a creative brief, optional brand assets, or an existing deck. Use when Codex needs to define a slide inventory, choose an editable presentation toolchain, author or validate a template manifest, adapt a visual system for PowerPoint or Google Slides, or prepare a reviewed…
design-before-build-gate
Enforces a design/spec approval gate before production implementation. Use when UI, UX, product flows, architecture, API shape, prototypes, visual direction, or user-facing behaviour need signoff before builders write production code.
architecture-design
Use this skill to design system architecture with documented trade-offs and decisions before any implementation begins. Activates when a feature, system, or component requires non-trivial structural decisions about how components interact, what data stores to use, or how to decompose a problem.