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 DonkeyKing01/tasteful-ui-skill --skill tasteful-uigit clone --depth 1 https://github.com/DonkeyKing01/tasteful-ui-skillWrote 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/donkeyking01/tasteful-ui-skill/tasteful-ui)<a href="https://agentmods.dev/skills/donkeyking01/tasteful-ui-skill/tasteful-ui"><img src="https://agentmods.dev/badge/skills/donkeyking01/tasteful-ui-skill/tasteful-ui/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/donkeyking01/tasteful-ui-skill/tasteful-ui"><img src="https://agentmods.dev/badge/skills/donkeyking01/tasteful-ui-skill/tasteful-ui.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.00132 | $0.01667 |
| Opus 5 | $0.00066 | $0.00834 |
| Sonnet 5 | $0.00026 | $0.00333 |
| Haiku 4.5 | $0.00013 | $0.00167 |
Grade A, and why
tasteful-ui 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 11d 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
100% identical to tasteful-ui — 0 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 — 130 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Tasteful UI
Act as an expert product designer and UI engineer working with the user as a manager. Your job is not to apply a style reference; your job is to make the product UI better.
This skill is a router. Load the smallest relevant support files for the current task:
- Taste exploration: taste/taste_exploration.md
- Taste critique: taste/taste_critic.md
- Anti-generic guardrails: taste/anti_generic_rules.md
- Reference routing: references/catalog.md
- Project design format: formats/PROJECT_DESIGN.template.md
- Variation workflow: workflows/variation_first.md
- Implementation workflow: workflows/implementation.md
- Verification workflow: workflows/verification.md
- Result evaluation: eval/ui_result_critique.md
- Mode-specific entry points under modes/
Core Principle
Use this order of judgment:
- Product context decides what the UI must be true to.
- Taste exploration decides which directions are worth considering.
- References provide reusable style material, not final answers.
PROJECT_DESIGN.mdordesign.mdturns chosen taste into executable rules.- Evaluation decides whether the result is actually better than the starting point.
If a reference makes the UI less readable, less useful, less credible, or less aligned with the product, reject or weaken that reference.
Use When
Use this skill for meaningful UI work:
- redesigning or building product pages, dashboards, app screens, search/query tools, onboarding flows, or marketing surfaces
- improving hierarchy, density, visual polish, interaction states, responsiveness, or product character
- translating one or more external references into an original project-specific design
- generating multiple UI directions and comparing them before implementation
- critiquing whether a UI is actually good, not just whether it follows a style
What ships with it
60 files 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.
- eval/ui_result_critique.md 757 B
- formats/PROJECT_DESIGN.template.md 2.7 KB
- modes/design_critique_only.md 474 B
- modes/production_ui_implementation.md 791 B
- modes/taste_first_redesign.md 1.1 KB
- references/catalog.md 9.4 KB
- references/designs/ai_llm_platforms/claude.md 20 KB
- references/designs/ai_llm_platforms/cohere.md 14 KB
- references/designs/ai_llm_platforms/elevenlabs.md 15 KB
- references/designs/ai_llm_platforms/minimax.md 14 KB
- references/designs/ai_llm_platforms/mistral.md 15 KB
- references/designs/ai_llm_platforms/ollama.md 15 KB
- references/designs/ai_llm_platforms/opencode.md 15 KB
- references/designs/ai_llm_platforms/replicate.md 14 KB
- references/designs/ai_llm_platforms/runwayml.md 14 KB
- references/designs/ai_llm_platforms/together.md 14 KB
- references/designs/ai_llm_platforms/voltagent.md 26 KB
- references/designs/ai_llm_platforms/xai.md 16 KB
- references/designs/automotive/bmw.md 9.6 KB
- references/designs/automotive/bugatti.md 26 KB
- references/designs/automotive/ferrari.md 25 KB
- references/designs/automotive/lamborghini.md 21 KB
- references/designs/automotive/renault.md 24 KB
- references/designs/automotive/tesla.md 22 KB
- references/designs/backend, database _ devops/clickhouse.md 15 KB
- references/designs/backend, database _ devops/composio.md 20 KB
- references/designs/backend, database _ devops/hashicorp.md 15 KB
- references/designs/backend, database _ devops/mongodb.md 15 KB
- references/designs/backend, database _ devops/posthog.md 18 KB
- references/designs/backend, database _ devops/sanity.md 21 KB
- references/designs/backend, database _ devops/sentry.md 14 KB
- references/designs/backend, database _ devops/supabase.md 14 KB
- references/designs/design _ creative tools/airtable.md 3.5 KB
- references/designs/design _ creative tools/clay.md 17 KB
- references/designs/design _ creative tools/figma.md 11 KB
- references/designs/design _ creative tools/framer.md 17 KB
- references/designs/design _ creative tools/miro.md 4.7 KB
- references/designs/design _ creative tools/webflow.md 4.0 KB
- references/designs/developer tools _ ides/cursor.md 19 KB
- references/designs/developer tools _ ides/expo.md 18 KB
- references/designs/developer tools _ ides/lovable.md 17 KB
- references/designs/developer tools _ ides/raycast.md 18 KB
- references/designs/developer tools _ ides/superhuman.md 18 KB
- references/designs/developer tools _ ides/vercel.md 19 KB
- references/designs/developer tools _ ides/warp.md 16 KB
- references/designs/e-commerce _ retail/airbnb.md 14 KB
- references/designs/e-commerce _ retail/meta.md 20 KB
- references/designs/e-commerce _ retail/nike.md 20 KB
- references/designs/e-commerce _ retail/shopify.md 20 KB
- references/designs/fintech _ crypto/binance.md 18 KB
- references/designs/fintech _ crypto/coinbase.md 4.9 KB
- references/designs/fintech _ crypto/kraken.md 4.2 KB
- references/designs/fintech _ crypto/mastercard.md 26 KB
- references/designs/fintech _ crypto/revolut.md 8.4 KB
- references/designs/fintech _ crypto/stripe.md 20 KB
- references/designs/fintech _ crypto/wise.md 8.3 KB
- references/designs/media _ consumer tech/apple.md 20 KB
- references/designs/media _ consumer tech/ibm.md 19 KB
- references/designs/media _ consumer tech/nvidia.md 17 KB
- references/designs/media _ consumer tech/pinterest.md 12 KB
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.
- 11d ago First seen · 130 lines · 132 tokens per session scan A 6d97376b391e
tasteful-ui is a skill published in the GitHub repository DonkeyKing01/tasteful-ui-skill (12 stars, last pushed 4mo ago), licensed MIT. It adds 132 tokens to every session and 1,667 once invoked, about $0.0007 per session on Opus 5. A static security scan graded it A with 0 findings. It is 100% identical to tasteful-ui, differing in 0 lines, and is treated as a copy.
Other skills, from other repositories
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.
figma-to-elementor
Use when the user says 'figma to elementor', 'build this figma design in elementor', or hands over a Figma frame to rebuild in WordPress. Maps the Figma node tree to Elementor widgets and containers and writes clean Elementor JSON into a draft duplicate, so nothing live is touched.
figma-to-divi
Use when the user says 'figma to divi', 'build this figma design in divi', or hands over a Figma frame to rebuild in WordPress on a Divi site. Maps the Figma node tree to native Divi sections, rows, columns and modules (Divi 5 blocks or Divi 4 shortcodes, auto-detected) and writes to a draft, so nothing live is…
html-to-bricks
Use when the user says 'convert this html to bricks' or 'paste html into bricks', or has a Webflow, Framer, CodePen, or old static export to bring into a Bricks site. Converts raw HTML and CSS into native Bricks elements, mapping colors, type, and spacing to design tokens, plus ACSS classes when installed.
figma-to-bricks
Use when the user says 'figma to bricks', 'build this figma design in bricks', or hands over a Figma frame to rebuild on a Bricks Builder site. Maps the Figma node tree to native Bricks elements with BEM global classes, imports the frame's palette into the Bricks design system, and writes to a draft, so nothing live…
figma-to-gutenberg
Use when the user says 'figma to gutenberg', 'figma to blocks', or hands over a Figma frame to rebuild on a WordPress site that uses the block editor. Maps the Figma node tree to core Gutenberg blocks, registers the frame's palette in Global Styles, and writes to a draft, so nothing live is touched.