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/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/wrg32786/aigent-os/ui-architecture"><img src="https://agentmods.dev/badge/skills/wrg32786/aigent-os/ui-architecture.svg" alt="Reviewed on agentmods" width="80" 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.5 | $0.00020 | $0.00380 |
| Sonnet 5.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 1mo 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.
- 1mo 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 (23 stars, last pushed today), licensed MIT. It adds 51 tokens to every session and 951 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-09-03.
Other skills, from other repositories
frontend-ui-motion-reviewer
Use when reviewing 2D UI animation purpose, easing, duration, springs, interruption, lifecycle, performance or reduced motion, including a bounded frontend-ui umbrella referral.
ui-design-reviewer
Use when reviewing frontend design quality across typography, color, layout, motion, interactive states and applicable glass treatments in the frontend-3d package.
ui-reviewer
Review selected UI components and user flows for interaction, accessibility, responsive layout, visual hierarchy, state, and design contract defects using source and explicitly identified rendered evidence.
visual-reviewer
Use when reviewing visual UI changes, before/after screenshots, responsive presentation, or design-system migrations against an accepted design and product contract.
frontend-ui-color-reviewer
Use when reviewing assigned 2D UI palettes, semantic color tokens, themes, color spaces, gamut, contrast or color-dependent status and focus information.
frontend-ui-reviewer
Use when reviewing or critiquing assigned 2D frontend UI across typography, color, layout, motion and interaction, including requests that need bounded specialist coverage.