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 modelstudioai/OpenAgentPack --skill design-taste-frontend-v1git clone --depth 1 https://github.com/modelstudioai/OpenAgentPackWrote 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/modelstudioai/openagentpack/design-taste-frontend-v1)<a href="https://agentmods.dev/skills/modelstudioai/openagentpack/design-taste-frontend-v1"><img src="https://agentmods.dev/badge/skills/modelstudioai/openagentpack/design-taste-frontend-v1/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/modelstudioai/openagentpack/design-taste-frontend-v1"><img src="https://agentmods.dev/badge/skills/modelstudioai/openagentpack/design-taste-frontend-v1.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.00061 | $0.05121 |
| Opus 5.5 | $0.00024 | $0.02048 |
| Sonnet 5.5 | $0.00012 | $0.01024 |
| Haiku 4.5 | $0.00006 | $0.00512 |
Grade A, and why
design-taste-frontend-v1 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 1mo 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 design-taste-frontend-v1 — 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 — 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.
- 1mo ago First seen · 227 lines · 61 tokens per session scan A 033d45af1ed2
design-taste-frontend-v1 is a skill published in the GitHub repository modelstudioai/OpenAgentPack (24 stars, last pushed 4d ago), licensed Apache-2.0. It adds 61 tokens to every session and 5,121 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 0 findings. It is 100% identical to design-taste-frontend-v1, differing in 0 lines, and is treated as a copy.
Other skills, from other repositories
agent-reach
An internet-search and platform-access router for finding information across websites and services such as Reddit, X, GitHub, YouTube, and job sites.
x-signal-agent
Deploy or update the X Signal Agent on Omnara, an agent that searches X for posts about a topic and delivers a daily digest. Use when the user asks to deploy, set up, update, or remove the X signal agent.
composio
Use Composio from Agent Swarm through the agent-swarm x composio CLI route, the swarmx MCP tool, or a registered ctx.api.composio script connection. Trigger when a task needs connected third-party app tools such as Gmail, Google Calendar, Google Docs, Google Drive, GitHub, Slack, Notion, or HubSpot through Tool Router…
ebay-sold-listings-search
All process output to user (progress updates, process notifications) follows the user's language.
youtube-channel-business-email
YouTube channel business email and contact extractor: accepts a channel id (UCxxx), handle (@name), or URL; navigates the channel About view; extracts the business email from the description text plus full channel metadata (name, id, country, subscriber count, view count, video count, joined date, external links…
review-offered-task
Turn prompt for an offered swarm task: read the offer, accept with task-action and start work-on-task, or reject with a reason.