commit a68e196fea61a988ab8e5b2ff9fb2d1762c5688b Author: codex Date: Fri Feb 6 08:01:02 2026 +0800 Add ui-ux-pro-max-skill diff --git a/ui-ux-pro-max-skill/SKILL.md b/ui-ux-pro-max-skill/SKILL.md new file mode 100644 index 0000000..6c2e6a9 --- /dev/null +++ b/ui-ux-pro-max-skill/SKILL.md @@ -0,0 +1,35 @@ +--- +name: ui-ux-pro-max-skill +description: Curated UI/UX demo prompt library for web front-end design and build tasks. Use when asked to design or build website UI, landing pages, dashboards, product sites, or UI/UX demos, especially when the request matches a known category (SaaS, fintech/crypto, e-commerce, AI tools, healthcare, education, travel, real estate, etc.). +--- + +# UI UX Pro Max Skill + +## Overview +Use the 39 curated demo prompts to quickly choose a matching UI style and then adapt the prompt to the user domain, features, and brand constraints. + +## Workflow +1. Scan categories and demo names in `references/gallery-index.md`. +2. Open `references/gallery.csv` to read full prompts for the best matches. +3. Select the closest demo using category, keywords, and requested UI type (dashboard, landing page, marketplace, portfolio, etc.). +4. Adapt the chosen prompt to the user domain, required sections, tone, and tech stack. +5. Deliver a structured UI plan and (if requested) front-end scaffold guidance. + +## Matching Rules +- **Primary match**: category + obvious keywords (e.g., "dashboard", "crypto", "clinic", "restaurant"). +- **Secondary match**: similar information architecture (e.g., CRM and analytics dashboards, marketplaces, booking sites). +- **Mode**: respect light/dark preference if the user specifies it; otherwise keep the demo mode. +- If multiple matches exist, pick the one with the closest feature set and layout style; mention alternates briefly. +- If no good match exists, pick the nearest SaaS/analytics or general business layout and explain the adaptation. + +## Output Template +- Selected demo: id, name, category, mode, url +- Why this match (1-2 sentences) +- Adapted prompt (edited from the demo prompt) +- UI structure (sections + key components) +- Visual notes (colors, typography, spacing, motion) +- Optional: front-end build notes (stack, layout grid, component list) + +## Resources +- `references/gallery-index.md`: quick category/name index for the 39 demos. +- `references/gallery.csv`: authoritative prompt data (includes prompts, colors, urls). diff --git a/ui-ux-pro-max-skill/agents/openai.yaml b/ui-ux-pro-max-skill/agents/openai.yaml new file mode 100644 index 0000000..c374b84 --- /dev/null +++ b/ui-ux-pro-max-skill/agents/openai.yaml @@ -0,0 +1,4 @@ +interface: + display_name: "UI UX Pro Max" + short_description: "Match web UI requests to 39 demo prompts." + default_prompt: "Pick the closest demo prompt and adapt it to the requested website, then outline the UI structure and key sections." diff --git a/ui-ux-pro-max-skill/references/gallery-index.md b/ui-ux-pro-max-skill/references/gallery-index.md new file mode 100644 index 0000000..c9ed166 --- /dev/null +++ b/ui-ux-pro-max-skill/references/gallery-index.md @@ -0,0 +1,82 @@ +# Gallery Index (39 demos) + +Use this index to quickly scan categories and demo names before opening gallery.csv for full prompts. + +## AI/Chatbot +- 2. AI Chatbot Platform (light) +- 20. Sustainability Platform (light) +- 36. Generative Art Platform (dark) +- 39. AI Writing Assistant (light) +- 40. AI Image Generator (dark) + +## Beauty/Spa +- 14. Beauty & Spa Service (light) +- 19. Coworking Space (light) + +## Creative +- 6. Creative Agency Portfolio (light) + +## Developer Tools +- 15. Developer Tools (dark) + +## E-commerce +- 3. Luxury E-commerce (light) + +## Education +- 7. Educational Platform (light) + +## Entertainment +- 16. Music Streaming (dark) + +## Events +- 18. Wedding & Events (light) + +## Fintech/Crypto +- 4. Fintech Crypto Dashboard (dark) +- 28. Investment Platform (dark) +- 29. Payment Gateway (light) +- 30. Crypto Wallet (dark) +- 31. DeFi Yield Platform (dark) +- 32. CEX Trading Platform (dark) +- 33. DEX Swap Interface (dark) + +## Fitness +- 11. Fitness & Gym App (dark) + +## Food & Restaurant +- 10. Restaurant & Food (light) + +## Gaming +- 9. Gaming Platform (dark) + +## Healthcare +- 5. Health & Wellness App (light) +- 25. Telemedicine Platform (light) +- 26. Mental Health App (light) + +## Legal +- 17. Legal Services (light) + +## NFT/Web3 +- 13. NFT & Web3 Platform (dark) +- 35. NFT Art Gallery (light) + +## Other +- 22. Veterinary Clinic (light) +- 24. Medical Clinic Portal (light) +- 27. Digital Banking App (light) + +## Pet Services +- 21. Pet Grooming & Spa (light) +- 23. Pet Adoption Platform (light) + +## Real Estate +- 8. Real Estate Luxury (light) + +## SaaS +- 1. SaaS Analytics Dashboard (light) +- 37. Sales CRM Platform (light) +- 38. Customer Support CRM (light) + +## Travel +- 12. Travel & Tourism (light) diff --git a/ui-ux-pro-max-skill/references/gallery.csv b/ui-ux-pro-max-skill/references/gallery.csv new file mode 100644 index 0000000..fc00410 --- /dev/null +++ b/ui-ux-pro-max-skill/references/gallery.csv @@ -0,0 +1,40 @@ +id,order,name,category,imageUrl,url,style,mode,primary_color,secondary_color,cta_color,background_color,implemented,prompt +1,1,SaaS Analytics Dashboard,SaaS,/thumbnails/saas-analytics-dashboard.png,/demo/saas-analytics-dashboard,Glassmorphism + Flat Design,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Create a modern SaaS analytics dashboard landing page with glassmorphism cards, hero section showcasing real-time data visualization, feature highlights with icons, pricing table, and trust badges. Focus on clarity and professional feel." +7,1,Educational Platform,Education,/thumbnails/educational-platform.png,/demo/educational-platform,Claymorphism + Vibrant & Block-based,light,#FDBCB4,#ADD8E6,#22C55E,#FFFFFF,true,"Create a playful educational platform landing page with claymorphism cards, course catalog preview, progress tracking demo, student testimonials, and enrollment CTA. Use vibrant, engaging colors." +21,1,Pet Grooming & Spa,Pet Services,/thumbnails/pet-grooming.png,/demo/pet-grooming,Claymorphism + Vibrant & Block-based,light,#FF9F43,#87CEEB,#FF9F43,#FFF8F0,true,"Create a friendly pet grooming service landing page with claymorphism cards, service packages, pet gallery, booking system, and testimonials from pet owners. Use playful warm colors." +2,2,AI Chatbot Platform,AI/Chatbot,/thumbnails/ai-chatbot-platform.png,/demo/ai-chatbot-platform,AI-Native UI + Minimalism,light,#6366F1,#10B981,#6366F1,#F5F5F5,true,"Design a minimal AI chatbot platform landing page with conversational UI preview, streaming text animation demo, feature cards with AI capabilities, integration logos, and a prominent 'Try Now' CTA. Use neutral tones with AI purple accent." +3,3,Luxury E-commerce,E-commerce,/thumbnails/luxury-ecommerce.png,/demo/luxury-ecommerce,Liquid Glass + Glassmorphism,light,#000000,#FFD700,#FFD700,#FFFFFF,true,"Build an elegant luxury e-commerce landing page with liquid glass effects, high-end product showcase, storytelling sections, premium brand values, and exclusive membership CTA. Emphasize sophistication and exclusivity." +4,4,Fintech Crypto Dashboard,Fintech/Crypto,/thumbnails/fintech-crypto.png,/demo/fintech-crypto,Glassmorphism + Dark Mode (OLED),dark,#0080FF,#39FF14,#39FF14,#0A0E27,true,"Create a dark mode fintech/crypto landing page with glassmorphism cards, real-time price charts preview, security features highlight, wallet integration showcase, and trust indicators. Focus on security and modern tech feel." +5,5,Health & Wellness App,Healthcare,/thumbnails/health-wellness.png,/demo/health-wellness,Neumorphism + Soft UI Evolution,light,#87CEEB,#90EE90,#22C55E,#F5F5F5,true,"Design a calming health and wellness app landing page with soft UI elements, neumorphic cards, feature showcase for meditation/fitness tracking, testimonials, and app download CTAs. Use calm, soothing colors." +6,6,Creative Agency Portfolio,Creative,/thumbnails/creative-agency.png,/demo/creative-agency,Brutalism + Motion-Driven,light,#FF0000,#0000FF,#FFFF00,#FFFFFF,true,"Build a bold creative agency portfolio landing page with brutalist elements, motion-driven animations, case study previews, team showcase, and contact form. Emphasize creativity and uniqueness." +8,8,Real Estate Luxury,Real Estate,/thumbnails/real-estate.png,/demo/real-estate,Glassmorphism + Minimalism,light,#0077B6,#FFD700,#0077B6,#FFFFFF,true,"Design an elegant real estate landing page with glassmorphism property cards, virtual tour preview, featured listings, agent profiles, and contact form. Focus on trust and premium feel." +9,9,Gaming Platform,Gaming,/thumbnails/gaming-platform.png,/demo/gaming-platform,3D & Hyperrealism + Retro-Futurism,dark,#FF006E,#00FFFF,#39FF14,#1A1A2E,true,"Build an immersive gaming platform landing page with 3D elements, retro-futuristic style, game showcase carousel, community features, and download CTA. Use vibrant neon colors on dark background." +10,10,Restaurant & Food,Food & Restaurant,/thumbnails/restaurant-food.png,/demo/restaurant-food,Vibrant & Block-based + Motion-Driven,light,#FF6B35,#8B4513,#FF6B35,#FFFAF0,true,"Create a warm restaurant landing page with vibrant food photography, menu preview, reservation system, chef story section, and location map. Use appetizing warm colors." +11,11,Fitness & Gym App,Fitness,/thumbnails/fitness-gym.png,/demo/fitness-gym,Vibrant & Block-based + Dark Mode (OLED),dark,#FF6B35,#0080FF,#FF6B35,#121212,true,"Design an energetic fitness app landing page with dark mode, workout preview cards, progress tracking demo, trainer profiles, and subscription CTAs. Use bold, motivating colors." +12,12,Travel & Tourism,Travel,/thumbnails/travel-tourism.png,/demo/travel-tourism,Aurora UI + Motion-Driven,light,#0080FF,#FF7F00,#FF7F00,#FFFFFF,true,"Build an inspiring travel agency landing page with aurora UI gradients, destination showcase, booking preview, traveler testimonials, and trip planner CTA. Use vibrant destination colors." +13,13,NFT & Web3 Platform,NFT/Web3,/thumbnails/nft-web3.png,/demo/nft-web3,Cyberpunk UI + Glassmorphism,dark,#FF00FF,#00FFFF,#FFD700,#0D0D0D,true,"Create a cyberpunk-style NFT platform landing page with glassmorphism cards, featured NFT gallery, wallet connection demo, creator spotlight, and marketplace preview. Use neon colors on dark background." +14,14,Beauty & Spa Service,Beauty/Spa,/thumbnails/beauty-spa.png,/demo/beauty-spa,Soft UI Evolution + Neumorphism,light,#FFB6C1,#90EE90,#FFD700,#FFF5F5,true,"Design a serene beauty spa landing page with soft UI elements, service menu, before/after gallery, booking system preview, and testimonials. Use soft pastels and calming aesthetics." +15,15,Developer Tools,Developer Tools,/thumbnails/developer-tools.png,/demo/developer-tools,Dark Mode (OLED) + Minimalism,dark,#39FF14,#0080FF,#39FF14,#0D0D0D,true,"Build a minimal developer tools landing page with dark mode, code snippet previews, feature comparison table, integration logos, and documentation link. Use syntax highlighting colors." +16,16,Music Streaming,Entertainment,/thumbnails/music-streaming.png,/demo/music-streaming,Dark Mode (OLED) + Vibrant & Block-based,dark,#1DB954,#FF1493,#1DB954,#121212,true,"Create a dark mode music streaming landing page with vibrant accents, playlist showcase, audio player preview, artist spotlight, and premium subscription CTA. Use album art-inspired colors." +17,17,Legal Services,Legal,/thumbnails/legal-services.png,/demo/legal-services,Trust & Authority + Minimalism,light,#1E3A5F,#FFD700,#1E3A5F,#FFFFFF,true,"Design a trustworthy legal services landing page with minimal design, practice areas showcase, attorney profiles, case results, and consultation booking. Use professional navy and gold." +18,18,Wedding & Events,Events,/thumbnails/wedding-events.png,/demo/wedding-events,Soft UI Evolution + Aurora UI,light,#FFD6E0,#FFD700,#FFD700,#FFFAF5,true,"Build a romantic wedding planning landing page with soft UI, portfolio gallery, vendor directory preview, planning tools showcase, and contact form. Use soft pink and gold accents." +19,19,Coworking Space,Beauty/Spa,/thumbnails/coworking-space.png,/demo/coworking-space,Vibrant & Block-based + Glassmorphism,light,#FFB6C1,#90EE90,#FFD700,#FFF5F5,true,"Create a vibrant coworking space landing page with glassmorphism cards, space tour preview, membership plans, amenities showcase, and booking CTA. Use energetic modern colors." +20,20,Sustainability Platform,AI/Chatbot,/thumbnails/sustainability-platform.png,/demo/sustainability-platform,Organic Biophilic + Minimalism,light,#6366F1,#10B981,#6366F1,#F5F5F5,true,"Design an eco-friendly sustainability platform landing page with organic biophilic elements, carbon footprint calculator preview, impact metrics, and certification badges. Use earth tones and greens." +22,22,Veterinary Clinic,Other,/thumbnails/veterinary-clinic.png,/demo/veterinary-clinic,Soft UI Evolution + Accessible & Ethical,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Design a caring veterinary clinic landing page with soft UI elements, services overview, vet team profiles, emergency contact section, and appointment booking. Use calming pet-friendly colors." +23,23,Pet Adoption Platform,Pet Services,/thumbnails/pet-adoption.png,/demo/pet-adoption,Motion-Driven + Claymorphism,light,#FF9F43,#87CEEB,#FF9F43,#FFF8F0,true,"Build a heartwarming pet adoption platform landing page with motion-driven pet cards, search filters preview, success stories, shelter partnerships, and adoption CTA. Use warm inviting colors." +24,24,Medical Clinic Portal,Other,/thumbnails/medical-clinic.png,/demo/medical-clinic,Accessible & Ethical + Minimalism,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Create a trustworthy medical clinic landing page with accessible design, services directory, doctor profiles, patient portal preview, and appointment booking. Focus on trust and accessibility." +25,25,Telemedicine Platform,Healthcare,/thumbnails/telemedicine.png,/demo/telemedicine,Soft UI Evolution + AI-Native UI,light,#87CEEB,#90EE90,#22C55E,#F5F5F5,true,"Design a modern telemedicine platform landing page with soft UI, video consultation preview, specialist directory, health tracking features, and app download CTAs. Use calming healthcare colors." +26,26,Mental Health App,Healthcare,/thumbnails/mental-health.png,/demo/mental-health,Neumorphism + Accessible & Ethical,light,#87CEEB,#90EE90,#22C55E,#F5F5F5,true,"Build a calming mental health app landing page with neumorphic elements, mood tracking preview, therapy session booking, resource library, and crisis support section. Use soothing pastels." +27,27,Digital Banking App,Other,/thumbnails/digital-banking.png,/demo/digital-banking,Glassmorphism + Trust & Authority,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Create a sleek digital banking landing page with glassmorphism cards, account overview preview, transaction features, security highlights, and mobile app download. Use trust-building colors." +28,28,Investment Platform,Fintech/Crypto,/thumbnails/investment-platform.png,/demo/investment-platform,Dark Mode (OLED) + Data-Dense Dashboard,dark,#0080FF,#39FF14,#39FF14,#0A0E27,true,"Design a professional investment platform landing page with dark mode, portfolio analytics preview, market data widgets, educational resources, and account signup. Focus on trust and data." +29,29,Payment Gateway,Fintech/Crypto,/thumbnails/payment-gateway.png,/demo/payment-gateway,Minimalism + Trust & Authority,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Build a conversion-focused payment gateway landing page with minimal design, integration code preview, pricing tiers, security certifications, and developer documentation link. Use professional colors." +30,30,Crypto Wallet,Fintech/Crypto,/thumbnails/crypto-wallet.png,/demo/crypto-wallet,Glassmorphism + Dark Mode (OLED),dark,#0080FF,#39FF14,#39FF14,#0A0E27,true,"Create a secure crypto wallet landing page with dark glassmorphism, multi-chain support showcase, security features, transaction preview, and download CTAs. Use crypto-native dark theme." +31,31,DeFi Yield Platform,Fintech/Crypto,/thumbnails/defi-yield.png,/demo/defi-yield,Cyberpunk UI + Glassmorphism,dark,#0080FF,#39FF14,#39FF14,#0A0E27,true,"Design a DeFi yield farming platform landing page with cyberpunk aesthetics, APY calculators, liquidity pools preview, tokenomics section, and wallet connect. Use neon on dark." +32,32,CEX Trading Platform,Fintech/Crypto,/thumbnails/cex-trading.png,/demo/cex-trading,Dark Mode (OLED) + Data-Dense Dashboard,dark,#0080FF,#39FF14,#39FF14,#0A0E27,true,"Build a professional centralized exchange landing page with dark mode, trading interface preview, market pairs, security features, and registration flow. Focus on trust and performance." +33,33,DEX Swap Interface,Fintech/Crypto,/thumbnails/dex-swap.png,/demo/dex-swap,Glassmorphism + Cyberpunk UI,dark,#0080FF,#39FF14,#39FF14,#0A0E27,true,"Create a decentralized exchange landing page with glassmorphism swap interface preview, supported tokens, liquidity provider benefits, governance features, and wallet integration. Use Web3 aesthetics." +35,35,NFT Art Gallery,NFT/Web3,/thumbnails/nft-art-gallery.png,/demo/nft-art-gallery,Minimalism + Motion-Driven,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Build an elegant NFT art gallery landing page with minimal design, curated collections, artist profiles, exhibition previews, and minting interface. Focus on art presentation." +36,36,Generative Art Platform,AI/Chatbot,/thumbnails/generative-art-platform.png,/demo/generative-art-platform,Minimalism + Gen Z Chaos,dark,#0080FF,#8B00FF,#22C55E,#0D0D0D,true,"Create a generative art platform landing page with dark mode, AI art generation preview, style gallery, creator tools showcase, and minting flow. Use canvas-neutral with vibrant accents." +37,37,Sales CRM Platform,SaaS,/thumbnails/sales-crm-platform.png,/demo/sales-crm-platform,Feature-Rich Showcase + Trust & Authority,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Design a professional sales CRM landing page with feature-rich showcase, pipeline visualization preview, integration logos, customer success stories, and free trial CTA. Use trust colors." +38,38,Customer Support CRM,SaaS,/thumbnails/customer-support-crm.png,/demo/customer-support-crm,Soft UI Evolution + Feature-Rich Showcase,light,#0080FF,#8B00FF,#22C55E,#FFFFFF,true,"Build a friendly customer support CRM landing page with soft UI, ticket management preview, omnichannel features, AI chatbot integration, and pricing comparison. Use approachable colors." +39,39,AI Writing Assistant,AI/Chatbot,/thumbnails/ai-writing-assistant.png,/demo/ai-writing-assistant,AI-Native UI + Minimalism,light,#6366F1,#10B981,#6366F1,#F5F5F5,true,"Create an AI writing assistant landing page with minimal chrome, live writing demo, use case showcases, integration options, and subscription tiers. Use neutral with AI purple accent." +40,40,AI Image Generator,AI/Chatbot,/thumbnails/ai-image-generator.png,/demo/ai-image-generator,Dark Mode (OLED) + Bento Box Grid,dark,#0080FF,#8B00FF,#22C55E,#0D0D0D,true,"Design an AI image generation platform landing page with dark mode, generation preview gallery, style options, prompt examples, and credit-based pricing. Use creative vibrant accents."