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-charts.csv Normal file
View File

@@ -0,0 +1,26 @@
id,chart_type,keywords,best_for,data_type,when_to_use,when_to_avoid,max_categories,slide_context,css_implementation,accessibility_notes,sources
1,Bar Chart Vertical,"bar, vertical, comparison, categories, ranking",Comparing values across categories,Categorical discrete,"Comparing 3-12 categories, showing ranking, highlighting differences",Continuous time data trends,12,Traction metrics feature comparison,"Chart.js or CSS flexbox with height percentage bars",Always label axes include values,Atlassian Data Charts
2,Bar Chart Horizontal,"horizontal bar, ranking, long labels, categories",Categories with long names ranking,Categorical discrete,"Long category names, 5+ items, reading left-to-right natural",Few categories time series,15,Team performance competitor analysis,"CSS flexbox with width percentage bars",Natural reading direction for labels,Datylon Blog
3,Line Chart,"line, trend, time series, growth, change over time",Showing trends over continuous time,Time series continuous,"Time-based data, showing growth trajectory, 10+ data points",Categorical comparisons,50+ points,Revenue growth MRR user growth,"Chart.js line or SVG path element",Include data point markers for screen readers,Tableau Best Practices
4,Area Chart,"area, cumulative, volume, trend, filled line",Showing volume or magnitude over time,Time series cumulative,"Emphasizing magnitude, showing cumulative totals, comparing totals",Precise value comparison,3-4 series,Revenue breakdown market share over time,"Chart.js area or SVG path with fill",Use patterns not just colors for series,Data Visualization Guide
5,Pie Chart,"pie, composition, percentage, parts, whole",Showing parts of a whole,Proportional percentage,"2-5 slices, showing simple composition, adds to 100%",More than 6 categories precise comparison,6 max,Market share budget allocation simple splits,"CSS conic-gradient or Chart.js pie",Never use 3D always include percentages,FusionCharts Blog
6,Donut Chart,"donut, composition, percentage, center metric",Parts of whole with center highlight,Proportional percentage,"Like pie but need center space for key metric, 2-5 segments",Many categories,6 max,Composition with key stat in center,"CSS conic-gradient with inner circle",Same as pie include legend,Modern alternative to pie
7,Stacked Bar,"stacked, composition, comparison, breakdown",Comparing composition across categories,Categorical + proportional,"Showing composition AND comparison, segment contribution",Too many segments precise values,5 segments,Revenue by segment across quarters,"Chart.js stacked bar or CSS nested divs",Order segments consistently use legend,Atlassian Data Charts
8,Grouped Bar,"grouped, clustered, side by side, multi-series",Comparing multiple metrics per category,Multi-series categorical,"Direct comparison of 2-3 metrics per category",Too many groups (>4) or categories (>8),4 groups,Feature comparison pricing tiers,"Chart.js grouped bar CSS grid bars",Color code consistently across groups,Data Visualization Best Practices
9,100% Stacked Bar,"100%, proportion, normalized, percentage",Comparing proportions across categories,Proportional comparative,"Comparing percentage breakdown across categories, not absolute values",Showing absolute values,5 segments,Market share comparison percentage breakdown,"CSS flexbox 100% width segments",Clearly indicate percentage scale,Proportional analysis
10,Funnel Chart,"funnel, conversion, stages, drop-off, pipeline",Showing conversion or drop-off through stages,Sequential stage-based,"Sales funnel, conversion rates, sequential process with decreasing values",Non-sequential data equal stages,6-8 stages,User conversion sales pipeline,"CSS trapezoid shapes or SVG",Label each stage with count and percentage,Marketing/Sales standard
11,Gauge Chart,"gauge, progress, goal, target, kpi",Showing progress toward a goal,Single metric vs target,"Single KPI progress, goal completion, health scores",Multiple metrics,1 metric,Goal progress health score,"CSS conic-gradient or arc SVG",Include numeric value not just visual,Dashboard widgets
12,Sparkline,"sparkline, mini, inline, trend, compact",Showing trend in minimal space,Time series inline,"Inline metrics, table cells, compact trend indication",Detailed analysis,N/A,Metric cards with trend indicator,SVG path or canvas inline,Supplement with text for accessibility,Edward Tufte
13,Scatter Plot,"scatter, correlation, relationship, distribution",Showing relationship between two variables,Bivariate continuous,"Correlation analysis, pattern detection, outlier identification",Categorical data simple comparisons,100+ points,Correlation analysis segmentation,Canvas or SVG circles positioned,Include trend line if meaningful,Statistical visualization
14,Bubble Chart,"bubble, three variables, scatter, size",Showing three variables simultaneously,Trivariate continuous,"Three-variable comparison, population/size matters",Simple comparisons,30-50 bubbles,Market analysis with size dimension,"SVG circles with varying radius",Legend for size scale essential,Data Visualization Guide
15,Heatmap,"heatmap, matrix, intensity, correlation, grid",Showing intensity across two dimensions,Matrix intensity,"Large data matrices, time-day patterns, correlation matrices",Few data points,Unlimited grid,Usage patterns correlation matrices,CSS grid with background-color intensity,Use colorblind-safe gradients,Datylon Blog
16,Waterfall Chart,"waterfall, bridge, contribution, breakdown",Showing how values add to a total,Cumulative contribution,"Financial analysis, showing positive/negative contributions",Non-additive data,10-15 items,Revenue bridge profit breakdown,"CSS positioned bars with connectors",Clear positive/negative color coding,Financial reporting standard
17,Treemap,"treemap, hierarchy, nested, proportion",Showing hierarchical proportional data,Hierarchical proportional,"Nested categories, space-efficient proportions, 2 levels max",Simple comparisons few items,50+ items,Budget breakdown category analysis,"CSS grid with calculated areas",Include text labels on larger segments,Ben Shneiderman
18,Radar Chart,"radar, spider, multi-metric, profile",Comparing multiple metrics for single item,Multi-metric profile,"Comparing 5-8 metrics for one or two items, skill profiles",More than 3 items to compare,8 axes max,Feature profile skill assessment,SVG polygon on axes,Ensure scale is clear and consistent,Profile comparison
19,Bullet Chart,"bullet, target, actual, performance",Showing actual vs target with ranges,KPI with target,"Progress against target with qualitative ranges",Simple goal tracking,1-3 per slide,KPI performance with targets,"CSS layered bars with markers",Clearly label target and actual,Stephen Few
20,Timeline,"timeline, chronology, history, milestones",Showing events over time,Event-based temporal,"History roadmap milestones, showing progression",Quantitative comparison,10-15 events,Company history product roadmap,"CSS flexbox with positioned markers",Ensure logical reading order,Chronological visualization
21,Sankey Diagram,"sankey, flow, distribution, connections",Showing flow or distribution between nodes,Flow distribution,"Showing how values flow from source to destination",Simple distributions,15-20 nodes,User flow budget flow,D3.js or dedicated library,Alternative text description essential,Complex flow visualization
22,KPI Card,"kpi, metric, number, stat, scorecard",Highlighting single important metric,Single metric,"Dashboard hero metrics, emphasizing one key number",Showing trends or comparisons,1 number,Main KPI highlight,"Large font-size centered number",Include trend context if relevant,Dashboard design
23,Progress Bar,"progress, completion, percentage, bar",Showing completion percentage,Single percentage,"Simple progress indication, goal completion",Multiple goals comparison,1 per context,Project completion goal progress,"CSS width with percentage gradient",Include numeric percentage,UI/UX standard
24,Comparison Table,"table, comparison, matrix, features",Detailed feature or value comparison,Multi-attribute categorical,"Detailed comparison, many attributes, exact values matter",Visual impact storytelling,10-15 rows,Feature matrix pricing comparison,"HTML table with CSS styling",Proper table headers and scope,Information design
25,Icon Array,"icon array, pictogram, proportion, visual",Showing proportions with visual metaphor,Proportional visual,"Making statistics tangible (e.g. 1 in 10 people), visual impact",Precise values large numbers,100 icons,Statistics visualization impact slides,"CSS grid or flexbox with icons",Describe proportion in text,ISOTYPE Otto Neurath
1 id chart_type keywords best_for data_type when_to_use when_to_avoid max_categories slide_context css_implementation accessibility_notes sources
2 1 Bar Chart Vertical bar, vertical, comparison, categories, ranking Comparing values across categories Categorical discrete Comparing 3-12 categories, showing ranking, highlighting differences Continuous time data trends 12 Traction metrics feature comparison Chart.js or CSS flexbox with height percentage bars Always label axes include values Atlassian Data Charts
3 2 Bar Chart Horizontal horizontal bar, ranking, long labels, categories Categories with long names ranking Categorical discrete Long category names, 5+ items, reading left-to-right natural Few categories time series 15 Team performance competitor analysis CSS flexbox with width percentage bars Natural reading direction for labels Datylon Blog
4 3 Line Chart line, trend, time series, growth, change over time Showing trends over continuous time Time series continuous Time-based data, showing growth trajectory, 10+ data points Categorical comparisons 50+ points Revenue growth MRR user growth Chart.js line or SVG path element Include data point markers for screen readers Tableau Best Practices
5 4 Area Chart area, cumulative, volume, trend, filled line Showing volume or magnitude over time Time series cumulative Emphasizing magnitude, showing cumulative totals, comparing totals Precise value comparison 3-4 series Revenue breakdown market share over time Chart.js area or SVG path with fill Use patterns not just colors for series Data Visualization Guide
6 5 Pie Chart pie, composition, percentage, parts, whole Showing parts of a whole Proportional percentage 2-5 slices, showing simple composition, adds to 100% More than 6 categories precise comparison 6 max Market share budget allocation simple splits CSS conic-gradient or Chart.js pie Never use 3D always include percentages FusionCharts Blog
7 6 Donut Chart donut, composition, percentage, center metric Parts of whole with center highlight Proportional percentage Like pie but need center space for key metric, 2-5 segments Many categories 6 max Composition with key stat in center CSS conic-gradient with inner circle Same as pie include legend Modern alternative to pie
8 7 Stacked Bar stacked, composition, comparison, breakdown Comparing composition across categories Categorical + proportional Showing composition AND comparison, segment contribution Too many segments precise values 5 segments Revenue by segment across quarters Chart.js stacked bar or CSS nested divs Order segments consistently use legend Atlassian Data Charts
9 8 Grouped Bar grouped, clustered, side by side, multi-series Comparing multiple metrics per category Multi-series categorical Direct comparison of 2-3 metrics per category Too many groups (>4) or categories (>8) 4 groups Feature comparison pricing tiers Chart.js grouped bar CSS grid bars Color code consistently across groups Data Visualization Best Practices
10 9 100% Stacked Bar 100%, proportion, normalized, percentage Comparing proportions across categories Proportional comparative Comparing percentage breakdown across categories, not absolute values Showing absolute values 5 segments Market share comparison percentage breakdown CSS flexbox 100% width segments Clearly indicate percentage scale Proportional analysis
11 10 Funnel Chart funnel, conversion, stages, drop-off, pipeline Showing conversion or drop-off through stages Sequential stage-based Sales funnel, conversion rates, sequential process with decreasing values Non-sequential data equal stages 6-8 stages User conversion sales pipeline CSS trapezoid shapes or SVG Label each stage with count and percentage Marketing/Sales standard
12 11 Gauge Chart gauge, progress, goal, target, kpi Showing progress toward a goal Single metric vs target Single KPI progress, goal completion, health scores Multiple metrics 1 metric Goal progress health score CSS conic-gradient or arc SVG Include numeric value not just visual Dashboard widgets
13 12 Sparkline sparkline, mini, inline, trend, compact Showing trend in minimal space Time series inline Inline metrics, table cells, compact trend indication Detailed analysis N/A Metric cards with trend indicator SVG path or canvas inline Supplement with text for accessibility Edward Tufte
14 13 Scatter Plot scatter, correlation, relationship, distribution Showing relationship between two variables Bivariate continuous Correlation analysis, pattern detection, outlier identification Categorical data simple comparisons 100+ points Correlation analysis segmentation Canvas or SVG circles positioned Include trend line if meaningful Statistical visualization
15 14 Bubble Chart bubble, three variables, scatter, size Showing three variables simultaneously Trivariate continuous Three-variable comparison, population/size matters Simple comparisons 30-50 bubbles Market analysis with size dimension SVG circles with varying radius Legend for size scale essential Data Visualization Guide
16 15 Heatmap heatmap, matrix, intensity, correlation, grid Showing intensity across two dimensions Matrix intensity Large data matrices, time-day patterns, correlation matrices Few data points Unlimited grid Usage patterns correlation matrices CSS grid with background-color intensity Use colorblind-safe gradients Datylon Blog
17 16 Waterfall Chart waterfall, bridge, contribution, breakdown Showing how values add to a total Cumulative contribution Financial analysis, showing positive/negative contributions Non-additive data 10-15 items Revenue bridge profit breakdown CSS positioned bars with connectors Clear positive/negative color coding Financial reporting standard
18 17 Treemap treemap, hierarchy, nested, proportion Showing hierarchical proportional data Hierarchical proportional Nested categories, space-efficient proportions, 2 levels max Simple comparisons few items 50+ items Budget breakdown category analysis CSS grid with calculated areas Include text labels on larger segments Ben Shneiderman
19 18 Radar Chart radar, spider, multi-metric, profile Comparing multiple metrics for single item Multi-metric profile Comparing 5-8 metrics for one or two items, skill profiles More than 3 items to compare 8 axes max Feature profile skill assessment SVG polygon on axes Ensure scale is clear and consistent Profile comparison
20 19 Bullet Chart bullet, target, actual, performance Showing actual vs target with ranges KPI with target Progress against target with qualitative ranges Simple goal tracking 1-3 per slide KPI performance with targets CSS layered bars with markers Clearly label target and actual Stephen Few
21 20 Timeline timeline, chronology, history, milestones Showing events over time Event-based temporal History roadmap milestones, showing progression Quantitative comparison 10-15 events Company history product roadmap CSS flexbox with positioned markers Ensure logical reading order Chronological visualization
22 21 Sankey Diagram sankey, flow, distribution, connections Showing flow or distribution between nodes Flow distribution Showing how values flow from source to destination Simple distributions 15-20 nodes User flow budget flow D3.js or dedicated library Alternative text description essential Complex flow visualization
23 22 KPI Card kpi, metric, number, stat, scorecard Highlighting single important metric Single metric Dashboard hero metrics, emphasizing one key number Showing trends or comparisons 1 number Main KPI highlight Large font-size centered number Include trend context if relevant Dashboard design
24 23 Progress Bar progress, completion, percentage, bar Showing completion percentage Single percentage Simple progress indication, goal completion Multiple goals comparison 1 per context Project completion goal progress CSS width with percentage gradient Include numeric percentage UI/UX standard
25 24 Comparison Table table, comparison, matrix, features Detailed feature or value comparison Multi-attribute categorical Detailed comparison, many attributes, exact values matter Visual impact storytelling 10-15 rows Feature matrix pricing comparison HTML table with CSS styling Proper table headers and scope Information design
26 25 Icon Array icon array, pictogram, proportion, visual Showing proportions with visual metaphor Proportional visual Making statistics tangible (e.g. 1 in 10 people), visual impact Precise values large numbers 100 icons Statistics visualization impact slides CSS grid or flexbox with icons Describe proportion in text ISOTYPE Otto Neurath