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 jxoesneon/Ciel --skill ui_ux_masterygit clone --depth 1 https://github.com/jxoesneon/CielWrote 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/jxoesneon/ciel/ui_ux_mastery)<a href="https://agentmods.dev/skills/jxoesneon/ciel/ui_ux_mastery"><img src="https://agentmods.dev/badge/skills/jxoesneon/ciel/ui_ux_mastery/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/jxoesneon/ciel/ui_ux_mastery"><img src="https://agentmods.dev/badge/skills/jxoesneon/ciel/ui_ux_mastery.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.00000 | $0.00906 |
| Opus 5 | $0.00000 | $0.00453 |
| Sonnet 5 | $0.00000 | $0.00181 |
| Haiku 4.5 | $0.00000 | $0.00091 |
Grade A, and why
ui_ux_mastery 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 9d 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 — 51 lines — stays where its author put it; the contents beside it link to each section on GitHub.
ui_ux_mastery
Generate and audit UI/UX artifacts against the Design Council standards (council/rubrics/UI_UX_MASTERY_STANDARDS.md).
Operations
ui.design_system(spec)— Tailwind v4@themetokens (base → semantic → component) and shadcn/ui component specs.ui.bento_grid(layout_schema)— intent-based Bento Grid layout (Hero/Utility/Micro-Data tiers) via CSS Grid.ui.accessibility_audit(markup)— WCAG 2.2 AA/AAA verification (9 new success criteria) with WCAG 3.0 forward readiness.ui.performance_budget()— Core Web Vitals field data thresholds (INP ≤ 200ms, LCP ≤ 2.5s, CLS ≤ 0.1 at 75th percentile).ui.agentic_ux()— 6-pattern control surface (Intent Preview, Autonomy Dial, Rationale, Confidence, Receipts, Audit Trail).ui.thumb_zone(layout)— dominant-hand functional area placement; destructive actions outside easy reach.ui.recovery_pattern(action)— select recovery pattern (confirmation dialog / undo window / soft delete) by reversibility.ui.loading_strategy(duration_ms)— loading state by duration (nothing < 400ms, skeleton 400ms–3s, progress 3–10s, bar > 10s).ui.dark_mode()— OKLCH four-surface luminance hierarchy (base → raised → overlay → nested).ui.micro_interaction(trigger)— spring-physics feedback (mass, stiffness, damping) in 100–400ms range.ui.anti_slop_audit(markup)— detect distributional convergence (centroid look: Inter, purple gradient, three cards, emoji icons) and flag AI slop patterns.ui.craft_signals(artifact)— attach C2PA provenance metadata, generate process documentation, and verify visible effort signals.
I/O Contract
io_contract:
input: { op, target_file?, component_spec?, layout_schema?, duration_ms? }
output: { result: component_code|audit_report|theme_tokens|layout_grid|recovery_flow|slop_report|provenance_manifest }
idempotent: true
side_effects: [fs]
Standards Reference
Full 18-standard specification with research citations in council/rubrics/UI_UX_MASTERY_STANDARDS.md. Covers: agentic UX transparency, Core Web Vitals, WCAG 2.2/3.0, Bento Grid, Liquid Glass, Tailwind v4 tokens, shadcn/ui, micro-interactions, OKLCH dark mode, token governance, thumb-zone ergonomics, undo/cancel patterns, performance perception, OKLCH color, information architecture, competitive landscape, anti-slop design principles, content provenance and craft signals.
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.
- 9d ago First seen · 51 lines · 0 tokens per session scan A ea4cdea403dd
ui_ux_mastery is a skill published in the GitHub repository jxoesneon/Ciel (1 stars, last pushed 2d ago), licensed Apache-2.0. It costs nothing until one of its globs matches a file; then it loads 906 tokens. 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
franchise-brand-enforcer
Franchise consistency is a two-front war: Visuals and Voice. This agent audits local social posts or webpages, using Vision to flag stretched/outdated logos and Text Analysis to rewrite off-brand copy into your Headquarters voice.
bio-link-optimizer
Choice paralysis kills sales. This agent audits your current 'Link in Bio' page (if provided) or researches high-converting layouts for your niche to suggest a prioritized structure that drives users toward your primary offer.
brand-kit-gen
Instantly create cohesive visual identity starter kits for multiple projects. This agent generates logos, seamless background patterns, and defines color palettes for an entire portfolio of brands.
cta-button-optimizer
Generic buttons like 'Submit' kill conversion. This agent rewrites your Call-to-Action (CTA) buttons to be value-driven and suggests color/placement changes for an entire suite of landing pages.
ad-visual-reverse-engineer
Why is the competition winning? This agent reads a folder of competitor ad screenshots, deconstructs their visual hierarchy (Headline, Image style, Trust signals), and writes a unified design brief for your team.
skin-creator
Create and apply a two-asset LobsterAI visual skin from the user's style description. Use only when the AI Skin Designer kit supplies the structured skinpack workflow marker; do not use for ordinary theme or image requests.