==================================================================================================== UI/UX PRO MAX SKILLS GUIDE (සිංහල සහ ඉංග්‍රීසි සම්පූර්ණ අත්පොත) ==================================================================================================== මූලාශ්‍රය (Source): https://github.com/nextlevelbuilder/ui-ux-pro-max-skill ස්ථාපිත ස්ථානය (Installed Location): - Workspace: c:\em\Main Project\skillls\.agents\skills\ - Global: C:\Users\Dell\.gemini\config\skills\ එකතුව (Total Skills): 7 Advanced UI/UX & Design Skills ---------------------------------------------------------------------------------------------------- භාවිතා කරන ආකාරය (HOW TO USE) ---------------------------------------------------------------------------------------------------- 1. ස්වයංක්‍රීයව (Automatic / On-Demand): ඔබ UI එකක්, වෙබ් අඩවියක්, බැනරයක් හෝ design system එකක් ඉල්ලූ විට agent ස්වයංක්‍රීයවම අදාළ skill එක තෝරාගෙන නිර්මාණය ආරම්භ කරයි. 2. සෘජු විධානයක් ලෙස (Slash Command): උදාහරණ: /ui-ux-pro-max, /ui-styling, /design, /banner-design, /slides, /design-system, /brand ==================================================================================================== UI/UX සහ DESIGN SKILLS ලැයිස්තුව (7 SKILLS) ==================================================================================================== [01] /ui-ux-pro-max ---------------------------------------------------------------------------------------------------- - ඉංග්‍රීසි (English): 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. - සිංහල තේරුම (Sinhala): UI/UX සැලසුම් බුද්ධිය (Design Intelligence). Web, Mobile සහ Desktop අතුරුමුහුණත් (Interfaces) වෘත්තීය මට්ටමෙන් සැලසුම් කිරීමට අවශ්‍ය දැවැන්ත දැනුම් පද්ධතියකි. මෝස්තර 79ක් (Minimal, Glassmorphism, Cyberpunk, Bento Grid ආදී), වර්ණ මාලාවන් 192ක් (Color Palettes), අකුරු සංකලනයන් 74ක් (Font Pairings), UX මාර්ගෝපදේශ 119ක් සහ GSAP animations මෙහි අන්තර්ගත වේ. - භාවිතා කරන අවස්ථාව (When to use): නව Web/Mobile app එකක interface සැලසුම් කිරීමට, UX audit එකක් කිරීමට හෝ UI එකක් review කර දියුණු කිරීමට. [02] /ui-styling ---------------------------------------------------------------------------------------------------- - ඉංග්‍රීසි (English): 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. - සිංහල තේරුම (Sinhala): අතුරුමුහුණත් හැඩගැන්වීම (UI Styling). Tailwind CSS සහ shadcn/ui (Radix UI) සංරචක උපයෝගී කරගනිමින් අලංකාර, ප්‍රවේශ්‍ය (accessible), Responsive සහ Dark Mode සහිත UI නිර්මාණය කිරීම. - භාවිතා කරන අවස්ථාව (When to use): Web pages, components, dialogs, forms, data tables හෝ dashboard themes හදන විට. [03] /design ---------------------------------------------------------------------------------------------------- - ඉංග්‍රීසි (English): 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. - සිංහල තේරුම (Sinhala): සර්ව සම්පූර්ණ නිර්මාණ කුසලතාවය (Comprehensive Design). Brand Identity, Logos (මෝස්තර 55කින්), Corporate Identity (CIP mockups 50ක්), Charts/Presentations, Banners, SVG Icons සහ Social Media ඡායාරූප නිර්මාණය කිරීම. - භාවිතා කරන අවස්ථාව (When to use): Logo එකක් design කිරීමට, සමාගමක Corporate Identity එකක් හෝ සම්පූර්ණ branding kit එකක් සැකසීමට. [04] /design-system ---------------------------------------------------------------------------------------------------- - ඉංග්‍රීසි (English): Token architecture, component specifications, and slide generation. Three-layer tokens (primitive -> semantic -> component), CSS variables, spacing/typography scales, component specs. - සිංහල තේරුම (Sinhala): නිර්මාණ පද්ධතිය (Design System & Tokens). ස්ථර 3ක design tokens (Primitive -> Semantic -> Component), CSS විචල්‍යයන් (CSS Variables), අකුරු සහ පරතර පරිමාණ (Typography & Spacing Scales) පද්ධතිගතව ගොඩනැගීම. - භාවිතා කරන අවස්ථාව (When to use): සමාගමකට හෝ software project එකකට reusable Design System එකක් සහ tokens ගොඩනැගීමට. [05] /brand ---------------------------------------------------------------------------------------------------- - ඉංග්‍රීසි (English): Brand voice, visual identity, messaging frameworks, asset management, and brand consistency. Use for branded content, tone of voice, marketing assets, and style guides. - සිංහල තේරුම (Sinhala): සන්නාම අනන්‍යතාවය (Brand Identity & Voice). සන්නාමයක කතා විලාශය (Tone of Voice), පණිවිඩ රාමුව (Messaging Framework), මාර්කටින් අන්තර්ගතයන් සහ සන්නාම අනුකූලතාවය (Brand Guidelines) පවත්වා ගැනීම. - භාවිතා කරන අවස්ථාව (When to use): Marketing campaigns, brand voice guidelines, සහ brand compliance පරීක්ෂා කිරීමට. [06] /banner-design ---------------------------------------------------------------------------------------------------- - ඉංග්‍රීසි (English): 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. - සිංහල තේරුම (Sinhala): බැනර් නිර්මාණය (Banner Design). Social Media (Facebook, YouTube, LinkedIn, Instagram), Website Hero Sections, Google Ads සහ Print සඳහා මෝස්තර 22කින් (3D, Neon, Glassmorphism, Retro ආදී) බැනර් සැලසුම් කිරීම. - භාවිතා කරන අවස්ථාව (When to use): Ads, Website Hero Banners, YouTube Thumbnails, හෝ Social Media Posts හදන විට. [07] /slides ---------------------------------------------------------------------------------------------------- - ඉංග්‍රීසි (English): Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies. - සිංහල තේරුම (Sinhala): ඉදිරිපත් කිරීම් (HTML Slide Presentations). Chart.js ප්‍රස්තාර, design tokens, responsive layouts සහ බලගතු copywriting formulas සහිතව ආකර්ෂණීය HTML Slide decks නිර්මාණය කිරීම. - භාවිතා කරන අවස්ථාව (When to use): Pitch decks, project presentations, හෝ client reports සැකසීමට. ==================================================================================================== සැකසූ දිනය: 2026-10-16 | සකස් කළේ: Antigravity Assistant (Gemini) ====================================================================================================