diff --git a/.scd/plans/20261109-232616-d2-knowledge-base/decisions.md b/.scd/plans/20261109-232616-d2-knowledge-base/decisions.md new file mode 100644 index 0000000..25cb8a6 --- /dev/null +++ b/.scd/plans/20261109-232616-d2-knowledge-base/decisions.md @@ -0,0 +1,19 @@ +--- +status: approved +version: 1 +created_at: 2026-11-09T23:26:16+08:00 +updated_at: 2026-11-09T23:26:16+08:00 +recorded_timezone: Asia/Shanghai +--- + +# 决策与事件 + +- 事件ID：DEC-1 +- 类型：开工 +- 文件及文档版本：本目录四份 v1；依据 Issue #124 契约、Initiative #122 图版本 2 确认 + 用户执行授权 +- 目标Git SHA：main（fa8c969） +- 用户实际依据：Initiative 摘要"ok" + "全部完成 scdexcute" +- 任务或Issue范围：Issue #124 范围；NOTICES 仅追加 ui-ux-pro-max 节 +- occurred_at：null +- recorded_at：2026-11-09T23:26:16+08:00 +- 未决选择：无（9 张核心表=styles/typography/products/ui-reasoning/ux-guidelines/icons/charts/motion/landing；colors.csv 属原始色板不入核心，landing 入） diff --git a/.scd/plans/20261109-232616-d2-knowledge-base/implementation.md b/.scd/plans/20261109-232616-d2-knowledge-base/implementation.md new file mode 100644 index 0000000..78090d6 --- /dev/null +++ b/.scd/plans/20261109-232616-d2-knowledge-base/implementation.md @@ -0,0 +1,15 @@ +--- +status: approved +version: 1 +created_at: 2026-11-09T23:26:16+08:00 +updated_at: 2026-11-09T23:26:16+08:00 +recorded_timezone: Asia/Shanghai +--- + +# 实施计划 + +1. 分支 delivery/124-design-knowledge-base +2. 下载 9 核心 CSV + 2 元数据 + 22 stacks（清单核对） +3. search.mjs：零依赖 CSV 解析（引号/逗号状态机）、域映射、词项计分、--domain/--limit/--json +4. SKILL.md「形成可实施的视觉交付」后插入「检索设计知识库」段 +5. NOTICES 追加节；测试；A1 冒烟；A2 隔离会话；PR/验收/合并/关单/图版本 4 diff --git a/.scd/plans/20261109-232616-d2-knowledge-base/plan.md b/.scd/plans/20261109-232616-d2-knowledge-base/plan.md new file mode 100644 index 0000000..60cbd89 --- /dev/null +++ b/.scd/plans/20261109-232616-d2-knowledge-base/plan.md @@ -0,0 +1,14 @@ +--- +status: approved +version: 1 +created_at: 2026-11-09T23:26:16+08:00 +updated_at: 2026-11-09T23:26:16+08:00 +recorded_timezone: Asia/Shanghai +--- + +# 任务索引 + +- 任务与Issue：Delivery Issue #124（design-knowledge-base），Initiative #122 图版本 3（节点依赖已满足：#123 DONE） +- 所需文档及版本：requirements.md v1、implementation.md v1、decisions.md v1 +- 基线来源：main（#128 合并后） +- 批准与开工事件：decisions.md DEC-1 diff --git a/.scd/plans/20261109-232616-d2-knowledge-base/requirements.md b/.scd/plans/20261109-232616-d2-knowledge-base/requirements.md new file mode 100644 index 0000000..68fc0f6 --- /dev/null +++ b/.scd/plans/20261109-232616-d2-knowledge-base/requirements.md @@ -0,0 +1,16 @@ +--- +status: approved +version: 1 +created_at: 2026-11-09T23:26:16+08:00 +updated_at: 2026-11-09T23:26:16+08:00 +recorded_timezone: Asia/Shanghai +--- + +# 需求（Issue #124 契约） + +- data/knowledge/：ui-ux-pro-max 核心 9 CSV（styles/typography/products/ui-reasoning/ux-guidelines/icons/charts/motion/landing）+ catalog-summary.json + data-provenance.json +- data/stacks/：22 张框架 CSV +- skills/scd-uiux/scripts/search.mjs：node 零依赖检索，--domain 参数，空结果如实报告 +- SKILL.md 查询契约段（中文）：最小查询模式/单一意图/2–5 词/失败一次收窄重试/不保留未验证输出 +- NOTICES 追加 ui-ux-pro-max 节 +- A1 检索各域可用；A2 隔离会话检索给出带来源建议；A3 全量测试绿 diff --git a/skills/scd-uiux/SKILL.md b/skills/scd-uiux/SKILL.md index b57e79e..ce062b2 100644 --- a/skills/scd-uiux/SKILL.md +++ b/skills/scd-uiux/SKILL.md @@ -66,6 +66,8 @@ description: "在生产实施前设计或完善 Web 产品的用户体验和界 ## 形成可实施的视觉交付 +视觉方向、字体搭配、配色、图标、图表或动效需要具体参照时，检索内置设计知识库：`node /scripts/search.mjs <2-5 个关键词> [--domain <域>]`，域见 `--list-domains`（styles/typography/products/reasoning/ux/icons/charts/motion/landing/stacks）。一次查询围绕单一意图；结果为空或离题时收窄或换域重试一次，仍无命中则如实报告无验证匹配，不得把一般性建议当作检索结果，也不保留未验证输出。检索所得具体值进入方向块或 UX 契约时注明来源域与条目。 + 创建或验证线框图、视觉稿或原型前，阅读 `references/visual-evidence.md`。生成任何视觉产物前，先按[设计品味](references/design-taste.md)写出五项方向块并逐条排查反模式黑名单；命名不出方向时不得开始生成。 视觉设计自动使用共用的[页面视觉质量](references/visual-quality.md)：统一方向、八维检查、实际渲染的有限轮次自审与可核对对比。已有页面只需视觉打磨时可独立使用 [scd-ui-polish](../scd-ui-polish/SKILL.md)；生产实施仍交给 QuickDev，清晰局部变更不增加设计阶段。 diff --git a/skills/scd-uiux/data/THIRD-PARTY-NOTICES.md b/skills/scd-uiux/data/THIRD-PARTY-NOTICES.md index 819a110..09e60b3 100644 --- a/skills/scd-uiux/data/THIRD-PARTY-NOTICES.md +++ b/skills/scd-uiux/data/THIRD-PARTY-NOTICES.md @@ -8,3 +8,10 @@ - 许可：MIT License，版权归属上游作者 - 收录范围：`tokens/`（14 个 DTCG 令牌 JSON）、`components/`（11 份组件规范 Markdown） - 改动：无（原样搬运）；后续如有改动在各节记录 + +## nextlevelbuilder/ui-ux-pro-max-skill（MIT License） + +- 来源：（main 分支，按文件原样收录） +- 许可：MIT License，版权归属上游作者 +- 收录范围：`knowledge/`（styles/typography/products/ui-reasoning/ux-guidelines/icons/charts/motion/landing 共 9 张 CSV + catalog-summary.json + data-provenance.json）、`stacks/`（22 张框架 CSV） +- 改动：无（原样搬运）；检索脚本 `scripts/search.mjs` 为本项目自研（node 零依赖），非上游代码 diff --git a/skills/scd-uiux/data/knowledge/catalog-summary.json b/skills/scd-uiux/data/knowledge/catalog-summary.json new file mode 100644 index 0000000..8e77f49 --- /dev/null +++ b/skills/scd-uiux/data/knowledge/catalog-summary.json @@ -0,0 +1,78 @@ +{ + "schemaVersion": 1, + "verifiedAt": "2026-11-04", + "counts": { + "styles": { + "total": 89, + "searchable": 80, + "active": 51, + "supplemental": 29, + "deprecated": 9 + }, + "products": 192, + "palettes": 192, + "reasoningProfiles": 192, + "fontPairings": 74, + "googleFonts": 1934, + "curatedIcons": 105, + "upstreamPhosphorIcons": 1512, + "uxGuidelines": 120, + "motionPresets": 17, + "chartTypes": 25, + "stacks": 22, + "stackGuidelines": 1278 + }, + "snapshots": { + "google-fonts.csv": { + "sha256": "1c8c3b2ea1faf6a1012da463756def8b3889db33f2226f0343bb4daa80307d03" + }, + "google-font-licenses.json": { + "sha256": "35688523f2955795caa1a47c53b83099e60c1708461476f9cc3a050cf3b0148a" + }, + "icons.csv": { + "sha256": "50816c6012030178195a16ee481ebf58b47bd985d70e8ec58886cc83f6eddafc" + }, + "phosphor-icons-upstream.json": { + "sha256": "2399325233b277b5c97a80e6a5e8941154f5d057beee4e7613db87c87d700236" + } + }, + "promotionPolicy": { + "changedFamilySetRequiresExplicitApproval": true, + "relevanceGateRequired": true, + "unlicensedFamiliesExcluded": true + }, + "pendingCandidates": [ + { + "family": "Edu NSW ACT Cursive", + "reason": "No exact-family METADATA.pb entry in the official google/fonts repository snapshot" + }, + { + "family": "Edu NSW ACT Hand Pre", + "reason": "No exact-family METADATA.pb entry in the official google/fonts repository snapshot" + }, + { + "family": "Edu QLD Hand", + "reason": "No exact-family METADATA.pb entry in the official google/fonts repository snapshot" + }, + { + "family": "Edu SA Hand", + "reason": "No exact-family METADATA.pb entry in the official google/fonts repository snapshot" + }, + { + "family": "Edu VIC WA NT Hand", + "reason": "No exact-family METADATA.pb entry in the official google/fonts repository snapshot" + }, + { + "family": "Edu VIC WA NT Hand Pre", + "reason": "No exact-family METADATA.pb entry in the official google/fonts repository snapshot" + }, + { + "family": "Google Sans", + "reason": "No exact-family METADATA.pb entry in the official google/fonts repository snapshot" + }, + { + "family": "Google Sans Flex", + "reason": "No exact-family METADATA.pb entry in the official google/fonts repository snapshot" + } + ] +} diff --git a/skills/scd-uiux/data/knowledge/charts.csv b/skills/scd-uiux/data/knowledge/charts.csv new file mode 100644 index 0000000..c6f4f87 --- /dev/null +++ b/skills/scd-uiux/data/knowledge/charts.csv @@ -0,0 +1,26 @@ +No,Data Type,Keywords,Best Chart Type,Secondary Options,When to Use,When NOT to Use,Data Volume Threshold,Color Guidance,Accessibility Grade,Accessibility Risk,Accessibility Notes,A11y Fallback,Library Recommendation,Interactive Level +1,Trend Over Time,"trend, time-series, line, growth, timeline, progress, accessible chart, keyboard accessible chart",Line Chart,"Area Chart, Smooth Area",Data has a time axis; user needs to observe rise/fall trends or rate of change over a continuous period,Fewer than 4 data points (use stat card); more than 6 series (visual noise); no time dimension exists,<1000 pts: SVG; ≥1000 pts: Canvas + downsampling; >10000: aggregate to intervals,Primary: #0080FF. Multiple series: distinct colors + distinct line styles. Fill: 20% opacity,deprecated: use Accessibility Risk,risk:low,"Use solid, dashed, and dotted line styles plus direct series labels; never distinguish series by hue alone.",Visible data table plus concise trend summary. Keyboard: focus reveals hover values; +/- buttons zoom; Reset restores the full range.,"Chart.js, Recharts, ApexCharts",Hover + Zoom +2,Compare Categories,"compare, categories, bar, comparison, ranking, accessible chart, keyboard accessible chart",Bar Chart (Horizontal or Vertical),"Column Chart, Grouped Bar",Comparing discrete categories by magnitude; ranking or ordering is the core insight; categories ≤ 15,Categories > 15 (use table or search); data has time dimension (use line); showing proportions (use waffle/stacked),<20 categories: vertical bar; 20–50: horizontal bar; >50: paginated table,Each bar: distinct color. Grouped: same hue family. Always sort descending by value,deprecated: use Accessibility Risk,risk:low,Use direct category/value labels and group outlines or patterns; never encode category solely by bar color. Do not rely on color alone.,Visible sortable data table plus concise comparison summary. Keyboard: focus reveals hover values; focusable headers with Enter/Space sort and aria-sort reports direction.,"Chart.js, Recharts, D3.js",Hover + Sort +3,Part-to-Whole,"part-to-whole, pie, donut, percentage, proportion, share, accessible chart, keyboard accessible chart",Pie Chart or Donut,"Stacked Bar, Waffle Chart",≤5 categories; one dominant segment vs rest; emphasis on visual proportion over exact values,Categories > 5; slice differences < 5% (visually indistinguishable); user needs precise values; accessibility-first context,Max 6 slices; beyond that switch to stacked bar 100%,5–6 max colors. Contrasting palette. Largest slice at 12 o'clock. Always label slices with %,deprecated: use Accessibility Risk,risk:high,"Pie charts do not inherently fail WCAG; unlabeled color-only slices are inaccessible. Use direct labels and patterns, with a non-pie fallback. Do not rely on color alone.",Percentage data table and concise part-to-whole summary; offer a stacked bar view. Keyboard: focus reveals slice values; Enter/Space drills in; Back button returns.,"Chart.js, Recharts, D3.js",Hover + Drill +4,Correlation / Distribution,"correlation, distribution, scatter, relationship, pattern, cluster, accessible chart, keyboard accessible chart",Scatter Plot or Bubble Chart,"Heat Map, Matrix",Exploring relationship between two continuous variables; identifying clusters or outliers in a dataset,Variables are categorical (use grouped bar); fewer than 20 points (patterns aren't meaningful); mobile-primary context,<500 pts: SVG; 500–5000: Canvas at 0.6–0.8 opacity; >5000: hexbin or aggregate first,Color axis: gradient (blue → red). Bubble size: relative to 3rd variable. Opacity: 0.6–0.8 to show density,deprecated: use Accessibility Risk,risk:conditional,Combine marker shapes with direct group labels; color may reinforce but must not be the only distinction.,Visible data table plus correlation summary. Keyboard: focus reveals point values; labeled start/end range inputs replace brush dragging.,"D3.js, Plotly, Recharts",Hover + Brush +5,Heatmap / Intensity,"heatmap, heat-map, intensity, density, matrix, calendar, accessible chart, keyboard accessible chart",Heat Map or Choropleth,"Grid Heat Map, Bubble Heat","Showing intensity/density across a 2D grid; time-based patterns (e.g., activity by hour × day)",Fewer than 20 cells (use bar); user needs to read exact values; colorblind users without pattern fallback,"Up to 10,000 cells efficiently; beyond that aggregate; calendar heatmap: 365 cells max per SVG",Gradient: Cool (blue) to Hot (red). Divergent scale for ±data. Always include numeric color legend,deprecated: use Accessibility Risk,risk:conditional,Print values or symbols in cells and use texture/labels in addition to the color scale. Do not rely on color alone.,Grid data table plus intensity summary. Keyboard: focus reveals cell values; +/- buttons zoom; Reset restores the grid.,"D3.js, Plotly, ApexCharts",Hover + Zoom +6,Geographic Data,"geographic, map, location, region, geo, spatial, choropleth, accessible chart, keyboard accessible chart",Choropleth Map or Bubble Map,Geographic Heat Map,Data has a regional/location dimension; spatial distribution is the core insight for the user,Regions have very different sizes making visual comparison misleading (use bar); mobile-primary context,<1000 regions: SVG; ≥1000: Canvas/WebGL (Deck.gl); global maps: tile-based rendering,Single color gradient per region group. Categorized colors for discrete types. Legend with clear scale breaks,deprecated: use Accessibility Risk,risk:conditional,Label regions directly and pair fills with boundaries or patterns; location meaning cannot depend on color alone.,Sortable region table plus geographic summary. Keyboard: arrow keys or labeled pan buttons move the map; +/- buttons zoom; Enter drills into a focused region; Back returns.,"D3.js, Mapbox, Leaflet",Pan + Zoom + Drill +7,Funnel / Flow,"funnel, flow, conversion, drop-off, pipeline, stages, accessible chart, keyboard accessible chart",Funnel Chart or Sankey,Waterfall (for flows),Sequential multi-stage process; showing conversion or drop-off rates between defined stages,Stages aren't sequential; values don't decrease monotonically (use bar); fewer than 3 stages,3–8 stages optimal; beyond 8 stages group minor steps into 'Other',Stages: single color gradient (start → end). Show conversion % between each stage. Highlight biggest drop,deprecated: use Accessibility Risk,risk:conditional,"Keep stage names and values visible and distinguish stages with text and boundaries, not only a gradient. Do not rely on color alone.",Linear stage table/list plus conversion summary. Keyboard: focus reveals stage values; Enter/Space drills in; Back returns.,"D3.js, Recharts, Custom SVG",Hover + Drill +8,Performance vs Target,"performance, target, kpi, gauge, goal, threshold, progress, accessible chart, keyboard accessible chart",Gauge Chart or Bullet Chart,"Dial, Thermometer",Single KPI measured against a defined target or threshold; dashboard summary context,No target or benchmark exists; comparing multiple KPIs at once (use bullet chart grid),Single metric per gauge; for 3+ KPIs use bullet chart grid layout,Performance: Red → Yellow → Green gradient. Target: marker line. Threshold zones clearly differentiated,deprecated: use Accessibility Risk,risk:low,Place the number and target text beside the gauge and label threshold zones; red/yellow/green alone is insufficient.,Visible KPI/target text and a one-row data table plus status summary. Keyboard: focus reveals the same detail as hover.,"D3.js, ApexCharts, Custom SVG",Hover +9,Time-Series Forecast,"forecast, prediction, confidence, band, projection, estimate, accessible chart, keyboard accessible chart",Line with Confidence Band,Ribbon Chart,Historical data + model predictions; communicating uncertainty range to non-technical stakeholders,No historical baseline; prediction confidence is too low to be useful; audience is not data-literate,Keep historical window to 30–90 days for readability; forecast horizon ≤ 30% of visible x-axis range,Actual: solid line #0080FF. Forecast: dashed #FF9500. Confidence band: 15% opacity fill same hue,deprecated: use Accessibility Risk,risk:conditional,"Use solid actual and dashed forecast lines, direct labels, and a named confidence range; hue alone is insufficient.",Visible forecast table plus uncertainty summary. Keyboard: focus reveals hover values; buttons toggle actual/forecast; +/- buttons zoom; Reset restores range.,"Chart.js, ApexCharts, Plotly",Hover + Toggle +10,Anomaly Detection,"anomaly, outlier, spike, alert, detection, monitoring, deviation, accessible chart, keyboard accessible chart",Line Chart with Highlights,Scatter with Alert,Monitoring a time-series for outliers; alerting users to unexpected spikes or dips in operational data,Anomalies are predefined categories (use bar with highlight); real-time context without a pause control,"Stream at ≤60fps with Canvas; batch: up to 10,000 pts; mark anomalies as a separate data layer",Normal: #0080FF solid line. Anomaly marker: #FF0000 circle + filled. Alert band: #FFF3CD background zone,deprecated: use Accessibility Risk,risk:conditional,Mark anomalies with a distinct shape and text annotation as well as color. Do not rely on color alone.,Anomaly event list/table plus narrative alert summary. Keyboard: focus reveals point details; alerts are available in the persistent list without hover.,"D3.js, Plotly, ApexCharts",Hover + Alert +11,Hierarchical / Nested Data,"hierarchy, nested, treemap, parent, children, breakdown, drill, accessible chart, keyboard accessible chart",Treemap,"Sunburst, Nested Donut, Icicle","Showing size relationships within a hierarchy; overview of proportional structure (e.g., budget breakdown)",Hierarchy depth > 3 levels (too complex to read); user needs to compare sibling values precisely,<200 nodes: SVG; 200–1000: Canvas; >1000: paginate or pre-filter before rendering,Parent nodes: distinct hues. Children: lighter shades of same hue. White separator borders: 2–3px,deprecated: use Accessibility Risk,risk:high,Label hierarchy nodes and use borders/patterns as well as hue; make the tree table the primary accessible view. Do not rely on color alone.,Collapsible tree table plus hierarchy summary; treemap remains supplementary. Keyboard: focus reveals hover values; Enter/Space drills or expands; Back collapses/returns.,"D3.js, Recharts, ApexCharts",Hover + Drilldown +12,Flow / Process Data,"flow, process, sankey, distribution, source, target, transfer, accessible chart, keyboard accessible chart",Sankey Diagram,"Alluvial, Chord Diagram",Showing how quantities flow between nodes; multi-source multi-target distribution,Flow directions form loops (use network graph); fewer than 3 source-target pairs; mobile-primary context,<50 flows: SVG; ≥50: Canvas; >200 flows: aggregate minor flows into 'Other' node,Gradient from source to target color. Flow opacity: 0.4–0.6. Node labels always visible,deprecated: use Accessibility Risk,risk:conditional,"Label source, target, and value; use line style or node symbols in addition to gradient color. Do not rely on color alone.",Source-to-target flow table plus flow summary. Keyboard: focus reveals hover values; Enter/Space drills into a node; Back returns.,"D3.js (d3-sankey), Plotly",Hover + Drilldown +13,Cumulative Changes,"waterfall, cumulative, variance, incremental, bridge, delta, accessible chart, keyboard accessible chart",Waterfall Chart,"Stacked Bar, Cascade","Showing how individual positive/negative components add up to a final total (e.g., P&L, budget variance)",Changes are not additive; more than 12 bars (readability breaks); audience expects a simple total,4–12 bars optimal; beyond 12 aggregate minor items into a single 'Other' bar,Increases: #4CAF50. Decreases: #F44336. Start total: #2196F3. End total: #0D47A1. Running total line: dashed,deprecated: use Accessibility Risk,risk:low,"Pair increase/decrease bars with signed values and directional icons, not red/green alone. Do not rely on color alone.",Running-total table plus variance summary. Keyboard: focus reveals the same value as hover.,"ApexCharts, Highcharts, Plotly",Hover +14,Multi-Variable Comparison,"radar, spider, multi-variable, attributes, dimensions, comparison, accessible chart, keyboard accessible chart",Radar / Spider Chart,"Parallel Coordinates, Grouped Bar","Comparing multiple entities across the same fixed set of attributes (e.g., product feature comparison)",Axes > 8 (unreadable); values need precise comparison (use grouped bar); audience unfamiliar with radar charts,2–3 datasets maximum per chart; 5–8 axes; beyond 8 axes switch to parallel coordinates,Single dataset: #0080FF at 20% fill. Multiple: distinct hues with 30% fill. Border: full opacity,deprecated: use Accessibility Risk,risk:conditional,"Use line styles, point shapes, and direct series labels in addition to color. Do not rely on color alone.",Raw data table and grouped-bar alternative plus comparison summary. Keyboard: focus reveals values; buttons toggle series.,"Chart.js, Recharts, ApexCharts",Hover + Toggle +15,Stock / Trading OHLC,"stock, trading, ohlc, candlestick, finance, price, volume, accessible chart, keyboard accessible chart",Candlestick Chart,"OHLC Bar, Heikin-Ashi",Financial time-series with Open/High/Low/Close data; trading or investment product context only,Non-financial audience; no OHLC data available (use line chart); accessibility-first context,Real-time: Canvas required. Historical: paginate by time range. Max 500 candles visible at once,Bullish: #26A69A. Bearish: #EF5350. Volume bars: 40% opacity below. Body fill vs hollow for OHLC style,deprecated: use Accessibility Risk,risk:conditional,Use filled versus hollow candles and OHLC text values; bullish/bearish meaning cannot depend on color. Do not rely on color alone.,Sortable OHLC table plus daily-change summary. Keyboard: focus reveals candle values; +/- buttons zoom; Reset restores range; live updates do not steal focus.,"Lightweight Charts (TradingView), ApexCharts",Real-time + Hover + Zoom +16,Relationship / Connection Data,"network, graph, nodes, edges, connections, relationships, force, accessible chart, keyboard accessible chart",Network Graph,"Hierarchical Tree, Adjacency Matrix",Mapping connections between entities; network topology or social graph exploration context,Node count > 500 without clustering pre-applied; user needs precise connection counts; mobile context,≤100 nodes: SVG; 101–500: Canvas; >500: must apply clustering/LOD before rendering,Node types: categorical colors. Edges: #90A4AE at 60% opacity. Highlight path: #F59E0B,deprecated: use Accessibility Risk,risk:high,"Use labeled node types, shapes, and edge styles in addition to color; the adjacency view is the accessible source of truth. Do not rely on color alone.",Adjacency list/table and relationship summary; tree view when applicable. Keyboard: focus reveals node details; Enter drills; Move up/down/left/right buttons replace drag.,"D3.js (d3-force), Vis.js, Cytoscape.js",Drilldown + Hover + Drag +17,Distribution / Statistical,"distribution, statistical, spread, median, outlier, quartile, boxplot, accessible chart, keyboard accessible chart",Box Plot,"Violin Plot, Beeswarm","Showing spread, median, and outliers of a dataset; comparing distributions across multiple groups",Fewer than 20 data points per group (distribution is not meaningful); audience unfamiliar with statistical charts,Any sample size; aggregated representation so rendering is ⚡ Excellent at any volume,Box fill: #BBDEFB. Border: #1976D2. Median line: #D32F2F bold. Outlier dots: #F44336,deprecated: use Accessibility Risk,risk:low,"Label median, quartiles, whiskers, and outliers directly; do not use color alone for statistical roles.",Statistics table plus distribution summary. Keyboard: focus reveals the same statistics as hover.,"Plotly, D3.js, Chart.js (plugin)",Hover +18,Performance vs Target (Compact),"bullet, compact, kpi, dashboard, target, benchmark, range, accessible chart, keyboard accessible chart",Bullet Chart,"Gauge, Progress Bar",Dashboard with multiple KPIs side by side; space-constrained contexts where a gauge is too large,Single KPI with emphasis (use gauge); data has no defined target range; fewer than 3 KPIs,Ideal for 3–10 bullet charts in a grid; scales to any count efficiently,Qualitative ranges: #FFCDD2 / #FFF9C4 / #C8E6C9 (bad/ok/good). Performance bar: #1976D2. Target: black 3px marker,deprecated: use Accessibility Risk,risk:low,Label every qualitative range and target with text; color is supplementary.,Visible KPI/target table plus status summary. Keyboard: focus reveals the same detail as hover.,"D3.js, Plotly, Custom SVG",Hover +19,Proportional / Percentage,"waffle, percentage, proportion, progress, filled, grid, accessible chart, keyboard accessible chart",Waffle Chart,"Pictogram, Stacked Bar 100%",Showing what fraction of a whole is filled; percentage progress in a visually engaging and accessible format,More than 5 categories (use stacked bar); exact values matter over visual proportion; very tight space,10×10 grid standard (100 cells); for > 5 categories switch to stacked 100% bar,3–5 categories max. 2–3px gap between cells. Each category a distinct accessible color pair,deprecated: use Accessibility Risk,risk:low,Label each category and percentage and add patterns or symbols; filled-cell color alone is insufficient.,Percentage table/list plus part-to-whole summary. Keyboard: focus reveals each cell value.,"D3.js, React-Waffle, Custom CSS Grid",Hover +20,Hierarchical Proportional,"sunburst, hierarchy, nested, proportion, radial, circle, accessible chart, keyboard accessible chart",Sunburst Chart,"Treemap, Icicle, Circle Packing","Exploring nested proportions where both hierarchy and relative size matter (e.g., org spend breakdown)",More than 3 hierarchy levels (outer rings become unreadable); precision matters over overview; mobile,<100 nodes: SVG; 100–500: Canvas; >500: filter to top N before rendering,Center to outer: darker to lighter hue. Each level 15–20% lighter. Contrasting border between sectors,deprecated: use Accessibility Risk,risk:high,Label hierarchy levels and segments and use boundaries/patterns as well as hue; the indented list is primary. Do not rely on color alone.,Collapsible indented list/table plus hierarchy summary and breadcrumbs. Keyboard: Enter/Space drills or expands; Back button returns; focus reveals hover detail.,"D3.js (d3-hierarchy), Recharts, ApexCharts",Drilldown + Hover +21,Root Cause Analysis,"root cause, decomposition, tree, hierarchy, drill-down, ai-split, attribution, accessible chart, keyboard accessible chart",Decomposition Tree,"Decision Tree, Flow Chart",Decomposing a metric into contributing factors; AI-assisted analysis or BI drill-down scenarios,No clear parent-child causal relationship; audience expects a summary rather than exploration,Up to 5 levels deep; limit visible nodes to 20 per level for readability; lazy-load deeper levels,Positive impact nodes: #2563EB. Negative impact nodes: #EF4444. Neutral connectors: #94A3B8,deprecated: use Accessibility Risk,risk:low,Name each node and contribution and use shapes/connector styles in addition to color. Do not rely on color alone.,Expandable tree table plus root-cause summary. Keyboard: Enter/Space drills and expands; Back collapses; dedicated expand/collapse buttons expose the same operations.,"Power BI (native), React-Flow, Custom D3.js",Drill + Expand +22,3D Spatial Data,"3d, spatial, immersive, terrain, molecular, volumetric, point-cloud, accessible chart, keyboard accessible chart",3D Scatter / Surface Plot,"Volumetric Rendering, Point Cloud",Scientific/engineering context where Z-axis carries essential info not expressible in 2D,2D projection conveys the same insight; mobile context; accessibility-required environments; standard business dashboards,"WebGL required. Deck.gl: up to 1M points. Three.js: LOD required beyond 50,000 pts",Depth cues: lighting and shading. Z-axis: color gradient (cool → warm). Transparent overlapping: opacity 0.4,deprecated: use Accessibility Risk,risk:high,"Use labels, shapes, and depth-independent cues; color and 3D position cannot be the only carriers of meaning.","Mandatory 2D projection, data table, and spatial summary. Keyboard: rotate/pan buttons and +/- zoom controls replace pointer/VR manipulation; Reset returns the camera.","Three.js, Deck.gl, Plotly 3D",Rotate + Zoom + VR +23,Real-Time Streaming,"streaming, real-time, ticker, live, velocity, pulse, monitoring, accessible chart, keyboard accessible chart",Streaming Area Chart,"Ticker Tape, Moving Gauge",Live monitoring dashboards; IoT/ops data updating at ≥1 Hz; user needs current value at a glance,Update frequency < 1/min (use periodic-refresh line chart); flashing content without reduced-motion support,Canvas/WebGL required. Buffer last 60–300s of data. Downsample older data on scroll,Current pulse: #00FF00 (dark theme) or #0080FF (light theme). History: fading opacity. Grid: dark background,deprecated: use Accessibility Risk,risk:conditional,Show the current value and status text and use line styles or markers in addition to color. Do not rely on color alone.,Streaming data table plus current-value/trend summary. Keyboard: Pause/Resume button controls updates; focus reveals values; +/- buttons zoom; Reset restores range.,"Smoothed D3.js, CanvasJS",Real-time + Pause + Zoom +24,Sentiment / Emotion,"sentiment, emotion, nlp, opinion, feeling, text-analysis, accessible chart, keyboard accessible chart",Word Cloud with Sentiment,"Sentiment Arc, Radar Chart",NLP output visualization; exploratory analysis of text corpus sentiment; frequency-weighted keyword overview,Precise values matter (word size is inherently imprecise); screen-reader context; corpus < 50 items,50–5000 terms optimal. Beyond 5000: apply top-N filtering before render. Avoid on mobile,Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Word size maps to frequency,deprecated: use Accessibility Risk,risk:high,"Expose every term, count, and sentiment as text; size and color are supplementary only.",Sortable term table/list plus sentiment summary; word cloud is supplementary. Keyboard: focus reveals word details; labeled controls filter with Space/Enter.,"D3-cloud, Highcharts, Nivo",Hover + Filter +25,Process Mining,"process, mining, variants, path, bottleneck, log, event, accessible chart, keyboard accessible chart",Process Map / Graph,"Directed Acyclic Graph (DAG), Petri Net",Analyzing event logs to visualize actual process flows; identifying bottlenecks and deviations in ops/product funnels,No event log data available; audience expects a static flowchart (use diagram tool); node count > 100 without pre-filtering,<30 nodes: SVG; 30–100: Canvas; >100: apply variant filtering (top 80% of cases) before rendering,Happy path: #10B981 thick line. Deviations: #F59E0B thin line. Bottleneck nodes: #EF4444 fill,deprecated: use Accessibility Risk,risk:conditional,Label nodes and paths and use shapes/line styles in addition to color; bottlenecks require text annotations. Do not rely on color alone.,Path summary table plus bottleneck narrative. Keyboard: Move buttons replace drag; focus reveals node details; Enter activates a node; Back returns.,"React-Flow, Cytoscape.js, Recharts",Drag + Node-Click diff --git a/skills/scd-uiux/data/knowledge/data-provenance.json b/skills/scd-uiux/data/knowledge/data-provenance.json new file mode 100644 index 0000000..e5b03df --- /dev/null +++ b/skills/scd-uiux/data/knowledge/data-provenance.json @@ -0,0 +1,1396 @@ +{ + "schemaVersion": 1, + "generatedAt": "2026-08-13T00:00:00Z", + "freshnessPolicy": { + "manual-verifiedDays": 365, + "needs-reviewDays": 90 + }, + "records": [ + { + "entityKind": "dataset-contract", + "entityId": "ime-composition-enter", + "sourceFile": "ux-guidelines.csv", + "sourceKey": { + "Scope": "No 120; Issue, Platform, Description, Do, Don't, code-example, and Severity fields", + "Boundary": "Custom web Enter shortcuts; synthetic handler checks do not establish native OS IME or Safari compatibility. keyCode 229 is a scoped legacy fallback, not a general key detector." + }, + "status": "active", + "verifiedAt": "2026-11-07", + "sla": "needs-review", + "appliesTo": [ + "search", + "design-guidance" + ], + "sources": [ + { + "type": "official", + "ref": "https://www.w3.org/TR/uievents/#events-composition-key-events" + }, + { + "type": "official", + "ref": "https://github.com/GoogleChrome/modern-web-guidance-src/blob/main/guides/forms/ime-safe-enter-submit/guide.md" + } + ] + }, + { + "entityKind": "reasoning", + "entityId": "academic-journal-scholarly-publishing", + "sourceFile": "ui-reasoning.csv", + "sourceKey": { + "UI_Category": "Academic Journal / Scholarly Publishing" + }, + "status": "active", + "verifiedAt": "2026-08-12", + "sla": "needs-review", + "appliesTo": [ + "design-system" + ], + "confidence": 0.88, + "sources": [ + { + "type": "derived", + "ref": "products.csv#Product Type=Academic Journal / Scholarly Publishing" + }, + { + "type": "derived", + "ref": "colors.csv#Product Type=Academic Journal / Scholarly Publishing" + } + ] + }, + { + "entityKind": "reasoning", + "entityId": "api-developer-portal", + "sourceFile": "ui-reasoning.csv", + "sourceKey": { + "UI_Category": "API Developer Portal" + }, + "status": "active", + "verifiedAt": "2026-08-12", + "sla": "needs-review", + "appliesTo": [ + "design-system" + ], + "confidence": 0.92, + "sources": [ + { + "type": "derived", + "ref": "products.csv#Product Type=API Developer Portal" + }, + { + "type": "derived", + "ref": "colors.csv#Product Type=API Developer Portal" + } + ] + }, + { + "entityKind": "reasoning", + "entityId": "forum-discussion-board", + "sourceFile": "ui-reasoning.csv", + "sourceKey": { + "UI_Category": "Forum / Discussion Board" + }, + "status": "active", + "verifiedAt": "2026-08-12", + "sla": "needs-review", + "appliesTo": [ + "design-system" + ], + "confidence": 0.93, + "sources": [ + { + "type": "derived", + "ref": "products.csv#Product Type=Forum / Discussion Board" + }, + { + "type": "derived", + "ref": "colors.csv#Product Type=Forum / Discussion Board" + } + ] + }, + { + "entityKind": "reasoning", + "entityId": "directory-listing-site", + "sourceFile": "ui-reasoning.csv", + "sourceKey": { + "UI_Category": "Directory / Listing Site" + }, + "status": "active", + "verifiedAt": "2026-08-12", + "sla": "needs-review", + "appliesTo": [ + "design-system" + ], + "confidence": 0.93, + "sources": [ + { + "type": "derived", + "ref": "products.csv#Product Type=Directory / Listing Site" + }, + { + "type": "derived", + "ref": "colors.csv#Product Type=Directory / Listing Site" + } + ] + }, + { + "entityKind": "reasoning", + "entityId": "status-page-incident-management", + "sourceFile": "ui-reasoning.csv", + "sourceKey": { + "UI_Category": "Status Page / Incident Management" + }, + "status": "active", + "verifiedAt": "2026-08-12", + "sla": "needs-review", + "appliesTo": [ + "design-system" + ], + "confidence": 0.94, + "sources": [ + { + "type": "derived", + "ref": "products.csv#Product Type=Status Page / Incident Management" + }, + { + "type": "derived", + "ref": "colors.csv#Product Type=Status Page / Incident Management" + } + ] + }, + { + "entityKind": "reasoning", + "entityId": "wiki-encyclopedia", + "sourceFile": "ui-reasoning.csv", + "sourceKey": { + "UI_Category": "Wiki / Encyclopedia" + }, + "status": "active", + "verifiedAt": "2026-08-12", + "sla": "needs-review", + "appliesTo": [ + "design-system" + ], + "confidence": 0.91, + "sources": [ + { + "type": "derived", + "ref": "products.csv#Product Type=Wiki / Encyclopedia" + }, + { + "type": "derived", + "ref": "colors.csv#Product Type=Wiki / Encyclopedia" + } + ] + }, + { + "entityKind": "reasoning", + "entityId": "auction-platform", + "sourceFile": "ui-reasoning.csv", + "sourceKey": { + "UI_Category": "Auction Platform" + }, + "status": "active", + "verifiedAt": "2026-08-12", + "sla": "needs-review", + "appliesTo": [ + "design-system" + ], + "confidence": 0.93, + "sources": [ + { + "type": "derived", + "ref": "products.csv#Product Type=Auction Platform" + }, + { + "type": "derived", + "ref": "colors.csv#Product Type=Auction Platform" + } + ] + }, + { + "entityKind": "reasoning", + "entityId": "changelog-release-notes", + "sourceFile": "ui-reasoning.csv", + "sourceKey": { + "UI_Category": "Changelog / Release Notes" + }, + "status": "active", + "verifiedAt": "2026-08-12", + "sla": "needs-review", + "appliesTo": [ + "design-system" + ], + "confidence": 0.9, + "sources": [ + { + "type": "derived", + "ref": "products.csv#Product Type=Changelog / Release Notes" + }, + { + "type": "derived", + "ref": "colors.csv#Product Type=Changelog / Release Notes" + } + ] + }, + { + "entityKind": "reasoning", + "entityId": "citizen-science-platform", + "sourceFile": "ui-reasoning.csv", + "sourceKey": { + "UI_Category": "Citizen Science Platform" + }, + "status": "active", + "verifiedAt": "2026-08-12", + "sla": "needs-review", + "appliesTo": [ + "design-system" + ], + "confidence": 0.89, + "sources": [ + { + "type": "derived", + "ref": "products.csv#Product Type=Citizen Science Platform" + }, + { + "type": "derived", + "ref": "colors.csv#Product Type=Citizen Science Platform" + } + ] + }, + { + "entityKind": "reasoning", + "entityId": "classifieds-buy-sell", + "sourceFile": "ui-reasoning.csv", + "sourceKey": { + "UI_Category": "Classifieds / Buy-Sell" + }, + "status": "active", + "verifiedAt": "2026-08-12", + "sla": "needs-review", + "appliesTo": [ + "design-system" + ], + "confidence": 0.93, + "sources": [ + { + "type": "derived", + "ref": "products.csv#Product Type=Classifieds / Buy-Sell" + }, + { + "type": "derived", + "ref": "colors.csv#Product Type=Classifieds / Buy-Sell" + } + ] + }, + { + "entityKind": "reasoning", + "entityId": "conference-symposium-landing-page", + "sourceFile": "ui-reasoning.csv", + "sourceKey": { + "UI_Category": "Conference / Symposium Landing Page" + }, + "status": "active", + "verifiedAt": "2026-08-12", + "sla": "needs-review", + "appliesTo": [ + "design-system" + ], + "confidence": 0.9, + "sources": [ + { + "type": "derived", + "ref": "products.csv#Product Type=Conference / Symposium Landing Page" + }, + { + "type": "derived", + "ref": "colors.csv#Product Type=Conference / Symposium Landing Page" + } + ] + }, + { + "entityKind": "reasoning", + "entityId": "crowdfunding-platform", + "sourceFile": "ui-reasoning.csv", + "sourceKey": { + "UI_Category": "Crowdfunding Platform" + }, + "status": "active", + "verifiedAt": "2026-08-12", + "sla": "needs-review", + "appliesTo": [ + "design-system" + ], + "confidence": 0.92, + "sources": [ + { + "type": "derived", + "ref": "products.csv#Product Type=Crowdfunding Platform" + }, + { + "type": "derived", + "ref": "colors.csv#Product Type=Crowdfunding Platform" + } + ] + }, + { + "entityKind": "reasoning", + "entityId": "digital-signage-kiosk", + "sourceFile": "ui-reasoning.csv", + "sourceKey": { + "UI_Category": "Digital Signage / Kiosk" + }, + "status": "active", + "verifiedAt": "2026-08-12", + "sla": "needs-review", + "appliesTo": [ + "design-system" + ], + "confidence": 0.88, + "sources": [ + { + "type": "derived", + "ref": "products.csv#Product Type=Digital Signage / Kiosk" + }, + { + "type": "derived", + "ref": "colors.csv#Product Type=Digital Signage / Kiosk" + } + ] + }, + { + "entityKind": "reasoning", + "entityId": "e-signature-document-workflow", + "sourceFile": "ui-reasoning.csv", + "sourceKey": { + "UI_Category": "E-signature / Document Workflow" + }, + "status": "active", + "verifiedAt": "2026-08-12", + "sla": "needs-review", + "appliesTo": [ + "design-system" + ], + "confidence": 0.93, + "sources": [ + { + "type": "derived", + "ref": "products.csv#Product Type=E-signature / Document Workflow" + }, + { + "type": "derived", + "ref": "colors.csv#Product Type=E-signature / Document Workflow" + } + ] + }, + { + "entityKind": "reasoning", + "entityId": "feature-flag-config-management", + "sourceFile": "ui-reasoning.csv", + "sourceKey": { + "UI_Category": "Feature Flag / Config Management" + }, + "status": "active", + "verifiedAt": "2026-08-12", + "sla": "needs-review", + "appliesTo": [ + "design-system" + ], + "confidence": 0.91, + "sources": [ + { + "type": "derived", + "ref": "products.csv#Product Type=Feature Flag / Config Management" + }, + { + "type": "derived", + "ref": "colors.csv#Product Type=Feature Flag / Config Management" + } + ] + }, + { + "entityKind": "reasoning", + "entityId": "government-portal-civic-services", + "sourceFile": "ui-reasoning.csv", + "sourceKey": { + "UI_Category": "Government Portal / Civic Services" + }, + "status": "active", + "verifiedAt": "2026-08-12", + "sla": "needs-review", + "appliesTo": [ + "design-system" + ], + "confidence": 0.95, + "sources": [ + { + "type": "derived", + "ref": "products.csv#Product Type=Government Portal / Civic Services" + }, + { + "type": "derived", + "ref": "colors.csv#Product Type=Government Portal / Civic Services" + } + ] + }, + { + "entityKind": "reasoning", + "entityId": "grant-funding-portal", + "sourceFile": "ui-reasoning.csv", + "sourceKey": { + "UI_Category": "Grant / Funding Portal" + }, + "status": "active", + "verifiedAt": "2026-08-12", + "sla": "needs-review", + "appliesTo": [ + "design-system" + ], + "confidence": 0.92, + "sources": [ + { + "type": "derived", + "ref": "products.csv#Product Type=Grant / Funding Portal" + }, + { + "type": "derived", + "ref": "colors.csv#Product Type=Grant / Funding Portal" + } + ] + }, + { + "entityKind": "reasoning", + "entityId": "lms-learning-management-system", + "sourceFile": "ui-reasoning.csv", + "sourceKey": { + "UI_Category": "LMS (Learning Management System)" + }, + "status": "active", + "verifiedAt": "2026-08-12", + "sla": "needs-review", + "appliesTo": [ + "design-system" + ], + "confidence": 0.93, + "sources": [ + { + "type": "derived", + "ref": "products.csv#Product Type=LMS (Learning Management System)" + }, + { + "type": "derived", + "ref": "colors.csv#Product Type=LMS (Learning Management System)" + } + ] + }, + { + "entityKind": "reasoning", + "entityId": "no-code-low-code-builder", + "sourceFile": "ui-reasoning.csv", + "sourceKey": { + "UI_Category": "No-code / Low-code Builder" + }, + "status": "active", + "verifiedAt": "2026-08-12", + "sla": "needs-review", + "appliesTo": [ + "design-system" + ], + "confidence": 0.89, + "sources": [ + { + "type": "derived", + "ref": "products.csv#Product Type=No-code / Low-code Builder" + }, + { + "type": "derived", + "ref": "colors.csv#Product Type=No-code / Low-code Builder" + } + ] + }, + { + "entityKind": "reasoning", + "entityId": "open-source-project-landing", + "sourceFile": "ui-reasoning.csv", + "sourceKey": { + "UI_Category": "Open Source Project Landing" + }, + "status": "active", + "verifiedAt": "2026-08-12", + "sla": "needs-review", + "appliesTo": [ + "design-system" + ], + "confidence": 0.9, + "sources": [ + { + "type": "derived", + "ref": "products.csv#Product Type=Open Source Project Landing" + }, + { + "type": "derived", + "ref": "colors.csv#Product Type=Open Source Project Landing" + } + ] + }, + { + "entityKind": "reasoning", + "entityId": "patient-portal-health-records", + "sourceFile": "ui-reasoning.csv", + "sourceKey": { + "UI_Category": "Patient Portal / Health Records" + }, + "status": "active", + "verifiedAt": "2026-08-12", + "sla": "needs-review", + "appliesTo": [ + "design-system" + ], + "confidence": 0.94, + "sources": [ + { + "type": "derived", + "ref": "products.csv#Product Type=Patient Portal / Health Records" + }, + { + "type": "derived", + "ref": "colors.csv#Product Type=Patient Portal / Health Records" + } + ] + }, + { + "entityKind": "reasoning", + "entityId": "patent-ip-database", + "sourceFile": "ui-reasoning.csv", + "sourceKey": { + "UI_Category": "Patent / IP Database" + }, + "status": "active", + "verifiedAt": "2026-08-12", + "sla": "needs-review", + "appliesTo": [ + "design-system" + ], + "confidence": 0.89, + "sources": [ + { + "type": "derived", + "ref": "products.csv#Product Type=Patent / IP Database" + }, + { + "type": "derived", + "ref": "colors.csv#Product Type=Patent / IP Database" + } + ] + }, + { + "entityKind": "reasoning", + "entityId": "q-and-a-community-platform", + "sourceFile": "ui-reasoning.csv", + "sourceKey": { + "UI_Category": "Q&A Community Platform" + }, + "status": "active", + "verifiedAt": "2026-08-12", + "sla": "needs-review", + "appliesTo": [ + "design-system" + ], + "confidence": 0.93, + "sources": [ + { + "type": "derived", + "ref": "products.csv#Product Type=Q&A Community Platform" + }, + { + "type": "derived", + "ref": "colors.csv#Product Type=Q&A Community Platform" + } + ] + }, + { + "entityKind": "reasoning", + "entityId": "research-lab-university-department", + "sourceFile": "ui-reasoning.csv", + "sourceKey": { + "UI_Category": "Research Lab / University Department" + }, + "status": "active", + "verifiedAt": "2026-08-12", + "sla": "needs-review", + "appliesTo": [ + "design-system" + ], + "confidence": 0.91, + "sources": [ + { + "type": "derived", + "ref": "products.csv#Product Type=Research Lab / University Department" + }, + { + "type": "derived", + "ref": "colors.csv#Product Type=Research Lab / University Department" + } + ] + }, + { + "entityKind": "reasoning", + "entityId": "resume-cv-builder", + "sourceFile": "ui-reasoning.csv", + "sourceKey": { + "UI_Category": "Resume / CV Builder" + }, + "status": "active", + "verifiedAt": "2026-08-12", + "sla": "needs-review", + "appliesTo": [ + "design-system" + ], + "confidence": 0.92, + "sources": [ + { + "type": "derived", + "ref": "products.csv#Product Type=Resume / CV Builder" + }, + { + "type": "derived", + "ref": "colors.csv#Product Type=Resume / CV Builder" + } + ] + }, + { + "entityKind": "reasoning", + "entityId": "review-platform", + "sourceFile": "ui-reasoning.csv", + "sourceKey": { + "UI_Category": "Review Platform" + }, + "status": "active", + "verifiedAt": "2026-08-12", + "sla": "needs-review", + "appliesTo": [ + "design-system" + ], + "confidence": 0.94, + "sources": [ + { + "type": "derived", + "ref": "products.csv#Product Type=Review Platform" + }, + { + "type": "derived", + "ref": "colors.csv#Product Type=Review Platform" + } + ] + }, + { + "entityKind": "reasoning", + "entityId": "rpa-automation-dashboard", + "sourceFile": "ui-reasoning.csv", + "sourceKey": { + "UI_Category": "RPA / Automation Dashboard" + }, + "status": "active", + "verifiedAt": "2026-08-12", + "sla": "needs-review", + "appliesTo": [ + "design-system" + ], + "confidence": 0.93, + "sources": [ + { + "type": "derived", + "ref": "products.csv#Product Type=RPA / Automation Dashboard" + }, + { + "type": "derived", + "ref": "colors.csv#Product Type=RPA / Automation Dashboard" + } + ] + }, + { + "entityKind": "reasoning", + "entityId": "survey-form-builder", + "sourceFile": "ui-reasoning.csv", + "sourceKey": { + "UI_Category": "Survey / Form Builder" + }, + "status": "active", + "verifiedAt": "2026-08-12", + "sla": "needs-review", + "appliesTo": [ + "design-system" + ], + "confidence": 0.92, + "sources": [ + { + "type": "derived", + "ref": "products.csv#Product Type=Survey / Form Builder" + }, + { + "type": "derived", + "ref": "colors.csv#Product Type=Survey / Form Builder" + } + ] + }, + { + "entityKind": "reasoning", + "entityId": "telemedicine-platform", + "sourceFile": "ui-reasoning.csv", + "sourceKey": { + "UI_Category": "Telemedicine Platform" + }, + "status": "active", + "verifiedAt": "2026-08-12", + "sla": "needs-review", + "appliesTo": [ + "design-system" + ], + "confidence": 0.88, + "sources": [ + { + "type": "derived", + "ref": "products.csv#Product Type=Telemedicine Platform" + }, + { + "type": "derived", + "ref": "colors.csv#Product Type=Telemedicine Platform" + } + ] + }, + { + "entityKind": "reasoning", + "entityId": "testimonial-and-social-proof-widget", + "sourceFile": "ui-reasoning.csv", + "sourceKey": { + "UI_Category": "Testimonial & Social Proof Widget" + }, + "status": "active", + "verifiedAt": "2026-08-12", + "sla": "needs-review", + "appliesTo": [ + "design-system" + ], + "confidence": 0.91, + "sources": [ + { + "type": "derived", + "ref": "products.csv#Product Type=Testimonial & Social Proof Widget" + }, + { + "type": "derived", + "ref": "colors.csv#Product Type=Testimonial & Social Proof Widget" + } + ] + }, + { + "entityKind": "reasoning", + "entityId": "ticketing-box-office", + "sourceFile": "ui-reasoning.csv", + "sourceKey": { + "UI_Category": "Ticketing / Box Office" + }, + "status": "active", + "verifiedAt": "2026-08-12", + "sla": "needs-review", + "appliesTo": [ + "design-system" + ], + "confidence": 0.93, + "sources": [ + { + "type": "derived", + "ref": "products.csv#Product Type=Ticketing / Box Office" + }, + { + "type": "derived", + "ref": "colors.csv#Product Type=Ticketing / Box Office" + } + ] + }, + { + "entityKind": "style", + "entityId": "liquid-glass", + "sourceFile": "styles.csv", + "sourceKey": { + "Style ID": "liquid-glass" + }, + "status": "active", + "verifiedAt": "2026-08-13", + "sla": "manual-verified", + "appliesTo": [ + "style-search", + "gallery" + ], + "confidence": 0.94, + "sources": [ + { + "type": "official", + "ref": "https://developer.apple.com/documentation/TechnologyOverviews/liquid-glass" + } + ] + }, + { + "entityKind": "style", + "entityId": "material-you-md3-mobile", + "sourceFile": "styles.csv", + "sourceKey": { + "Style ID": "material-you-md3-mobile" + }, + "status": "active", + "verifiedAt": "2026-08-13", + "sla": "manual-verified", + "appliesTo": [ + "style-search", + "gallery" + ], + "confidence": 0.94, + "sources": [ + { + "type": "official", + "ref": "https://m3.material.io/" + } + ] + }, + { + "entityKind": "style", + "entityId": "fluent-2", + "sourceFile": "styles.csv", + "sourceKey": { + "Style ID": "fluent-2" + }, + "status": "active", + "verifiedAt": "2026-08-13", + "sla": "manual-verified", + "appliesTo": [ + "style-search", + "gallery" + ], + "confidence": 0.94, + "sources": [ + { + "type": "official", + "ref": "https://fluent2.microsoft.design/" + } + ] + }, + { + "entityKind": "style", + "entityId": "shopify-polaris", + "sourceFile": "styles.csv", + "sourceKey": { + "Style ID": "shopify-polaris" + }, + "status": "active", + "verifiedAt": "2026-08-13", + "sla": "manual-verified", + "appliesTo": [ + "style-search", + "gallery" + ], + "confidence": 0.94, + "sources": [ + { + "type": "official", + "ref": "https://shopify.dev/docs/api/polaris/index" + } + ] + }, + { + "entityKind": "style", + "entityId": "spectrum-design-system", + "sourceFile": "styles.csv", + "sourceKey": { + "Style ID": "spectrum-design-system" + }, + "status": "active", + "verifiedAt": "2026-08-13", + "sla": "manual-verified", + "appliesTo": [ + "style-search", + "gallery" + ], + "confidence": 0.94, + "sources": [ + { + "type": "official", + "ref": "https://opensource.adobe.com/spectrum-design-data/" + } + ] + }, + { + "entityKind": "style", + "entityId": "spectrum-2", + "sourceFile": "styles.csv", + "sourceKey": { + "Style ID": "spectrum-2" + }, + "status": "supplemental", + "verifiedAt": "2026-08-13", + "sla": "manual-verified", + "appliesTo": [ + "style-search", + "gallery" + ], + "confidence": 0.94, + "sources": [ + { + "type": "official", + "ref": "https://s2.spectrum.adobe.com/index.html" + } + ] + }, + { + "entityKind": "style", + "entityId": "apple-native-experience", + "sourceFile": "styles.csv", + "sourceKey": { + "Style ID": "apple-native-experience" + }, + "status": "active", + "verifiedAt": "2026-11-04", + "sla": "manual-verified", + "appliesTo": [ + "style-search", + "gallery" + ], + "confidence": 0.94, + "sources": [ + { + "type": "official", + "ref": "https://developer.apple.com/design/human-interface-guidelines/" + } + ] + }, + { + "entityKind": "dataset-contract", + "entityId": "core-colors-accessibility", + "sourceFile": "colors.csv", + "sourceKey": { + "Scope": "No 1-192; contrast-threshold wording in Notes only", + "Boundary": "Does not attest that every palette pair was measured" + }, + "status": "active", + "verifiedAt": "2026-08-13", + "sla": "manual-verified", + "appliesTo": [ + "search", + "design-guidance" + ], + "sources": [ + { + "type": "official", + "ref": "https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum" + }, + { + "type": "official", + "ref": "https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast" + } + ] + }, + { + "entityKind": "dataset-contract", + "entityId": "core-charts-accessibility", + "sourceFile": "charts.csv", + "sourceKey": { + "Scope": "No 1-25; Color Guidance, Accessibility Notes, and A11y Fallback fields", + "Boundary": "Does not claim that a named chart library enforces the guidance" + }, + "status": "active", + "verifiedAt": "2026-08-13", + "sla": "manual-verified", + "appliesTo": [ + "search", + "design-guidance" + ], + "sources": [ + { + "type": "official", + "ref": "https://www.w3.org/WAI/WCAG22/Understanding/use-of-color" + }, + { + "type": "official", + "ref": "https://carbondesignsystem.com/data-visualization/chart-anatomy/" + } + ] + }, + { + "entityKind": "dataset-contract", + "entityId": "core-landing-accessibility", + "sourceFile": "landing.csv", + "sourceKey": { + "Scope": "No 1, 2, 9, 15, 21, 22, 24, 25, 29, and 33; Color Strategy and Conversion Optimization accessibility text" + }, + "status": "active", + "verifiedAt": "2026-08-13", + "sla": "manual-verified", + "appliesTo": [ + "search", + "design-guidance" + ], + "sources": [ + { + "type": "official", + "ref": "https://www.w3.org/WAI/tutorials/carousels/" + }, + { + "type": "official", + "ref": "https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html" + }, + { + "type": "official", + "ref": "https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum" + } + ] + }, + { + "entityKind": "dataset-contract", + "entityId": "core-wcag-22-guidance", + "sourceFile": "ux-guidelines.csv", + "sourceKey": { + "Scope": "No 100-107; Issue, Description, Do, Don't, and code-example fields", + "ConformanceBoundary": "Rows 100, 103, 104, and 107 are AA; rows 101-102 are AAA; rows 105-106 are A. Accessible Authentication (Enhanced) AAA is not represented." + }, + "status": "active", + "verifiedAt": "2026-08-13", + "sla": "manual-verified", + "appliesTo": [ + "search", + "design-guidance" + ], + "sources": [ + { + "type": "official", + "ref": "https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/" + }, + { + "type": "official", + "ref": "https://www.w3.org/WAI/WCAG22/Understanding/accessible-authentication-minimum.html" + } + ] + }, + { + "entityKind": "dataset-contract", + "entityId": "core-typography-imports", + "sourceFile": "typography.csv", + "sourceKey": { + "Scope": "No 20, 39, 59, 63, 66-68, 70, and 71; named families, Google Fonts URL, CSS Import, Tailwind Config, and stated weight/style availability" + }, + "status": "active", + "verifiedAt": "2026-08-13", + "sla": "manual-verified", + "appliesTo": [ + "search", + "design-guidance" + ], + "sources": [ + { + "type": "official", + "ref": "https://developers.google.com/fonts/docs/css2" + } + ] + }, + { + "entityKind": "dataset-contract", + "entityId": "core-icon-semantics", + "sourceFile": "icons.csv", + "sourceKey": { + "Scope": "No 1-105; Allowed Contexts and contextual accessibility guidance in Usage; No 105 library/import examples", + "Compatibility": "Semantic Role remains a legacy recommended-default field, not an immutable semantic classification" + }, + "status": "active", + "verifiedAt": "2026-08-13", + "sla": "manual-verified", + "appliesTo": [ + "search", + "design-guidance" + ], + "sources": [ + { + "type": "official", + "ref": "https://www.w3.org/WAI/tutorials/images/decorative/" + }, + { + "type": "official", + "ref": "https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/" + }, + { + "type": "official", + "ref": "https://www.w3.org/WAI/ARIA/apg/patterns/button/" + }, + { + "type": "official", + "ref": "https://github.com/phosphor-icons/react" + } + ] + }, + { + "entityKind": "dataset-contract", + "entityId": "core-motion-accessibility", + "sourceFile": "motion.csv", + "sourceKey": { + "Scope": "No 1-17; GSAP API identifiers in GSAP Snippet/Framework Notes and reduced-motion handling in Framework Notes", + "Boundary": "Does not verify product-specific duration, count, or performance recommendations" + }, + "status": "active", + "verifiedAt": "2026-08-13", + "sla": "manual-verified", + "appliesTo": [ + "search", + "design-guidance" + ], + "sources": [ + { + "type": "official", + "ref": "https://gsap.com/docs/v3/GSAP/" + }, + { + "type": "official", + "ref": "https://gsap.com/docs/v3/Plugins/ScrollTrigger/" + }, + { + "type": "official", + "ref": "https://www.w3.org/WAI/WCAG22/Techniques/css/C39.html" + }, + { + "type": "official", + "ref": "https://www.w3.org/WAI/tutorials/carousels/animations/" + } + ] + }, + { + "entityKind": "dataset-contract", + "entityId": "core-native-input", + "sourceFile": "app-interface.csv", + "sourceKey": { + "Scope": "No 6, 31, and 32; Description, Do, Don't, and code-example fields" + }, + "status": "active", + "verifiedAt": "2026-08-13", + "sla": "manual-verified", + "appliesTo": [ + "search", + "design-guidance" + ], + "sources": [ + { + "type": "official", + "ref": "https://developer.apple.com/design/human-interface-guidelines/accessibility" + }, + { + "type": "official", + "ref": "https://developer.android.com/guide/topics/ui/accessibility/apps" + } + ] + }, + { + "entityKind": "dataset-contract", + "entityId": "core-react-effects", + "sourceFile": "react-performance.csv", + "sourceKey": { + "Scope": "No 43-44; Description, Do, Don't, and code-example fields" + }, + "status": "active", + "verifiedAt": "2026-08-13", + "sla": "manual-verified", + "appliesTo": [ + "search", + "design-guidance" + ], + "sources": [ + { + "type": "official", + "ref": "https://react.dev/reference/react/useEffectEvent" + }, + { + "type": "official", + "ref": "https://react.dev/learn/referencing-values-with-refs" + }, + { + "type": "official", + "ref": "https://react.dev/reference/react/useEffect" + } + ] + }, + { + "entityKind": "dataset-contract", + "entityId": "core-form-validation-errors", + "sourceFile": "ux-guidelines.csv", + "sourceKey": { + "Scope": "No 55 and 109; Description, Do, Don't, and code-example fields" + }, + "status": "active", + "verifiedAt": "2026-08-13", + "sla": "manual-verified", + "appliesTo": [ + "search", + "design-guidance" + ], + "sources": [ + { + "type": "official", + "ref": "https://design-system.service.gov.uk/components/error-summary/" + }, + { + "type": "official", + "ref": "https://design-system.service.gov.uk/components/error-message/" + }, + { + "type": "official", + "ref": "https://www.w3.org/WAI/tutorials/forms/notifications/" + } + ] + }, + { + "entityKind": "dataset-contract", + "entityId": "core-text-layout-resilience", + "sourceFile": "ux-guidelines.csv", + "sourceKey": { + "Scope": "No 8, 14, 19, 78, and 110-119; Issue, Platform, Description, Do, Don't, code-example, and Severity fields", + "Boundary": "Heading balance is a progressive browser-controlled heuristic and does not guarantee an orphan-free or exact line break; timing and loading choices remain platform- and component-specific; compact-label guidance does not authorize blanket nonbreaking spaces, hardcoded line breaks, inaccessible truncation, or status announced by color alone" + }, + "status": "active", + "verifiedAt": "2026-08-13", + "sla": "manual-verified", + "appliesTo": [ + "search", + "design-guidance" + ], + "sources": [ + { + "type": "official", + "ref": "https://www.w3.org/TR/css-text-4/" + }, + { + "type": "official", + "ref": "https://www.w3.org/WAI/WCAG22/Understanding/reflow.html" + }, + { + "type": "official", + "ref": "https://www.w3.org/WAI/WCAG22/Understanding/text-spacing.html" + }, + { + "type": "official", + "ref": "https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html" + }, + { + "type": "official", + "ref": "https://fluent2.microsoft.design/components/web/react/core/tag/usage" + }, + { + "type": "official", + "ref": "https://fluent2.microsoft.design/components/web/react/core/skeleton/usage" + }, + { + "type": "official", + "ref": "https://fluent2.microsoft.design/motion" + }, + { + "type": "official", + "ref": "https://fluent2.microsoft.design/wait-ux" + }, + { + "type": "official", + "ref": "https://m3.material.io/foundations/interaction/states/overview" + }, + { + "type": "official", + "ref": "https://www.w3.org/TR/web-animations-1/" + }, + { + "type": "official", + "ref": "https://www.w3.org/TR/css-animations-1/" + } + ] + }, + { + "entityKind": "dataset-contract", + "entityId": "html-tailwind-text-layout-resilience", + "sourceFile": "stacks/html-tailwind.csv", + "sourceKey": { + "Scope": "No 57-59; Guideline, Description, Do, Don't, Code Good, Code Bad, Docs URL, Applies To, Status, and Verified At fields", + "Boundary": "Balanced wrapping is progressive enhancement; wrap-anywhere is limited to unpredictable long tokens; compact-label truncation is a last resort after collection reflow and requires a bounded shrink path" + }, + "status": "active", + "verifiedAt": "2026-08-13", + "sla": "manual-verified", + "appliesTo": [ + "search", + "design-guidance" + ], + "sources": [ + { + "type": "official", + "ref": "https://tailwindcss.com/docs/text-wrap" + }, + { + "type": "official", + "ref": "https://tailwindcss.com/docs/overflow-wrap" + }, + { + "type": "official", + "ref": "https://tailwindcss.com/docs/flex-wrap" + }, + { + "type": "official", + "ref": "https://tailwindcss.com/docs/min-width" + }, + { + "type": "official", + "ref": "https://tailwindcss.com/docs/white-space" + } + ] + }, + { + "entityKind": "catalog-snapshot", + "entityId": "google-fonts-catalog-2026-08-13", + "sourceFile": "google-fonts.csv", + "sourceKey": { + "Snapshot": "catalog-summary.json", + "Count": 1934 + }, + "status": "active", + "verifiedAt": "2026-08-13", + "sla": "manual-verified", + "appliesTo": [ + "search", + "design-guidance" + ], + "sources": [ + { + "type": "official", + "ref": "https://developers.google.com/fonts/docs/developer_api" + }, + { + "type": "official", + "ref": "https://github.com/google/fonts" + } + ] + }, + { + "entityKind": "catalog-snapshot", + "entityId": "phosphor-icons-catalog-2.1.1", + "sourceFile": "phosphor-icons-upstream.json", + "sourceKey": { + "Snapshot": "catalog-summary.json", + "Count": 1512 + }, + "status": "active", + "verifiedAt": "2026-08-13", + "sla": "manual-verified", + "appliesTo": [ + "search", + "design-guidance" + ], + "sources": [ + { + "type": "official", + "ref": "https://github.com/phosphor-icons/core" + }, + { + "type": "official", + "ref": "https://github.com/phosphor-icons/react" + } + ] + } + ] +} diff --git a/skills/scd-uiux/data/knowledge/icons.csv b/skills/scd-uiux/data/knowledge/icons.csv new file mode 100644 index 0000000..cfc3f1e --- /dev/null +++ b/skills/scd-uiux/data/knowledge/icons.csv @@ -0,0 +1,106 @@ +No,Category,Icon Name,Keywords,Library,Import Code,Usage,Best For,Style,Semantic Role,Allowed Contexts +1,Navigation,list,hamburger menu navigation toggle bars,Phosphor,import { List } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Mobile navigation drawer toggle sidebar,Outline,interactive,decorative|meaningful|interactive +2,Navigation,arrow-left,back previous return navigate,Phosphor,import { ArrowLeft } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Back button breadcrumb navigation,Outline,interactive,decorative|meaningful|interactive +3,Navigation,arrow-right,next forward continue navigate,Phosphor,import { ArrowRight } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Forward button next step CTA,Outline,interactive,decorative|meaningful|interactive +4,Navigation,caret-down,dropdown expand accordion select,Phosphor,import { CaretDown } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Dropdown toggle accordion header,Outline,interactive,decorative|meaningful|interactive +5,Navigation,caret-up,collapse close accordion minimize,Phosphor,import { CaretUp } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Accordion collapse minimize,Outline,interactive,decorative|meaningful|interactive +6,Navigation,house,homepage main dashboard start,Phosphor,import { House } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Home navigation main page,Outline,meaningful,decorative|meaningful|interactive +7,Navigation,x,close cancel dismiss remove exit,Phosphor,import { X } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Modal close dismiss button,Outline,interactive,decorative|meaningful|interactive +8,Navigation,arrow-square-out,open new tab external link,Phosphor,import { ArrowSquareOut } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",External link indicator,Outline,interactive,decorative|meaningful|interactive +9,Action,plus,add create new insert,Phosphor,import { Plus } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Add button create new item,Outline,interactive,decorative|meaningful|interactive +10,Action,minus,remove subtract decrease delete,Phosphor,import { Minus } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Remove item quantity decrease,Outline,interactive,decorative|meaningful|interactive +11,Action,trash,delete remove discard bin,Phosphor,import { Trash } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Delete action destructive,Outline,interactive,decorative|meaningful|interactive +12,Action,pencil-simple,pencil modify change update,Phosphor,import { PencilSimple } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Edit button modify content,Outline,interactive,decorative|meaningful|interactive +13,Action,floppy-disk,disk store persist save,Phosphor,import { FloppyDisk } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Save button persist changes,Outline,interactive,decorative|meaningful|interactive +14,Action,download-simple,export save file download,Phosphor,import { DownloadSimple } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Download file export,Outline,meaningful,decorative|meaningful|interactive +15,Action,upload-simple,import file attach upload,Phosphor,import { UploadSimple } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Upload file import,Outline,meaningful,decorative|meaningful|interactive +16,Action,copy,duplicate clipboard paste,Phosphor,import { Copy } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Copy to clipboard,Outline,meaningful,decorative|meaningful|interactive +17,Action,share,social distribute send,Phosphor,import { Share } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Share button social,Outline,interactive,decorative|meaningful|interactive +18,Action,magnifying-glass,find lookup filter query,Phosphor,import { MagnifyingGlass } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Search input bar,Outline,interactive,decorative|meaningful|interactive +19,Action,funnel,sort refine narrow options,Phosphor,import { Funnel } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Filter dropdown sort,Outline,interactive,decorative|meaningful|interactive +20,Action,gear,gear cog preferences config,Phosphor,import { Gear } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Settings page configuration,Outline,meaningful,decorative|meaningful|interactive +21,Status,check,success done complete verified,Phosphor,import { Check } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Success state checkmark,Outline,meaningful,decorative|meaningful|interactive +22,Status,check-circle,success verified approved complete,Phosphor,import { CheckCircle } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Success badge verified,Outline,meaningful,decorative|meaningful|interactive +23,Status,x-circle,error failed cancel rejected,Phosphor,import { XCircle } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Error state failed,Outline,meaningful,decorative|meaningful|interactive +24,Status,warning,warning caution attention danger,Phosphor,import { Warning } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Warning message caution,Outline,meaningful,decorative|meaningful|interactive +25,Status,warning-circle,info notice information help,Phosphor,import { WarningCircle } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Info notice alert,Outline,meaningful,decorative|meaningful|interactive +26,Status,info,information help tooltip details,Phosphor,import { Info } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Information tooltip help,Outline,meaningful,decorative|meaningful|interactive +27,Status,circle-notch,loading spinner processing wait,Phosphor,import { CircleNotch } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Loading state spinner,Outline,meaningful,decorative|meaningful|interactive +28,Status,clock,time schedule pending wait,Phosphor,import { Clock } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Pending time schedule,Outline,meaningful,decorative|meaningful|interactive +29,Communication,envelope,email message inbox letter,Phosphor,import { Envelope } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Email contact inbox,Outline,meaningful,decorative|meaningful|interactive +30,Communication,chat-circle,chat comment bubble conversation,Phosphor,import { ChatCircle } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Chat comment message,Outline,meaningful,decorative|meaningful|interactive +31,Communication,phone,call mobile telephone contact,Phosphor,import { Phone } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Phone contact call,Outline,meaningful,decorative|meaningful|interactive +32,Communication,paper-plane-tilt,submit dispatch message airplane,Phosphor,import { PaperPlaneTilt } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Send message submit,Outline,meaningful,decorative|meaningful|interactive +33,Communication,bell,notification alert ring reminder,Phosphor,import { Bell } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Notification bell alert,Outline,meaningful,decorative|meaningful|interactive +34,User,user,profile account person avatar,Phosphor,import { User } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",User profile account,Outline,meaningful,decorative|meaningful|interactive +35,User,users,team group people members,Phosphor,import { Users } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Team group members,Outline,meaningful,decorative|meaningful|interactive +36,User,user-plus,add invite new member,Phosphor,import { UserPlus } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Add user invite,Outline,interactive,decorative|meaningful|interactive +37,User,sign-in,signin authenticate enter,Phosphor,import { SignIn } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Login signin,Outline,meaningful,decorative|meaningful|interactive +38,User,sign-out,signout exit leave logout,Phosphor,import { SignOut } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Logout signout,Outline,meaningful,decorative|meaningful|interactive +39,Media,image,photo picture gallery thumbnail,Phosphor,import { Image } from '@phosphor-icons/react',"; Context is chosen by use: if decorative beside visible text, set aria-hidden=""true""; if meaningful without equivalent visible text, provide a text alternative; if inside an interactive control, give the control an accessible name and expose applicable state (for example aria-pressed or aria-expanded).",Image photo gallery,Outline,meaningful,decorative|meaningful|interactive +40,Media,video,movie film play record,Phosphor,import { Video } from '@phosphor-icons/react',"