Psychology-driven UI/UX design plugin — combines cognitive psychology skills with Google Stitch MCP to generate premium, conversion-optimized page designs
Plugin magic-ui-ux from marketplace fws-skills in flyingwebie/skills. Commands read from the repo's manifest — 1 month ago.
magic-ui-uxPsychology-driven UI/UX design plugin. Orchestrates UX decisions (cognitive psychology) and UI execution (Google Stitch MCP) to produce premium page designs. Use when user mentions "design", "branding", "page layout", "UX", "UI", "design system", or any design-related task.
animationGenerates per-page animation choreography specs. Reads UX briefs for psychology context and design tokens for style-appropriate motion. Produces implementation-ready specs with Framer Motion, GSAP + ScrollTrigger, Swup.js, and Lenis code patterns.
brandingGenerates complete design systems from project niche/industry descriptions. Produces machine-readable tokens (tokens.json) and human-readable design documentation (branding.md) using industry-specific design rules and color psychology.
copy-generationGenerates page copy (headlines, subheadings, body text, CTAs, labels) based on project niche, page type, and UX brief psychology rationale. Presents all copy for human approval before use. Never passes unapproved copy to the UI Agent.
image-generationGenerates comprehensive JSON visual specifications from text descriptions, reference images, or both. Translates photography/cinematography parameters into rich natural-language image guidance that dramatically improves Stitch's image rendering in generated screens.
persistenceManages the .ui-ux/ persistence folder. Handles initialization, reading, and writing of design tokens, project state, and screen references. Every command MUST read from .ui-ux/ before any design operation.
psychology-routerRoutes page sections to relevant psychology skills. Given a page-type and section-type, returns 2-4 focused skills instead of all 14. Called by the UX Agent before analyzing each section of a page layout.
video-to-websiteGenerates scroll-driven animated site specifications that transform video content into interactive web experiences. Produces canvas frame rendering sequences, GSAP ScrollTrigger pin/scrub configurations, section choreography timing, and Lenis smooth scroll integration.
/magic-ui-ux:brandingGenerate or reverse-engineer a design system for the project
/magic-ui-ux:designDesign one or more pages with psychology-driven UX and Stitch-generated UI
/magic-ui-ux:exportExport screen data and metadata from Stitch project
/magic-ui-ux:imageGenerate rich image specifications from text descriptions, reference images, or both
/magic-ui-ux:iterateIterate on existing designs -- generate variants or edit screens with change requests
/magic-ui-ux:syncReconcile local state with Stitch project — detect drift, sync screens
/magic-ui-ux:videoGenerate scroll-driven video-style site specs for designed pages
ui-agentux-agentCode-first, spec-driven MVP builder. v0.14 makes every loop stop state its reason and its next command, cuts review agents without cutting a single mechanical check, and puts the whole plugin into ASD-STE100 Simplified Technical English, enforced by scripts/ste-check.sh.
13 skills · 16 commands · 3 agents · hooks
Scaffolds a production-grade Expo app on one opinionated stack — Expo Router + Convex (cloud or self-hosted) + Better Auth + Uniwind + react-i18next + pre/post sign-in onboarding, with an Expo-UI-first UI layer (FlashList v2, TrueSheet, keyboard-controller, gifted-charts, calendars, pager-view), a react-native-ease / Reanimated / Skia motion split, deep linking through +native-intent (Universal/App Links plus the deferred-install gap), a premium-UI audit that verifies on a real device via argent alongside a screenshot-driven visual-design critique, revenue decisions backed by subscription data (trial length, hard vs freemium, Android billing recovery), ASO as part of the ship loop, and post-scaffold commands — /setup, /rebrand, /customize-onboarding, /configure-monetization, /add-language, /ship. Always resolves the latest Expo SDK — nothing is pinned except the mandatory better-auth version set, which is derived from the Convex component. bun/pnpm/yarn workspaces with the hoisting React Native actually needs. Composes with the official expo, convex, better-auth, uniwind, revenuecat, true-sheet, code-with-beto, aso and mobbin skill packs instead of duplicating them. Distilled from Expo's engineering blog and Code with Beto.
14 skills · 10 commands
Complete client discovery workflow — sitemap audit, competitor research, buyer personas, keyword strategy, and production-ready website copy with a 90-day content plan
11 skills · 10 commands · hooks
Builds Etch components live via the Etch Connector or as paste-ready markup — BEM naming, enforced ACSS 4.x tokens when AutomaticCSS is detected.
9 skills · 4 commands
Best-practice git workflow manager with Gitmoji + Conventional Commits, automated releases, branch hygiene, and safety hooks
3 skills · 9 commands · hooks
Tech stack subagents that auto-trigger for TanStack Start, Next.js, Convex, Supabase, and Clerk — with Context7 docs, Tailwind v4, shadcn/ui, and psychology-driven UX. Expo / React Native is owned by the expo-stack plugin.
7 skills · 5 agents
Collection of example skills demonstrating various capabilities including skill creation, MCP building, visual design, algorithmic art, internal communications, web testing, artifact building, Slack GIFs, and theme styling
19 skills
Comprehensive PR review agents specializing in comments, tests, error handling, type design, code quality, and code simplification
1 command · 6 agents
Professional UI/UX design intelligence for AI coding assistants. Includes searchable databases of styles, colors, typography, charts, and UX guidelines for React, Next.js, Astro, Vue, Nuxt.js, Nuxt UI, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, Jetpack Compose, Angular, Laravel, JavaFX, and Three.js.
7 skills
tasteskill 2.5.1: professional company websites at the figma.com and x.ai level, with one section per screen, real photographs, real product UI, effects kept for tech and gaming pages, and a real-browser checker and finish gate.
1 skill
Design fluency for frontend development. 1 skill with 24 commands (/impeccable polish, /impeccable audit, /impeccable critique, etc.) and curated anti-pattern detection.
1 skill · 4 agents · hooks
Build, preview, and test UI components with Storybook.
7 skills
This page updates itself from your repo. Add the badge to your README, or get it Featured to pin it above the organic results with a followed link to your site.