skills.rest
tawf-labs
tawf-labsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

ui-ux-pro-max

Provide stack-aware UI/UX design guidance for frontend interfaces.

1|Updated Jan 24, 2026
Search Tags:#color palettes#typography#accessibility#responsive design#design systems#uiux#frontend components
One-click install
npx skills add https://github.com/tawf-labs/zkt-hackathon --skill ui-ux-pro-max-tawf-labs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-pro-max
Source: https://github.com/tawf-labs/zkt-hackathon/tree/main/.opencode/skills/ui-ux-pro-max
Command: npx skills add https://github.com/tawf-labs/zkt-hackathon --skill ui-ux-pro-max-tawf-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you avoid inconsistent, low-quality UI decisions by turning common UI/UX needs into practical, stack-aware implementation guidance.

Core Features & Use Cases

  • UI style intelligence: recommends layouts and visual directions using a curated set of styles (e.g., glassmorphism, minimalism, dark mode).
  • Design system building blocks: provides palettes, font pairings, chart types, and reusable component element guidance (buttons, modals, navbars, tables, forms).
  • Stack-specific recommendations: tailors implementation guidance for frameworks including React/Next.js/Vue/Svelte and tooling like Tailwind and shadcn/ui.
  • UX quality improvements: reinforces accessibility, typography, spacing, hover/interaction behavior, and anti-pattern avoidance for polished deliverables.

Quick Start

Use the ui-ux-pro-max skill to design a responsive Next.js dashboard for a fintech app with a dark mode theme, clear accessibility, and charts styled to match the brand.

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 responsive dashboard?▼

Responsive dashboards require color palettes and typography pairings that match your visual style, ensuring accessible contrast and consistent spacing across all UI components.

What's the best way to implement a dark mode theme using Tailwind and shadcn/ui?▼

Implementing a dark mode theme with Tailwind and shadcn/ui involves applying stack-aware style intelligence, using curated palettes and interaction behaviors to avoid common UI anti-patterns.

Can I use this UI/UX guidance for building e-commerce flows in React and Vue?▼

Yes, you can use this UI/UX guidance for e-commerce flows in React and Vue, as it provides stack-specific implementation direction for reusable frontend components like forms and modals.

How do I ensure accessibility when designing frontend components for a fintech app?▼

Accessibility in frontend components for a fintech app is ensured by reinforcing proper typography, spacing, and hover behaviors while avoiding interaction anti-patterns throughout the design system.

Does this approach support selecting the right chart types for admin panels?▼

Yes, this approach supports selecting chart types for admin panels by providing design system building blocks that align data visualization choices with your overall brand styling and layout.

Why does my Svelte landing page UI look inconsistent across different screen sizes?▼

Svelte landing page UIs look inconsistent when responsive design and visual direction lack a unified style, which can be fixed by applying curated design patterns and consistent component element guidance.

Related Skills

Explore More Design & Creative Skills→
truchottruchot
2

direction-artistique

Define visual identity, brand language, and governance for projects.

Community
Advanced
zmsqnfl-commitszmsqnfl-commits
1

image-to-code

Convert design reference images into responsive HTML/CSS/JS components.

Community
Advanced
curiositechcuriositech
181

frontend-architect

Recommend frontend stacks and Cloudflare deployment patterns for web applications.

Official
Advanced
AshesOfTheUndeadAshesOfTheUndead

wireframe-sketch

Generate hand-drawn low-fidelity wireframe templates with SVG filters and handwritten typography.

Community
Intermediate