skills.rest
RavitejaKarra24
RavitejaKarra24COMMUNITY
Explore all skills by this author →
𝕏@RavitejaKarra24GitHub

high-end-visual-design

Generates premium UI code with curated fonts, nested card structures, and physics-based animations.

Updated Mar 12, 2026
Search Tags:#typography#landing page#tailwind css#web design#animation#ui design#glassmorphism
One-click install
npx skills add https://github.com/RavitejaKarra24/dotfiles --skill high-end-visual-design-ravitejakarra24
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: high-end-visual-design
Source: https://github.com/RavitejaKarra24/dotfiles/tree/main/agents/.agents/skills/high-end-visual-design
Command: npx skills add https://github.com/RavitejaKarra24/dotfiles --skill high-end-visual-design-ravitejakarra24

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated interfaces often look generic because they default to common fonts, flat cards, harsh shadows, and basic transitions. This Skill enforces a strict design system that produces agency-tier web interfaces instead of template-looking output. ## Core Features & Use Cases - Anti-Pattern Blocking: Bans default fonts (Inter, Roboto, Arial), generic borders, harsh shadows, and linear transitions that make designs look cheap. - Variance Engine: Selects from texture archetypes (Ethereal Glass, Editorial Luxury, Soft Structuralism) and layout archetypes (Asymmetrical Bento, Z-Axis Cascade, Editorial Split) so each design is distinct. - Component & Motion Rules: Defines Double-Bezel nested card architecture, button-in-button CTAs, staggered nav reveals, and cubic-bezier spring transitions with GPU-safe animation constraints. - Use Case: Ask for a landing page for a SaaS product and receive React/Tailwind code with mesh gradients, glassmorphic cards, macro-whitespace, and scroll-triggered fade-up animations that collapse cleanly on mobile. ## 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 websites look less generic?▼

Apply a strict design system that bans default fonts like Inter and Roboto, replaces flat cards with nested Double-Bezel containers, and uses custom cubic-bezier transitions instead of linear easing. Combining distinct layout archetypes like asymmetrical bento grids also breaks visual monotony.

What fonts and icons work for premium web design?▼

Use premium typefaces such as Geist, Clash Display, PP Editorial New, or Plus Jakarta Sans instead of Inter or Roboto. For icons, choose ultra-light line sets like Phosphor Light or Remix Line rather than thick-stroked Lucide or Material icons.

How do I build a glassmorphism card in Tailwind CSS?▼

Use a nested structure: an outer shell with bg-white/5, a hairline border, padding, and a large radius like rounded-[2rem], wrapping an inner core with its own background and inset highlight shadow. Add backdrop-blur-2xl only on fixed or sticky elements.

Does backdrop-blur cause performance issues on mobile?▼

Yes, applying backdrop-blur to scrolling containers forces continuous GPU repaints and causes frame drops on mobile. Restrict blur to fixed or sticky elements like navbars and overlays, and animate only transform and opacity properties.

Why use min-h-[100dvh] instead of h-screen for full-height sections?▼

h-screen uses the static viewport height, which causes layout jumping on iOS Safari when the address bar shows or hides. min-h-[100dvh] tracks the dynamic viewport height, keeping full-height sections stable on mobile browsers.

Related Skills

Explore More Design & Creative Skills→
alykay1522alykay1522

copywriting

Generate marketing copy for homepages, landing pages, and product pages.

Community
Intermediate
PlayableIntelligencePlayableIntelligence
307

game-deploy

Deploy browser games to here.now, GitHub Pages, Vercel, or Netlify.

Official
Advanced
ojallingtonojallington

accessibility-auditor

Run Playwright-based accessibility, visual regression, and performance audits on a dashboard.

Community
Advanced
JoaquimCassanoJoaquimCassano
1

daisyui

Provide DaisyUI component classes for Tailwind CSS interfaces.

Community
Intermediate