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 n-n-code/n-n-code-skills --skill ui-design-guidancegit clone --depth 1 https://github.com/n-n-code/n-n-code-skillsWrote 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/n-n-code/n-n-code-skills/ui-design-guidance)<a href="https://agentmods.dev/skills/n-n-code/n-n-code-skills/ui-design-guidance"><img src="https://agentmods.dev/badge/skills/n-n-code/n-n-code-skills/ui-design-guidance.svg" alt="Measured on agentmods" 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.00060 | $0.01328 |
| Opus 5 | $0.00030 | $0.00664 |
| Sonnet 5 | $0.00012 | $0.00266 |
| Haiku 4.5 | $0.00006 | $0.00133 |
Grade A, and why
ui-design-guidance 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 3d 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 — 147 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI Design Guidance
This is a composable overlay, not a standalone workflow. Use alongside the repo's implementation skill when the change touches graphical UI or web frontend code.
This is the stronger UI overlay in this repo.
Prefer it over ui-guidance when the task is redesign-heavy, polish-heavy, or
needs explicit UX review beyond basic UI hygiene.
Choose activity independently from visual direction. A review request is read-only unless the user also asks for remediation; preserve versus redesign describes the intended product direction, not permission to edit files.
When to use
- the repo includes graphical UI or web frontend code
- the task asks for UI implementation, redesign, beautification, styling, or frontend polish
- the task changes how a feature looks, feels, moves, or is interacted with
- the work includes new pages, components, forms, navigation, responsive layout, animation, or charts/data display
- the task asks for UX review or quality improvement, not just visual changes
- the change touches web views, desktop UI, embedded panels, dashboards, pages, landing screens, or rendering layers
Not for
- terminal UIs; use the matching terminal-framework guidance
- pure data visualization or plotting libraries without product-interface work
- backend-only changes with no UI surface
Core workflow
- Read the touched UI files and nearby components first.
- Choose the activity:
- implementation when the user asks to build, change, redesign, or remediate the UI
- review when the user asks for findings, critique, or release assessment; report evidence without editing or requiring findings to be fixed
- Determine the visual direction:
- preserve mode when the repo already has a clear design language and the user did not ask for redesign
- redesign mode when the user explicitly wants a new visual direction or the current UI is intentionally being reworked
- In preserve mode, derive tokens, spacing, interaction patterns, breakpoints, and component structure from the nearest existing screens or components.
- In redesign mode, choose one intentional direction before coding: define the interface purpose, audience, tone, and the visual idea that should make the surface coherent. Read references/redesign-aesthetics.md only when the task needs deeper aesthetic direction.
- For deep implementation or review, evaluate priorities in this order:
- accessibility
- interaction and feedback
- layout and responsiveness
- typography and color clarity
- forms, navigation, and data presentation when they apply
- For implementation, build real working UI code that fits the chosen
direction:
- preserve mode should feel native to the repo
- redesign mode should feel distinctive, cohesive, and production-grade
- UX remediation should strengthen usability without drifting away from the repo's design language unless redesign is requested
- For review, report prioritized findings with the affected interaction, evidence, likely user impact, and validation gaps; do not modify code.
- Verify accessibility, keyboard behavior, responsive layout stability, and visual output with the strongest evidence the repo supports.
- When the repo lacks UI docs or automated checks, record the fallback evidence: files inspected, viewport sizes tested, and screenshots or manual checks used.
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 3d ago Changed 3da070724b3d
- 8d ago First seen · 147 lines · 60 tokens per session scan A e67466665a11
ui-design-guidance is a skill published in the GitHub repository n-n-code/n-n-code-skills (4 stars, last pushed 2d ago), licensed MIT. It adds 60 tokens to every session and 1,328 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-08-31.
Other skills, from other repositories
web-frontend-designer
Scaffold frontend architecture, components, routing, and UI dependencies from project config and wireframes.
frontend-specialist
A front-end development workflow for building or improving web pages, components, layouts, forms, dashboards, and responsive interfaces. It covers common tools and frameworks such as React, Vue, Next.js, Tailwind, and CSS.
design-shiny-ui
Design Shiny application UIs using bslib for theming, layoutcolumns for responsive grids, value boxes, cards, and custom CSS/SCSS. Covers page layouts, accessibility, and brand consistency. Use when building a new Shiny app UI from scratch, modernizing an existing app from fluidPage to bslib, applying brand theming…
design-feature
Turn a raw idea or existing feature into a designed product SPEC by completing entity, integration, role, and expectation closure. Upserts never destroy recorded decisions. Triggers: "design-feature", "design this feature", "define product scope".
review-a11y
Internal accessibility review pass of the agentic-workflow review pack — composed in-turn by review-change and product-audit; not a menu entry. Checks the changed user-facing surface for accessibility: semantics, keyboard, focus, contrast, and ARIA correctness — applies only to user-facing surfaces. Findings only…
review-design
Internal UI/UX design review pass of the agentic-workflow review pack — composed in-turn by review-change and product-audit; not a menu entry. Checks the changed UI against the project's design doc: consistency, states, responsiveness, and reuse — applies only when the project has a UI and the change touches it.…