Ui Ux Design
A searchable reference database that pulls UI/UX patterns, color palettes, font pairings, and stack-specific guidelines through a Python search script. You run queries across eight domains (product, style, typography, color, landing, chart, ux, prompt) to gather design recommendations before building. It defaults to HTML and Tailwind but covers React, Vue, Svelte, SwiftUI, React Native, and Flutter. The included rules table is genuinely useful, especially the light mode contrast guidance and the reminder to use actual SVG icons instead of emojis. Treats design as a lookup problem rather than pure generation, which works better than you'd expect for maintaining consistency across a project.
- skills.sh installs
- 207
- GitHub stars
- 11
- last updated
- Aug 21, 2026
Install
$ npx -y skills add samhvw8/dot-claude --skill ui-ux-design --agent claude-codeInstalls into .claude/skills of the current project.
Files
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:
python3 --version || python --version
If Python is not installed, install it based on user's OS:
macOS:
brew install python3
Ubuntu/Debian:
sudo apt update && sudo apt install python3
Windows:
winget install Python.Python.3.12
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.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/samhvw8/dot-claude
- Categories
- Frontend Development, Backend & APIs, DevOps & CI/CD, Git & Pull Requests, Documentation, Code Review & Quality, Debugging, Productivity & Planning, Mobile Development, Design & UI/UX, Finance & Trading, Databases
- First seen
- Jun 3, 2026
More from samhvw8/dot-claude
All 4Recommended
More Frontend Development
shadcn-code-reviewexistential-birds/beagleReviews shadcn/ui components for CVA patterns, composition with asChild, accessibility states, and data-slot usage. Use when reviewing React components using sh204skills.sh installs
frontendmiles990/claude-software-skillsModern frontend development with React, Vue, and web technologies194skills.sh installs
frontend-internationalization-best-practicessergiodxa/agent-skillsInternationalization best practices for React Router framework mode using remix-i18next. Use when setting up locales, middleware, resource routes, or language s193skills.sh installs
svelteepicenterhq/epicenterSvelte 5 component and state-module patterns for Epicenter apps. Use when editing `.svelte`, `.svelte.ts`, or Svelte UI state code involving runes, `$props`, sn192skills.sh installs
angular-lifecycleoguzhan18/angular-ecosystem-skillsALWAYS use when working with Angular Lifecycle Hooks, ngOnInit, ngOnChanges, ngAfterViewInit, or component lifecycle in Angular.176skills.sh installs
frontend-developmentsamhvw8/dotfilesMulti-framework frontend development. Frameworks: React 18+ (Suspense, hooks, TanStack), Vue 3 (Composition API, Pinia, Nuxt), Svelte 5 (Runes, SvelteKit), Angu174skills.sh installs