Borrowing it
Nothing to install: this file belongs to jmxt3/gitscape.ai. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/jmxt3/gitscape.ai/main/.agents/skills/design-taste-frontend-v1/SKILL.mdgit clone --depth 1 https://github.com/jmxt3/gitscape.aiWrote 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/jmxt3/gitscape.ai/design-taste-frontend-v1)<a href="https://agentmods.dev/skills/jmxt3/gitscape.ai/design-taste-frontend-v1"><img src="https://agentmods.dev/badge/skills/jmxt3/gitscape.ai/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/jmxt3/gitscape.ai/design-taste-frontend-v1"><img src="https://agentmods.dev/badge/skills/jmxt3/gitscape.ai/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 | $0.00030 | $0.02560 |
| Sonnet 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 12d 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.
- 12d ago First seen · 227 lines · 61 tokens per session scan A 033d45af1ed2
design-taste-frontend-v1 is a skill published in the GitHub repository jmxt3/gitscape.ai (33 stars, last pushed 1mo ago), licensed Apache-2.0. It adds 61 tokens to every session and 5,121 once invoked, about $0.0003 per session on Opus 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
openai-frontend-design
Use for new frontend applications, dashboards, games, creative websites, hero sections, and visually driven UI from scratch, or when the user explicitly asks for a redesign/restyle/modernization. Builds from clean, airy, high-taste, readable image-generated concept design with section-specific references, faithful…
ralph-figma
Extract Figma designs and build them as code with ralph-starter.
wp-guided-tour
Use when adding a guided onboarding or feature-discovery tour to a WordPress admin plugin using Driver.js v1 — setting up the IIFE bundle (window.driver.js.driver), PHP backend tour config arrays (autoStart, pages, steps, element, popover), JS scope detection from URL pathname + hash (getCurrentScope, hashchange…
frontend-design
Use when building UI components, making design decisions for frontend work, reviewing UI implementation quality, or planning interaction patterns.
design-system-quality
Use when reviewing UI/frontend code, conducting PR reviews for components, checking design system compliance, or after any UI component work.
anthropic-frontend-design
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.