{"id":"1c17d899-aef4-4161-8831-fa8f865c6f28","shortId":"wdqSYh","kind":"skill","title":"wednesday-design","tagline":"Design and UX guidelines for Wednesday Solutions projects. Covers visual design tokens, animation patterns, component standards, accessibility, and user experience best practices for React/Next.js applications. ENFORCES use of approved component libraries only.","description":"# Wednesday Design & UX Guidelines\n\n## Trigger\n\nLoad this skill when working on **UI, components, or visual design**:\n- Building or modifying a React component\n- Choosing which UI component to use\n- Styling with Tailwind or design tokens\n- Adding animations or transitions\n- Accessibility review of a UI element\n- \"Which component should I use for X?\"\n- \"How should this look?\"\n\n**Do NOT use this skill for:** business logic, TypeScript types, API routes, or code structure (use `wednesday-dev`). This skill only applies to visual output and UI components.\n\n---\n\n## ⚠️ CRITICAL: APPROVED COMPONENT LIBRARY ONLY\n\n**THIS IS A MANDATORY REQUIREMENT. NO EXCEPTIONS.**\n\n### The Rule\n\n**DO NOT create custom UI components.** All UI elements MUST be sourced from the approved component library containing **492+ pre-vetted components** from 8 libraries.\n\n### Why This Matters\n\n1. **Consistency** - Pre-built components ensure visual coherence across all projects\n2. **Quality** - These components are battle-tested, accessible, and performant\n3. **Speed** - No time wasted reinventing existing solutions\n4. **Maintenance** - Upstream updates benefit all projects\n\n### Approved Libraries (Priority Order)\n\n| Priority | Library | URL | Use For |\n|----------|---------|-----|---------|\n| 1 | **shadcn/ui** | https://ui.shadcn.com | Foundation (forms, dialogs, data) |\n| 2 | **Aceternity UI** | https://ui.aceternity.com | Effects, backgrounds, 3D, scroll |\n| 3 | **Magic UI** | https://magicui.design | Text animations, buttons, mockups |\n| 4 | **Motion Primitives** | https://motion-primitives.com | Morphing, text effects |\n| 5 | **Animate UI** | https://animate-ui.com | Animated Radix ports |\n| 6 | **Eldora UI** | https://www.eldoraui.site | Device mockups, text |\n| 7 | **Cult UI** | https://www.cult-ui.com | Neumorphic, textures |\n| 8 | **ABUI** | https://www.abui.io | Timeline, availability |\n\n### Before Writing ANY Component\n\n```\n┌─────────────────────────────────────────────────────────────┐\n│  STOP! Ask yourself:                                        │\n│                                                             │\n│  1. Does this component exist in the approved library?      │\n│     └─> YES: Use it. STOP here.                             │\n│     └─> NO: Continue to step 2                              │\n│                                                             │\n│  2. Can I combine 2-3 approved components to achieve this?  │\n│     └─> YES: Compose them. STOP here.                       │\n│     └─> NO: Continue to step 3                              │\n│                                                             │\n│  3. Can I extend an approved component's styles only?       │\n│     └─> YES: Extend styles using design tokens. STOP here.  │\n│     └─> NO: Escalate to tech lead for approval              │\n│                                                             │\n│  ❌ NEVER create a component from scratch                   │\n└─────────────────────────────────────────────────────────────┘\n```\n\n### Violation Examples\n\n```typescript\n// ❌ WRONG - Creating custom button\nfunction CustomButton({ children }) {\n  return <button className=\"bg-green-500 ...\">{children}</button>\n}\n\n// ✅ CORRECT - Using approved library\nimport { ShimmerButton } from '@/components/magicui/shimmer-button'\n// or\nimport { Button } from '@/components/ui/button'\n```\n\n```typescript\n// ❌ WRONG - Creating custom card animation\nfunction AnimatedCard({ children }) {\n  return <motion.div whileHover={{ scale: 1.05 }}>{children}</motion.div>\n}\n\n// ✅ CORRECT - Using approved library\nimport { WobbleCard } from '@/components/aceternity/wobble-card'\n// or\nimport { MagicCard } from '@/components/magicui/magic-card'\n```\n\n```typescript\n// ❌ WRONG - Creating custom text animation\nfunction TypewriterText({ text }) {\n  // custom implementation...\n}\n\n// ✅ CORRECT - Using approved library\nimport { TypewriterEffect } from '@/components/aceternity/typewriter-effect'\n// or\nimport { TypingAnimation } from '@/components/magicui/typing-animation'\n```\n\n### Quick Lookup by Need\n\n| I need... | Use this component | From |\n|-----------|-------------------|------|\n| Basic button | Button | shadcn/ui |\n| Shimmer button | Shimmer Button | Magic UI |\n| 3D tilt card | 3D Card Effect | Aceternity |\n| Spotlight card | Magic Card | Magic UI |\n| Word-by-word text | Text Generate Effect | Aceternity |\n| Typing animation | Typewriter Effect | Aceternity |\n| Modal/dialog | Dialog | shadcn/ui |\n| Morphing modal | Morphing Dialog | Motion Primitives |\n| Form inputs | Input, Select, etc. | shadcn/ui |\n| Background effects | Background Beams, Aurora, etc. | Aceternity |\n| Device mockup | iPhone, Safari, etc. | Magic UI / Eldora UI |\n| Carousel | Carousel | shadcn/ui / Aceternity |\n| Data table | Data Table | shadcn/ui |\n\n**See [references/COMPONENT-LIBRARY.md](references/COMPONENT-LIBRARY.md) for the complete index of 492+ approved components.**\n\n---\n\n## 1. Visual Design Principles\n\n### Brand Identity\n\n- **Primary palette**: Green (#4ADE80) to Teal (#0D9488) gradient\n- **Typography**: Instrument Serif for display, DM Sans for body\n- **Aesthetic**: Premium, minimal, with subtle depth and glow effects\n\n### Design Hierarchy\n\n1. **Primary actions** - Green gradient with glow\n2. **Secondary actions** - Outlined, neutral\n3. **Content** - Cards with subtle elevation\n4. **Background** - Dot patterns, spotlights, gradients\n\n### Spacing System\n\nUse a 4px base grid:\n- Small gaps: `8px`, `12px`\n- Medium gaps: `16px`, `24px`\n- Large gaps: `32px`, `48px`\n- Section spacing: `56px`\n\nSee [references/TOKENS.md](references/TOKENS.md) for complete token definitions.\n\n## 2. Typography Guidelines\n\n### Hierarchy\n\n```\nDisplay XL: 60px - Hero headlines\nDisplay LG: 44px - Section headlines\nDisplay MD: 38px - Feature headlines\nDisplay SM: 28px - Card headlines\n\nBody LG: 18px - Lead paragraphs\nBody MD: 16px - Standard body text\nBody SM: 14px - Supporting text\nBody XS: 12px - Captions, labels\n```\n\n### Font Pairing\n\n```typescript\n// Display/Headlines - elegant, editorial feel\nfontFamily: \"'Instrument Serif', Georgia, serif\"\n\n// Body/UI - clean, readable\nfontFamily: \"'DM Sans', -apple-system, sans-serif\"\n```\n\n### Text Styling Rules\n\n1. **Headlines** use Instrument Serif, normal weight, negative letter-spacing\n2. **Body** uses DM Sans, regular to semibold weights\n3. **Labels/Overlines** are uppercase with expanded letter-spacing (0.1em+)\n4. **Emphasized text** in headlines uses italic style\n5. **Muted text** uses `#71717A` color\n\n## 3. Color Usage\n\n### Semantic Colors\n\n| Purpose | Color | Usage |\n|---------|-------|-------|\n| Primary | `#4ADE80` | CTAs, active states, success |\n| Secondary | `#0D9488` | Accents, links, secondary actions |\n| Text Primary | `#18181B` | Headlines, important text |\n| Text Secondary | `#71717A` | Body text, descriptions |\n| Text Muted | `#A3A3A3` | Captions, placeholders |\n| Background | `#FFFFFF` | Primary background |\n| Surface | `#F5F5F5` | Cards, elevated surfaces |\n\n### Gradient Usage\n\n- **Brand gradient**: `linear-gradient(135deg, #4ADE80 0%, #0D9488 100%)`\n- Use for primary CTAs, badges, icons\n- Never use flat colors for primary actions\n\n### Dark Cards\n\nFor AI/system messages or contrast:\n- Background: `linear-gradient(135deg, #18181B 0%, #27272A 100%)`\n- Text: White (#FFFFFF) with muted gray (#A3A3A3) for descriptions\n\n## 4. Animation Principles\n\n### Core Rules\n\n1. **Purpose-driven** - Every animation serves a purpose (feedback, hierarchy, delight)\n2. **Performance-first** - Only animate `transform` and `opacity`\n3. **Consistent timing** - Use standardized easings and durations\n4. **Respect preferences** - Honor `prefers-reduced-motion`\n\n### Timing Guidelines\n\n| Type | Duration | Easing |\n|------|----------|--------|\n| Micro-interactions | 100-150ms | ease |\n| Hover states | 200-300ms | spring |\n| Card transitions | 300ms | easeOutCubic |\n| Page transitions | 400-500ms | easeInOutQuart |\n| Scroll reveals | 500-800ms | easeOutQuart |\n| Ambient effects | 3-6s | easeInOut (loop) |\n\n### Scroll-Driven Animations\n\nFor landing pages and storytelling:\n\n1. Use scroll progress (0-1) to drive animations\n2. Define clear phase thresholds for content reveals\n3. Stagger elements within each phase\n4. Provide fallbacks for reduced motion\n\nSee [references/ANIMATIONS.md](references/ANIMATIONS.md) for implementation patterns.\n\n## 5. Component Standards\n\n### Cards\n\n- **Border radius**: 24px for cards, 14px for buttons\n- **Padding**: 22px standard, 28px for prominent cards\n- **Shadows**: Layered shadows with optional glow\n- **Hover**: Lift effect (-8px) with enhanced shadow\n\n### Buttons\n\nPrimary buttons should have:\n- 3D gradient background (not flat)\n- Top highlight line\n- Shimmer animation\n- Press/hover states with transform feedback\n- Arrow icon that animates on hover\n\n### Badges\n\nPremium badges include:\n- Subtle gradient background\n- Pulse dot for \"live\" states\n- Shimmer effect\n- Rounded pill shape (100px radius)\n\nSee [references/COMPONENTS.md](references/COMPONENTS.md) for code patterns.\n\n## 6. Interaction Design\n\n### Hover States\n\n| Element | Hover Effect |\n|---------|--------------|\n| Cards | Lift -8px, glow shadow |\n| Buttons | Lift -2px, enhanced shadow |\n| Links | Color shift to primary |\n| Icons | Scale 1.1, optional rotation |\n\n### Press States\n\n- Scale down slightly (0.98)\n- Reduce shadow depth\n- Darken background\n- Remove shimmer/highlight effects\n\n### Focus States\n\n- Visible focus ring (`0 0 0 2px primary-color`)\n- Never remove outline without alternative\n- High contrast for keyboard navigation\n\n## 7. Layout Patterns\n\n### Hero Sections\n\n```\n┌────────────────────────────────────────┐\n│ Navigation (fixed)                     │\n├──────────────────┬─────────────────────┤\n│                  │                     │\n│  Copy            │      Visual         │\n│  - Badge         │      (Phone/       │\n│  - Headline      │       Device)       │\n│  - Body          │                     │\n│  - CTA           │                     │\n│  - Social proof  │                     │\n│                  │                     │\n└──────────────────┴─────────────────────┘\n```\n\n### Comparison Sections\n\n```\n┌────────────────────────────────────────┐\n│                                        │\n│  Old way (strikethrough)               │\n│  New way (highlighted, circled)        │\n│  Description                           │\n│                                        │\n│  [Repeat for each comparison]          │\n│                                        │\n│                    [Floating cards] ───│\n│                                        │\n└────────────────────────────────────────┘\n```\n\n### Step/Process Sections\n\n```\n┌────────────────────────────────────────┐\n│           Section Header               │\n│           Overline · Headline          │\n│                                        │\n│   ┌─────┐   ┌─────┐   ┌─────┐         │\n│   │ 01  │───│ 02  │───│ 03  │         │\n│   │Card │   │Card │   │Card │         │\n│   └─────┘   └─────┘   └─────┘         │\n│                                        │\n└────────────────────────────────────────┘\n```\n\n## 8. Accessibility Requirements\n\n### Color Contrast\n\n- Text on backgrounds: Minimum 4.5:1 ratio\n- Large text (24px+): Minimum 3:1 ratio\n- UI components: Minimum 3:1 ratio\n\n### Motion Accessibility\n\n```css\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n```\n\n### Keyboard Navigation\n\n- All interactive elements must be focusable\n- Tab order follows visual order\n- Focus indicators are always visible\n- Escape closes modals/dropdowns\n\n### Screen Readers\n\n- Images have descriptive alt text\n- Icons have aria-labels\n- Dynamic content uses aria-live regions\n- Form fields have associated labels\n\n## 9. Responsive Design\n\n### Breakpoints\n\n```typescript\nconst breakpoints = {\n  sm: '640px',   // Mobile landscape\n  md: '768px',   // Tablet\n  lg: '1024px',  // Desktop\n  xl: '1280px',  // Large desktop\n  '2xl': '1536px', // Extra large\n}\n```\n\n### Mobile Considerations\n\n- Touch targets minimum 44x44px\n- Increased font sizes for readability\n- Simplified animations\n- Stack layouts vertically\n- Hide decorative elements\n\n## 10. Performance Guidelines\n\n### Image Optimization\n\n- Use `next/image` for automatic optimization\n- Provide width/height to prevent layout shift\n- Use WebP format with JPEG fallback\n- Lazy load below-the-fold images\n\n### Animation Performance\n\n- Only animate `transform` and `opacity`\n- Use `will-change` sparingly during active animations\n- Debounce scroll handlers\n- Use `requestAnimationFrame` for JS animations\n\n### CSS Best Practices\n\n- Minimize use of `filter` and `backdrop-filter`\n- Avoid animating `box-shadow` (use opacity on pseudo-element)\n- Use CSS containment where appropriate\n\n## Quick Reference\n\n### Do's\n\n- Use gradients for primary actions\n- Add subtle glow effects to featured elements\n- Include hover/press state feedback\n- Use staggered animations for lists\n- Test with keyboard navigation\n- Provide loading/skeleton states\n\n### Don'ts\n\n- **Create custom components** - Use approved library ONLY\n- **Reinvent existing solutions** - Check library first\n- Use flat colors for CTAs\n- Skip hover states on interactive elements\n- Animate layout properties (width, height, margin)\n- Ignore reduced motion preferences\n- Create text with insufficient contrast\n- Use autoplay video without controls\n\n---\n\n## Reference Documents\n\n| Document | Purpose |\n|----------|---------|\n| [references/COMPONENT-LIBRARY.md](references/COMPONENT-LIBRARY.md) | **492+ approved components** - CHECK THIS FIRST |\n| [references/TOKENS.md](references/TOKENS.md) | Design tokens (colors, typography, spacing) |\n| [references/ANIMATIONS.md](references/ANIMATIONS.md) | Animation patterns and easing functions |\n| [references/COMPONENTS.md](references/COMPONENTS.md) | Component styling patterns |\n\n---\n\n## Enforcement Checklist\n\nBefore submitting any PR with UI changes:\n\n- [ ] All components sourced from approved library\n- [ ] No custom component implementations\n- [ ] Design tokens used for any style overrides\n- [ ] Accessibility requirements met\n- [ ] Animation performance guidelines followed\n- [ ] Responsive design verified","tags":["wednesday","design","agent","skills","wednesday-solutions","agent-skills","ai-agent-skills","ai-skills","claude-code","copilot","cursor","frontend-skills"],"capabilities":["skill","source-wednesday-solutions","skill-wednesday-design","topic-agent-skills","topic-ai-agent-skills","topic-ai-skills","topic-claude-code","topic-copilot","topic-cursor","topic-frontend-skills","topic-vibe-coding","topic-vibe-coding-skills"],"categories":["ai-agent-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/wednesday-solutions/ai-agent-skills/wednesday-design","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add wednesday-solutions/ai-agent-skills","source_repo":"https://github.com/wednesday-solutions/ai-agent-skills","install_from":"skills.sh"}},"qualityScore":"0.524","qualityRationale":"deterministic score 0.52 from registry signals: · indexed on github topic:agent-skills · 148 github stars · SKILL.md body (14,311 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-02T12:54:45.480Z","embedding":null,"createdAt":"2026-04-18T22:09:44.747Z","updatedAt":"2026-05-02T12:54:45.480Z","lastSeenAt":"2026-05-02T12:54:45.480Z","tsv":"'-1':915 '-150':869 '-2':1045 '-3':296 '-300':875 '-500':885 '-6':897 '-8':973,1039 '-800':891 '/components/aceternity/typewriter-effect':414 '/components/aceternity/wobble-card':390 '/components/magicui/magic-card':395 '/components/magicui/shimmer-button':362 '/components/magicui/typing-animation':419 '/components/ui/button':367 '0':777,806,914,1078,1079,1080 '0.01':1179,1191 '0.1':706 '0.98':1064 '01':1134 '02':1135 '03':1136 '0d9488':530,737,778 '1':163,210,272,518,552,677,823,910,1150,1157,1163,1186 '1.05':381 '1.1':1056 '10':1283 '100':779,808,868 '100px':1021 '1024px':1254 '1280px':1257 '12px':586,647 '135deg':775,804 '14px':642,954 '1536px':1261 '16px':589,636 '18181b':744,805 '18px':631 '2':175,217,290,291,295,559,605,688,835,919 '200':874 '22px':958 '24px':590,951,1154 '27272a':807 '28px':626,960 '2px':1081 '2xl':1260 '3':186,225,311,312,564,697,722,844,896,927,1156,1162 '300ms':880 '32px':593 '38px':621 '3d':223,440,443,983 '4':194,233,570,708,818,852,933 '4.5':1149 '400':884 '44px':616 '44x44px':1269 '48px':594 '492':152,515,1446 '4ade80':527,731,776 '4px':580 '5':240,716,945 '500':890 '56px':597 '6':247,1029 '60px':611 '640px':1247 '7':254,1095 '71717a':720,750 '768px':1251 '8':158,260,1140 '8px':585 '9':1239 'a3a3a3':756,815 'abui':261 'accent':738 'access':20,74,183,1141,1166,1497 'acetern':218,446,461,466,488,501 'achiev':300 'across':172 'action':554,561,741,792,1370 'activ':733,1325 'ad':70 'add':1371 'aesthet':541 'ai/system':796 'alt':1220 'altern':1089 'alway':1210 'ambient':894 'anim':16,71,230,241,244,373,401,463,819,828,840,904,918,992,1001,1177,1183,1276,1312,1315,1326,1334,1347,1384,1420,1461,1500 'animate-ui.com':243 'animatedcard':375 'animation-dur':1176 'animation-iteration-count':1182 'api':101 'appl':669 'apple-system':668 'appli':113 'applic':28 'appropri':1361 'approv':32,121,148,201,279,297,317,336,357,385,409,516,1400,1447,1484 'aria':1225,1231 'aria-l':1230 'aria-label':1224 'arrow':998 'ask':270 'associ':1237 'aurora':486 'automat':1291 'autoplay':1436 'avail':264 'avoid':1346 'backdrop':1344 'backdrop-filt':1343 'background':222,482,484,571,759,762,800,985,1010,1069,1147 'badg':784,1004,1006,1104 'base':581 'basic':430 'battl':181 'battle-test':180 'beam':485 'below-the-fold':1307 'benefit':198 'best':24,1336 'bodi':540,629,634,638,640,645,689,751,1108 'body/ui':662 'border':949 'box':1349 'box-shadow':1348 'brand':522,770 'breakpoint':1242,1245 'build':52 'built':167 'busi':97 'button':231,349,365,431,432,435,437,956,978,980,1043 'caption':648,757 'card':372,442,444,448,450,566,627,765,794,878,948,953,963,1037,1127,1137,1138,1139 'carousel':498,499 'chang':1322,1479 'check':1406,1449 'checklist':1472 'children':352,354,376,382 'choos':58 'circl':1120 'clean':663 'clear':921 'close':1213 'code':104,1027 'coher':171 'color':721,723,726,728,789,1050,1084,1143,1411,1456 'combin':294 'comparison':1112,1125 'complet':512,602 'compon':18,33,48,57,61,81,119,122,139,149,156,168,178,268,275,298,318,340,428,517,946,1160,1398,1448,1468,1481,1488 'compos':303 'consider':1265 'consist':164,845 'const':1244 'contain':151,1359 'content':565,925,1228 'continu':287,308 'contrast':799,1091,1144,1434 'control':1439 'copi':1102 'core':821 'correct':355,383,407 'count':1185 'cover':12 'creat':136,338,347,370,398,1396,1430 'critic':120 'css':1167,1335,1358 'cta':1109 'ctas':732,783,1413 'cult':255 'custom':137,348,371,399,405,1397,1487 'custombutton':351 'dark':793 'darken':1068 'data':216,502,504 'debounc':1327 'decor':1281 'defin':920 'definit':604 'delight':834 'depth':546,1067 'descript':753,817,1121,1219 'design':3,4,14,37,51,68,326,520,550,1031,1241,1454,1490,1505 'desktop':1255,1259 'dev':109 'devic':251,489,1107 'dialog':215,468,473 'display':536,609,614,619,624 'display/headlines':653 'dm':537,666,691 'document':1441,1442 'dot':572,1012 'drive':917 'driven':826,903 'durat':851,863,1178,1190 'dynam':1227 'eas':849,864,871,1464 'easeinout':899 'easeinoutquart':887 'easeoutcub':881 'easeoutquart':893 'editori':655 'effect':221,239,445,460,465,483,549,895,972,1017,1036,1072,1374 'eldora':248,496 'eleg':654 'element':79,142,929,1034,1198,1282,1356,1377,1419 'elev':569,766 'em':707 'emphas':709 'enforc':29,1471 'enhanc':976,1047 'ensur':169 'escal':331 'escap':1212 'etc':480,487,493 'everi':827 'exampl':344 'except':131 'exist':192,276,1404 'expand':702 'experi':23 'extend':315,323 'extra':1262 'f5f5f5':764 'fallback':935,1304 'featur':622,1376 'feedback':832,997,1381 'feel':656 'ffffff':760,811 'field':1235 'filter':1341,1345 'first':838,1408,1451 'fix':1101 'flat':788,987,1410 'float':1126 'focus':1073,1076,1201,1207 'fold':1310 'follow':1204,1503 'font':650,1271 'fontfamili':657,665 'form':214,476,1234 'format':1301 'foundat':213 'function':350,374,402,1465 'gap':584,588,592 'generat':459 'georgia':660 'glow':548,558,969,1041,1373 'gradient':531,556,575,768,771,774,803,984,1009,1367 'gray':814 'green':526,555 'grid':582 'guidelin':7,39,607,861,1285,1502 'handler':1329 'header':1131 'headlin':613,618,623,628,678,712,745,1106,1133 'height':1424 'hero':612,1098 'hide':1280 'hierarchi':551,608,833 'high':1090 'highlight':989,1119 'honor':855 'hover':872,970,1003,1032,1035,1415 'hover/press':1379 'icon':785,999,1054,1222 'ident':523 'ignor':1426 'imag':1217,1286,1311 'implement':406,943,1489 'import':359,364,387,392,411,416,746,1181,1187,1193 'includ':1007,1378 'increas':1270 'index':513 'indic':1208 'input':477,478 'instrument':533,658,680 'insuffici':1433 'interact':867,1030,1197,1418 'iphon':491 'ital':714 'iter':1184 'jpeg':1303 'js':1333 'keyboard':1093,1194,1389 'label':649,1226,1238 'labels/overlines':698 'land':906 'landscap':1249 'larg':591,1152,1258,1263 'layer':965 'layout':1096,1278,1297,1421 'lazi':1305 'lead':334,632 'letter':686,704 'letter-spac':685,703 'lg':615,630,1253 'librari':34,123,150,159,202,206,280,358,386,410,1401,1407,1485 'lift':971,1038,1044 'line':990 'linear':773,802 'linear-gradi':772,801 'link':739,1049 'list':1386 'live':1014,1232 'load':41,1306 'loading/skeleton':1392 'logic':98 'look':90 'lookup':421 'loop':900 'magic':226,438,449,451,494 'magiccard':393 'magicui.design':228 'mainten':195 'mandatori':128 'margin':1425 'matter':162 'md':620,635,1250 'media':1168 'medium':587 'messag':797 'met':1499 'micro':866 'micro-interact':865 'minim':543,1338 'minimum':1148,1155,1161,1268 'mobil':1248,1264 'mockup':232,252,490 'modal':471 'modal/dialog':467 'modals/dropdowns':1214 'modifi':54 'morph':237,470,472 'motion':234,474,859,938,1165,1172,1428 'motion-primitives.com':236 'motion.div':378 'ms':870,876,886,892,1180,1192 'must':143,1199 'mute':717,755,813 'navig':1094,1100,1195,1390 'need':423,425 'negat':684 'neumorph':258 'neutral':563 'never':337,786,1085 'new':1117 'next/image':1289 'normal':682 'old':1114 'opac':843,1318,1352 'optim':1287,1292 'option':968,1057 'order':204,1203,1206 'outlin':562,1087 'output':116 'overlin':1132 'overrid':1496 'pad':957 'page':882,907 'pair':651 'palett':525 'paragraph':633 'pattern':17,573,944,1028,1097,1462,1470 'perform':185,837,1284,1313,1501 'performance-first':836 'phase':922,932 'phone':1105 'pill':1019 'placehold':758 'port':246 'pr':1476 'practic':25,1337 'pre':154,166 'pre-built':165 'pre-vet':153 'prefer':854,857,1170,1429 'prefers-reduced-mot':856,1169 'premium':542,1005 'press':1059 'press/hover':993 'prevent':1296 'primari':524,553,730,743,761,782,791,979,1053,1083,1369 'primary-color':1082 'primit':235,475 'principl':521,820 'prioriti':203,205 'progress':913 'project':11,174,200 'promin':962 'proof':1111 'properti':1422 'provid':934,1293,1391 'pseudo':1355 'pseudo-el':1354 'puls':1011 'purpos':727,825,831,1443 'purpose-driven':824 'px':974,1040,1046 'qualiti':176 'quick':420,1362 'radius':950,1022 'radix':245 'ratio':1151,1158,1164 'react':56 'react/next.js':27 'readabl':664,1274 'reader':1216 'reduc':858,937,1065,1171,1173,1427 'refer':1363,1440 'references/animations.md':940,941,1459,1460 'references/component-library.md':508,509,1444,1445 'references/components.md':1024,1025,1466,1467 'references/tokens.md':599,600,1452,1453 'region':1233 'regular':693 'reinvent':191,1403 'remov':1070,1086 'repeat':1122 'requestanimationfram':1331 'requir':129,1142,1498 'respect':853 'respons':1240,1504 'return':353,377 'reveal':889,926 'review':75 'ring':1077 'rotat':1058 'round':1018 'rout':102 'rule':133,676,822 'safari':492 'san':538,667,672,692 'sans-serif':671 'scale':380,1055,1061 'scratch':342 'screen':1215 'scroll':224,888,902,912,1328 'scroll-driven':901 'secondari':560,736,740,749 'section':595,617,1099,1113,1129,1130 'see':507,598,939,1023 'select':479 'semant':725 'semibold':695 'serif':534,659,661,673,681 'serv':829 'shadcn/ui':211,433,469,481,500,506 'shadow':964,966,977,1042,1048,1066,1350 'shape':1020 'shift':1051,1298 'shimmer':434,436,991,1016 'shimmer/highlight':1071 'shimmerbutton':360 'simplifi':1275 'size':1272 'skill':43,95,111 'skill-wednesday-design' 'skip':1414 'slight':1063 'sm':625,641,1246 'small':583 'social':1110 'solut':10,193,1405 'sourc':145,1482 'source-wednesday-solutions' 'space':576,596,687,705,1458 'spare':1323 'speed':187 'spotlight':447,574 'spring':877 'stack':1277 'stagger':928,1383 'standard':19,637,848,947,959 'state':734,873,994,1015,1033,1060,1074,1380,1393,1416 'step':289,310 'step/process':1128 'stop':269,284,305,328 'storytel':909 'strikethrough':1116 'structur':105 'style':64,320,324,675,715,1469,1495 'submit':1474 'subtl':545,568,1008,1372 'success':735 'support':643 'surfac':763,767 'system':577,670 'tab':1202 'tabl':503,505 'tablet':1252 'tailwind':66 'target':1267 'teal':529 'tech':333 'test':182,1387 'text':229,238,253,400,404,457,458,639,644,674,710,718,742,747,748,752,754,809,1145,1153,1221,1431 'textur':259 'threshold':923 'tilt':441 'time':189,846,860 'timelin':263 'token':15,69,327,603,1455,1491 'top':988 'topic-agent-skills' 'topic-ai-agent-skills' 'topic-ai-skills' 'topic-claude-code' 'topic-copilot' 'topic-cursor' 'topic-frontend-skills' 'topic-vibe-coding' 'topic-vibe-coding-skills' 'touch':1266 'transform':841,996,1316 'transit':73,879,883,1189 'transition-dur':1188 'trigger':40 'ts':1395 'type':100,462,862 'typescript':99,345,368,396,652,1243 'typewrit':464 'typewritereffect':412 'typewritertext':403 'typinganim':417 'typographi':532,606,1457 'ui':47,60,78,118,138,141,219,227,242,249,256,439,452,495,497,1159,1478 'ui.aceternity.com':220 'ui.shadcn.com':212 'updat':197 'uppercas':700 'upstream':196 'url':207 'usag':724,729,769 'use':30,63,84,93,106,208,282,325,356,384,408,426,578,679,690,713,719,780,787,847,911,1229,1288,1299,1319,1330,1339,1351,1357,1366,1382,1399,1409,1435,1492 'user':22 'ux':6,38 'verifi':1506 'vertic':1279 'vet':155 'video':1437 'violat':343 'visibl':1075,1211 'visual':13,50,115,170,519,1103,1205 'wast':190 'way':1115,1118 'webp':1300 'wednesday':2,9,36,108 'wednesday-design':1 'wednesday-dev':107 'weight':683,696 'whilehov':379 'white':810 'width':1423 'width/height':1294 'will-chang':1320 'within':930 'without':1088,1438 'wobblecard':388 'word':454,456 'word-by-word':453 'work':45 'write':266 'wrong':346,369,397 'www.abui.io':262 'www.cult-ui.com':257 'www.eldoraui.site':250 'x':86 'xl':610,1256 'xs':646 'yes':281,302,322","prices":[{"id":"1614d576-af5c-4b90-acef-c33e56ab59bf","listingId":"1c17d899-aef4-4161-8831-fa8f865c6f28","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"wednesday-solutions","category":"ai-agent-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T22:09:44.747Z"}],"sources":[{"listingId":"1c17d899-aef4-4161-8831-fa8f865c6f28","source":"github","sourceId":"wednesday-solutions/ai-agent-skills/wednesday-design","sourceUrl":"https://github.com/wednesday-solutions/ai-agent-skills/tree/main/skills/wednesday-design","isPrimary":false,"firstSeenAt":"2026-04-18T22:09:44.747Z","lastSeenAt":"2026-05-02T12:54:45.480Z"}],"details":{"listingId":"1c17d899-aef4-4161-8831-fa8f865c6f28","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"wednesday-solutions","slug":"wednesday-design","github":{"repo":"wednesday-solutions/ai-agent-skills","stars":148,"topics":["agent-skills","ai-agent-skills","ai-skills","claude-code","copilot","cursor","frontend-skills","product-engineering-skills","vibe-coding","vibe-coding-skills"],"license":"mit","html_url":"https://github.com/wednesday-solutions/ai-agent-skills","pushed_at":"2026-04-24T12:57:49Z","description":"Pre-configured agent skills for Vibe Coded projects. These skills provide AI coding assistants (Claude Code, Cursor, etc.) with specific guidelines for code quality and design standards.","skill_md_sha":"700de7d86478a8dd3020def4671c669c5378c3c3","skill_md_path":"skills/wednesday-design/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/wednesday-solutions/ai-agent-skills/tree/main/skills/wednesday-design"},"layout":"multi","source":"github","category":"ai-agent-skills","frontmatter":{"name":"wednesday-design","license":"MIT","description":"Design and UX guidelines for Wednesday Solutions projects. Covers visual design tokens, animation patterns, component standards, accessibility, and user experience best practices for React/Next.js applications. ENFORCES use of approved component libraries only.","compatibility":"React 18+, Next.js 14+, Tailwind CSS, Framer Motion"},"skills_sh_url":"https://skills.sh/wednesday-solutions/ai-agent-skills/wednesday-design"},"updatedAt":"2026-05-02T12:54:45.480Z"}}