Agent skill · design visual · samhvw8
ui-ux-design
UI/UX design reference database. 50+ styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
Why this skill is useful
Provides a curated reference database with specific UI/UX patterns, styles, and stack-specific best practices that the AI wouldn't reliably generate on its own.
What it needs
Requires python installed locally. About 5k tokens when loaded. Last updated 2025-12-09. 10 stars on the source repository.
What this skill does
UI Design Reference - Searchable Pattern Database Curated reference database of UI/UX patterns, styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices. Use this as a lookup tool to find proven design patterns and implementation guidance. Prerequisites Check if Python is installed: If Python is not installed, install it based on user's OS: macOS: Ubuntu/Debian: Windows: --- How to Use This Skill When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow: Step 1: Analyze User Requirements Extract key information from user request: Product type: SaaS, e-commerce, portfolio, dashboard, landing page, etc. Style keywords: minimal, playful, professional, elegant, dark mode, etc. Industry: healthcare, fintech, gaming, education, etc. Stack: React, Vue, Next.js, or default to html-tailwind Step 2: Search Relevant Domains Use search.py multiple times to gather comprehensive information. Search until you have enough context. Recommended search order: 1. Product - Get style recommendations for product type 2. Style - Get detailed style guide (colors, effects, frameworks) 3. Typography - Get font pairings with Google Fonts imports 4. Color - Get color palette (Primary, Secondary, CTA, Background, Text, Border) 5. Landing - Get page structure (if landing page) 6. Chart - Get chart recommendations (if dashboard/analytics) 7. UX - Get best practices and anti-patterns 8. Stack - Get stack-specific guidelines (default: html-tailwind) Step 3: Stack Guidelines (Default: html-tailwind) If user doesn't specify a stack, default to html-tailwind. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills samhvw8/ui-ux-design