UI/UX & DESIGN INTELLIGENCE

UI/UX Pro Max Skills Guide

සිංහල සහ ඉංග්‍රීසි භාෂා ද්විත්වයෙන්ම සැකසූ නිර්මාණ අත්පොත (Design & Styling Guide)

මූලාශ්‍රය: github.com/nextlevelbuilder/ui-ux-pro-max-skill
මුළු Skills ගණන: 7 Advanced Skills
භාවිතය: Auto / On-Demand හෝ Slash Commands මඟින්
/ui-ux-pro-max Intelligence
English Description
UI/UX design intelligence for web, mobile, and desktop. Includes 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 technology stacks.
සිංහල තේරුම සහ භාවිතය
UI/UX සැලසුම් බුද්ධිය (Design Intelligence). Web, Mobile සහ Desktop අතුරුමුහුණත් (Interfaces) වෘත්තීය මට්ටමෙන් සැලසුම් කිරීමට අවශ්‍ය දැවැන්ත දැනුම් පද්ධතියකි. මෝස්තර 79ක් (Minimal, Glassmorphism, Cyberpunk, Bento Grid ආදී), වර්ණ මාලාවන් 192ක් (Color Palettes), අකුරු සංකලනයන් 74ක් (Font Pairings), UX මාර්ගෝපදේශ 119ක් සහ GSAP animations මෙහි අන්තර්ගත වේ.
💡 භාවිතා කරන අවස්ථාව: නව Web/Mobile app එකක interface සැලසුම් කිරීමට, UX audit එකක් කිරීමට හෝ UI එකක් review කර දියුණු කිරීමට.
/ui-styling Components & CSS
English Description
Create beautiful, accessible user interfaces with shadcn/ui components (Radix UI + Tailwind), utility-first styling, and canvas-based visual designs. Accessible components (dialogs, dropdowns, tables), dark mode, and themes.
සිංහල තේරුම සහ භාවිතය
අතුරුමුහුණත් හැඩගැන්වීම (UI Styling). Tailwind CSS සහ shadcn/ui (Radix UI) සංරචක උපයෝගී කරගනිමින් අලංකාර, ප්‍රවේශ්‍ය (accessible), Responsive සහ Dark Mode සහිත UI නිර්මාණය කිරීම.
💡 භාවිතා කරන අවස්ථාව: Web pages, components, dialogs, forms, data tables හෝ dashboard themes හදන විට.
/design Full Branding
English Description
Comprehensive design skill: brand identity, design tokens, logo generation (55 styles via Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles), icon design (15 SVG styles), social photos.
සිංහල තේරුම සහ භාවිතය
සර්ව සම්පූර්ණ නිර්මාණ කුසලතාවය (Comprehensive Design). Brand Identity, Logos (මෝස්තර 55කින්), Corporate Identity (CIP mockups 50ක්), Charts/Presentations, Banners, SVG Icons සහ Social Media ඡායාරූප නිර්මාණය කිරීම.
💡 භාවිතා කරන අවස්ථාව: Logo එකක් design කිරීමට, සමාගමක Corporate Identity එකක් හෝ සම්පූර්ණ branding kit එකක් සැකසීමට.
/design-system Token Architecture
English Description
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive -> semantic -> component), CSS variables, spacing/typography scales, component specs.
සිංහල තේරුම සහ භාවිතය
නිර්මාණ පද්ධතිය (Design System & Tokens). ස්ථර 3ක design tokens (Primitive -> Semantic -> Component), CSS විචල්‍යයන් (CSS Variables), අකුරු සහ පරතර පරිමාණ (Typography & Spacing Scales) පද්ධතිගතව ගොඩනැගීම.
💡 භාවිතා කරන අවස්ථාව: සමාගමකට හෝ software project එකකට reusable Design System එකක් සහ tokens ගොඩනැගීමට.
/brand Identity & Voice
English Description
Brand voice, visual identity, messaging frameworks, asset management, and brand consistency. Use for branded content, tone of voice, marketing assets, and style guides.
සිංහල තේරුම සහ භාවිතය
සන්නාම අනන්‍යතාවය (Brand Identity & Voice). සන්නාමයක කතා විලාශය (Tone of Voice), පණිවිඩ රාමුව (Messaging Framework), මාර්කටින් අන්තර්ගතයන් සහ සන්නාම අනුකූලතාවය (Brand Guidelines) පවත්වා ගැනීම.
💡 භාවිතා කරන අවස්ථාව: Marketing campaigns, brand voice guidelines, සහ brand compliance පරීක්ෂා කිරීමට.
/banner-design Social & Ads
English Description
Design banners for social media, ads, website heroes, creative assets, and print. 22+ styles (minimalist, gradient, bold typography, photo-based, 3D, neon, glassmorphism, retro, editorial). Platforms: Facebook, X/Twitter, LinkedIn, YouTube, Instagram, Google Ads.
සිංහල තේරුම සහ භාවිතය
බැනර් නිර්මාණය (Banner Design). Social Media (Facebook, YouTube, LinkedIn, Instagram), Website Hero Sections, Google Ads සහ Print සඳහා මෝස්තර 22කින් (3D, Neon, Glassmorphism, Retro ආදී) බැනර් සැලසුම් කිරීම.
💡 භාවිතා කරන අවස්ථාව: Ads, Website Hero Banners, YouTube Thumbnails, හෝ Social Media Posts හදන විට.
/slides Presentations
English Description
Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
සිංහල තේරුම සහ භාවිතය
ඉදිරිපත් කිරීම් (HTML Slide Presentations). Chart.js ප්‍රස්තාර, design tokens, responsive layouts සහ බලගතු copywriting formulas සහිතව ආකර්ෂණීය HTML Slide decks නිර්මාණය කිරීම.
💡 භාවිතා කරන අවස්ථාව: Pitch decks, project presentations, හෝ client reports සැකසීමට.