← All skills
ui-ux-pro-max
75 / 100 · Review before installing
Check before installing.
By sundial-org/awesome-openclaw-skills (GitHub) · design · 674 stars · scanned at commit b80cde2
UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component …
Works with any agent that supports SKILL.md skills.
What this skill can do
Runs commands on your computer
The author does not mention this.
Found in 1 place.
Sends data to these websites: docs.astro.build, nextjs.org, nuxt.com, kit.svelte.dev
The author does not mention this.
Found in 22 places.
Show 17 more
- skills/ui-ux-pro-max/assets/data/stacks/astro.csv, line 20
19,Data,Fetch in frontmatter,Data fetching in component frontmatter,Top-level await in frontmatter,useEffect for initial data,const data = await fetch(url),clie - skills/ui-ux-pro-max/assets/data/stacks/nextjs.csv, line 13
12,DataFetching,Fetch data in Server Components,Fetch directly in async Server Components,async function Page() { const data = await fetch() },useEffect for ini - skills/ui-ux-pro-max/assets/data/stacks/nextjs.csv, line 14
13,DataFetching,Configure caching explicitly (Next.js 15+),Next.js 15 changed defaults to uncached for fetch,Explicitly set cache: 'force-cache' for static data - skills/ui-ux-pro-max/assets/data/stacks/nuxtjs.csv, line 10
9,DataFetching,Use useFetch for simple data fetching,Wrapper around useAsyncData for URL fetching,useFetch for API calls,$fetch in onMounted,"const { data } = a - skills/ui-ux-pro-max/assets/data/stacks/nuxtjs.csv, line 12
11,DataFetching,Use $fetch for non-reactive requests,$fetch for event handlers and non-component code,$fetch in event handlers or server routes,useFetch in clic - skills/ui-ux-pro-max/assets/data/stacks/nuxtjs.csv, line 30
29,State,Use callOnce for one-time async operations,Ensure async operations run only once,callOnce for store initialization,Direct await in component,"await cal - skills/ui-ux-pro-max/assets/data/stacks/react.csv, line 41
40,ErrorHandling,Handle async errors,Catch errors in async operations,try/catch in async handlers,Unhandled promise rejections,try { await fetch() } catch(e) {} - skills/ui-ux-pro-max/assets/data/stacks/svelte.csv, line 45
44,SvelteKit,Use form actions,Server-side form handling,+page.server.js actions,API routes for forms,export const actions = { default },fetch('/api/submit'),Med - skills/ui-ux-pro-max/data/react-performance.csv, line 2
1,Async Waterfall,Defer Await,async await defer branch,React/Next.js,Move await into branches where actually used to avoid blocking unused code paths,Move await - skills/ui-ux-pro-max/data/react-performance.csv, line 4
3,Async Waterfall,Dependency Parallelization,better-all dependency parallel,React/Next.js,Use better-all for operations with partial dependencies to maximize pa - skills/ui-ux-pro-max/data/react-performance.csv, line 17
16,Client,SWR Deduplication,swr dedup cache revalidate,React/Next.js,Use SWR for automatic request deduplication and caching,Use useSWR for client data fetching - skills/ui-ux-pro-max/data/stacks/astro.csv, line 20
19,Data,Fetch in frontmatter,Data fetching in component frontmatter,Top-level await in frontmatter,useEffect for initial data,const data = await fetch(url),clie - skills/ui-ux-pro-max/data/stacks/nextjs.csv, line 13
12,DataFetching,Fetch data in Server Components,Fetch directly in async Server Components,async function Page() { const data = await fetch() },useEffect for ini - skills/ui-ux-pro-max/data/stacks/nextjs.csv, line 14
13,DataFetching,Configure caching explicitly (Next.js 15+),Next.js 15 changed defaults to uncached for fetch,Explicitly set cache: 'force-cache' for static data - skills/ui-ux-pro-max/data/stacks/nuxtjs.csv, line 10
9,DataFetching,Use useFetch for simple data fetching,Wrapper around useAsyncData for URL fetching,useFetch for API calls,$fetch in onMounted,"const { data } = a - skills/ui-ux-pro-max/data/stacks/nuxtjs.csv, line 12
11,DataFetching,Use $fetch for non-reactive requests,$fetch for event handlers and non-component code,$fetch in event handlers or server routes,useFetch in clic - skills/ui-ux-pro-max/data/stacks/nuxtjs.csv, line 30
29,State,Use callOnce for one-time async operations,Ensure async operations run only once,callOnce for store initialization,Direct await in component,"await cal
and 2 more places
Downloads and installs other software
The author does not mention this.
Found in 22 places.
Show 17 more
- skills/ui-ux-pro-max/assets/data/stacks/astro.csv, line 54
53,Build,Use prefetch,Preload linked pages,prefetch integration,No prefetch for navigation,npx astro add prefetch,Manual prefetch,Low,https://docs.astro.build/e - skills/ui-ux-pro-max/assets/data/stacks/shadcn.csv, line 2
1,Setup,Use CLI for installation,Install components via shadcn CLI for proper setup,npx shadcn@latest add component-name,Manual copy-paste from docs,npx shadcn@ - skills/ui-ux-pro-max/assets/data/stacks/shadcn.csv, line 3
2,Setup,Initialize project properly,Run init command to set up components.json and globals.css,npx shadcn@latest init before adding components,Skip init and add - skills/ui-ux-pro-max/assets/data/stacks/shadcn.csv, line 51
50,Blocks,Use blocks for scaffolding,Start from shadcn blocks for common layouts,npx shadcn@latest add dashboard-01,Build dashboard from scratch,npx shadcn@late - skills/ui-ux-pro-max/assets/data/stacks/vue.csv, line 49
48,SSR,Use Nuxt for SSR,Full-featured SSR framework,Nuxt 3 for SSR apps,Manual SSR setup,npx nuxi init my-app,Custom SSR configuration,Medium,https://nuxt.com/ - skills/ui-ux-pro-max/data/stacks/astro.csv, line 18
17,Styling,Integrate Tailwind properly,Use @astrojs/tailwind integration,Official Tailwind integration,Manual Tailwind setup,npx astro add tailwind,Manual PostC - skills/ui-ux-pro-max/data/stacks/astro.csv, line 34
33,SEO,Generate sitemap,Automatic sitemap generation,@astrojs/sitemap integration,Manual sitemap maintenance,npx astro add sitemap,Hand-written sitemap.xml,Medi - skills/ui-ux-pro-max/data/stacks/astro.csv, line 37
36,Integrations,Use official integrations,Astro's integration system,npx astro add for integrations,Manual configuration,npx astro add react,Manual React setup, - skills/ui-ux-pro-max/data/stacks/astro.csv, line 54
53,Build,Use prefetch,Preload linked pages,prefetch integration,No prefetch for navigation,npx astro add prefetch,Manual prefetch,Low,https://docs.astro.build/e - skills/ui-ux-pro-max/data/stacks/shadcn.csv, line 2
1,Setup,Use CLI for installation,Install components via shadcn CLI for proper setup,npx shadcn@latest add component-name,Manual copy-paste from docs,npx shadcn@ - skills/ui-ux-pro-max/data/stacks/shadcn.csv, line 3
2,Setup,Initialize project properly,Run init command to set up components.json and globals.css,npx shadcn@latest init before adding components,Skip init and add - skills/ui-ux-pro-max/data/stacks/shadcn.csv, line 51
50,Blocks,Use blocks for scaffolding,Start from shadcn blocks for common layouts,npx shadcn@latest add dashboard-01,Build dashboard from scratch,npx shadcn@late - skills/ui-ux-pro-max/data/stacks/vue.csv, line 49
48,SSR,Use Nuxt for SSR,Full-featured SSR framework,Nuxt 3 for SSR apps,Manual SSR setup,npx nuxi init my-app,Custom SSR configuration,Medium,https://nuxt.com/ - skills/ui-ux-pro-max/references/upstream-README.md, line 261
npm install -g uipro-cli - skills/ui-ux-pro-max/references/upstream-README.md, line 301
brew install python3 - skills/ui-ux-pro-max/references/upstream-README.md, line 304
sudo apt update && sudo apt install python3 - skills/ui-ux-pro-max/references/upstream-README.md, line 439
npm install -g uipro-cli
and 2 more places
Safer alternatives
Low-risk skills in the same category (design) that look related. Check that one does what you need.
Install
Paste this into your terminal. It downloads exactly the version we scanned, not whatever is newest.
if [ -e ~/.agents/skills/'ui-ux-pro-max' ] || [ -L ~/.agents/skills/'ui-ux-pro-max' ]; then echo 'A skill folder named ui-ux-pro-max already exists — not replacing it' >&2; false; else d=$(mktemp -d) && git clone --quiet --filter=blob:none --no-checkout 'https://github.com/sundial-org/awesome-openclaw-skills' "$d" && git -C "$d" checkout --quiet 'b80cde2ef85241dd4fd54a1b934f5e22835f78ba' -- 'skills/ui-ux-pro-max' && mkdir -p ~/.agents/skills && cp -R "$d"/'skills/ui-ux-pro-max' ~/.agents/skills/'ui-ux-pro-max' && rm -rf "$d"; fi
Codex reads ~/.agents/skills directly. For Claude Code, Cursor, Copilot, Gemini CLI, Antigravity or OpenCode, also link it. For Claude Code: ln -s ~/.agents/skills/'ui-ux-pro-max' ~/.claude/skills/'ui-ux-pro-max' (other agents: ~/.cursor/skills, ~/.copilot/skills, ~/.gemini/skills, ~/.gemini/config/skills, ~/.config/opencode/skills). Or install through the finder skill, which does both.
Badge for your README
The badge for sundial-org/awesome-openclaw-skills shows the score of its lowest-scoring skill.
[](https://zalavijaysinh.github.io/skilltrust/repos/sundial-org/awesome-openclaw-skills/)
Score history
| Date | Version | Score |
|---|
| 2026-11-08 | b80cde2 | 75 |
| 2026-11-07 | b80cde2 | 55 |
Also found in
Identical copies of this skill exist at:
- LeoYeAI/agent-master-skills/skills/ui-ux-pro-max