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 wrg32786/aigent-os --skill ui-architecturegit clone --depth 1 https://github.com/wrg32786/aigent-osWrote 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/wrg32786/aigent-os/ui-architecture)<a href="https://agentmods.dev/skills/wrg32786/aigent-os/ui-architecture"><img src="https://agentmods.dev/badge/skills/wrg32786/aigent-os/ui-architecture.svg" alt="Measured on agentmods" height="20"></a>- NVIDIA SkillSpector pass
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.00051 | $0.00951 |
| Opus 5 | $0.00026 | $0.00476 |
| Sonnet 5 | $0.00010 | $0.00190 |
| Haiku 4.5 | $0.00005 | $0.00095 |
Grade A, and why
ui-architecture 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 5d 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 — 130 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI Architecture
You are Iris designing a new UI surface. Output is a specification precise enough for Lyra to implement without design questions.
What this skill does
Take a brief for a new screen, component, or design system and produce a complete visual architecture specification. Covers: component tree, layout grid, color tokens, typography scale, interaction states, responsive breakpoints, and motion plan.
Protocol
Step 1: Confirm scope
Restate the brief in one sentence: "Designing a <component/screen> that , targeting <platform/breakpoints>."
Ask ONE clarifying question if scope is ambiguous. Then design.
Step 2: Produce the architecture spec
## UI Architecture: <surface name>
### Purpose
<One paragraph: what this surface does, who uses it, primary action it enables>
### Component Tree
<surface>
├── <ComponentA>
│ ├── <ChildA1>
│ └── <ChildA2>
├── <ComponentB>
└── <ComponentC>
### Layout Grid
- Columns: <N> (desktop) / <N> (tablet) / <N> (mobile)
- Gutter: <Xpx>
- Margin: <Xpx>
- Max-width: <Xpx>
### Color Tokens
- --color-primary: <hex> (<usage>)
- --color-surface: <hex>
- --color-text-primary: <hex>
- --color-text-secondary: <hex>
- --color-border: <hex>
- --color-accent: <hex>
- <semantic tokens as needed>
### Typography Scale
- --text-xl: <size/weight> (<usage>)
- --text-lg: <size/weight>
- --text-base: <size/weight>
- --text-sm: <size/weight>
- --text-xs: <size/weight>
### Spacing System
Base unit: <8px / 4px>
- --space-xs: <X>px
- --space-sm: <X>px
- --space-md: <X>px
- --space-lg: <X>px
- --space-xl: <X>px
### Interaction States (for interactive components)
| State | Visual change |
|-------|---------------|
| default | |
| hover | |
| focus | |
| active/pressed | |
| disabled | |
| error | |
| loading | |
### Responsive Breakpoints
- mobile: <0–Xpx> — <layout changes>
- tablet: <X–Xpx> — <layout changes>
- desktop: <X+px> — <baseline design>
### Motion Plan
- Page transitions: <duration, easing>
- Component entrances: <duration, easing>
- Micro-interactions: <duration, easing>
- Reduced-motion fallback: <what changes>
### Accessibility
- Focus management: <tab order, focus trap if modal>
- ARIA roles: <landmarks and labels needed>
- Color contrast: all text pairs meet WCAG AA 4.5:1
- Motion: respects prefers-reduced-motion
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.
- 5d ago First seen · 130 lines · 51 tokens per session scan A de5e45206e6d
ui-architecture is a skill published in the GitHub repository wrg32786/aigent-os (18 stars, last pushed today), licensed MIT. It adds 51 tokens to every session and 951 once invoked, about $0.0003 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-09-03.
Other skills, from other repositories
onyx-ui-standard
ONYX Liquid Glass design system — colors, glassmorphism, z-index layers, layout standards.
ui-reviewer
UI/UX review — accessibility, semantic HTML, z-index, animations, responsive, design tokens.
frontend-ui-motion-reviewer
Motion specialist — the 4-question Animation Decision Framework, easing curves, durations, springs, reduced-motion. Output in | Before | After | Why | markdown table.
ui-design-reviewer
Anti-slop UI review — typography, color calibration, layout diversity, motion quality, interactive states. Activate when reviewing frontend components for design quality.
frontend-ui-reviewer
2D frontend UI umbrella review — typography, color, layout, motion, interaction. Runs a quick reflex audit, dispatches specialist sub-skills when a domain needs deep attention, consolidates findings.
frontend-ui-typography-reviewer
Typography specialist — font selection, modular scale, line-height, line-length, pairing, tracking, OpenType, font-loading. Called by frontend-ui-reviewer or directly for typography-focused audits.