Borrowing it
Nothing to install: this file belongs to YankielDBC2/codex-skills-library. 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/YankielDBC2/codex-skills-library/main/.agents/skills/premium-frontend-ui-design-v3/SKILL.mdgit clone --depth 1 https://github.com/YankielDBC2/codex-skills-libraryWrote 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/yankieldbc2/codex-skills-library/premium-frontend-ui-design-v3)<a href="https://agentmods.dev/skills/yankieldbc2/codex-skills-library/premium-frontend-ui-design-v3"><img src="https://agentmods.dev/badge/skills/yankieldbc2/codex-skills-library/premium-frontend-ui-design-v3/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/yankieldbc2/codex-skills-library/premium-frontend-ui-design-v3"><img src="https://agentmods.dev/badge/skills/yankieldbc2/codex-skills-library/premium-frontend-ui-design-v3.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.00051 | $0.00539 |
| Opus 5 | $0.00026 | $0.00269 |
| Sonnet 5 | $0.00010 | $0.00108 |
| Haiku 4.5 | $0.00005 | $0.00054 |
Grade A, and why
premium-frontend-ui-design-v3 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 10d 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 — 55 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Premium Frontend UI Design v3
Goal
Create modern, compact, brand-specific interfaces that feel intentionally designed instead of generated from common AI landing-page patterns.
When to use
Use for new pages, redesigns, component sections, landing pages, multipage websites, ecommerce/product pages, dashboards, onboarding, Studio/editor screens, and frontend polish work.
Workflow
- Inspect the existing stack, styling system, design tokens, components, and responsive patterns before editing.
- Write a short Design Read: page type, audience, brand mood, visual language, density, and motion level.
- Set design dials: DESIGN_VARIANCE, VISUAL_DENSITY, MOTION_INTENSITY, and explain the choice briefly.
- Remove generic AI patterns: giant centered hero text, excessive vertical whitespace, repeated 3-card grids, random purple gradients, and identical cards.
- Build visual hierarchy with compact sections, strong alignment, varied rhythm, useful content density, and brand-specific motifs.
- Prefer reusable React/Next.js/TypeScript components and existing project conventions over one-off markup.
- Use GSAP, ScrollTrigger, or advanced motion only when it supports the story or interaction and the project already supports it or the user approved adding it.
- Check mobile, tablet, and desktop layouts before finalizing.
Quality bar
- Run typecheck, lint, tests, build, or the closest available validation command.
- Manually inspect at mobile, tablet, and desktop widths when possible.
- Confirm loading, empty, error, and success states when the page includes data or actions.
Validation
- Headings are proportional to the layout and not oversized by default.
- Sections are compact but readable; spacing is intentional, not template-like.
- Mobile is not automatically one column when two-column density is better.
- Cards, backgrounds, image masks, typography, and hover states have distinct brand personality.
- UI does not look like a generic AI SaaS template.
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.
- 10d ago First seen · 55 lines · 51 tokens per session scan A e7ab2dc666a2
premium-frontend-ui-design-v3 is a skill published in the GitHub repository YankielDBC2/codex-skills-library (10 stars, last pushed 1mo ago), licensed MIT. It adds 51 tokens to every session and 539 once invoked, about $0.0003 per session on Opus 5. 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-08-31.
Other skills, from other repositories
webd
Web design workflow for landing pages, SaaS frontends, conversion-oriented pages, and non-generic UI. Use when building or improving a website, landing page, SaaS UI, hero section, pricing page, conversion funnel, shadcn/ui interface, or when the user invokes /webd or @webd.
shadcn
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json…
popular-web-designs
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
kiranism-shadcn-dashboard
Guide for building features, pages, tables, forms, themes, and navigation in this Next.js 16 shadcn dashboard template. Use this skill whenever the user wants to add a new page, create a feature module, build a data table, add a form, configure navigation items, add a theme, set up RBAC access control, or work with…
component-search
Search 21st.dev component registry for production-ready React components. Finds components by natural language description, filters by framework and style system, returns ranked results with install instructions. Use when looking for UI components, finding alternatives to existing components, or sourcing design system…
ui-craft
Use for UI design and implementation work to avoid generic AI-looking interfaces. Provides anti-slop rules, a required discovery phase before coding, and guidance for layout, typography, color, motion, accessibility, dashboards, tables, landing pages, theming, and polish. Trigger when editing UI code or reviewing and…