frontend-design

Standardize Vue 3 frontend visual design with glass-morphism tokens and patterns.

Updated Feb 12, 2026
One-click install
npx skills add https://github.com/tiagofur/kakoclaw --skill frontend-design-tiagofur
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/tiagofur/kakoclaw/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/tiagofur/kakoclaw --skill frontend-design-tiagofur

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual inconsistency across Vue 3 frontends leads to fragmented user experiences and longer design handoffs. This skill provides a unified glass-morphism design system, color tokens, spacing, and component patterns to maintain a cohesive UI.

Core Features & Use Cases

  • Glass Morphism patterns, color tokens, spacing, and component patterns for Vue 3 + Tailwind-based interfaces
  • Per-screen design tokens and patterns for dashboards, admin panels, and pages requiring a consistent look
  • Broad guidance for maintaining visual consistency across screens, with scalable patterns for new components

Quick Start

Import the MakoClaw design tokens into a Vue 3 component and apply the glass-morphism styles to achieve consistency.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I maintain visual consistency across Vue 3 frontends?▼

You can maintain visual consistency across Vue 3 frontends by applying a unified glass-morphism design system with standardized color tokens, spacing, and component patterns. This prevents fragmented user experiences and streamlines design handoffs.

What is the best way to build a glass-morphism UI in a Tailwind-based Vue dashboard?▼

The best way to build a glass-morphism UI in a Tailwind-based Vue dashboard is to use predefined design tokens and CSS variables. These scalable patterns ensure a cohesive look across admin panels and data screens.

Do I need Tailwind to use these Vue 3 design tokens?▼

Yes, you need a Tailwind-based environment to apply these Vue 3 design tokens effectively. The system relies on Tailwind-based tokens and CSS variables to deliver its glass-morphism component patterns.

Can I apply this design system to new components outside of admin panels?▼

Yes, you can apply this design system to new components outside of admin panels. It provides broad guidance and scalable patterns for maintaining visual consistency across any Vue 3 pages requiring a unified look.

How does a token-based design system solve fragmented user experiences?▼

A token-based design system solves fragmented user experiences by standardizing colors, spacing, and component patterns into reusable CSS variables. This ensures every Vue 3 screen adheres to the same glass-morphism visual rules.

Are there limitations to using glass-morphism patterns for Vue interfaces?▼

The main limitation of using glass-morphism patterns for Vue interfaces is that they require Tailwind-based tokens and CSS variables to function correctly. You must import these design tokens into your Vue 3 components to achieve the intended consistent look.