skills.rest
LuisSambrano
LuisSambranoCOMMUNITY
Explore all skills by this author →
𝕏@luissambrano_uxGitHub

vibecode-ui

Implement Glassmorphism UI and WCAG accessibility in Next.js 14+ web interfaces.

7|2|Updated Jan 28, 2026
Search Tags:#accessibility#frontend#ui/ux#next.js#web performance#glassmorphism
One-click install
npx skills add https://github.com/LuisSambrano/antigravity-config --skill vibecode-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vibecode-ui
Source: https://github.com/LuisSambrano/antigravity-config/tree/main/skills/3-web/vibecode-ui
Command: npx skills add https://github.com/LuisSambrano/antigravity-config --skill vibecode-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides specialized UI/UX guidelines for creating visually stunning, high-performance web interfaces, specifically enforcing modern architectural standards for Next.js and accessibility compliance.

Core Features & Use Cases

  • Glassmorphism Implementation: Apply sophisticated glassmorphism effects with precise CSS properties.
  • Next.js 14+ Standards: Enforce best practices for routing, rendering, data fetching, and performance.
  • Accessibility Compliance: Ensure UIs meet WCAG standards for touch targets, contrast, and focus management.
  • Use Case: When building a new marketing landing page with Next.js, use this skill to ensure a luxurious dark-mode aesthetic with smooth animations and full accessibility.

Quick Start

Generate a sales dashboard using Next.js, applying the Glassmorphism style and ensuring all interactive elements are accessible.

Frequently Asked Questions about vibecode-ui

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

FAQPage Schema
How do I implement glassmorphism in Next.js without hurting web performance?▼

To implement glassmorphism in Next.js without performance loss, apply precise CSS properties for visual styling while enforcing Next.js 14+ architectural standards for rendering and data fetching to maintain high web performance.

What's the best way to ensure glassmorphism UI components meet WCAG accessibility standards?▼

Ensuring glassmorphism UI meets WCAG accessibility standards involves enforcing strict compliance for touch targets, color contrast, and focus management within the visual styling and frontend engineering process.

Can I use this approach to build a dark-mode marketing landing page with 3D integration?▼

Yes, you can build a dark-mode marketing landing page with 3D integration by applying specialized glassmorphism effects and frontend engineering best practices to achieve a luxurious aesthetic with smooth animations.

Does Next.js 14 routing and rendering architecture support high-performance glassmorphism interfaces?▼

Next.js 14+ routing and rendering architecture fully supports high-performance glassmorphism interfaces by enforcing best practices for data fetching and frontend engineering standards within modern web applications.

Why does my glassmorphism UI fail accessibility compliance on touch targets and contrast?▼

Glassmorphism UI fails accessibility compliance when visual styling ignores WCAG standards for touch targets, contrast, and focus management, requiring specific UI/UX design principles to resolve.

How do I generate an accessible sales dashboard using Next.js and glassmorphism?▼

Generate an accessible sales dashboard by applying glassmorphism style to Next.js 14+ architecture and ensuring all interactive elements meet WCAG accessibility compliance standards.

Related Skills

Explore More Design & Creative Skills→
ClinscottClinscott

design-taste-frontend

Enforces metric-based rules and component architecture for React/Next.js frontend code with Tailwind styling.

Community
Advanced
mustafazeydanimustafazeydani

accessibility

Automate web accessibility audits against WCAG 2.2 guidelines using Lighthouse.

Community
Advanced
UltraXnUltraXn

modern-visual-aesthetics

Implement glassmorphism, gradients, and micro-animations with CSS and JavaScript.

Community
Intermediate
guideopsguideops

neumorphism

Provide neumorphism UI design guidelines with WCAG 2.2 AA accessibility rules.

Community
Advanced