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 Arnosdeus/agent-toolkit --skill design-taste-frontendgit clone --depth 1 https://github.com/Arnosdeus/agent-toolkitWrote 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/arnosdeus/agent-toolkit/design-taste-frontend)<a href="https://agentmods.dev/skills/arnosdeus/agent-toolkit/design-taste-frontend"><img src="https://agentmods.dev/badge/skills/arnosdeus/agent-toolkit/design-taste-frontend/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/arnosdeus/agent-toolkit/design-taste-frontend"><img src="https://agentmods.dev/badge/skills/arnosdeus/agent-toolkit/design-taste-frontend.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.00040 | $0.05100 |
| Opus 5 | $0.00020 | $0.02550 |
| Sonnet 5 | $0.00008 | $0.01020 |
| Haiku 4.5 | $0.00004 | $0.00510 |
Grade A, and why
design-taste-frontend 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 8d 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
97% identical to design-taste-frontend-v1 — 6 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 — 227 lines — stays where its author put it; the contents beside it link to each section on GitHub.
High-Agency Frontend Skill
1. ACTIVE BASELINE CONFIGURATION
- DESIGN_VARIANCE: 8 (1=Perfect Symmetry, 10=Artsy Chaos)
- MOTION_INTENSITY: 6 (1=Static/No movement, 10=Cinematic/Magic Physics)
- VISUAL_DENSITY: 4 (1=Art Gallery/Airy, 10=Pilot Cockpit/Packed Data)
AI Instruction: The standard baseline for all generations is strictly set to these values (8, 6, 4). Do not ask the user to edit this file. Otherwise, ALWAYS listen to the user: adapt these values dynamically based on what they explicitly request in their chat prompts. Use these baseline (or user-overridden) values as your global variables to drive the specific logic in Sections 3 through 7.
2. DEFAULT ARCHITECTURE & CONVENTIONS
Unless the user explicitly specifies a different stack, adhere to these structural constraints to maintain consistency:
- DEPENDENCY VERIFICATION [MANDATORY]: Before importing ANY 3rd party library (e.g.
framer-motion,lucide-react,zustand), you MUST checkpackage.json. If the package is missing, you MUST output the installation command (e.g.npm install package-name) before providing the code. Never assume a library exists. - Framework & Interactivity: React or Next.js. Default to Server Components (
RSC).- RSC SAFETY: Global state works ONLY in Client Components. In Next.js, wrap providers in a
"use client"component. - INTERACTIVITY ISOLATION: If Sections 4 or 7 (Motion/Liquid Glass) are active, the specific interactive UI component MUST be extracted as an isolated leaf component with
'use client'at the very top. Server Components must exclusively render static layouts.
- RSC SAFETY: Global state works ONLY in Client Components. In Next.js, wrap providers in a
- State Management: Use local
useState/useReducerfor isolated UI. Use global state strictly for deep prop-drilling avoidance. - Styling Policy: Use Tailwind CSS (v3/v4) for 90% of styling.
- TAILWIND VERSION LOCK: Check
package.jsonfirst. Do not use v4 syntax in v3 projects. - T4 CONFIG GUARD: For v4, do NOT use
tailwindcssplugin inpostcss.config.js. Use@tailwindcss/postcssor the Vite plugin.
- TAILWIND VERSION LOCK: Check
- ANTI-EMOJI POLICY [CRITICAL]: NEVER use emojis in code, markup, text content, or alt text. Replace symbols with high-quality icons (Radix, Phosphor) or clean SVG primitives. Emojis are BANNED.
- Responsiveness & Spacing:
- Standardize breakpoints (
sm,md,lg,xl). - Contain page layouts using
max-w-[1400px] mx-autoormax-w-7xl. - Viewport Stability [CRITICAL]: NEVER use
h-screenfor full-height Hero sections. ALWAYS usemin-h-[100dvh]to prevent catastrophic layout jumping on mobile browsers (iOS Safari). - Grid over Flex-Math: NEVER use complex flexbox percentage math (
w-[calc(33%-1rem)]). ALWAYS use CSS Grid (grid grid-cols-1 md:grid-cols-3 gap-6) for reliable structures.
- Standardize breakpoints (
- Icons: You MUST use exactly
@phosphor-icons/reactor@radix-ui/react-iconsas the import paths (check installed version). StandardizestrokeWidthglobally (e.g., exclusively use1.5or2.0).
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.
- 8d ago First seen · 227 lines · 40 tokens per session scan A a23a9e4e74a8
design-taste-frontend is a skill published in the GitHub repository Arnosdeus/agent-toolkit (2 stars, last pushed 15d ago), licensed MIT. It adds 40 tokens to every session and 5,100 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. It is 97% identical to design-taste-frontend-v1, differing in 6 lines, and is treated as a copy.
Other skills, from other repositories
web-prototype
General-purpose desktop web prototype. Single self-contained HTML file built by copying the seed assets/template.html and pasting section layouts from references/layouts.md. Default for any landing / marketing / docs / SaaS page when no more specific skill matches.
velar-luxury-real-estate
Use this plugin when the user wants a high-end luxury real-estate / architecture landing page with cinematic scroll choreography: a typewriter preloader that lifts away, a scroll-driven house image that rises from below and scales up while pinning to a dark statement section, a sticky dark stats band with count-up…
web-prototype-taste-brutalist
Swiss industrial-print web prototype. Newsprint canvas, monolithic black grotesque, viewport-bleeding numerals, hairline grid dividers, hazard-red accent, ASCII syntax decoration. Distilled from Leonxlnx/taste-skill brutalist-skill (Swiss Industrial Print mode).
web-prototype-taste-soft
Apple-tier soft web prototype. Silver/cream canvas, double-bezel cards, button-in-button CTAs, generous squircle radii, spring motion, ambient mesh. Distilled from Leonxlnx/taste-skill soft-skill + sections 4–8 of taste-skill.
mockup-device-3d
Static iPhone and MacBook 3D-style showcase with real HTML embedded on screens, glass-lens refraction, and 360-degree turntable composition.
web-prototype-taste-editorial
Editorial-minimalist web prototype. Warm monochrome canvas, serif display + grotesque body, 1px hairline borders, muted pastel chips, generous macro-whitespace, ambient micro-motion. Distilled from Leonxlnx/taste-skill minimalist-skill.