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 fatihkan/badi --skill frontend-tastegit clone --depth 1 https://github.com/fatihkan/badiWrote 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/fatihkan/badi/frontend-taste)<a href="https://agentmods.dev/skills/fatihkan/badi/frontend-taste"><img src="https://agentmods.dev/badge/skills/fatihkan/badi/frontend-taste/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/fatihkan/badi/frontend-taste"><img src="https://agentmods.dev/badge/skills/fatihkan/badi/frontend-taste.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.00000 | $0.00982 |
| Opus 5 | $0.00000 | $0.00491 |
| Sonnet 5 | $0.00000 | $0.00196 |
| Haiku 4.5 | $0.00000 | $0.00098 |
Grade A, and why
frontend-taste 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 — 71 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend Taste Skills
Bundled collection of 9 frontend design skills. Each enforces a different visual direction and works with Claude Code / any LLM-based coding agent.
How to Use
Invoke by describing the visual direction in your prompt. Claude Code auto-routes based on keywords:
- "premium landing page" / "high-agency frontend" -> default
- "strict layout, GSAP motion, editorial" -> gpt-taste
- "Notion/Linear style, editorial, minimal" -> minimalist
- "Swiss typography, raw, brutalist" -> brutalist
- "calm, expensive, polished" -> soft
- "redesign this existing app" -> redesign
- "give me the full code, no placeholders" -> output
- "generate a DESIGN.md for Google Stitch" -> stitch
- "generate design images first, then implement" -> images-first
You can also explicitly load one variant:
Use the "frontend-taste/brutalist" skill to redesign the header.
The 9 Variants
| Variant | When to use |
|---|---|
default/ (design-taste-frontend) |
Safest general pick. Premium frontend with controllable DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY dials. |
gpt-taste/ |
Stricter, more opinionated. Python-driven layout randomization, AIDA page structure, wide editorial typography, mandatory GSAP ScrollTriggers. Best for GPT/Codex models. |
minimalist/ (minimalist-ui) |
Clean editorial interfaces. Warm monochrome, flat bento grids, muted pastels. No gradients, no heavy shadows. |
brutalist/ (industrial-brutalist-ui) |
Swiss typographic print + military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color. |
soft/ (high-end-visual-design) |
High-end agency feel. Exact fonts, spacing, shadows, card structures. Blocks common defaults that make AI designs look cheap. |
redesign/ (redesign-existing-projects) |
Audits current UI, identifies generic AI patterns, applies high-end standards without breaking functionality. |
output/ (full-output-enforcement) |
Overrides LLM truncation. Bans placeholder patterns. Handles token-limit splits cleanly. Pair with any visual skill. |
stitch/ (stitch-design-taste) |
Generates agent-friendly DESIGN.md files for Google Stitch. |
images-first/ (image-taste-frontend) |
Image-first workflow: generate reference images, analyze them deeply, then implement. For visually-led projects. |
What ships with it
9 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.
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 First seen · 71 lines · 0 tokens per session scan A d16d171e0cad
frontend-taste is a skill published in the GitHub repository fatihkan/badi (7 stars, last pushed 2d ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 982 tokens. 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-06.
Other skills, from other repositories
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
heroui
Build accessible UIs using HeroUI v3 components (React + Tailwind CSS v4 + React Aria). Use when creating React interfaces, selecting UI components, implementing forms, navigation, overlays, or data display. Use when installing HeroUI v3, customizing themes, accessing component documentation, building with compound…
apple-design
Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading)…
frontend-ui-ux
Designer-turned-developer expertise for crafting stunning UI/UX even without design mockups.
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI).…
landing-page-generator
Generate complete, deploy-ready landing pages from any repository. Use when creating a homepage for an open-source project, building a project website, converting a README into a marketing page, or standardizing landing pages across multiple repos.