kunthawat/opencode-skill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

refactor: move nested skills to root + add ui-ux-pro-max + ConsentOS

Browse Source 
- Extract 9 nested skills from website-creator/ to root skills/
- Remove duplicate seo-analyzers, seo-geo, seo-multi-channel from website-creator
- Add new ui-ux-pro-max skill with full UI/UX data
- Update install-skills.sh to sync properly
- Remove .DS_Store artifacts

Moved skills:
- api-and-interface-design
- banner-design
- brand
- design-system
- design
- frontend-ui-engineering
- slides
- spec-driven-development
- ui-styling
This commit is contained in:
Kunthawat Greethong
2026-04-22 09:55:41 +07:00
parent a29b7af4b8
commit 8a0edd225d
242 changed files with 9934 additions and 2942 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
skills/design-system/data/slide-layouts.csv Normal file
View File

@@ -0,0 +1,26 @@
id,layout_name,keywords,use_case,content_zones,visual_weight,cta_placement,recommended_for,avoid_for,css_structure,card_variant,metric_style,quote_style,grid_columns,visual_treatment,animation_class
1,Title Slide,"title, cover, opening, intro, hero",Opening slide first impression,"Center: Logo + Title + Tagline, Bottom: Date/Presenter",Visual-heavy minimal text,None or subtle,All presentations,Never skip,"display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center",none,none,none,1,gradient-glow,animate-fade-up
2,Problem Statement,"problem, pain, challenge, issue",Establish the problem being solved,"Left: Problem headline, Right: Pain point bullets or icon grid",50/50 text visual balance,None,Pitch decks sales,Internal updates,"display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center",icon-left,none,none,2,subtle-border,animate-stagger
3,Solution Overview,"solution, answer, approach, how",Introduce your solution,"Top: Solution headline, Center: Solution visual/diagram, Bottom: 3 key points",Visual-dominant,Subtle learn more,After problem slide,Without context,"display:flex; flex-direction:column; gap:32px",accent-bar,none,none,3,icon-top,animate-scale
4,Feature Grid,"features, grid, cards, capabilities, 3-column",Showcase multiple features,"Top: Section title, Grid: 3-6 feature cards with icon+title+description",Balanced grid,Bottom CTA optional,Product demos SaaS,Storytelling slides,"display:grid; grid-template-columns:repeat(3,1fr); gap:24px",accent-bar,none,none,3,icon-top,animate-stagger
5,Metrics Dashboard,"metrics, kpis, numbers, stats, data",Display key performance data,"Top: Context headline, Center: 3-4 large metric cards, Bottom: Trend context",Numbers-dominant,None,Traction slides QBRs,Early-stage no data,"display:grid; grid-template-columns:repeat(4,1fr); gap:16px",metric-card,gradient-number,none,4,none,animate-stagger-scale
6,Comparison Table,"comparison, vs, versus, table, matrix",Compare options or competitors,"Top: Comparison title, Center: Feature comparison table, Bottom: Conclusion",Table-heavy,Highlight winner row,Competitive analysis,Storytelling,"display:flex; flex-direction:column; table width:100%",comparison,none,none,2,highlight-winner,animate-fade-up
7,Timeline Flow,"timeline, roadmap, journey, steps, process",Show progression over time,"Top: Timeline title, Center: Horizontal timeline with milestones, Bottom: Current status",Visual timeline,End milestone CTA,Roadmaps history,Dense data,"display:flex; flex-direction:column; timeline:flex with arrows",none,none,none,1,timeline-dots,animate-stagger
8,Team Grid,"team, people, founders, leadership",Introduce team members,"Top: Team title, Grid: Photo + Name + Title + Brief bio cards",Photo-heavy,None or careers link,Investor decks about,Technical content,"display:grid; grid-template-columns:repeat(4,1fr); gap:24px",avatar-card,none,none,4,avatar-ring,animate-stagger
9,Quote Testimonial,"quote, testimonial, social proof, customer",Feature customer endorsement,"Center: Large quote text, Bottom: Photo + Name + Title + Company logo",Quote-dominant minimal UI,None,Sales case studies,Without real quotes,"display:flex; flex-direction:column; justify-content:center; font-size:large; font-style:italic",none,none,large-italic,1,author-avatar,animate-fade-up
10,Two Column Split,"split, two-column, side-by-side, comparison",Present two related concepts,"Left column: Content A, Right column: Content B",50/50 balanced,Either column bottom,Comparisons before/after,Single concept,display:grid; grid-template-columns:1fr 1fr; gap:48px,none,none,none,2,offset-image,animate-fade-up
11,Big Number Hero,"big number, stat, impact, headline metric",Emphasize one powerful metric,"Center: Massive number, Below: Context label and trend",Number-dominant,None,Impact slides traction,Multiple metrics,"display:flex; flex-direction:column; justify-content:center; align-items:center; font-size:120px",none,oversized,none,1,centered,animate-count
12,Product Screenshot,"screenshot, product, demo, ui, interface",Show product in action,"Top: Feature headline, Center: Product screenshot with annotations, Bottom: Key callouts",Screenshot-dominant,Try it CTA,Product demos,Abstract concepts,"display:flex; flex-direction:column; img max-height:60vh",none,none,none,1,screenshot-shadow,animate-scale
13,Pricing Cards,"pricing, plans, tiers, packages",Present pricing options,"Top: Pricing headline, Center: 2-4 pricing cards side by side, Bottom: FAQ or guarantee",Cards balanced,Each card has CTA,Sales pricing pages,Free products,"display:grid; grid-template-columns:repeat(3,1fr); gap:24px; .popular:scale(1.05)",pricing-card,none,none,3,popular-highlight,animate-stagger
14,CTA Closing,"cta, closing, call to action, next steps, final",Drive action end presentation,"Center: Bold headline + Value reminder, Center: Primary CTA button, Below: Secondary option",CTA-dominant,Primary center,All presentations,Middle slides,"display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center",none,none,none,1,gradient-bg,animate-pulse
15,Agenda Overview,"agenda, outline, contents, structure",Preview presentation structure,"Top: Agenda title, Center: Numbered list or visual timeline of sections",Text-light scannable,None,Long presentations,Short 3-5 slides,"display:flex; flex-direction:column; ol list-style-type:decimal",none,none,none,1,numbered-list,animate-stagger
16,Before After,"before, after, transformation, results, comparison",Show transformation impact,"Left: Before state (muted), Right: After state (vibrant), Center: Arrow or transition",50/50 high contrast,After column CTA,Case studies results,No transformation data,"display:grid; grid-template-columns:1fr 1fr; .before:opacity(0.7)",comparison,none,none,2,contrast-pair,animate-scale
17,Icon Grid Stats,"icons, stats, grid, key points, summary",Summarize key points visually,"Grid: 4-6 icon + stat + label combinations",Icons-dominant,None,Summary slides,Detailed explanations,"display:grid; grid-template-columns:repeat(3,1fr); gap:32px; text-align:center",icon-stat,sparkline,none,3,icon-top,animate-stagger
18,Full Bleed Image,"image, photo, visual, background, hero",Create visual impact,"Full background image, Overlay: Text with contrast, Corner: Logo",Image-dominant,Overlay CTA optional,Emotional moments,Data-heavy,background-size:cover; color:white; text-shadow for contrast,none,none,none,1,bg-overlay,animate-ken-burns
19,Video Embed,"video, demo, embed, multimedia",Show video content,"Top: Context headline, Center: Video player (16:9), Bottom: Key points if needed",Video-dominant,After video CTA,Demos testimonials,Reading-focused,"aspect-ratio:16/9; video controls",none,none,none,1,video-frame,animate-scale
20,Funnel Diagram,"funnel, conversion, stages, pipeline",Show conversion or process flow,"Top: Funnel title, Center: Funnel visualization with stage labels and metrics",Diagram-dominant,None,Sales marketing funnels,Non-sequential data,SVG or CSS trapezoid shapes,none,funnel-numbers,none,1,funnel-gradient,animate-chart
21,Quote Plus Stats,"quote, stats, hybrid, testimonial, metrics",Combine social proof with data,"Left: Customer quote with photo, Right: 3 supporting metrics",Balanced quote/data,None,Sales enablement,Without both elements,"display:grid; grid-template-columns:1.5fr 1fr; gap:48px",metric-card,gradient-number,side-quote,2,author-avatar,animate-stagger
22,Section Divider,"section, divider, break, transition",Transition between sections,"Center: Section number + Section title, Minimal design",Typography-only,None,Long presentations,Every slide,"display:flex; justify-content:center; align-items:center; font-size:48px",none,none,none,1,section-number,animate-fade-up
23,Logo Grid,"logos, clients, partners, trust, social proof",Display client or partner logos,"Top: Trust headline, Grid: 8-16 logos evenly spaced",Logos-only,None,Credibility slides,Few logos <6,"display:grid; grid-template-columns:repeat(4,1fr); gap:32px; filter:grayscale(1)",none,none,none,4,logo-grayscale,animate-stagger
24,Chart Focus,"chart, graph, data, visualization, analytics",Present data visualization,"Top: Chart title and context, Center: Single large chart, Bottom: Key insight",Chart-dominant,None,Data-driven slides,Poor data quality,"chart max-height:65vh; annotation for key point",none,sparkline,none,1,chart-left,animate-chart
25,Q&A Slide,"qa, questions, discussion, interactive",Invite audience questions,"Center: Q&A or Questions? text, Below: Contact info or submission method",Minimal text,None,End of presentations,Skip if no time,"display:flex; justify-content:center; align-items:center; font-size:64px",none,none,none,1,centered,animate-fade-up
1 id layout_name keywords use_case content_zones visual_weight cta_placement recommended_for avoid_for css_structure card_variant metric_style quote_style grid_columns visual_treatment animation_class
2 1 Title Slide title, cover, opening, intro, hero Opening slide first impression Center: Logo + Title + Tagline, Bottom: Date/Presenter Visual-heavy minimal text None or subtle All presentations Never skip display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center none none none 1 gradient-glow animate-fade-up
3 2 Problem Statement problem, pain, challenge, issue Establish the problem being solved Left: Problem headline, Right: Pain point bullets or icon grid 50/50 text visual balance None Pitch decks sales Internal updates display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center icon-left none none 2 subtle-border animate-stagger
4 3 Solution Overview solution, answer, approach, how Introduce your solution Top: Solution headline, Center: Solution visual/diagram, Bottom: 3 key points Visual-dominant Subtle learn more After problem slide Without context display:flex; flex-direction:column; gap:32px accent-bar none none 3 icon-top animate-scale
5 4 Feature Grid features, grid, cards, capabilities, 3-column Showcase multiple features Top: Section title, Grid: 3-6 feature cards with icon+title+description Balanced grid Bottom CTA optional Product demos SaaS Storytelling slides display:grid; grid-template-columns:repeat(3,1fr); gap:24px accent-bar none none 3 icon-top animate-stagger
6 5 Metrics Dashboard metrics, kpis, numbers, stats, data Display key performance data Top: Context headline, Center: 3-4 large metric cards, Bottom: Trend context Numbers-dominant None Traction slides QBRs Early-stage no data display:grid; grid-template-columns:repeat(4,1fr); gap:16px metric-card gradient-number none 4 none animate-stagger-scale
7 6 Comparison Table comparison, vs, versus, table, matrix Compare options or competitors Top: Comparison title, Center: Feature comparison table, Bottom: Conclusion Table-heavy Highlight winner row Competitive analysis Storytelling display:flex; flex-direction:column; table width:100% comparison none none 2 highlight-winner animate-fade-up
8 7 Timeline Flow timeline, roadmap, journey, steps, process Show progression over time Top: Timeline title, Center: Horizontal timeline with milestones, Bottom: Current status Visual timeline End milestone CTA Roadmaps history Dense data display:flex; flex-direction:column; timeline:flex with arrows none none none 1 timeline-dots animate-stagger
9 8 Team Grid team, people, founders, leadership Introduce team members Top: Team title, Grid: Photo + Name + Title + Brief bio cards Photo-heavy None or careers link Investor decks about Technical content display:grid; grid-template-columns:repeat(4,1fr); gap:24px avatar-card none none 4 avatar-ring animate-stagger
10 9 Quote Testimonial quote, testimonial, social proof, customer Feature customer endorsement Center: Large quote text, Bottom: Photo + Name + Title + Company logo Quote-dominant minimal UI None Sales case studies Without real quotes display:flex; flex-direction:column; justify-content:center; font-size:large; font-style:italic none none large-italic 1 author-avatar animate-fade-up
11 10 Two Column Split split, two-column, side-by-side, comparison Present two related concepts Left column: Content A, Right column: Content B 50/50 balanced Either column bottom Comparisons before/after Single concept display:grid; grid-template-columns:1fr 1fr; gap:48px none none none 2 offset-image animate-fade-up
12 11 Big Number Hero big number, stat, impact, headline metric Emphasize one powerful metric Center: Massive number, Below: Context label and trend Number-dominant None Impact slides traction Multiple metrics display:flex; flex-direction:column; justify-content:center; align-items:center; font-size:120px none oversized none 1 centered animate-count
13 12 Product Screenshot screenshot, product, demo, ui, interface Show product in action Top: Feature headline, Center: Product screenshot with annotations, Bottom: Key callouts Screenshot-dominant Try it CTA Product demos Abstract concepts display:flex; flex-direction:column; img max-height:60vh none none none 1 screenshot-shadow animate-scale
14 13 Pricing Cards pricing, plans, tiers, packages Present pricing options Top: Pricing headline, Center: 2-4 pricing cards side by side, Bottom: FAQ or guarantee Cards balanced Each card has CTA Sales pricing pages Free products display:grid; grid-template-columns:repeat(3,1fr); gap:24px; .popular:scale(1.05) pricing-card none none 3 popular-highlight animate-stagger
15 14 CTA Closing cta, closing, call to action, next steps, final Drive action end presentation Center: Bold headline + Value reminder, Center: Primary CTA button, Below: Secondary option CTA-dominant Primary center All presentations Middle slides display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center none none none 1 gradient-bg animate-pulse
16 15 Agenda Overview agenda, outline, contents, structure Preview presentation structure Top: Agenda title, Center: Numbered list or visual timeline of sections Text-light scannable None Long presentations Short 3-5 slides display:flex; flex-direction:column; ol list-style-type:decimal none none none 1 numbered-list animate-stagger
17 16 Before After before, after, transformation, results, comparison Show transformation impact Left: Before state (muted), Right: After state (vibrant), Center: Arrow or transition 50/50 high contrast After column CTA Case studies results No transformation data display:grid; grid-template-columns:1fr 1fr; .before:opacity(0.7) comparison none none 2 contrast-pair animate-scale
18 17 Icon Grid Stats icons, stats, grid, key points, summary Summarize key points visually Grid: 4-6 icon + stat + label combinations Icons-dominant None Summary slides Detailed explanations display:grid; grid-template-columns:repeat(3,1fr); gap:32px; text-align:center icon-stat sparkline none 3 icon-top animate-stagger
19 18 Full Bleed Image image, photo, visual, background, hero Create visual impact Full background image, Overlay: Text with contrast, Corner: Logo Image-dominant Overlay CTA optional Emotional moments Data-heavy background-size:cover; color:white; text-shadow for contrast none none none 1 bg-overlay animate-ken-burns
20 19 Video Embed video, demo, embed, multimedia Show video content Top: Context headline, Center: Video player (16:9), Bottom: Key points if needed Video-dominant After video CTA Demos testimonials Reading-focused aspect-ratio:16/9; video controls none none none 1 video-frame animate-scale
21 20 Funnel Diagram funnel, conversion, stages, pipeline Show conversion or process flow Top: Funnel title, Center: Funnel visualization with stage labels and metrics Diagram-dominant None Sales marketing funnels Non-sequential data SVG or CSS trapezoid shapes none funnel-numbers none 1 funnel-gradient animate-chart
22 21 Quote Plus Stats quote, stats, hybrid, testimonial, metrics Combine social proof with data Left: Customer quote with photo, Right: 3 supporting metrics Balanced quote/data None Sales enablement Without both elements display:grid; grid-template-columns:1.5fr 1fr; gap:48px metric-card gradient-number side-quote 2 author-avatar animate-stagger
23 22 Section Divider section, divider, break, transition Transition between sections Center: Section number + Section title, Minimal design Typography-only None Long presentations Every slide display:flex; justify-content:center; align-items:center; font-size:48px none none none 1 section-number animate-fade-up
24 23 Logo Grid logos, clients, partners, trust, social proof Display client or partner logos Top: Trust headline, Grid: 8-16 logos evenly spaced Logos-only None Credibility slides Few logos <6 display:grid; grid-template-columns:repeat(4,1fr); gap:32px; filter:grayscale(1) none none none 4 logo-grayscale animate-stagger
25 24 Chart Focus chart, graph, data, visualization, analytics Present data visualization Top: Chart title and context, Center: Single large chart, Bottom: Key insight Chart-dominant None Data-driven slides Poor data quality chart max-height:65vh; annotation for key point none sparkline none 1 chart-left animate-chart
26 25 Q&A Slide qa, questions, discussion, interactive Invite audience questions Center: Q&A or Questions? text, Below: Contact info or submission method Minimal text None End of presentations Skip if no time display:flex; justify-content:center; align-items:center; font-size:64px none none none 1 centered animate-fade-up