visual-designing
npx machina-cli add skill VidyFoo/antigravity-skill-engine/visual-designing --openclawVisual Design System
Unified Design Engine v1.0
Purpose
A single source of truth for all UI/UX design tasks. This skill intelligently switches between "Production Efficiency" (Standard) and "Wow Factor" (Premium) based on user intent.
🧭 Design Modes
| Mode | Trigger | Focus | Style Traits |
|---|---|---|---|
| Standard (Production) | "create a dashboard", "login form", "settings page" | Usability, Speed, Accessibility | Tailwind utility-first, clean whites/darks, standard shadcn/ui components. |
| Premium (Aesthetic) | "premium", "glassmorphism", "wow me", "landing page" | Visual Impact, Emotion, Brand | Glass effects, Aurora gradients, Micro-interactions, custom CSS variables. |
🛠️ Execution Protocol
- Analyze Aesthetic Intent: Does the user want a solid tool (Standard) or a piece of art (Premium)?
- Load Resources (Premium Only):
- If Premium/Glass/Motion is requested, you MUST read:
resources/glass-components.md(for glass CSS)resources/premium-palettes.md(for gradients/colors)resources/micro-interactions.md(for animations)
- If Premium/Glass/Motion is requested, you MUST read:
- Generate CSS/Tailwind:
- Standard: Use standard Tailwind (
bg-white,text-slate-900,rounded-lg). - Premium: Use
backdrop-filter,bg-white/10,border-white/20, and custom animations.
- Standard: Use standard Tailwind (
📐 Core Principles (All Modes)
- Mobile First: Always responsive.
- Dark Mode Ready: All specific colors must have dark mode equivalents.
- Accessibility: No ultra-low contrast text, even in "Premium" mode.
🚫 Anti-Patterns
- Mixing Metaphors: Don't put a hyper-realistic glass card inside a flat material design dashboard. Commit to one style.
- Over-Animation: Motion should facilitate understanding, not distract.
Source
git clone https://github.com/VidyFoo/antigravity-skill-engine/blob/main/.agent/skills/4-tools/visual-designing/SKILL.mdView on GitHub Overview
Visual Design System provides a single source of truth for UI/UX tasks, with two modes: Standard for production-ready interfaces and Premium for high-impact visuals. It guides design execution from intent to CSS/Tailwind output, including resource loading for premium aesthetics. It emphasizes mobile-first responsiveness, dark-mode readiness, and accessibility.
How This Skill Works
It first analyzes the user's intent (Standard vs Premium), loads premium resources when needed (glass components, premium palettes, micro-interactions), and then generates CSS/Tailwind artifacts. Across all modes, it enforces mobile-first responsive behavior, dark-mode equivalents, and accessible contrast.
When to Use It
- Build a dashboard or settings page quickly using Standard/Production mode.
- Create login or form UIs prioritizing usability, speed, and accessibility (Standard).
- Design a premium landing page with glass effects, aurora gradients, and micro-interactions (Premium).
- Request premium aesthetics features requiring glass components, palettes, and animations.
- Ensure mobile-first, dark-mode ready visuals across devices in either mode.
Quick Start
- Step 1: Determine aesthetic intent (Standard vs Premium).
- Step 2: If Premium, load resources/glass-components.md, premium-palettes.md, micro-interactions.md.
- Step 3: Generate CSS/Tailwind: Standard uses bg-white, text-slate-900, rounded-lg; Premium uses backdrop-filter, bg-white/10, border-white/20, and custom animations.
Best Practices
- Start in Standard for production tasks and switch to Premium only when a wow factor is required.
- If Premium is chosen, explicitly load resources: glass-components.md, premium-palettes.md, micro-interactions.md.
- Follow core principles: mobile-first, dark-mode readiness, and accessibility.
- Maintain a single design metaphor; avoid mixing glass UI with flat material designs.
- Use motion purposefully; avoid over-animations that distract or hinder usability.
Example Use Cases
- Analytics dashboard with Tailwind-based components and accessible controls.
- Accessible login form with clear contrast, focus states, and responsive layout.
- Premium marketing landing page featuring glass UI and aurora-like gradients.
- Product feature tour with micro-interactions and smooth transitions.
- Brand-aligned onboarding flow that stays responsive and supports dark mode.
