nextlevelbuilder/ui-ux-pro-max-skill
7 skills359k installs776k starsGitHub
Install
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skillSkills in this repo
1Ui Ux Pro MaxGenerate complete, tailored design systems with an AI reasoning engine that analyzes project requirements and produces pattern recommendations, color palettes, typography pairings, and UI styles. Includes pre-delivery checklists for accessibility and responsiveness.288kinstalls2Design SystemThe design-system skill implements token architecture, component specifications, and brand-compliant slide generation for systematic UI work. It defines a three-layer token model flowing primitive raw values into semantic purpose aliases and component-specific tokens, expressed as CSS variables for spacing, typography, and color scales. Scripts generate-tokens.cjs and validate-tokens.cjs produce and audit token usage across codebases, catching hardcoded hex values before they ship. Component spec patterns document default, hover, active, and disabled states with token references rather than raw colors. Tailwind integration maps component tokens into theme configuration while references cover primitive, semantic, and component token files plus states-and-variants. The slide subsystem imports design-tokens.css as single source of truth, uses Chart.js for charts, BM25 search-slides.py for layout recommendations, and CSV decision systems for strategy, typography, color logic, and copy formulas. Slides require var() exclusively, keyboard navigation, centered persuasion-focused content, and slide-token-validator.py compliance checks. Dependencies include brand and ui-styling skills with.12.3kinstalls3DesignThis unified design skill routes agents across brand identity, design tokens, UI styling, logo generation, corporate identity programs, HTML presentations, banners, SVG icons, and social photos. Built-in workflows cover 55+ logo styles with Gemini image models, 50+ CIP deliverables, Chart.js slide decks, 22 banner art directions with platform size tables, and 15 icon styles exported as SVG via Gemini 3.1 Pro. Sub-skills delegate brand, design-system, and ui-styling tasks while Python scripts handle BM25 search, mockup generation, and HTML rendering. Banner and social photo flows use HTML/CSS design, chrome-devtools screenshot export, and AskUserQuestion for requirements. Setup needs Python, google-genai, pillow, and a GEMINI_API_KEY. Complete brand packages chain logo creation into CIP mockups and pitch decks across Facebook, Instagram, LinkedIn, YouTube, Google Ads, and print-ready specs. References cover routing guides, copywriting formulas, layout patterns, and per-platform safe zones so agents deliver consistent visuals without guessing sizes.12kinstalls4Ui StylingThis skill teaches comprehensive UI construction with shadcn/ui components on Radix UI primitives, Tailwind CSS utility-first styling, and canvas-based visual design systems. It covers npx shadcn init and add workflows, TypeScript-first copy-paste components for dialogs, forms, tables, and navigation, plus dark mode theming with CSS variables and next-themes. Reference guides document form validation with react-hook-form and zod, responsive mobile-first breakpoints, Tailwind customization with @theme tokens, and Radix accessibility patterns for keyboard focus and screen readers. Python helpers automate shadcn component installs and tailwind.config.js generation. The canvas layer adds philosophy-driven visual compositions for posters and brand materials with minimal text and museum-quality aesthetics. Best practices stress component composition, utility-first styling, accessible defaults, design tokens, and performance via CSS purging. Activate when building React, Next.js, Vite, Remix, or Astro interfaces, prototyping responsive layouts, or establishing consistent styling patterns across applications.11.9kinstalls5Banner DesignThe banner-design skill runs a multi-format creative workflow for social covers, display ads, website heroes, event print, and campaign assets. It gathers purpose, platform dimensions, copy, brand guidelines, and style preferences, then researches Pinterest references and selects complementary art directions from documented size and style guides. Each variant combines HTML/CSS layout via frontend-design with AI-generated backgrounds and illustrations through ai-artist and ai-multimodal using Gemini Flash for fast 2K patterns or Gemini Pro for 4K hero visuals. Design rules enforce safe zones, single CTAs, two-font limits, 4.5:1 contrast, and under-twenty-percent text on ads. Exports use chrome-devtools screenshots at exact platform pixels with optional Sharp compression, organized under assets/banners/{campaign}/. Delivers three default art direction options with rationale and paths for iteration. Does not cover video editing, full website design, or print production finishing.11.6kinstalls6BrandThe brand skill from ui-ux-pro-max-skill covers brand identity, voice, messaging, asset organization, and consistency frameworks for agent workflows. Activate it for brand voice definition, visual identity standards, messaging frameworks, consistency audits, asset naming approval, and color or typography specifications. Quick start runs Node scripts: inject-brand-context.cjs extracts prompt context, validate-asset.cjs checks naming size and format, extract-colors.cjs compares palettes, and sync-brand-to-tokens.cjs syncs docs/brand-guidelines.md into assets/design-tokens.json and design-tokens.css. The brand sync workflow edits brand-guidelines.md, syncs tokens, then verifies output with inject-brand-context.cjs --json. Subcommands parse the first argument and load references for voice, visual identity, messaging, consistency checklists, logo usage, typography, and approval workflows. A starter template scaffolds new brands. Use when producing branded content, tone-of-voice guidance, marketing assets, brand compliance reviews, or style guide maintenance.11.6kinstalls7SlidesThe slides skill creates strategic HTML presentations with Chart.js data visualization, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies. Agents parse the first subcommand word from arguments, load the matching references file, and execute with remaining parameters. The create subcommand builds presentation slides using knowledge-base references for layout patterns, HTML templates, copywriting formulas, and slide strategies. Documented use cases include marketing presentations and pitch decks, data-driven slides with Chart.js, strategic slide design with layout patterns, and copywriting-optimized presentation content. The reference index lists layout-patterns.md, html-template.md, copywriting-formulas.md, and slide-strategies.md as authoritative guides. Argument hint accepts topic and slide-count inputs. Version 1.0.0 metadata from claudekit. Strategic HTML presentation design pairs responsive structure with chart-driven metrics rather than binary deck exports. Routing workflow loads references/{subcommand}.md after parsing the subcommand token, keeping slide generation aligned with documented layout and copy patterns.11.5kinstalls