nextlevelbuilder/ui-ux-pro-max-skill
7 skills362k installs621k starsGitHub
Install
npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skillSkills in this repo
1Ui Ux Pro MaxUI/UX Pro Max is an agent skill that packages professional design intelligence for solo and indie builders who are implementing interfaces with AI coding tools. Instead of vague “make it modern” prompts, it exposes a searchable knowledge base of styles, color systems, typography pairings, product-type reasoning, UX heuristics, and chart guidance aligned to common stacks. Use it when a task touches layout, visual language, interaction patterns, accessibility, or quality review for websites, landing pages, dashboards, SaaS consoles, e-commerce flows, portfolios, blogs, or mobile apps. It fits the Build phase most often, but the same corpus helps during Validate when you are shaping a credible landing or prototype, and during Ship when you want a structured pass on UX before release. The skill emphasizes concrete elements—navbars, forms, tables, modals, cards—and named aesthetics from minimal and brutalist through glassmorphism and dark mode, so agents can justify decisions rather than guess.206kinstalls2Ckm:Design Systemckm:design-system is an agent skill from the UI/UX Pro Max family for solo builders who need a repeatable token architecture—not ad-hoc hex codes scattered in components. It teaches a three-layer cascade from raw primitives through semantic roles to component bindings, with optional Node scripts to emit CSS variables and audit directories for drift. Use it when you are creating spacing and typography scales, documenting component states, configuring Tailwind themes, or generating slides that must obey the same brand rules as your app chrome. The workflow loads structured references (token-architecture, primitive-tokens, semantic-tokens) so the agent outputs names and relationships developers can actually implement. It pairs naturally with implementation phases after Validate branding choices and before Ship review, keeping presentation decks and product UI on one system instead of two conflicting palettes.26.4kinstalls3Ckm:Designckm:design is a comprehensive design orchestration skill for solo builders who need brand and UI work without splitting every task into a new conversation. It centralizes when to reach for brand voice and assets, design tokens, shadcn/Tailwind UI styling, AI logo generation, a full corporate identity program, pitch-style HTML slides, multi-format banners, SVG icons, and platform-sized social photos. Sub-skill routing sends each request to the right depth—brand and design-system as external paths, ui-styling for implementation-ready UI—so you stay in one workflow from identity to shippable creatives. It fits validate when you are proving positioning with real visuals, build when you are aligning the product and design system, and launch when you need Facebook, LinkedIn, YouTube, Google Ads, and other channel assets. Argument hints expect a design type plus context so the agent picks the correct branch quickly.26.2kinstalls4Ckm:Ui Stylingckm:ui-styling is a frontend implementation skill for solo builders shipping React-family apps who want beautiful, accessible UI without reinventing component patterns. It combines shadcn/ui (Radix-backed), Tailwind CSS, and optional canvas-oriented visual design workflows so you can stand up dialogs, forms, tables, navigation, responsive layouts, dark mode, and theme tokens in one consistent approach. The skill explicitly targets Next.js, Vite, Remix, and Astro stacks and points to canonical shadcn and Tailwind documentation for LLM-friendly grounding. Use it when you are past positioning and need production-grade styling, design-system consistency, or fast visual prototypes that map cleanly to code. It pairs naturally with ckm:design when brand and tokens are decided and you are ready to wire components in the repository.26.1kinstalls5Ckm:Brandckm:brand is a ClaudeKit-style brand operations skill for solo builders who need one source of truth for voice, visuals, and assets without hiring a brand agency. It centers docs/brand-guidelines.md, syncs tokens into JSON and CSS, and ships Node scripts to inject context into prompts, validate assets, and compare palettes against guidelines. Use it when drafting landing copy tone, auditing off-brand screenshots, or preparing design tokens before UI implementation in Cursor or Claude Code. The skill spans Validate landing work, Launch distribution creatives, and Grow content cycles because brand rules follow the product across channels. It is procedural knowledge and local scripts—not a hosted DAM—so you still own file paths, approvals, and where tokens land in your repo.25.8kinstalls6Ckm:Banner Designckm:banner-design is a workflow-oriented agent skill for solo builders and indies who need channel-ready banners without a full design agency pass. It activates when someone asks for a cover, header, hero visual, display ad, or campaign creative asset and walks through structured requirement gathering—purpose, platform or custom size, copy hierarchy, and brand marks—before proposing several distinct visual directions. Coverage spans major social and ad placements plus website heroes and print-oriented event banners, with a wide style vocabulary so outputs can match minimalist SaaS landing pages or loud performance-marketing creative alike. The skill deliberately stops at banner composition and AI visual generation; it does not replace video editors, entire site builds, or print vendor workflows. It is best paired with your own brand guidelines and downstream export or upload steps on each platform.25.7kinstalls7Ckm:Slidesckm:slides is a ClaudeKit agent skill for building strategic HTML presentations instead of static PPT exports. Solo builders use it when they need pitch decks, product marketing slides, or data-backed narratives with Chart.js visualization, shared design tokens, and responsive layout patterns from a references knowledge base. The create subcommand routes through dedicated guides for layout, HTML scaffolding, copy formulas, and slide-level strategy. It fits indie SaaS founders who want agent-generated decks that stay on-brand and copy-optimized—PAS and AIDA among 25 formulas—without hiring a slide designer for every fundraise or launch. Pair it with your product story and metrics; the skill focuses on structure, persuasion, and visual patterns rather than live delivery or video production.25.7kinstalls