Borrowing it
Nothing to install: this file belongs to singula-ai/alego. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/singula-ai/alego/main/.agents/skills/alego-client-ui-ux/SKILL.mdgit clone --depth 1 https://github.com/singula-ai/alegoWrote 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/singula-ai/alego/alego-client-ui-ux)<a href="https://agentmods.dev/skills/singula-ai/alego/alego-client-ui-ux"><img src="https://agentmods.dev/badge/skills/singula-ai/alego/alego-client-ui-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/singula-ai/alego/alego-client-ui-ux"><img src="https://agentmods.dev/badge/skills/singula-ai/alego/alego-client-ui-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.00075 | $0.01595 |
| Opus 5.5 | $0.00030 | $0.00638 |
| Sonnet 5.5 | $0.00015 | $0.00319 |
| Haiku 4.5 | $0.00007 | $0.00160 |
Grade A, and why
alego-client-ui-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 17d 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.
This is a copy
89% identical to dsh-client-ui-ux — 23 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 63 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Alego Client UI/UX
This skill is guidance, not a complete checklist. It covers judgment calls that lint, typecheck, and the i18n gate cannot make: where feedback appears, what gets reused, and how surfaces behave at window edges and across platforms. Copy quality itself follows alego-prose-standard; locale ownership follows the locale-owned copy decision; styling ownership and token rules live in docs/web-styling.md and the ui-primitives component catalog — this skill adds judgment on top of those rules, not a second copy of them.
Visual foundation
- Use existing tokens for color, radius, and spacing. Before introducing a literal value, search the target page and its nearest established sibling (the Plugins page is the usual reference for full-page surfaces) for the token or value already in use, and adopt it. The same applies to whole treatments — toasts, menus, in-message artifact previews, sidebar tab layout, colors, clearance rules, page padding: reuse the established component or rule wherever one exists instead of inventing a parallel one.
- Verify every color in both light and dark mode. An ink/background pair must stay readable under both themes before it ships. Dimmed tones are the standing counter-example: they suit decorative surfaces, but on text they routinely fall below readability in one theme — never put a dimmed color on text without checking both.
- Font weight tops out at 500 in feature CSS you add or change. Do not use 600+ for emphasis; differentiate with size or ink instead. The markdown typography tokens owned by ui-theme are the standing exception.
- Pick font sizes from the theme typography variables when an existing role matches, otherwise from the page's existing scale. Parallel content shares one size; never invent a size for a single element, and keep the number of distinct sizes on a page small (13px is the established row/detail size). When the page itself has no precedent, borrow the size and spacing ratios of the most similar existing page or element.
- Icons, text, and neighbouring elements stay proportionate and aligned. Every element lines up with its siblings along a deliberate axis (baseline, vertical center, or shared edge), and an icon's size stays in proportion to the text beside it; never ship an element that aligns to nothing or visibly outweighs its neighbours.
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.
- 17d ago First seen · 63 lines · 75 tokens per session scan A 99f7521fbd11
alego-client-ui-ux is a skill published in the GitHub repository singula-ai/alego (109 stars, last pushed 17d ago), licensed MIT. It adds 75 tokens to every session and 1,595 once invoked, about $0.0003 per session on Opus 5.5. A static security scan graded it A with 0 findings. It is 89% identical to dsh-client-ui-ux, differing in 23 lines, and is treated as a copy.
Other skills, from other repositories
frontend-enhancer
Enhance the visual design of web apps: modern UI components, layout, responsive design, color palettes, animations. Use for styling and UI polish; pair with ui-research first for new design directions.
generic-design-system
Complete design system reference for any project - colors, typography, spacing, components, animations. Adapts to project theme and tech stack. Use when implementing UI, choosing colors, creating animations, or ensuring brand consistency. For new design systems, use ui-research skill first.
generic-react-design-system
Complete design system reference for React applications. Covers colors, typography, spacing, component patterns, glassmorphism effects, GPU-accelerated animations, and WCAG AA accessibility. Use when implementing UI, choosing colors, applying spacing, creating components, or ensuring brand consistency.
generic-static-design-system
Complete design system reference for static HTML/CSS/JS sites. Covers colors, typography, component patterns, animations, and accessibility. Use when implementing UI, choosing colors, or ensuring brand consistency.
generic-static-ux-designer
Professional UI/UX design expertise for static HTML/CSS/JS sites. Covers design thinking, user psychology, visual hierarchy, minimalist interaction patterns, accessibility, and performance-driven design. Use when designing features, improving UX, or conducting design reviews.
agent-accessibility-expert
Specialist subagent: WCAG compliance, screen reader compatibility, and inclusive design patterns. Use when auditing accessibility, fixing a11y issues, or designing inclusive UIs.