showdar-skills 0.2.0

package/skills/showdar-design/SKILL.md

@@ -0,0 +1,179 @@
+---
+name: showdar-design
+description: Use when product UI needs design direction, UX decisions, responsive layout, accessibility, or visual polish.
+---
+
+# Showdar Design
+
+## Purpose
+
+- Produce product-specific UI direction instead of generic component-library output.
+- Translate product goals into hierarchy, layout, typography, color, interaction, motion, and component behavior.
+- Adapt design implementation to React, Next.js, React Native, Flutter, SwiftUI, or Compose.
+- Review and polish existing UI with accessibility and performance constraints.
+- Use local structured knowledge via `scripts/search.mjs` rather than loading all design data into context.
+- Read `references/anti-ai-ui.md` to avoid template-like AI aesthetics.
+
+## When to use
+
+- Designing a new screen, page, flow, component system, dashboard, invitation, landing page, or mobile experience.
+- Turning a screenshot/reference into a coherent design direction and implementation rules.
+- Reviewing existing UI for hierarchy, spacing, responsiveness, interaction, accessibility, or visual polish.
+- Implementing design in a supported stack where platform conventions matter.
+- Choosing a palette, typography direction, motion language, or component behavior from product context.
+
+## When not to use
+
+- Pure backend/algorithm work with no user interface.
+- Pixel-exact reproduction where the user supplied a complete authoritative design system and no design decisions remain.
+- Brand/legal accessibility certification; this skill provides engineering guidance, not formal compliance certification.
+- Do not redesign unrelated screens while implementing one bounded UI task.
+
+## Inputs and assumptions
+
+- Product type, target users/task, target stack, and existing brand/design constraints if available.
+- Existing design system/tokens/components override generic Showdar defaults.
+- If a reference image exists, extract hierarchy/layout traits without blindly copying irrelevant details.
+- Search structured data selectively. Example: `node scripts/search.mjs --query "fintech dashboard" --domain products`.
+- For stack rules: `node scripts/search.mjs --query "long list performance" --stack react-native`.
+- Accessibility and real content lengths are part of the design input, not afterthoughts.
+- The data index covers products, styles, colors, typography, layout patterns, components/states, accessibility, interaction, motion, charts, and stack rules; use it to select fields rather than loading every row.
+- Query html-tailwind, React, Next.js, Vue, Nuxt, Svelte, React Native, Flutter, SwiftUI, Jetpack Compose, or Tauri guidance before implementation.
+
+## Non-negotiable rules
+
+- Establish a product-specific visual premise before choosing components.
+- Use hierarchy and spacing before adding borders, cards, gradients, shadows, or decorative effects.
+- Do not default AI products to purple gradients, glass cards, sparkles, and floating orbs.
+- Every interactive element needs default, active/pressed, focus where relevant, disabled/loading/error behavior.
+- Mobile controls must be touch-ergonomic and respect platform navigation/keyboard/safe-area behavior.
+- Responsive design is priority/reflow, not proportional shrinking.
+- Maintain readable contrast, semantic labeling, focus order, reduced-motion behavior, and text scaling.
+- Prefer existing design tokens/components when they meet the requirement.
+
+## Workflow
+
+### Mode selection
+- **new**: establish direction -> system -> layout -> components -> responsive -> interaction -> implementation guidance.
+- **implement**: map approved design to existing stack/tokens/components with minimal visual drift.
+- **review**: inspect hierarchy, consistency, states, responsive behavior, accessibility, and stack-specific issues.
+- **polish**: preserve product structure while tightening rhythm, type, alignment, states, and motion.
+
+### Phase 1 — product and task framing
+- Identify primary user job, primary action, information density, emotional tone, and trust/safety needs.
+- Search `data/products.csv` and `data/styles.csv` for nearby patterns, then adapt rather than copy.
+- State a one-sentence design direction including density, tone, and layout premise.
+
+### Phase 2 — visual system
+- Choose color strategy from semantics/product context using `data/colors.csv` as reference.
+- Choose typography direction from `data/typography.csv`; define a compact type scale and numeric treatment when needed.
+- Define spacing/radius/border/shadow rules consistent with density and platform.
+
+### Phase 3 — layout and hierarchy
+- Apply `references/visual-hierarchy.md` and `references/layout.md`.
+- Make reading order and primary action obvious without relying on decoration.
+- Decide where grouping needs cards versus simple alignment/section rhythm.
+
+### Phase 4 — components and states
+- Search `data/components.csv` and `data/ui-patterns.csv` for task-appropriate behavior.
+- Specify loading, empty, error, disabled, focus/pressed, and long-content states.
+- Use platform-native controls/semantics when they improve behavior and accessibility.
+
+### Phase 5 — responsive and interaction
+- Apply `references/responsive.md` and `references/interaction.md`.
+- Define what reflows, collapses, moves, or becomes a different component at narrow widths.
+- Search `data/motion.csv` only for motion that explains continuity or feedback.
+
+### Phase 6 — stack-specific implementation
+- Detect target stack and query the matching file under `data/stacks/`.
+- Translate design decisions into stack-native layout, state, accessibility, and performance patterns.
+- Avoid forcing web patterns into mobile or vice versa.
+
+### Phase 7 — review and polish
+- Audit alignment, spacing rhythm, type hierarchy, density, icon sizing, states, contrast, keyboard/touch behavior, and visual consistency.
+- Read `references/accessibility.md` and query `data/accessibility.csv` for focused checks.
+- Remove generic AI-design artifacts that do not support the product premise.
+
+## Decision points
+
+- Existing design system? Extend it before introducing a parallel token/component language.
+- Dense expert tool? Favor scan speed, alignment, restrained surfaces, and compact controls.
+- Narrative/event/portfolio? Favor typography, imagery, section rhythm, and fewer UI containers.
+- Mobile utility? Favor native mental models, thumb reach, keyboard/safe area, and reduced simultaneous information.
+- Critical finance/health flow? Prioritize trust, legibility, explicit state, recovery, and conservative motion.
+- If reference aesthetics conflict with accessibility or task completion, preserve intent but change the unsafe detail.
+
+## Stack detection
+
+- React: query `data/stacks/react.csv` for semantic, state, effect, and rendering guidance.
+- Next.js: query `data/stacks/nextjs.csv` for server/client, data/cache, image, and performance boundaries.
+- React Native: query `data/stacks/react-native.csv` for lists, touch, navigation, images, keyboard, and accessibility.
+- Flutter: query `data/stacks/flutter.csv` for rebuild, list, async, layout, state, and semantics guidance.
+- SwiftUI: query `data/stacks/swiftui.csv` for state/identity/navigation/layout/accessibility.
+- Compose: query `data/stacks/compose.csv` for state hoisting, recomposition, lazy lists, effects, semantics, adaptive layout.
+
+## Failure modes
+
+- Card soup: every section becomes a rounded card with identical weight.
+- Trend soup: gradient + glass + glow + huge radius + floating decoration without product reason.
+- Weak hierarchy: multiple primary CTAs and headings compete.
+- Responsive squeeze: desktop layout simply narrows until unreadable.
+- Missing states: only happy-path mockup is implemented.
+- Design tokens duplicated as random hardcoded values.
+- Accessibility fixes applied after layout in a way that breaks hierarchy.
+- Stack implementation ignores lifecycle/performance conventions.
+
+## Stop conditions
+
+- Stop when the requested outcome is outside this skill and hand off to the more appropriate workflow.
+- Stop before destructive, irreversible, production, credential, publishing, or deployment actions unless the user explicitly approved them.
+- Stop when required evidence is unavailable and proceeding would require guessing about behavior, ownership, or safety.
+- Stop when a repository instruction conflicts with this playbook; repository/user instructions win.
+- Stop when direction, key states, responsive behavior, stack implementation rules, and verification criteria are defined for the requested UI scope.
+
+## Escalation conditions
+
+- Ask for brand assets or authoritative design tokens when identity cannot be inferred safely.
+- Ask when the user requests a rendition of a specific person/image and the necessary visual reference is missing.
+- Escalate conflicting accessibility vs brand requirements instead of silently sacrificing accessibility.
+- If the request spans an entire product redesign, split by key flow/system rather than generating dozens of shallow screens.
+
+## Verification
+
+- Compare implementation against the stated design direction and existing token system.
+- Test critical widths, long content, loading/empty/error states, keyboard/touch, and text scaling.
+- Check contrast, semantic roles/labels, focus order, reduced motion, and color-independent state meaning.
+- Profile obvious hot UI paths such as large lists/images/animations when stack guidance identifies risk.
+- Remove decorative elements that do not improve hierarchy, feedback, brand, or storytelling.
+- Verify the primary user task remains obvious without animation.
+
+## Output contract
+
+- **Design direction** — product type, density, tone, visual premise.
+- **System** — color strategy, typography, spacing/surfaces, motion principles.
+- **Layout** — hierarchy, grouping, responsive behavior.
+- **Components/states** — interaction and error/loading/empty behavior.
+- **Stack guidance** — implementation constraints for the detected target.
+- **Accessibility** — concrete checks and required behaviors.
+- **Polish checklist** — issues to fix before calling the UI complete.
+
+## Anti-patterns
+
+- Purple gradient because the product uses AI.
+- Glassmorphism on every surface.
+- 3-column feature cards where a narrative or task flow would be clearer.
+- Large empty hero copy with weak proof or product context.
+- Random icon boxes and pills used as decoration.
+- Tiny mobile touch targets copied from desktop.
+- Motion on every section with unrelated directions/easings.
+- Hardcoded one-off colors/spacing when tokens already exist.
+
+## Example
+
+User request: “Design a wedding invitation site that feels elegant, not like a SaaS template.”
+- Search products/styles/colors/typography for wedding/editorial context.
+- Direction: editorial romantic, low-medium density, warm neutrals, serif display + quiet sans body.
+- Layout: immersive hero, story sequence, event details, gallery/map if needed, RSVP as clear final action.
+- Avoid dashboard cards, purple gradients, glass panels, repeated icon-feature grids.
+- Define mobile story order and reduced-motion-friendly reveals.
+- See `examples/design-brief.md` for a compact brief.

package/skills/showdar-design/data/accessibility.csv

@@ -0,0 +1,16 @@
+id,area,rule,why,check,severity,tags,reference,stack
+contrast,Contrast,body text and controls meet applicable WCAG contrast expectations,low contrast blocks reading and action,check normal disabled hover focus and visited states,high,contrast wcag,references/accessibility.md,*
+focus,Focus,keyboard-focusable elements have a visible focus indicator,keyboard users must track position,tab through critical flow and verify focus never disappears,high,focus keyboard,references/accessibility.md,*
+touch-target,Touch target,primary mobile controls have about 44x44pt or dp-equivalent hit area,small targets increase error rate,inspect hit area not only icon size,high,touch mobile,references/accessibility.md,react-native
+labels,Labels,icon-only controls expose an accessible name,screen readers cannot infer decorative glyph intent,inspect accessibility tree and localized label,high,labels semantics,references/accessibility.md,*
+semantics,Semantics,use native semantic roles before custom div or canvas behavior,native semantics improve assistive technology support,inspect rendered role name and state,high,semantics roles,references/accessibility.md,react
+motion,Motion,respect reduced-motion preferences,motion can cause discomfort and disorientation,enable reduced motion and repeat critical flow,medium,reduced motion,references/accessibility.md,*
+errors,Errors,validation errors explain what happened and how to recover,color-only error state is insufficient,submit invalid form with keyboard and screen reader,high,form errors,references/accessibility.md,*
+dynamic-type,Dynamic type,mobile layout survives larger text settings,fixed-height labels clip and hide information,test large accessibility font sizes,high,text scaling,references/accessibility.md,swiftui
+color-semantics,Color semantics,do not encode state only by red or green,color vision differences hide meaning,check labels icons or patterns accompany color,medium,color state,references/accessibility.md,*
+reading-order,Reading order,visual and semantic order match,mismatched order makes interfaces confusing,navigate headings and focus sequentially,high,reading order,references/accessibility.md,*
+keyboard,Keyboard,focused input and submit action remain visible above software keyboard,occluded controls block task completion,open keyboard on narrow viewport and submit,high,keyboard form,references/accessibility.md,react-native
+reflow,Reflow,content reflows at zoom or narrow width without loss,overflow forces users to guess or scroll sideways,check 200 percent zoom and narrow viewport,high,reflow responsive,references/responsive.md,*
+status,Status,dynamic updates are announced or otherwise discoverable,async success and errors can be missed,trigger update and inspect live region or semantics,high,live status,references/accessibility.md,*
+pointer-alternative,Pointer alternative,drag or hover behavior has keyboard and touch alternative,pointer-only actions exclude users,complete action without hover or drag,high,input modality,references/interaction.md,*
+forms,Form,labels instructions autocomplete and errors are associated with controls,ambiguous forms increase input errors,inspect label relationship and field order,high,forms input,references/accessibility.md,*

package/skills/showdar-design/data/colors.csv

@@ -0,0 +1,13 @@
+id,context,primary,secondary,accent,background,surface,text,muted,border,success,warning,danger,notes,reference
+developer-tool,Developer Tool,#111827,#374151,#2563EB,#0B1020,#111827,#F9FAFB,#9CA3AF,#273244,#22C55E,#F59E0B,#EF4444,dark technical base; accent only for actions and selection,references/accessibility.md
+fintech-light,Fintech Light,#0F172A,#334155,#0F766E,#F8FAFC,#FFFFFF,#0F172A,#64748B,#E2E8F0,#15803D,#B45309,#B91C1C,trust-first; reserve red and green for financial semantics,references/accessibility.md
+wedding-editorial,Wedding Editorial,#2C2A2A,#766B66,#9A6B5B,#FBF8F4,#FFFDFC,#2C2A2A,#81756F,#E8DED7,#4F7A5A,#A56B2A,#A64747,warm neutral editorial; avoid saturated UI colors,references/anti-ai-ui.md
+healthcare-calm,Healthcare Calm,#164E63,#0E7490,#0891B2,#F0FDFA,#FFFFFF,#134E4A,#64748B,#CCFBF1,#15803D,#B45309,#B91C1C,calm cyan teal with readable text,references/accessibility.md
+ecommerce-premium,E-commerce Premium,#18181B,#52525B,#A16207,#FAFAFA,#FFFFFF,#18181B,#71717A,#E4E4E7,#15803D,#B45309,#B91C1C,neutral product-first palette with restrained gold,references/visual-hierarchy.md
+education,Education,#1E3A8A,#2563EB,#F59E0B,#F8FAFC,#FFFFFF,#172554,#64748B,#DBEAFE,#16A34A,#D97706,#DC2626,friendly but structured; content remains dominant,references/accessibility.md
+ai-neutral,AI Assistant,#171717,#404040,#2563EB,#0A0A0A,#171717,#FAFAFA,#A3A3A3,#2F2F2F,#22C55E,#F59E0B,#EF4444,neutral credible base; no purple-by-default decoration,references/anti-ai-ui.md
+portfolio-cream,Portfolio,#111111,#525252,#D97706,#F5F3EE,#FFFEFA,#111111,#737373,#DDD8CF,#2E7D32,#A16207,#B91C1C,editorial cream base with one signature accent,references/visual-hierarchy.md
+admin-blue,Admin Blue,#172554,#334155,#2563EB,#F8FAFC,#FFFFFF,#0F172A,#64748B,#CBD5E1,#15803D,#B45309,#B91C1C,semantic colors stay distinct from selection blue,references/accessibility.md
+content-warm,Content Warm,#292524,#57534E,#C2410C,#FFF7ED,#FFFFFF,#292524,#78716C,#E7E5E4,#3F6212,#A16207,#B91C1C,warm reading surface with controlled emphasis,references/layout.md
+dark-surface,Dark Surface,#E5E7EB,#9CA3AF,#60A5FA,#030712,#111827,#F9FAFB,#9CA3AF,#374151,#4ADE80,#FBBF24,#F87171,verify contrast for muted text and disabled controls,references/accessibility.md
+event-sage,Event Sage,#243B35,#52675D,#B7795B,#F8F6F1,#FFFEFA,#24312D,#738078,#E0DED6,#3F6B4F,#A86D2E,#A84A4A,occasion-led palette with low saturation,references/anti-ai-ui.md

package/skills/showdar-design/data/components.csv

@@ -0,0 +1,20 @@
+id,component,default_guidance,states,mobile_notes,desktop_notes,avoid,tags,reference
+button,Button,one clear primary action per local decision area,default; hover; pressed; focus; disabled; loading,keep hit area generous,use shortcut only when action discoverability remains,multiple primary buttons with same weight,actions hierarchy,references/interaction.md
+text-field,Text field,persistent label with nearby help or error text,empty; focus; filled; error; disabled,use correct keyboard and content type,show validation without disrupting typing,placeholder as only label,forms validation,references/accessibility.md
+card,Card,use only when grouping has semantic value,default; selected; interactive if applicable,avoid nested cards,use alignment and whitespace before containers,wrapping every section in a card,grouping surfaces,references/anti-ai-ui.md
+navigation,Navigation,make current location and next destination obvious,default; active; focus,respect platform back behavior,use persistent context for deep work,inventing nonstandard back semantics,navigation orientation,references/layout.md
+dialog,Dialog,use for short blocking decisions,open; focus trap; confirm; cancel,prefer sheet when platform appropriate,keep content short and return focus,long forms in small modal,blocking decision,references/interaction.md
+table,Table,align comparable data and preserve headers,loading; empty; sort; selected,replace with task-focused list on narrow screens,allow column density and keyboard navigation,horizontal squeeze with unreadable columns,data table,references/layout.md
+tabs,Tabs,use for peer views not sequential steps,active; focus; disabled,keep labels short and visible,do not hide primary hierarchy behind tabs,using tabs as hidden navigation,peer views,references/layout.md
+toast,Toast,use for non-blocking transient confirmation,success; warning; error,critical errors persist elsewhere,provide live announcement and dismiss,putting actionable critical errors only in toast,feedback transient,references/interaction.md
+empty-state,Empty state,explain state and next useful action,first-use; filtered-empty; error-empty,keep action reachable,include reset filters and import affordance,generic illustration with no recovery action,empty recovery,references/interaction.md
+skeleton,Skeleton,match eventual content geometry,loading,avoid long animation cost,do not use for instant content,random gray boxes unrelated to layout,loading geometry,references/interaction.md
+bottom-sheet,Bottom sheet,use for contextual mobile actions,peek; expanded; dismissed,support drag back and keyboard safely,prefer dialog or side panel on desktop,desktop modal copied directly,mobile actions,references/responsive.md
+search,Search,keep query visible and results state explicit,idle; typing; loading; no-results; error,debounce expensive remote search,show keyboard shortcut and result count,clearing query unexpectedly,search discovery,references/interaction.md
+select,Select,use native select when option set is simple,closed; open; selected; error; disabled,use platform picker for mobile,searchable menu for large option sets,custom menu for a native problem,forms choice,references/accessibility.md
+date-picker,Date picker,match input to date precision and locale,empty; open; invalid; selected; disabled,use platform calendar when it improves entry,allow typed input and timezone clarity,forcing a complex calendar for a simple date,date input,references/accessibility.md
+pagination,Pagination,make range and next action explicit,first; middle; last; loading,prefer load-more when task is continuous,retain filters and scroll context,number links with no current state,data navigation,references/layout.md
+tooltip,Tooltip,use for supplementary explanation not required content,hidden; visible; focus; dismissed,avoid hover-only meaning,keyboard focus and delay should be deterministic,putting essential instructions in tooltip,help affordance,references/accessibility.md
+banner,Banner,use for persistent context-changing status,info; warning; error; dismissible,avoid consuming first viewport,provide clear action and scope,using toast for outage or required action,persistent status,references/interaction.md
+avatar,Avatar,show identity only when it supports recognition,loaded; fallback; unavailable; selected,provide name in semantics,avoid oversized decorative circles,initials with no accessible name,identity,references/accessibility.md
+chart,Chart,show title units source and takeaway,loading; empty; error; interactive; selected,provide concise summary before dense visual,allow keyboard and data table alternative,chart without labels or explanation,data visualization,references/accessibility.md

package/skills/showdar-design/data/index.json

@@ -0,0 +1,25 @@
+{
+  "version": 1,
+  "skill": "showdar-design",
+  "datasets": [
+    {"file":"data/products.csv","idField":"id","requiredColumns":["id","product","goals","density","tone","layout","avoid","tags","reference"],"searchableFields":["product","goals","tone","layout","avoid","tags"],"filterFields":["density"],"reference":"references/visual-hierarchy.md"},
+    {"file":"data/styles.csv","idField":"id","requiredColumns":["id","style","traits","best_for","avoid","keywords","reference"],"searchableFields":["style","traits","best_for","avoid","keywords"],"filterFields":[],"reference":"references/anti-ai-ui.md"},
+    {"file":"data/colors.csv","idField":"id","requiredColumns":["id","context","primary","secondary","accent","background","surface","text","muted","border","success","warning","danger","notes","reference"],"searchableFields":["context","notes"],"filterFields":["context"],"reference":"references/accessibility.md"},
+    {"file":"data/typography.csv","idField":"id","requiredColumns":["id","use_case","heading_direction","body_direction","mono_use","scale","line_height","notes","reference"],"searchableFields":["use_case","heading_direction","body_direction","mono_use","notes"],"filterFields":["use_case"],"reference":"references/visual-hierarchy.md"},
+    {"file":"data/motion.csv","idField":"id","requiredColumns":["id","pattern","duration_ms","easing","use","avoid","reduced_motion","tags","reference","stack"],"searchableFields":["pattern","use","avoid","reduced_motion","tags"],"filterFields":["stack"],"reference":"references/interaction.md"},
+    {"file":"data/accessibility.csv","idField":"id","requiredColumns":["id","area","rule","why","check","severity","tags","reference","stack"],"searchableFields":["area","rule","why","check","tags"],"filterFields":["area","severity","stack"],"reference":"references/accessibility.md"},
+    {"file":"data/components.csv","idField":"id","requiredColumns":["id","component","default_guidance","states","mobile_notes","desktop_notes","avoid","tags","reference"],"searchableFields":["component","default_guidance","states","mobile_notes","desktop_notes","avoid","tags"],"filterFields":["component"],"reference":"references/interaction.md"},
+    {"file":"data/ui-patterns.csv","idField":"id","requiredColumns":["id","pattern","when","structure","verification","anti_pattern","tags","reference","stack"],"searchableFields":["pattern","when","structure","verification","anti_pattern","tags"],"filterFields":["stack"],"reference":"references/layout.md"},
+    {"file":"data/stacks/compose.csv","idField":"id","requiredColumns":["id","category","stack","guideline","do","dont","severity","tags","reference"],"searchableFields":["category","guideline","do","dont","tags"],"filterFields":["category","stack","severity"],"reference":"stacks/jetpack-compose.md"},
+    {"file":"data/stacks/flutter.csv","idField":"id","requiredColumns":["id","category","stack","guideline","do","dont","severity","tags","reference"],"searchableFields":["category","guideline","do","dont","tags"],"filterFields":["category","stack","severity"],"reference":"stacks/flutter.md"},
+    {"file":"data/stacks/nextjs.csv","idField":"id","requiredColumns":["id","category","stack","guideline","do","dont","severity","tags","reference"],"searchableFields":["category","guideline","do","dont","tags"],"filterFields":["category","stack","severity"],"reference":"stacks/nextjs.md"},
+    {"file":"data/stacks/react-native.csv","idField":"id","requiredColumns":["id","category","stack","guideline","do","dont","severity","tags","reference"],"searchableFields":["category","guideline","do","dont","tags"],"filterFields":["category","stack","severity"],"reference":"stacks/react-native.md"},
+    {"file":"data/stacks/react.csv","idField":"id","requiredColumns":["id","category","stack","guideline","do","dont","severity","tags","reference"],"searchableFields":["category","guideline","do","dont","tags"],"filterFields":["category","stack","severity"],"reference":"stacks/react.md"},
+    {"file":"data/stacks/swiftui.csv","idField":"id","requiredColumns":["id","category","stack","guideline","do","dont","severity","tags","reference"],"searchableFields":["category","guideline","do","dont","tags"],"filterFields":["category","stack","severity"],"reference":"stacks/swiftui.md"},
+    {"file":"data/stacks/html-tailwind.csv","idField":"id","requiredColumns":["id","category","stack","guideline","do","dont","severity","tags","reference"],"searchableFields":["category","guideline","do","dont","tags"],"filterFields":["category","stack","severity"],"reference":"stacks/html-tailwind.md"},
+    {"file":"data/stacks/vue.csv","idField":"id","requiredColumns":["id","category","stack","guideline","do","dont","severity","tags","reference"],"searchableFields":["category","guideline","do","dont","tags"],"filterFields":["category","stack","severity"],"reference":"stacks/vue.md"},
+    {"file":"data/stacks/nuxt.csv","idField":"id","requiredColumns":["id","category","stack","guideline","do","dont","severity","tags","reference"],"searchableFields":["category","guideline","do","dont","tags"],"filterFields":["category","stack","severity"],"reference":"stacks/nuxt.md"},
+    {"file":"data/stacks/svelte.csv","idField":"id","requiredColumns":["id","category","stack","guideline","do","dont","severity","tags","reference"],"searchableFields":["category","guideline","do","dont","tags"],"filterFields":["category","stack","severity"],"reference":"stacks/svelte.md"},
+    {"file":"data/stacks/tauri.csv","idField":"id","requiredColumns":["id","category","stack","guideline","do","dont","severity","tags","reference"],"searchableFields":["category","guideline","do","dont","tags"],"filterFields":["category","stack","severity"],"reference":"stacks/tauri.md"}
+  ]
+}

package/skills/showdar-design/data/motion.csv

@@ -0,0 +1,13 @@
+id,pattern,duration_ms,easing,use,avoid,reduced_motion,tags,reference,stack
+tap-feedback,Tap feedback,80-140,ease-out,pressed state and button confirmation,scale below 0.94; springy critical actions,retain color or opacity feedback,tap feedback interaction,references/interaction.md,*
+panel-enter,Panel enter,180-260,"cubic-bezier(.2,.8,.2,1)",drawer inspector sheet,large bounce or 500ms plus,fade or instant with focus preserved,panel transition,references/interaction.md,*
+section-reveal,Section reveal,220-360,ease-out,editorial landing content,animating every card independently,disable translation; preserve visibility,editorial reveal,references/anti-ai-ui.md,*
+list-change,List item change,140-220,ease-in-out,reorder or state update,layout thrash; long stagger,instant layout change,list feedback,references/interaction.md,*
+modal,Modal,160-240,ease-out,dialog and confirmation,dramatic zoom from center,fade with focus order,modal transition,references/accessibility.md,*
+navigation,Navigation,180-300,platform appropriate,mobile route transition,custom gesture-conflicting animation,use platform transition or instant,navigation motion,references/interaction.md,react-native
+loading-skeleton,Loading skeleton,900-1400,linear,content placeholder shimmer,high contrast flashing,static skeleton with no movement,loading motion,references/accessibility.md,*
+success-feedback,Success feedback,180-320,ease-out,small confirmation,confetti for routine actions,static icon and text,success feedback,references/interaction.md,*
+drag-reorder,Drag reorder,120-220,ease-out,show pickup and drop position,decorative path animation,clear position and final order,drag interaction,references/interaction.md,react
+tooltip,Tooltip,100-160,ease-out,explain unfamiliar control,tooltip for required content,show immediately on focus,tooltip accessibility,references/accessibility.md,*
+progress,Progress,200-400,ease-in-out,show meaningful progress,indeterminate animation for known progress,static percentage or step label,progress feedback,references/interaction.md,*
+page-shift,Page shift,180-280,ease-out,maintain spatial continuity when panel changes,move unrelated content,instant stable layout,page continuity,references/layout.md,*

package/skills/showdar-design/data/products.csv

@@ -0,0 +1,19 @@
+id,product,goals,density,tone,layout,avoid,tags,reference
+saas-dashboard,SaaS Dashboard,scan metrics; decide; act,medium-high,professional restrained,sidebar + workspace + decision metrics,oversized hero cards; vanity metrics,saas dashboard b2b metrics,references/visual-hierarchy.md
+developer-tool,Developer Tool,understand state; execute precise actions,high,technical focused,sidebar/tree + main workspace + inspector,marketing cards; decorative whitespace,developer tools dense technical,references/anti-ai-ui.md
+fintech-app,Fintech App,build trust; show money; complete safe action,medium,calm trustworthy,summary + primary action + transaction history,gamified neon; ambiguous money formatting,fintech banking trust,references/accessibility.md
+ecommerce,E-commerce,discover; compare; convert,medium,visual commercial,search + categories + product grid + cart,hidden pricing; weak product hierarchy,ecommerce retail conversion,references/layout.md
+wedding-invitation,Wedding Invitation,tell story; communicate event; RSVP,low-medium,editorial romantic elegant,immersive hero + narrative + details + RSVP,dashboard cards; generic SaaS styling,wedding event editorial,references/anti-ai-ui.md
+portfolio,Portfolio,show craft; establish identity; prove outcomes,low-medium,editorial expressive,project-led narrative + case studies,template feature grids; skill bars,portfolio creative case-study,references/visual-hierarchy.md
+healthcare-app,Healthcare App,reduce anxiety; enable safe action; explain next step,medium,calm clear reassuring,task-first home + appointment/content flow,dense jargon; alarming color overuse,health medical calm,references/accessibility.md
+education-app,Education App,guide progress; sustain attention; practice,medium,friendly structured,learning path + focused lesson + progress,constant badges; noisy gamification,education learning progress,references/layout.md
+social-app,Social App,create; connect; consume,medium-high,human lively,feed + creation affordance + profile,too many competing CTAs,social feed community creator,references/interaction.md
+ai-assistant,AI Assistant,converse; inspect output; control context,medium-high,quiet intelligent,conversation + context/tools panel,purple gradients; fake intelligence decoration,ai assistant chat context,references/anti-ai-ui.md
+landing-page,Landing Page,explain value; prove credibility; convert,low-medium,confident editorial,hero + proof + product story + CTA,feature-card soup; repeated CTAs,landing conversion proof,references/visual-hierarchy.md
+admin-console,Admin Console,find records; apply policy; audit changes,high,utilitarian precise,filters + table + detail drawer,decorative dashboard tiles; hidden bulk actions,admin operations table,references/layout.md
+content-media,Content and Media,discover; read/watch; resume,medium,immersive editorial,feed + detail + related content + player,autoplay overload; dense metadata everywhere,media content editorial,references/interaction.md
+mobile-utility,Mobile Utility,complete one job quickly; recover from interruption,medium,direct native,single primary flow + settings/history,desktop layout squeezed into phone,mobile utility native,references/responsive.md
+desktop-workspace,Desktop Workspace,manage many objects; preserve context; use shortcuts,high,focused productive,master-detail + command surface + inspector,phone-style full-screen routes; hover-only actions,desktop workspace master-detail,references/layout.md
+event-site,Event Site,build anticipation; provide logistics; collect response,low-medium,warm occasion-led,hero + schedule + map/details + RSVP,overloaded registration dashboard,event event-site narrative,references/anti-ai-ui.md
+commerce-checkout,Checkout,review totals; pay confidently; recover errors,medium,clear trustworthy,step summary + payment + confirmation,hidden fees; ambiguous disabled states,checkout payment trust,references/accessibility.md
+developer-docs,Developer Documentation,find answer; understand example; copy safely,medium,quiet technical,search + nav tree + readable article + code,wall of prose; code without context,docs search code,references/visual-hierarchy.md

package/skills/showdar-design/data/stacks/compose.csv

@@ -0,0 +1,9 @@
+id,category,stack,guideline,do,dont,severity,tags,reference
+compose-state,state,compose,hoist state to the lowest common owner,pass state and events down,mutable duplicated state across composables,high,state hoisting,references/interaction.md
+compose-recomposition,performance,compose,keep inputs stable and work out of composition,use remember or derivedStateOf only when semantics fit,premature remember everywhere,medium,recomposition,references/interaction.md
+compose-lists,lists,compose,use LazyColumn or LazyRow for long content,provide stable keys for mutable items,Column for unbounded lists,high,lazy list,references/interaction.md
+compose-effects,effects,compose,use effect APIs according to lifecycle semantics,keep keys accurate,launching work directly during composition,high,effects lifecycle,references/interaction.md
+compose-semantics,accessibility,compose,provide semantics for custom controls,use content descriptions and roles intentionally,decorative semantics polluting tree,high,semantics,references/accessibility.md
+compose-adaptive,layout,compose,design with window size and insets,use adaptive layout instead of device-name checks,phone tablet branching by model,medium,adaptive layout,references/responsive.md
+compose-stability,performance,compose,avoid unstable collections crossing recomposition,use immutable or stable models where measured,optimizing annotations without evidence,medium,stability,references/interaction.md
+compose-navigation,navigation,compose,model navigation state from destination data,keep routes serializable and state-restorable,scattered imperative navigation,medium,navigation,references/layout.md

package/skills/showdar-design/data/stacks/flutter.csv

@@ -0,0 +1,9 @@
+id,category,stack,guideline,do,dont,severity,tags,reference
+flutter-rebuilds,rebuilds,flutter,keep rebuild scope proportional to changing state,use selectors buildWhen or listenables where measured,rebuild entire screen for one field,medium,rebuild performance,references/interaction.md
+flutter-lists,lists,flutter,use lazy builders for long collections,ListView.builder or SliverList for dynamic content,Column with hundreds of children,high,lazy list,references/interaction.md
+flutter-async,async,flutter,check lifecycle before using context after awaits,guard mounted and context validity,navigate or show snackbar after dispose,high,async lifecycle,references/interaction.md
+flutter-layout,layout,flutter,use constraints deliberately,prefer flexible layout over fixed device dimensions,hardcoded screen widths,high,constraints,references/responsive.md
+flutter-state,state,flutter,keep source of truth unambiguous,separate ephemeral widget state from domain state,duplicate state across widget and bloc,high,state ownership,references/interaction.md
+flutter-accessibility,accessibility,flutter,provide Semantics where custom visuals hide meaning,test text scaling and semantics order,fixed-height text that clips,high,semantics text-scale,references/accessibility.md
+flutter-disposal,lifecycle,flutter,dispose controllers streams and focus resources at owner,use StatefulWidget dispose or provider ownership,leaked controller listeners,high,resource lifecycle,references/interaction.md
+flutter-platform,platform,flutter,treat platform channels as typed boundaries,handle platform error and unavailable capability,assume every platform method exists,high,platform channel,references/architecture.md

package/skills/showdar-design/data/stacks/html-tailwind.csv

@@ -0,0 +1,9 @@
+id,category,stack,guideline,do,dont,severity,tags,reference
+tailwind-tokens,system,html-tailwind,define semantic tokens before utility composition,use CSS variables for theme roles,scatter arbitrary colors across markup,high,design tokens,references/visual-hierarchy.md
+tailwind-semantics,accessibility,html-tailwind,use native HTML semantics and focus styles,pair utility classes with button input label roles,style divs into controls,high,semantic html,references/accessibility.md
+tailwind-responsive,responsive,html-tailwind,design breakpoint changes as priority and reflow,use container queries or purposeful breakpoints,shrink every column proportionally,high,responsive,references/responsive.md
+tailwind-states,interaction,html-tailwind,style complete interaction states,define hover focus active disabled and invalid,ship default-only controls,high,interaction states,references/interaction.md
+tailwind-content,layout,html-tailwind,let real content determine min and max sizes,test long labels and localization,hardcode one screenshot width,medium,content sizing,references/layout.md
+tailwind-dark,dark-mode,html-tailwind,treat dark theme as semantic surface remapping,verify contrast and elevation,simply invert colors,medium,dark mode,references/accessibility.md
+tailwind-motion,motion,html-tailwind,use transition for continuity or feedback,respect prefers-reduced-motion,animate every utility class,medium,css motion,references/interaction.md
+tailwind-components,maintainability,html-tailwind,extract components around repeated behavior not class count,keep variants named and local,create mega component for all variants,medium,component boundaries,references/anti-ai-ui.md

package/skills/showdar-design/data/stacks/nextjs.csv

@@ -0,0 +1,9 @@
+id,category,stack,guideline,do,dont,severity,tags,reference
+next-boundaries,boundaries,nextjs,choose server and client boundary intentionally,keep client components narrow when browser state is needed,mark entire route tree use client,high,server client,references/architecture.md
+next-data,data,nextjs,co-locate data fetching with ownership and cache semantics,define freshness and revalidation deliberately,assume cache behavior from framework version,high,cache data,references/interaction.md
+next-images,media,nextjs,use optimized responsive image behavior,provide dimensions sizes and meaningful alt text,ship huge unoptimized hero images,medium,images performance,references/accessibility.md
+next-routing,routing,nextjs,model route loading and error states explicitly,use route-level loading and error when meaningful,duplicate spinner logic in every component,medium,routing states,references/interaction.md
+next-client-cost,performance,nextjs,watch JavaScript shipped to client,prefer server rendering for static or data presentation,import heavy client libraries for decoration,high,bundle performance,references/visual-hierarchy.md
+next-metadata,content,nextjs,treat title description and social metadata as product surface,generate metadata from route content,use generic metadata on every page,low,metadata,references/visual-hierarchy.md
+next-forms,forms,nextjs,keep server action or API validation authoritative,show pending and field errors near control,trust client-only validation,high,forms validation,references/accessibility.md
+next-streaming,loading,nextjs,stream only when partial content is useful,keep skeleton geometry aligned with final content,add streaming to hide slow ownership,medium,streaming loading,references/interaction.md

package/skills/showdar-design/data/stacks/nuxt.csv

@@ -0,0 +1,9 @@
+id,category,stack,guideline,do,dont,severity,tags,reference
+nuxt-rendering,boundaries,nuxt,choose server client and island boundaries intentionally,keep browser-only code in client boundary,read browser APIs during server render,high,ssr client,references/architecture.md
+nuxt-data,data,nuxt,define fetch ownership and freshness,use keyed data and explicit invalidation,duplicate fetch in page and component,high,data cache,references/interaction.md
+nuxt-routing,routing,nuxt,model route middleware and error states,keep auth policy server authoritative,guard only in client navigation,high,routing auth,references/security.md
+nuxt-seo,content,nuxt,derive metadata from route content,set canonical and social metadata deliberately,copy generic title to every route,medium,seo metadata,references/visual-hierarchy.md
+nuxt-hydration,rendering,nuxt,keep initial server and client output deterministic,defer time random and browser-only values,hide hydration warnings,high,hydration,references/interaction.md
+nuxt-images,media,nuxt,serve responsive images with intrinsic dimensions,provide alt and loading intent,ship unbounded original images,medium,image performance,references/accessibility.md
+nuxt-server,security,nuxt,validate server routes independently of UI,constrain input and secret access,trust client middleware as authorization,high,server security,references/security.md
+nuxt-error,errors,nuxt,make route and server error recovery visible,provide retry or safe navigation,render empty page for all failures,high,error recovery,references/interaction.md

package/skills/showdar-design/data/stacks/react-native.csv

@@ -0,0 +1,9 @@
+id,category,stack,guideline,do,dont,severity,tags,reference
+rn-lists,lists,react-native,use virtualized lists for long or dynamic collections,stable keys and measured item strategy,render long datasets in ScrollView,high,virtualized list,references/interaction.md
+rn-touch,touch,react-native,make hit targets ergonomic,use Pressable and hitSlop appropriately,tiny icon-only touch area,high,touch targets,references/accessibility.md
+rn-navigation,navigation,react-native,keep params small and serializable,pass identifiers and read owning state,pass large mutable objects between screens,medium,navigation params,references/architecture.md
+rn-js-thread,performance,react-native,protect JS thread from heavy synchronous work,move parsing or computation off hot interaction path,parse large JSON during gesture or scroll,high,js thread,references/interaction.md
+rn-images,media,react-native,control decode size and cache behavior,request resolution appropriate for display,use full-resolution images in list cells,high,image performance,references/interaction.md
+rn-accessibility,accessibility,react-native,set role label and state for custom controls,test screen reader focus order,use visual-only touchables,high,accessibility,references/accessibility.md
+rn-keyboard,forms,react-native,design forms around keyboard and safe areas,keep focused field and action visible,fixed bottom CTA hidden by keyboard,high,keyboard safe-area,references/responsive.md
+rn-lifecycle,lifecycle,react-native,unbind subscriptions and cancel screen-owned work,make focus and navigation ownership explicit,set state after unmount,high,lifecycle,references/interaction.md

package/skills/showdar-design/data/stacks/react.csv

@@ -0,0 +1,9 @@
+id,category,stack,guideline,do,dont,severity,tags,reference
+react-state,state,react,prefer composition and clear state ownership,keep derived UI state derived,mirror props into state,high,state ownership,references/architecture.md
+react-rendering,performance,react,stabilize expensive subtree boundaries only after profiling,use memoization for measured churn,wrap every component in memo,medium,memoization,references/interaction.md
+react-forms,forms,react,keep validation ownership explicit,use schema or form library only when complexity justifies it,scatter per-field side effects,medium,forms validation,references/accessibility.md
+react-semantics,accessibility,react,use semantic HTML first,button means button and label controls,clickable div with manual keyboard patches,high,semantic html,references/accessibility.md
+react-effects,effects,react,use effects to synchronize external systems,keep pure derivation out of effects,effect chains that compute render state,high,effect ownership,references/interaction.md
+react-keys,lists,react,use stable domain keys,keys survive reorder and filter,array index key for mutable list,high,stable keys,references/interaction.md
+react-context,architecture,react,keep context scope aligned to consumers,split high-churn context when measured,put all app state in one provider,medium,context state,references/architecture.md
+react-errors,errors,react,provide error boundary where UI subtree can recover,show retry or safe fallback with cause context,blank screen or catch everything globally,high,error boundary,references/interaction.md

package/skills/showdar-design/data/stacks/svelte.csv

@@ -0,0 +1,9 @@
+id,category,stack,guideline,do,dont,severity,tags,reference
+svelte-state,state,svelte,keep reactive source of truth explicit,derive values rather than duplicate them,mutate unrelated module state from components,high,state ownership,references/architecture.md
+svelte-effects,effects,svelte,use effects for external synchronization,clean up subscriptions and timers,derive render values in effects,high,effect lifecycle,references/interaction.md
+svelte-actions,interaction,svelte,keep DOM actions focused and disposable,return destroy and update behavior,hide business policy in reusable action,medium,actions,references/architecture.md
+svelte-a11y,accessibility,svelte,use semantic elements and compiler warnings as baseline,verify name focus and keyboard behavior,suppress warnings without behavior proof,high,semantics,references/accessibility.md
+svelte-lists,lists,svelte,key each blocks by stable domain identity,virtualize large collections when needed,use index key for mutable data,high,lists,references/interaction.md
+svelte-async,async,svelte,represent pending error and success explicitly,abort stale requests or compare request version,let late promise overwrite state,high,async race,references/interaction.md
+svelte-layout,responsive,svelte,let content and CSS layout handle reflow,use CSS media/container queries,branch on viewport in business logic,medium,responsive,references/responsive.md
+svelte-boundary,architecture,svelte,keep server and client data boundaries visible,validate actions on server,trust browser action as authorization,high,server boundary,references/security.md

package/skills/showdar-design/data/stacks/swiftui.csv

@@ -0,0 +1,9 @@
+id,category,stack,guideline,do,dont,severity,tags,reference
+swiftui-state,state,swiftui,use the narrowest state ownership wrapper,choose State Binding Observable based on ownership,duplicate model state in multiple wrappers,high,state ownership,references/architecture.md
+swiftui-identity,lists,swiftui,keep list identity stable,use domain identifiers,generate random UUID during render,high,list identity,references/interaction.md
+swiftui-navigation,navigation,swiftui,model navigation state intentionally,keep destinations data-driven where appropriate,scatter imperative navigation effects,medium,navigation,references/layout.md
+swiftui-layout,layout,swiftui,respect Dynamic Type and safe areas,let content drive size before fixed frames,fixed frames clip accessibility text,high,dynamic type,references/accessibility.md
+swiftui-performance,performance,swiftui,keep expensive work out of body,precompute or cache heavy transformations,parse or decode inside body,high,body performance,references/interaction.md
+swiftui-accessibility,accessibility,swiftui,use labels values hints and native controls,combine semantics intentionally,image-only actions without labels,high,semantics,references/accessibility.md
+swiftui-async,async,swiftui,scope tasks to view lifetime and cancellation,check task cancellation before side effects,unowned async task updates view,high,task cancellation,references/interaction.md
+swiftui-forms,forms,swiftui,use native controls with explicit validation,bind errors and focus state to fields,hide error in alert only,medium,forms,references/accessibility.md

package/skills/showdar-design/data/stacks/tauri.csv

@@ -0,0 +1,9 @@
+id,category,stack,guideline,do,dont,severity,tags,reference
+tauri-ipc,security,tauri,treat commands as a typed trust boundary,validate command input and return safe errors,trust arbitrary frontend payloads,high,ipc validation,references/security.md
+tauri-capabilities,security,tauri,grant least capability to each window,review capability files with feature changes,enable broad filesystem or shell access,critical,capabilities permissions,references/security.md
+tauri-state,state,tauri,keep authoritative state on the owning side,serialize small DTOs across IPC,share mutable frontend Rust state implicitly,high,state boundary,references/architecture.md
+tauri-events,async,tauri,scope listeners and remove them with window lifetime,track event owner and cancellation,register listeners on every render,high,event lifecycle,references/interaction.md
+tauri-performance,performance,tauri,avoid moving large payloads across IPC,query or stream bounded data,send full database or file contents repeatedly,medium,ipc performance,references/interaction.md
+tauri-window,interaction,tauri,make window state and keyboard behavior deliberate,restore focus and size safely,assume browser defaults cover desktop,medium,desktop window,references/layout.md
+tauri-update,release,tauri,verify updater signatures and compatibility before rollout,retain prior artifact and rollback path,ship unsigned or untested update,critical,updater release,references/release-readiness.md
+tauri-platform,platform,tauri,verify OS-specific paths separately,build and smoke test each target,assume macOS behavior equals Windows or Linux,high,desktop platform,references/interaction.md

package/skills/showdar-design/data/stacks/vue.csv

@@ -0,0 +1,9 @@
+id,category,stack,guideline,do,dont,severity,tags,reference
+vue-state,state,vue,keep source of truth explicit,derive computed state from one owner,mirror props through watchers,high,state ownership,references/architecture.md
+vue-reactivity,performance,vue,understand reactive identity before optimizing,use computed and shallow boundaries where measured,deep reactive objects for everything,medium,reactivity,references/interaction.md
+vue-forms,forms,vue,keep validation and submission ownership explicit,show field and form errors with labels,validate only on submit with no field context,high,forms validation,references/accessibility.md
+vue-components,components,vue,compose around stable responsibilities,keep slots and props clear,component with unrelated modes,medium,composition,references/architecture.md
+vue-accessibility,accessibility,vue,use semantic elements and focus management,forward labels and keyboard behavior,custom clickable containers,high,semantics,references/accessibility.md
+vue-lists,lists,vue,use stable keys and virtualize large collections,track by domain identity,use array index for mutable rows,high,lists,references/interaction.md
+vue-async,async,vue,abort or ignore stale async work,bind loading error and cancellation state,let late promise overwrite newer state,high,async race,references/interaction.md
+vue-routing,routing,vue,make route and data loading states explicit,restore focus and document title,hide route failure behind spinner,medium,routing,references/layout.md

package/skills/showdar-design/data/styles.csv

@@ -0,0 +1,13 @@
+id,style,traits,best_for,avoid,keywords,reference
+quiet-technical,Quiet Technical,neutral surfaces; mono accents; dense hierarchy,developer tools; admin; AI tools,decorative gradients; giant radii,technical restrained dense monospace,references/anti-ai-ui.md
+editorial-minimal,Editorial Minimal,large type; asymmetric rhythm; strong whitespace,portfolio; wedding; premium landing,card grids; excessive badges,editorial elegant minimal typographic,references/visual-hierarchy.md
+soft-utility,Soft Utility,subtle surfaces; rounded controls; warm neutral tone,consumer utilities; health; education,toy shadows; low contrast,soft calm utility rounded,references/layout.md
+data-dense,Data Dense,compact spacing; aligned numbers; restrained color,finance; analytics; operations,oversized tiles; visual noise,dense data dashboard compact,references/visual-hierarchy.md
+native-mobile,Native Mobile,platform conventions; clear hierarchy; thumb-friendly controls,mobile apps,hover-dependent UI; tiny targets,mobile native touch ergonomic,references/responsive.md
+high-contrast-editorial,High Contrast Editorial,bold type; black/white base; one accent,creative sites; launches,many accents; weak hierarchy,bold editorial contrast,references/anti-ai-ui.md
+warm-organic,Warm Organic,earthy palette; tactile imagery; soft typography,food; wellness; events,tech neon; clinical grids,organic warm tactile,references/anti-ai-ui.md
+glass-accent,Glass Accent,limited translucency over a strong base,media; premium experiences,glass on every surface; poor contrast,glass translucent premium,references/accessibility.md
+monochrome-pro,Monochrome Pro,grayscale structure; one semantic accent,B2B; developer; productivity,rainbow status color,professional monochrome restrained,references/anti-ai-ui.md
+playful-geometric,Playful Geometric,simple shapes; bright accents; expressive illustration,education; youth products,enterprise finance; critical workflows,playful geometric colorful,references/interaction.md
+neo-brutalist,Neo Brutalist,hard edges; explicit borders; high contrast; deliberate raw type,launches; creative tools; editorial campaigns,random roughness; inaccessible contrast,brutalist bold border,references/anti-ai-ui.md
+quiet-luxury,Quiet Luxury,restrained contrast; generous rhythm; material detail,premium commerce; event; hospitality,thin unreadable type; ornament everywhere,luxury restrained premium,references/visual-hierarchy.md

package/skills/showdar-design/data/typography.csv

@@ -0,0 +1,13 @@
+id,use_case,heading_direction,body_direction,mono_use,scale,line_height,notes,reference
+developer-tool,Developer Tool,compact grotesk or system sans,system sans,code; ids; metrics,1.125-1.25 modular,1.35 headings; 1.5 body,prioritize scan speed and alignment,references/visual-hierarchy.md
+editorial,Editorial,high-contrast serif or distinctive display,neutral sans,rare,1.25-1.333 modular,0.95 display; 1.6 body,let type carry identity instead of decoration,references/anti-ai-ui.md
+mobile-utility,Mobile Utility,platform or system sans,platform or system sans,technical values only,1.125 modular,1.25 headings; 1.45 body,respect Dynamic Type or equivalent scaling,references/accessibility.md
+dashboard,Dashboard,neutral sans semibold,neutral sans,tabular numbers,1.125 modular,1.2 headings; 1.4 body,align comparable metrics and units,references/visual-hierarchy.md
+fintech,Fintech,restrained sans,high-legibility sans,account ids; reference codes,1.125-1.2 modular,1.25 headings; 1.5 body,money values need predictable weight and numeric alignment,references/accessibility.md
+wedding,Wedding,editorial serif or display,quiet humanist sans,avoid,1.333 modular,0.95 display; 1.65 body,use fewer sizes; avoid script body fonts,references/anti-ai-ui.md
+healthcare,Healthcare,friendly humanist sans,high-legibility sans,avoid,1.2 modular,1.25 headings; 1.55 body,avoid condensed faces and light body weights,references/accessibility.md
+marketing,Marketing,distinct display or strong grotesk,neutral sans,optional proof metrics,1.25 modular,1.05 display; 1.55 body,use type hierarchy instead of repeated cards,references/visual-hierarchy.md
+documentation,Documentation,neutral sans or readable grotesk,high-legibility sans,code blocks only,1.2 modular,1.25 headings; 1.65 body,prioritize long-form reading and code contrast,references/layout.md
+data-operations,Data Operations,compact neutral sans,compact neutral sans,tabular figures; IDs,1.125 modular,1.2 headings; 1.4 body,make units and precision obvious,references/visual-hierarchy.md
+premium-commerce,Premium Commerce,distinctive display,quiet sans,product codes only,1.25-1.333 modular,1.05 display; 1.6 body,let product imagery carry richness,references/anti-ai-ui.md
+accessible-default,Accessible Default,legible sans,legible sans,only technical tokens,1.2 modular,1.25 headings; 1.55 body,avoid thin weights and all-caps body labels,references/accessibility.md

package/skills/showdar-design/data/ui-patterns.csv

@@ -0,0 +1,19 @@
+id,pattern,when,structure,verification,anti_pattern,tags,reference,stack
+master-detail,Master-detail,dense tools and settings with persistent context,navigation/list + detail workspace,selection persists and back semantics remain clear,opening every item as isolated full-screen route on desktop,desktop context,references/layout.md,*
+progressive-disclosure,Progressive disclosure,advanced configuration or rare controls,essential fields first; advanced section later,common task works without advanced controls,hiding required information behind accordions,complexity control,references/interaction.md,*
+command-palette,Command palette,keyboard-heavy developer or productivity tools,search input + ranked commands + shortcut hints,full keyboard navigation and deterministic selection,using as primary navigation for novices,keyboard productivity,references/interaction.md,react
+sticky-action,Sticky action bar,long forms with important save or submit,scrolling content + persistent action region,does not obscure content or keyboard,floating CTA covering last fields,long form action,references/responsive.md,*
+timeline,Timeline,ordered historical events,date grouping + event + metadata,chronology and status are scannable,using cards with no temporal alignment,history chronology,references/layout.md,*
+metric-overview,Metric overview,small set of decision-driving KPIs,metric + trend + context,numbers share units and time window,dashboard full of vanity metrics,metrics dashboard,references/visual-hierarchy.md,*
+story-scroll,Story scroll,editorial event or product narrative,hero + sequential sections + final action,content works without motion,every section animates from a different direction,editorial narrative,references/anti-ai-ui.md,*
+split-auth,Split auth,authentication plus product context on wide screens,form pane + restrained visual or proof pane,mobile collapses to focused form,marketing carousel distracting from login,auth layout,references/responsive.md,*
+filter-table,Filterable table,operations users need scan and refine records,filter bar + table + count + empty state,filter state survives reload or URL when appropriate,filters hidden in unrelated modal,admin data,references/layout.md,*
+dashboard-shell,Dashboard shell,repeatable operational navigation and contextual workspace,sidebar + header + main + optional inspector,primary task remains dominant and responsive,metric cards determine every layout,dashboard shell,references/visual-hierarchy.md,*
+checkout-stepper,Checkout stepper,multi-step purchase has real validation boundaries,summary + current step + next/back + confirmation,back preserves entered data and errors are local,cosmetic steps with no state boundary,checkout flow,references/accessibility.md,*
+infinite-feed,Infinite feed,content consumption is continuous and ordered,feed + loading sentinel + end/error state,refresh and pagination do not duplicate items,unbounded loading with no recovery,feed pagination,references/interaction.md,react-native
+empty-first-use,First-use empty state,user has no data yet,explain value + primary create/import action,action creates first valid object,generic empty illustration only,empty onboarding,references/interaction.md,*
+filtered-empty,Filtered-empty,records exist but current filters match none,current filters + reset + explanation,reset restores known records,showing global no-data message,empty filters,references/interaction.md,*
+offline-action,Offline action,task can be completed or queued without network,offline banner + local state + retry or sync,conflicts and pending state are visible,pretending success with no durable queue,offline mobile,references/interaction.md,react-native
+error-recovery,Error recovery,request or data load fails,context + cause-safe message + retry or alternative,retry changes relevant state and reports repeated failure,blank screen or retry loop,error recovery,references/interaction.md,*
+responsive-priority,Responsive priority,desktop information cannot fit narrow width,rank content then reflow or replace component,critical task remains possible at narrow width,uniform proportional shrinking,responsive layout,references/responsive.md,*
+media-detail,Media detail,article video or gallery needs focus plus related content,primary media + metadata + action + related content,keyboard and mobile playback states are usable,autoplay and cluttered metadata,content media,references/layout.md,*

package/skills/showdar-design/examples/design-brief.md

@@ -0,0 +1,19 @@
+# Example design brief
+
+Request: design a wedding invitation that helps guests understand the story,
+event details, and RSVP path without feeling like an admin dashboard.
+
+Inputs: mobile-first web, portrait photography, one primary RSVP action, date and
+venue details, map link, family-language toggle, and an unknown final guest count.
+
+Reasoning workflow:
+1. Choose an editorial-romantic direction with warm neutrals, a serif display face,
+   and a calm sans-serif body face.
+2. Make the hero, event facts, story, and RSVP the primary hierarchy.
+3. Use cards only for scannable facts; keep photography and type dominant.
+4. Preserve story order and RSVP visibility on narrow screens.
+5. Use gentle section reveals and disable them under reduced-motion preferences.
+
+Expected output: tokens, page hierarchy, component/state inventory, responsive
+rules, and implementation notes for the detected stack. Explicitly reject neon
+gradients, glassmorphism, decorative UI chrome, and inaccessible text over photos.

package/skills/showdar-design/references/accessibility.md

@@ -0,0 +1,5 @@
+# Accessibility design review
+
+Treat accessibility as part of layout and component behavior. Verify contrast, semantic role/name/state, keyboard/focus, touch targets, reading order, reduced motion, error communication, text scaling, and color-independent state meaning.
+
+A visually disabled control still needs understandable state. A custom control is not complete until assistive technology can identify and operate it.

package/skills/showdar-design/references/anti-ai-ui.md

@@ -0,0 +1,5 @@
+# Avoid generic AI-looking UI
+
+Common failure patterns are purple/blue gradients by default, excessive glass cards, giant rounded rectangles, feature-card grids for every section, floating decorative orbs, arbitrary sparkles, oversized hero copy with weak product proof, and multiple equally loud CTAs.
+
+Prefer a product-specific visual premise: data density for tools, editorial type for invitations/portfolios, strong product photography for commerce, restrained trust signals for finance, or platform-native clarity for utilities. Use one or two signature moves consistently instead of many fashionable effects.

package/skills/showdar-design/references/architecture.md

@@ -0,0 +1,12 @@
+# Design architecture boundaries
+
+Visual design is a decision system, not a pile of components. Preserve the existing token, component, navigation, and data ownership boundaries before introducing new visual primitives.
+
+- Find the existing token source and extend semantic roles such as surface, text, action, danger, and focus rather than copying hex values.
+- Keep product rules and state ownership outside presentational components; a component should receive the state it renders and emit named events.
+- Separate responsive layout decisions from domain logic. CSS, layout primitives, and platform adaptation should decide geometry; business code should decide priority.
+- Keep remote, draft, URL, and derived state distinct so visual polish does not create synchronization effects.
+- Treat a new component as earned when behavior, accessibility, or a stable visual contract repeats; do not extract a class-name wrapper for its own sake.
+- Verify design changes through the actual route/screen, realistic content, and existing build/test boundary.
+
+When a design reference conflicts with an established product contract, preserve the user task and accessibility contract, then document the deliberate visual deviation.

package/skills/showdar-design/references/interaction.md

@@ -0,0 +1,5 @@
+# Interaction design
+
+Every interactive element needs discoverable affordance, state feedback, error/recovery behavior, and an appropriate target size. Motion should explain continuity, state change, or hierarchy; decorative motion is optional.
+
+Do not hide core actions behind hover on touch-capable experiences. Preserve platform back/escape expectations. Loading states should retain context and prevent accidental duplicate actions without freezing unrelated work.

package/skills/showdar-design/references/layout.md

@@ -0,0 +1,5 @@
+# Layout
+
+Start from content and task structure, not a component gallery. Use a grid/rhythm that survives real content lengths. Prefer alignment and whitespace before borders and cards. Cards are a semantic grouping device, not the default container for every block.
+
+For tools, preserve stable navigation/context regions. For narrative pages, vary section rhythm intentionally without changing alignment logic every screen. For forms, keep labels, errors, and actions in predictable relation to fields.