If your generated code includes ANY of the following, the design instantly fails:
Works with
AI-first code editor with Composer
Before installing skills in Cursor, ensure your development environment meets these requirements:
node --versionhigh-end-visual-designExecute the skills CLI command in your project's root directory to begin installation:
Fetches high-end-visual-design from leonxlnx/taste-skill and configures it for Cursor.
The CLI shows a list of agents. Use arrow keys and space to select Cursor:
Confirm successful installation by checking the skill directory location:
Restart Cursor to activate high-end-visual-design. Access via /high-end-visual-design in your agent's command palette.
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.
Submit your Claude Code skill and start earning
Automate repetitive workflows and reduce manual effort
Example
Generate reports, summarize documents, draft communications
Save 3-5 hours per week on routine tasks
Learn new skills, understand complex topics, get expert guidance
Example
Explain concepts, provide examples, suggest learning resources
Accelerate learning and skill development by 2x
Enhance output quality through reviews, suggestions, and refinements
Example
Review drafts, suggest improvements, catch errors
Improve work quality by 30-40% with less effort
156
total installs
156
this week
7.2K
GitHub stars
0
upvotes
Run in your terminal
156
installs
156
this week
7.2K
stars
Vanguard_UI_ArchitectIf your generated code includes ANY of the following, the design instantly fails:
Geist, Clash Display, PP Editorial New, or Plus Jakarta Sans are available).shadow-md, rgba(0,0,0,0.3)).linear or ease-in-out transitions. Instant state changes without interpolation.Before writing code, silently "roll the dice" and select ONE combination from the following archetypes based on the prompt's context to ensure the output is uniquely tailored but always premium:
#050505), radial mesh gradients (e.g., subtle glowing purple/emerald orbs) in the background. Vantablack cards with heavy backdrop-blur-2xl and pure white/10 hairlines. Wide geometric Grotesk typography.#FDFBF7), muted sage, or deep espresso tones. High-contrast Variable Serif fonts for massive headings. Subtle CSS noise/film-grain overlay (opacity-[0.03]) for a physical paper feel.col-span-8 row-span-2 next to stacked col-span-4 cards) to break visual monotony.
grid-cols-1) with generous vertical gaps (gap-6). All col-span overrides reset to col-span-1.-2deg or 3deg rotation to break the digital grid.
768px. Stack vertically with standard spacing. Overlapping elements cause touch-target conflicts on mobile.w-1/2), with interactive, scrollable horizontal image pills or staggered interactive cards on the right.
w-full). Typography block sits on top, interactive content flows below with horizontal scroll preserved if needed.Mobile Override (Universal): Any asymmetric layout above md: MUST aggressively fall back to w-full, px-4, py-8 on viewports below 768px. Never use h-screen for full-height sections — always use min-h-[100dvh] to prevent iOS Safari viewport jumping.
Never place a premium card, image, or container flatly on the background. They must look like physical, machined hardware (like a glass plate sitting in an aluminum tray) using nested enclosures.
div with a subtle background (bg-black/5 or bg-white/5), a hairline outer border (ring-1 ring-black/5 or border border-white/10), a specific padding (e.g., p-1.5 or p-2), and a large outer radius (rounded-[2rem]).shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)]), and a mathematically calculated smaller radius (e.g., rounded-[calc(2rem-0.375rem)]) for concentric curves.rounded-full) with generous padding (px-6 py-3).↗), it NEVER sits naked next to the text. It must be nested inside its own distinct circular wrapper (e.g., w-8 h-8 rounded-full bg-black/5 dark:bg-white/10 flex items-center justify-center) placed completely flush with the main button's right inner padding.py-24 to py-40 for sections. Allow the design to breathe heavily.rounded-full px-3 py-1 text-[10px] uppercase tracking-[0.2em] font-medium).Never use default transitions. All motion must simulate real-world mass and spring physics. Use custom cubic-beziers (e.g., transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]).
mt-6, mx-auto, w-max, rounded-full).rotate-45 and -rotate-45 with absolute positioning), not just disappear.backdrop-blur-3xl bg-black/80 or bg-white/80).translate-y-12 opacity-0 to translate-y-0 opacity-100) with a staggered delay (delay-100, delay-150, delay-200 for each item).group utility. On hover, do not just change the background color.active:scale-[0.98]) to simulate physical pressing.group-hover:translate-x-1 group-hover:-translate-y-[1px]) and scale up slightly (scale-105), creating internal kinetic tension.translate-y-16 blur-md opacity-0 resolving to translate-y-0 blur-0 opacity-100 over 800ms+).IntersectionObserver or Framer Motion's whileInView. Never use window.addEventListener('scroll') — it causes continuous reflows and kills mobile performance.top, left, width, or height. Animate exclusively via transform and opacity. Use will-change: transform sparingly and only on elements that are actively animating.backdrop-blur only to fixed or sticky elements (navbars, overlays). Never apply blur filters to scrolling containers or large content areas — this causes continuous GPU repaints and severe mobile frame drops.pointer-events-none pseudo-elements (position: fixed; inset: 0; z-index: 50). Never attach them to scrolling containers.z-50 or z-[9999]. Reserve z-indexes strictly for systemic layers: sticky nav, modals, overlays, tooltips.When generating UI code, follow this exact sequence:
rounded-[2rem]).cubic-bezier transitions, the staggered navigation reveals, and the button-in-button hover physics.Evaluate your code against this matrix before delivering. This is the last filter.
py-24 — the layout breathes heavilylinear or ease-in-out768px to single-column with w-full and px-4transform and opacity — no layout-triggering propertiesbackdrop-blur is only applied to fixed/sticky elements, never to scrolling contentPrerequisites
Time Estimate
15-45 minutes depending on use case complexity
Steps
Common Pitfalls
✓ Do
✗ Don't
💡 Pro Tips
✓ Use when
Use when skill capabilities match your task, clear ROI on time saved, and you can validate outputs. Best for repetitive tasks, learning, and quality improvement.
✗ Avoid when
Avoid when task requires deep expertise you can't validate, involves sensitive decisions, or when learning process is more valuable than speed of completion.
leonxlnx/taste-skill
anthropics/claude-code
sickn33/antigravity-awesome-skills
erichowens/some_claude_skills
hyperb1iss/hyperskills
kylezantos/design-motion-principles
high-end-visual-design is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
Solid pick for teams standardizing on skills: high-end-visual-design is focused, and the summary matches what you get after install.
high-end-visual-design reduced setup friction for our internal harness; good balance of opinion and flexibility.
high-end-visual-design has been reliable in day-to-day use. Documentation quality is above average for community skills.
high-end-visual-design fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
We added high-end-visual-design from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
Solid pick for teams standardizing on skills: high-end-visual-design is focused, and the summary matches what you get after install.
high-end-visual-design has been reliable in day-to-day use. Documentation quality is above average for community skills.
high-end-visual-design reduced setup friction for our internal harness; good balance of opinion and flexibility.
high-end-visual-design fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
showing 1-10 of 52