skills.rest
TenBeltz
TenBeltzOFFICIAL
Explore all skills by this author →
WebsiteGitHub

ui-ux-pro-max

Consolidate UI/UX patterns, palettes, typography, and guidelines for web and mobile design.

Updated Nov 21, 2024
Search Tags:#typography#ui#accessibility#patterns#ux#design-system#palettes
One-click install
npx skills add https://github.com/TenBeltz/tenbeltz-frontend --skill ui-ux-pro-max-tenbeltz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/TenBeltz/tenbeltz-frontend/tree/main/.agents/skills/ui-ux-pro-max
Command: npx skills add https://github.com/TenBeltz/tenbeltz-frontend --skill ui-ux-pro-max-tenbeltz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples.

Frequently Asked Questions about ui-ux-pro-max

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

FAQPage Schema
How do I choose the right color palettes and typography for a web design system?▼

To build a web design system, you can select from 161 color palettes and 57 font pairings tailored for web and mobile. This ensures visual consistency across UI components like buttons, modals, and cards while maintaining accessibility standards.

Can I use this for UI and UX design across React, Next.js, and Tailwind stacks?▼

Yes, UI and UX design guidelines apply across 10 stacks including React, Next.js, and Tailwind. You can implement responsive layouts, dark mode, and flat design patterns directly within these frameworks for websites and SaaS dashboards.

What is the best way to apply UX guidelines when refactoring mobile app components?▼

The best way to refactor mobile app components is applying the 99 included UX guidelines to optimize interaction states, spacing, and shadow. This improves usability for React Native, Flutter, and SwiftUI projects by standardizing forms and navigation bars.

Does this cover accessibility and interaction states for complex dashboard layouts?▼

Yes, accessibility and interaction states are covered comprehensively for dashboard layouts. You can apply 99 UX guidelines and bento grid styles to ensure tables, charts, and sidebars remain accessible and responsive across admin panels.

How do I design data visualizations and charts that match my existing UI styles?▼

To design data visualizations, choose from 25 chart types and 50+ styles like glassmorphism or minimalism. This allows you to seamlessly match graphs and tables to your existing SaaS or e-commerce UI design system.

What UI design patterns work best for creating a responsive landing page?▼

For a responsive landing page, utilize styles like bento grid, minimalism, and neumorphism combined with established UI patterns. This ensures the layout adapts correctly across devices while maintaining strong typography and gradient elements.

Related Skills

Explore More Design & Creative Skills→
moshi-azzmoshi-azz
2

ui-ux-pro-max

Generate UI/UX design systems with guidelines, palettes, and typography for specified tech stacks.

Community
Advanced
Bliz243Bliz243

ultra-frontend

Build production-grade frontend interfaces with clear aesthetic direction.

Community
Advanced
IsaacAVazquezIsaacAVazquez

ui-ux-pro-max

Generate design systems with styles, palettes, typography, and stack-specific guidance.

Community
Advanced
markdo27markdo27

ui-ux-pro-max

Provide UI/UX styles, palettes, fonts, and guidelines for web and mobile apps.

Community
Advanced