skills.rest
ivaylo91
ivaylo91COMMUNITY
Explore all skills by this author →
GitHub

high-end-visual-design

Generates premium agency-tier UI code with defined typography, spacing, card structures, and motion patterns.

Updated Apr 9, 2026
Search Tags:#typography#landing page#frontend#animation#ui design#tailwind#glassmorphism
One-click install
npx skills add https://github.com/ivaylo91/Shopping-Mobile-App --skill high-end-visual-design-ivaylo91
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: high-end-visual-design
Source: https://github.com/ivaylo91/Shopping-Mobile-App/tree/main/.agents/skills/high-end-visual-design
Command: npx skills add https://github.com/ivaylo91/Shopping-Mobile-App --skill high-end-visual-design-ivaylo91

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated interfaces often look generic and cheap, relying on default fonts, flat cards, harsh shadows, and basic transitions. This Skill enforces a strict design system that produces high-end, agency-quality web interfaces instead of template-looking output. ## Core Features & Use Cases - Anti-Pattern Blocking: Bans default fonts (Inter, Roboto), generic borders, harsh shadows, and linear transitions that make designs look cheap. - Variance Engine: Selects from vibe archetypes (Ethereal Glass, Editorial Luxury, Soft Structuralism) and layout archetypes (Asymmetrical Bento, Z-Axis Cascade, Editorial Split) so no two outputs look identical. - Component & Motion Rules: Defines Double-Bezel nested card architecture, button-in-button CTAs, staggered nav reveals, and cubic-bezier spring physics, with GPU-safe performance guardrails. - Use Case: Ask for a landing page for a SaaS product and receive React/Tailwind code with glassmorphic cards, staggered scroll reveals, magnetic button hovers, and responsive mobile collapse below 768px. ## Quick Start Use the high-end-visual-design skill to build a premium landing page for my AI startup with a dark glassmorphic aesthetic.

Frequently Asked Questions about high-end-visual-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make AI-generated UI designs look less generic?▼

Apply a strict design system that bans default fonts like Inter and Roboto, generic 1px borders, and linear transitions. This Skill enforces premium typography, nested card architecture, macro-whitespace, and spring-physics motion to produce agency-tier output.

How to build glassmorphism cards with Tailwind CSS?▼

Use the Double-Bezel technique: an outer shell with bg-white/5, ring-1 hairline border, and large radius wrapping an inner core with its own background and inset highlight. Add backdrop-blur only to fixed or sticky elements, never scrolling containers.

What fonts and icons does this design skill use?▼

It assumes premium fonts like Geist, Clash Display, PP Editorial New, or Plus Jakarta Sans, and ultra-light icon sets such as Phosphor Light or Remix Line. Inter, Roboto, Arial, FontAwesome, and Material Icons are explicitly banned.

Does the generated layout work on mobile devices?▼

Yes. All asymmetric layouts collapse to single-column stacks below 768px with w-full and px-4 spacing. Rotations and overlaps are removed, and min-h-[100dvh] replaces h-screen to prevent iOS Safari viewport jumping.

Why should scroll animations avoid window scroll event listeners?▼

Scroll event listeners cause continuous reflows and hurt mobile performance. The Skill mandates IntersectionObserver or Framer Motion's whileInView for entry animations, and animates only transform and opacity for GPU-safe rendering.

Related Skills

Explore More Design & Creative Skills→
Adelie-SquadAdelie-Squad
17

Brand Marketer Agent

Generate brand strategy, naming, tone, and visual guidelines from business inputs.

Official
Advanced
vctplatformvctplatform

frontend-developer

Develops web and mobile UIs with React 20, TypeScript, Expo, and Tailwind CSS v4.

Community
Advanced
huaxelhuaxel

impeccable

Automate frontend design-to-production workflows with tokens and design-system patterns.

Community
Advanced
sheriaxsheriax

clerk-custom-ui

Create custom Clerk authentication flows and theme components with React hooks.

Official
Intermediate