ui-ux-pro-mcp 1.0.1 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +36 -0
- package/README.md +2 -2
- package/data/colors.csv +4 -1
- package/data/icons.csv +40 -0
- package/data/products.csv +3 -0
- package/data/stacks/html-tailwind.csv +19 -9
- package/data/stacks/nextjs.csv +9 -1
- package/data/stacks/react.csv +20 -1
- package/data/styles.csv +6 -1
- package/data/ux-guidelines.csv +8 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,42 @@ All notable changes to UI/UX Pro MCP will be documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [1.1.0] - 2026-01-18
|
|
9
|
+
|
|
10
|
+
### Added
|
|
11
|
+
|
|
12
|
+
**New Features:**
|
|
13
|
+
- Added 3 new icon libraries: Heroicons, Phosphor Icons, Tabler Icons (+40 icons)
|
|
14
|
+
- Added React animation guidelines: Framer Motion (8 entries), React Spring (5 entries)
|
|
15
|
+
- Added AI-Native UI styles: Agentic Interface, Streaming UI, Spatial UI 3D, Voice UI
|
|
16
|
+
- Added CSS Scroll-Driven Animations guidelines
|
|
17
|
+
- Added View Transitions API guidelines for ux-guidelines.csv and nextjs.csv
|
|
18
|
+
|
|
19
|
+
**2026 Framework Updates:**
|
|
20
|
+
- React 19.2: Added React Compiler v1.0, Activity component, useEffectEvent hook
|
|
21
|
+
- Next.js 16: Added Turbopack stable, 'use cache' directive, React Compiler integration
|
|
22
|
+
- Tailwind v4: Added 10 new entries for CSS-first config, container queries, oklch colors
|
|
23
|
+
|
|
24
|
+
**New Color Palettes:**
|
|
25
|
+
- AI Code Assistant, AI Image Generator, AI Chatbot LLM
|
|
26
|
+
- AI Voice Platform, AI Analytics Dashboard, AI Automation Agent
|
|
27
|
+
- AI Video Generator, Spatial Computing/VisionOS
|
|
28
|
+
|
|
29
|
+
**New Product Types:**
|
|
30
|
+
- Kids/Baby/Parenting App
|
|
31
|
+
- Manufacturing/Industrial Platform
|
|
32
|
+
- Crowdfunding/Fundraising Platform
|
|
33
|
+
|
|
34
|
+
### Fixed
|
|
35
|
+
- Updated 19 Tailwind v4-beta URLs to stable docs
|
|
36
|
+
- Updated React 19 docs URLs from blog to reference docs
|
|
37
|
+
- Fixed Next.js version references (14+ → 15+)
|
|
38
|
+
|
|
39
|
+
### Changed
|
|
40
|
+
- +99 new entries across all data files
|
|
41
|
+
- +20 URL/reference fixes
|
|
42
|
+
- Total entries now: 1410+
|
|
43
|
+
|
|
8
44
|
## [1.0.1] - 2026-01-18
|
|
9
45
|
|
|
10
46
|
### Changed
|
package/README.md
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
[](https://modelcontextprotocol.io/)
|
|
8
8
|
[](https://github.com/redf0x1/ui-ux-pro-mcp/stargazers)
|
|
9
9
|
|
|
10
|
-
> **AI-powered UI/UX design intelligence** — Instantly access
|
|
10
|
+
> **AI-powered UI/UX design intelligence** — Instantly access 1410+ curated design resources through natural language search.
|
|
11
11
|
|
|
12
12
|
---
|
|
13
13
|
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
|
|
16
16
|
| Feature | Details |
|
|
17
17
|
|---------|---------|
|
|
18
|
-
| 📚 **
|
|
18
|
+
| 📚 **1410+ Documents** | Curated design knowledge across 11 domains |
|
|
19
19
|
| 🔧 **11 Tools** | Specialized search for styles, colors, typography, charts, icons, and more |
|
|
20
20
|
| ⚡ **BM25 Ranking** | Fast, relevant search results using industry-standard text ranking |
|
|
21
21
|
| 🔗 **Universal** | Works with VS Code, Claude Desktop, Cursor, and any MCP-compatible client |
|
package/data/colors.csv
CHANGED
|
@@ -110,4 +110,7 @@ No,Product Type,Keywords,Primary (Hex),Secondary (Hex),CTA (Hex),Background (Hex
|
|
|
110
110
|
109,Calm Tech Wellness,"calm, wellness, meditation, mindful, serene",#A7C4BC,#D4E4DE,#8BA888,#F8FAF9,#2C3E36,#E0EBE7,Sage Green + Soft Teal + Muted Earth + Peaceful,"{ primary: '#A7C4BC', secondary: '#D4E4DE', cta: '#8BA888', background: '#F8FAF9', foreground: '#2C3E36' }","box-shadow: 0 0 20px rgba(139,168,136,0.4); text-shadow: 0 0 10px rgba(139,168,136,0.6);","{ background: '#0A0A0A', text: '#F8FAFC', primary: '#A7C4BC', secondary: '#D4E4DE', cta: '#8BA888', border: '#27272A' }","{""background"":""#F8FAF9"",""foreground"":""#2C3E36"",""primary"":""#A7C4BC"",""primary-foreground"":""#000000"",""secondary"":""#D4E4DE"",""secondary-foreground"":""#000000"",""muted"":""#6c9784"",""accent"":""#8BA888"",""destructive"":""#EF4444""}","[""#e4edea"",""#c6d8d3"",""#A7C4BC"",""#88b0a5"",""#6a9b8d"",""#d4e4de"",""#b5d0c6""]","{""background"":""#F8FAF9"",""foreground"":""#2C3E36"",""card"":""#FFFFFF"",""card-foreground"":""#2C3E36"",""popover"":""#FFFFFF"",""popover-foreground"":""#2C3E36"",""primary"":""#A7C4BC"",""primary-foreground"":""#000000"",""secondary"":""#D4E4DE"",""secondary-foreground"":""#000000"",""muted"":""#F4F4F5"",""muted-foreground"":""#71717A"",""accent"":""#8BA888"",""accent-foreground"":""#000000"",""destructive"":""#EF4444"",""destructive-foreground"":""#FFFFFF"",""border"":""#E0EBE7"",""input"":""#E0EBE7"",""ring"":""#A7C4BC""}"
|
|
111
111
|
110,Web3 Cyberpunk,"web3, crypto, cyberpunk, neon, blockchain",#00FFFF,#FF00FF,#FFFF00,#0D0D0D,#E0E0E0,#1A1A2E,Neon Cyan + Magenta + Electric accents + Dark base,"{ primary: '#00FFFF', secondary: '#FF00FF', cta: '#FFFF00', background: '#0D0D0D', foreground: '#E0E0E0' }","box-shadow: 0 0 20px rgba(255,255,0,0.4); text-shadow: 0 0 10px rgba(255,255,0,0.6);","{ background: '#0D0D0D', text: '#E0E0E0', primary: '#00FFFF', secondary: '#FF00FF', cta: '#FFFF00', border: '#1A1A2E' }","{""background"":""#0D0D0D"",""foreground"":""#E0E0E0"",""primary"":""#00FFFF"",""primary-foreground"":""#000000"",""secondary"":""#FF00FF"",""secondary-foreground"":""#FFFFFF"",""muted"":""#ffffff"",""accent"":""#FFFF00"",""destructive"":""#EF4444""}","[""#66ffff"",""#33ffff"",""#00FFFF"",""#00cccc"",""#009999"",""#ff00ff"",""#cc00cc""]","{""background"":""#0D0D0D"",""foreground"":""#E0E0E0"",""card"":""#191919"",""card-foreground"":""#E0E0E0"",""popover"":""#191919"",""popover-foreground"":""#E0E0E0"",""primary"":""#00FFFF"",""primary-foreground"":""#000000"",""secondary"":""#FF00FF"",""secondary-foreground"":""#FFFFFF"",""muted"":""#252525"",""muted-foreground"":""#A1A1AA"",""accent"":""#FFFF00"",""accent-foreground"":""#000000"",""destructive"":""#EF4444"",""destructive-foreground"":""#FFFFFF"",""border"":""#1A1A2E"",""input"":""#313131"",""ring"":""#00FFFF""}"
|
|
112
112
|
111,Sustainability Earth,"sustainable, organic, earth, natural, eco",#6B8E23,#DEB887,#8FBC8F,#FFFAF0,#2F4F2F,#D2C4A8,Olive Green + Burlap + Earth Brown + Natural textures,"{ primary: '#6B8E23', secondary: '#DEB887', cta: '#8FBC8F', background: '#FFFAF0', foreground: '#2F4F2F' }","box-shadow: 0 0 20px rgba(143,188,143,0.4); text-shadow: 0 0 10px rgba(143,188,143,0.6);","{ background: '#0A0A0A', text: '#F8FAFC', primary: '#6B8E23', secondary: '#DEB887', cta: '#8FBC8F', border: '#27272A' }","{""background"":""#FFFAF0"",""foreground"":""#2F4F2F"",""primary"":""#6B8E23"",""primary-foreground"":""#FFFFFF"",""secondary"":""#DEB887"",""secondary-foreground"":""#000000"",""muted"":""#6ea96e"",""accent"":""#8FBC8F"",""destructive"":""#EF4444""}","[""#a4d146"",""#8ab72d"",""#6B8E23"",""#4c6519"",""#2d3c0f"",""#deb887"",""#d3a05f""]","{""background"":""#FFFAF0"",""foreground"":""#2F4F2F"",""card"":""#FFFFFF"",""card-foreground"":""#2F4F2F"",""popover"":""#FFFFFF"",""popover-foreground"":""#2F4F2F"",""primary"":""#6B8E23"",""primary-foreground"":""#FFFFFF"",""secondary"":""#DEB887"",""secondary-foreground"":""#000000"",""muted"":""#F4F4F5"",""muted-foreground"":""#71717A"",""accent"":""#8FBC8F"",""accent-foreground"":""#000000"",""destructive"":""#EF4444"",""destructive-foreground"":""#FFFFFF"",""border"":""#D2C4A8"",""input"":""#D2C4A8"",""ring"":""#6B8E23""}"
|
|
113
|
-
112,Premium Luxury Minimal,"luxury, premium, minimal, elegant, sophisticated",#1A1A1A,#C9B037,#FFFFFF,#FAFAFA,#0A0A0A,#E5E5E5,Near Black + Gold accent + White space + Refined,"{ primary: '#1A1A1A', secondary: '#C9B037', cta: '#FFFFFF', background: '#FAFAFA', foreground: '#0A0A0A' }","box-shadow: 0 0 20px rgba(255,255,255,0.4); text-shadow: 0 0 10px rgba(255,255,255,0.6);","{ background: '#0A0A0A', text: '#F8FAFC', primary: '#242424', secondary: '#C9B037', cta: '#FFFFFF', border: '#27272A' }","{""background"":""#FAFAFA"",""foreground"":""#0A0A0A"",""primary"":""#1A1A1A"",""primary-foreground"":""#FFFFFF"",""secondary"":""#C9B037"",""secondary-foreground"":""#000000"",""muted"":""#565656"",""accent"":""#FFFFFF"",""destructive"":""#EF4444""}","[""#4d4d4d"",""#333333"",""#1A1A1A"",""#000000"",""#000000"",""#c9b037"",""#a18d2c""]","{""background"":""#FAFAFA"",""foreground"":""#0A0A0A"",""card"":""#FFFFFF"",""card-foreground"":""#0A0A0A"",""popover"":""#FFFFFF"",""popover-foreground"":""#0A0A0A"",""primary"":""#1A1A1A"",""primary-foreground"":""#FFFFFF"",""secondary"":""#C9B037"",""secondary-foreground"":""#000000"",""muted"":""#F4F4F5"",""muted-foreground"":""#71717A"",""accent"":""#FFFFFF"",""accent-foreground"":""#000000"",""destructive"":""#EF4444"",""destructive-foreground"":""#FFFFFF"",""border"":""#E5E5E5"",""input"":""#E5E5E5"",""ring"":""#1A1A1A""}"
|
|
113
|
+
112,Premium Luxury Minimal,"luxury, premium, minimal, elegant, sophisticated",#1A1A1A,#C9B037,#FFFFFF,#FAFAFA,#0A0A0A,#E5E5E5,Near Black + Gold accent + White space + Refined,"{ primary: '#1A1A1A', secondary: '#C9B037', cta: '#FFFFFF', background: '#FAFAFA', foreground: '#0A0A0A' }","box-shadow: 0 0 20px rgba(255,255,255,0.4); text-shadow: 0 0 10px rgba(255,255,255,0.6);","{ background: '#0A0A0A', text: '#F8FAFC', primary: '#242424', secondary: '#C9B037', cta: '#FFFFFF', border: '#27272A' }","{""background"":""#FAFAFA"",""foreground"":""#0A0A0A"",""primary"":""#1A1A1A"",""primary-foreground"":""#FFFFFF"",""secondary"":""#C9B037"",""secondary-foreground"":""#000000"",""muted"":""#565656"",""accent"":""#FFFFFF"",""destructive"":""#EF4444""}","[""#4d4d4d"",""#333333"",""#1A1A1A"",""#000000"",""#000000"",""#c9b037"",""#a18d2c""]","{""background"":""#FAFAFA"",""foreground"":""#0A0A0A"",""card"":""#FFFFFF"",""card-foreground"":""#0A0A0A"",""popover"":""#FFFFFF"",""popover-foreground"":""#0A0A0A"",""primary"":""#1A1A1A"",""primary-foreground"":""#FFFFFF"",""secondary"":""#C9B037"",""secondary-foreground"":""#000000"",""muted"":""#F4F4F5"",""muted-foreground"":""#71717A"",""accent"":""#FFFFFF"",""accent-foreground"":""#000000"",""destructive"":""#EF4444"",""destructive-foreground"":""#FFFFFF"",""border"":""#E5E5E5"",""input"":""#E5E5E5"",""ring"":""#1A1A1A""}"
|
|
114
|
+
113,Kids Baby Parenting App,"kids, children, baby, parenting, family, childcare, toddler, infant, playful, friendly",#F472B6,#34D399,#FB923C,#FFFBEB,#57534E,#FDE68A,Soft Pink + Mint Green + Warm Orange CTA for playful friendly childcare experience,"{ primary: '#F472B6', secondary: '#34D399', cta: '#FB923C', background: '#FFFBEB', foreground: '#57534E' }","box-shadow: 0 0 20px rgba(244,114,182,0.3); text-shadow: 0 0 10px rgba(52,211,153,0.4);","{ background: '#1F2937', text: '#F9FAFB', primary: '#F472B6', secondary: '#34D399', cta: '#FB923C', border: '#374151' }","{""background"":""#FFFBEB"",""foreground"":""#57534E"",""primary"":""#F472B6"",""primary-foreground"":""#FFFFFF"",""secondary"":""#34D399"",""secondary-foreground"":""#000000"",""muted"":""#FEF3C7"",""accent"":""#FB923C"",""destructive"":""#EF4444""}","[""#fbcfe8"",""#f9a8d4"",""#F472B6"",""#ec4899"",""#db2777"",""#34d399"",""#10b981""]","{""background"":""#FFFBEB"",""foreground"":""#57534E"",""card"":""#FFFFFF"",""card-foreground"":""#57534E"",""popover"":""#FFFFFF"",""popover-foreground"":""#57534E"",""primary"":""#F472B6"",""primary-foreground"":""#FFFFFF"",""secondary"":""#34D399"",""secondary-foreground"":""#000000"",""muted"":""#FEF3C7"",""muted-foreground"":""#78716C"",""accent"":""#FB923C"",""accent-foreground"":""#000000"",""destructive"":""#EF4444"",""destructive-foreground"":""#FFFFFF"",""border"":""#FDE68A"",""input"":""#FDE68A"",""ring"":""#F472B6""}"
|
|
115
|
+
114,Manufacturing Industrial Platform,"manufacturing, industrial, factory, production, assembly, machinery, warehouse, logistics",#1E40AF,#EA580C,#16A34A,#F1F5F9,#1E293B,#CBD5E1,Industrial Blue + Safety Orange + Action Green CTA for production and logistics,"{ primary: '#1E40AF', secondary: '#EA580C', cta: '#16A34A', background: '#F1F5F9', foreground: '#1E293B' }","box-shadow: 0 0 15px rgba(30,64,175,0.3); text-shadow: none;","{ background: '#0F172A', text: '#F8FAFC', primary: '#3B82F6', secondary: '#F97316', cta: '#22C55E', border: '#334155' }","{""background"":""#F1F5F9"",""foreground"":""#1E293B"",""primary"":""#1E40AF"",""primary-foreground"":""#FFFFFF"",""secondary"":""#EA580C"",""secondary-foreground"":""#FFFFFF"",""muted"":""#E2E8F0"",""accent"":""#16A34A"",""destructive"":""#DC2626""}","[""#93c5fd"",""#60a5fa"",""#1E40AF"",""#1e3a8a"",""#172554"",""#ea580c"",""#c2410c""]","{""background"":""#F1F5F9"",""foreground"":""#1E293B"",""card"":""#FFFFFF"",""card-foreground"":""#1E293B"",""popover"":""#FFFFFF"",""popover-foreground"":""#1E293B"",""primary"":""#1E40AF"",""primary-foreground"":""#FFFFFF"",""secondary"":""#EA580C"",""secondary-foreground"":""#FFFFFF"",""muted"":""#E2E8F0"",""muted-foreground"":""#64748B"",""accent"":""#16A34A"",""accent-foreground"":""#FFFFFF"",""destructive"":""#DC2626"",""destructive-foreground"":""#FFFFFF"",""border"":""#CBD5E1"",""input"":""#CBD5E1"",""ring"":""#1E40AF""}"
|
|
116
|
+
115,Crowdfunding Fundraising Platform,"crowdfunding, fundraising, kickstarter, donation, campaign, pledge, backer, community, funding",#0D9488,#22C55E,#F97316,#FAFAFA,#374151,#E5E7EB,Trust Teal + Progress Green + Urgency Orange CTA for crowdfunding campaigns,"{ primary: '#0D9488', secondary: '#22C55E', cta: '#F97316', background: '#FAFAFA', foreground: '#374151' }","box-shadow: 0 0 20px rgba(13,148,136,0.3); text-shadow: 0 0 10px rgba(34,197,94,0.4);","{ background: '#111827', text: '#F9FAFB', primary: '#14B8A6', secondary: '#34D399', cta: '#FB923C', border: '#1F2937' }","{""background"":""#FAFAFA"",""foreground"":""#374151"",""primary"":""#0D9488"",""primary-foreground"":""#FFFFFF"",""secondary"":""#22C55E"",""secondary-foreground"":""#000000"",""muted"":""#F3F4F6"",""accent"":""#F97316"",""destructive"":""#EF4444""}","[""#5eead4"",""#2dd4bf"",""#0D9488"",""#0f766e"",""#115e59"",""#22c55e"",""#16a34a""]","{""background"":""#FAFAFA"",""foreground"":""#374151"",""card"":""#FFFFFF"",""card-foreground"":""#374151"",""popover"":""#FFFFFF"",""popover-foreground"":""#374151"",""primary"":""#0D9488"",""primary-foreground"":""#FFFFFF"",""secondary"":""#22C55E"",""secondary-foreground"":""#000000"",""muted"":""#F3F4F6"",""muted-foreground"":""#6B7280"",""accent"":""#F97316"",""accent-foreground"":""#000000"",""destructive"":""#EF4444"",""destructive-foreground"":""#FFFFFF"",""border"":""#E5E7EB"",""input"":""#E5E7EB"",""ring"":""#0D9488""}"
|
package/data/icons.csv
CHANGED
|
@@ -130,3 +130,43 @@ STT,Category,Icon Name,Keywords,Library,Import Code,Usage,Best For,Style,Animati
|
|
|
130
130
|
129,Developer,test-tube,testing experiment lab quality,Lucide,import { TestTube } from 'lucide-react',<TestTube />,Testing test tube,Outline,hover:scale-105 hover:rotate-12 transition-transform
|
|
131
131
|
130,Social,at-sign,mention email handle username,Lucide,import { AtSign } from 'lucide-react',<AtSign />,At mention,Outline,hover:scale-110 hover:rotate-12 transition-transform
|
|
132
132
|
131,Social,share-2,distribute send social share,Lucide,import { Share2 } from 'lucide-react',<Share2 />,Share distribute,Outline,hover:scale-110 transition-transform
|
|
133
|
+
132,Navigation,arrow-right,next forward continue navigate cta,Heroicons,"import { ArrowRightIcon } from '@heroicons/react/24/outline'","<ArrowRightIcon className=""h-6 w-6"" />",Forward button next step CTA,Outline,group-hover:translate-x-1 transition-transform
|
|
134
|
+
133,Navigation,arrow-long-right,long navigation arrow continue flow,Heroicons,"import { ArrowLongRightIcon } from '@heroicons/react/24/outline'","<ArrowLongRightIcon className=""h-6 w-6"" />",Long navigation arrows flow indicators,Outline,group-hover:translate-x-2 transition-transform
|
|
135
|
+
134,Navigation,bars-3,hamburger menu navigation toggle mobile,Heroicons,"import { Bars3Icon } from '@heroicons/react/24/outline'","<Bars3Icon className=""h-6 w-6"" />",Mobile navigation hamburger menu,Outline,hover:scale-105 transition-transform
|
|
136
|
+
135,Navigation,x-mark,close cancel dismiss remove exit,Heroicons,"import { XMarkIcon } from '@heroicons/react/24/outline'","<XMarkIcon className=""h-6 w-6"" />",Modal close dismiss button,Outline,hover:rotate-90 transition-transform
|
|
137
|
+
136,Status,check,checkmark success done complete tick,Heroicons,"import { CheckIcon } from '@heroicons/react/24/outline'","<CheckIcon className=""h-6 w-6"" />",Checkmark success confirmation,Outline,hover:scale-110 transition-transform
|
|
138
|
+
137,Status,check-circle,verified complete success approved,Heroicons,"import { CheckCircleIcon } from '@heroicons/react/24/solid'","<CheckCircleIcon className=""h-6 w-6"" />",Verified badge completion indicator,Solid,hover:scale-110 transition-transform
|
|
139
|
+
138,AI,sparkles,ai magic features smart automation,Heroicons,"import { SparklesIcon } from '@heroicons/react/24/outline'","<SparklesIcon className=""h-6 w-6"" />",AI features magic automation smart,Outline,hover:scale-110 animate-pulse transition-transform
|
|
140
|
+
139,Notification,bell,notifications alerts reminders badge,Heroicons,"import { BellIcon } from '@heroicons/react/24/outline'","<BellIcon className=""h-6 w-6"" />",Notification bell alerts,Outline,hover:animate-wiggle transition-transform
|
|
141
|
+
140,User,user,profile account person avatar member,Heroicons,"import { UserIcon } from '@heroicons/react/24/outline'","<UserIcon className=""h-6 w-6"" />",User profile account avatar,Outline,hover:scale-110 transition-transform
|
|
142
|
+
141,Settings,cog-6-tooth,settings preferences configuration gear,Heroicons,"import { Cog6ToothIcon } from '@heroicons/react/24/outline'","<Cog6ToothIcon className=""h-6 w-6"" />",Settings preferences configuration,Outline,hover:rotate-45 transition-transform
|
|
143
|
+
142,Action,magnifying-glass,search find lookup query discover,Heroicons,"import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'","<MagnifyingGlassIcon className=""h-6 w-6"" />",Search input find functionality,Outline,hover:scale-110 transition-transform
|
|
144
|
+
143,Navigation,home,homepage main dashboard start landing,Heroicons,"import { HomeIcon } from '@heroicons/react/24/outline'","<HomeIcon className=""h-6 w-6"" />",Home navigation main page,Outline,hover:scale-110 transition-transform
|
|
145
|
+
144,Social,heart,favorite like love wishlist bookmark,Heroicons,"import { HeartIcon } from '@heroicons/react/24/outline'","<HeartIcon className=""h-6 w-6"" />",Favorites likes wishlist,Outline,hover:scale-125 hover:text-red-500 transition-all
|
|
146
|
+
145,Rating,star,rating favorite review bookmark quality,Heroicons,"import { StarIcon } from '@heroicons/react/24/solid'","<StarIcon className=""h-6 w-6"" />",Ratings reviews favorites,Solid,hover:scale-110 hover:text-yellow-500 transition-all
|
|
147
|
+
146,Action,plus,add create new insert expand,Heroicons,"import { PlusIcon } from '@heroicons/react/24/outline'","<PlusIcon className=""h-6 w-6"" />",Add button create new item,Outline,hover:rotate-90 transition-transform
|
|
148
|
+
147,AI,Brain,ai artificial intelligence ml neural smart thinking,Phosphor,"import { Brain } from '@phosphor-icons/react'","<Brain size={24} />",AI features intelligence neural networks,Regular,hover:scale-110 transition-transform
|
|
149
|
+
148,AI,Robot,chatbot automation bot assistant virtual,Phosphor,"import { Robot } from '@phosphor-icons/react'","<Robot size={24} />",Chatbots AI assistants automation,Regular,hover:animate-bounce transition-transform
|
|
150
|
+
149,Status,Lightning,fast performance speed quick instant,Phosphor,"import { Lightning } from '@phosphor-icons/react'","<Lightning size={24} weight=""fill"" />",Performance speed indicators,Fill,hover:text-yellow-400 transition-colors
|
|
151
|
+
150,Status,Lightbulb,ideas tips suggestions hint inspiration,Phosphor,"import { Lightbulb } from '@phosphor-icons/react'","<Lightbulb size={24} />",Ideas tips suggestions tooltips,Regular,hover:text-yellow-500 transition-colors
|
|
152
|
+
151,Development,Code,development programming coding syntax developer,Phosphor,"import { Code } from '@phosphor-icons/react'","<Code size={24} />",Code snippets development sections,Regular,hover:scale-110 transition-transform
|
|
153
|
+
152,Development,TerminalWindow,cli terminal commands console shell,Phosphor,"import { TerminalWindow } from '@phosphor-icons/react'","<TerminalWindow size={24} />",Terminal CLI command interfaces,Regular,hover:scale-105 transition-transform
|
|
154
|
+
153,Technology,Cpu,processing tech hardware chip processor,Phosphor,"import { Cpu } from '@phosphor-icons/react'","<Cpu size={24} />",Processing tech hardware specs,Regular,hover:animate-pulse transition-all
|
|
155
|
+
154,Data,Database,storage data backend records repository,Phosphor,"import { Database } from '@phosphor-icons/react'","<Database size={24} />",Data storage database features,Regular,hover:scale-110 transition-transform
|
|
156
|
+
155,Communication,ChatCircle,messages chat conversation discuss support,Phosphor,"import { ChatCircle } from '@phosphor-icons/react'","<ChatCircle size={24} />",Chat messaging conversations,Regular,hover:scale-110 transition-transform
|
|
157
|
+
156,Communication,EnvelopeSimple,email mail message inbox newsletter,Phosphor,"import { EnvelopeSimple } from '@phosphor-icons/react'","<EnvelopeSimple size={24} />",Email contact newsletter signup,Regular,hover:scale-105 transition-transform
|
|
158
|
+
157,Navigation,Globe,web international world global worldwide,Phosphor,"import { Globe } from '@phosphor-icons/react'","<Globe size={24} />",International web global features,Regular,hover:animate-spin-slow transition-transform
|
|
159
|
+
158,Security,Lock,security protected private secure auth,Phosphor,"import { Lock } from '@phosphor-icons/react'","<Lock size={24} weight=""fill"" />",Security authentication protected,Fill,hover:scale-110 transition-transform
|
|
160
|
+
159,Action,Rocket,launch deploy startup fast ship release,Phosphor,"import { Rocket } from '@phosphor-icons/react'","<Rocket size={24} />",Launch deploy startup features,Regular,hover:-translate-y-1 transition-transform
|
|
161
|
+
160,AI,MagicWand,ai generation create magic transform,Phosphor,"import { MagicWand } from '@phosphor-icons/react'","<MagicWand size={24} />",AI generation magic features,Regular,hover:rotate-12 hover:scale-110 transition-all
|
|
162
|
+
161,Localization,Translate,i18n languages translation localization multilingual,Phosphor,"import { Translate } from '@phosphor-icons/react'","<Translate size={24} />",Translation i18n language switcher,Regular,hover:scale-110 transition-transform
|
|
163
|
+
162,Development,IconBrandGithub,github code repository vcs version control,Tabler,"import { IconBrandGithub } from '@tabler/icons-react'","<IconBrandGithub size={24} stroke={1.5} />",GitHub integration code repos,Outline,hover:scale-110 transition-transform
|
|
164
|
+
163,Design,IconBrandFigma,figma design tool ui prototype,Tabler,"import { IconBrandFigma } from '@tabler/icons-react'","<IconBrandFigma size={24} stroke={1.5} />",Design tool Figma integration,Outline,hover:scale-110 transition-transform
|
|
165
|
+
164,Navigation,IconDashboard,dashboard analytics overview metrics,Tabler,"import { IconDashboard } from '@tabler/icons-react'","<IconDashboard size={24} stroke={1.5} />",Dashboard analytics home,Outline,hover:scale-105 transition-transform
|
|
166
|
+
165,Action,IconSettings,settings configuration preferences options,Tabler,"import { IconSettings } from '@tabler/icons-react'","<IconSettings size={24} stroke={1.5} />",Settings config preferences,Outline,hover:rotate-45 transition-transform
|
|
167
|
+
166,Action,IconLogout,logout signout exit leave session,Tabler,"import { IconLogout } from '@tabler/icons-react'","<IconLogout size={24} stroke={1.5} />",Sign out logout actions,Outline,hover:translate-x-1 transition-transform
|
|
168
|
+
167,Navigation,IconMenu2,menu hamburger navigation mobile toggle,Tabler,"import { IconMenu2 } from '@tabler/icons-react'","<IconMenu2 size={24} stroke={1.5} />",Menu hamburger mobile nav,Outline,hover:scale-110 transition-transform
|
|
169
|
+
168,Communication,IconBell,bell notification alert reminder,Tabler,"import { IconBell } from '@tabler/icons-react'","<IconBell size={24} stroke={1.5} />",Notifications alerts reminders,Outline,hover:animate-bounce transition-transform
|
|
170
|
+
169,Theme,IconSun,sun light mode day bright theme,Tabler,"import { IconSun } from '@tabler/icons-react'","<IconSun size={24} stroke={1.5} />",Light mode theme toggle,Outline,hover:rotate-90 hover:scale-110 transition-all
|
|
171
|
+
170,Theme,IconMoon,moon dark mode night theme toggle,Tabler,"import { IconMoon } from '@tabler/icons-react'","<IconMoon size={24} stroke={1.5} />",Dark mode theme toggle,Outline,hover:rotate-12 transition-transform
|
|
172
|
+
171,AI,IconBrandOpenai,openai ai chatgpt artificial intelligence ml,Tabler,"import { IconBrandOpenai } from '@tabler/icons-react'","<IconBrandOpenai size={24} stroke={1.5} />",AI OpenAI ChatGPT features,Outline,hover:scale-110 hover:animate-pulse transition-all
|
package/data/products.csv
CHANGED
|
@@ -113,3 +113,6 @@ No,Product Type,Keywords,Primary Style Recommendation,Secondary Styles,Landing P
|
|
|
113
113
|
112,Fitness / Wellness App,"fitness, workout, health, gym, exercise, wellness",Vibrant & Block-based + Dark Mode (OLED),"Motion-Driven, Micro-interactions",Feature-Rich + Social Proof,Activity Dashboard + Progress,Energetic Orange #FF6B35 + Progress green + Dark bg,Workout plans. Progress tracking. Activity logging. Achievements. Social features.
|
|
114
114
|
113,Social Media Platform,"social, network, community, sharing, feed, connections",Vibrant & Block-based + Motion-Driven,"Aurora UI, Micro-interactions",Feature-Rich + Social Proof,Feed + Analytics Dashboard,Brand primary + Engagement metrics + Notification red,Feed. Profiles. Messaging. Notifications. Content creation. Discovery. Privacy settings.
|
|
115
115
|
114,Podcast / Audio Platform,"podcast, audio, streaming, episodes, listening, shows",Dark Mode (OLED) + Minimalism,"Motion-Driven, Vibrant accents",Storytelling + Feature-Rich,Player Dashboard + Analytics,Dark #121212 + Audio waveform accents + Brand,Audio player. Episode discovery. Playlist management. Podcast creation. Analytics.
|
|
116
|
+
115,Kids Baby Parenting App,"kids, children, baby, parenting, family, childcare, toddler, infant, nursery, playtime",Playful + Colorful + Rounded,"Soft UI Evolution, Friendly",Trust-first with Safety Features,Visual Progress + Simple Navigation,Bright pastels + Friendly colors + Safe warm tones,Child safety first. Parental controls. Age-appropriate content. Playful UI. Trust signals. COPPA compliance.
|
|
117
|
+
116,Manufacturing Industrial Platform,"manufacturing, industrial, factory, production, assembly, plant, warehouse, logistics, machinery",Professional + Data-heavy,"Corporate, Technical",Trust + Features,Data-Dense + Real-Time Monitoring,Professional Blue + Safety Yellow/Orange + Industrial Grey,Real-time monitoring. Equipment status. Production metrics. Safety alerts. Shift management. IoT integration.
|
|
118
|
+
117,Crowdfunding Fundraising Platform,"crowdfunding, fundraising, kickstarter, donation, campaign, pledge, backer, investment, community, funding",Trust-focused + Social Proof,"Progress-driven, Community",Hero with Progress + Social Proof,Campaign Progress + Backer Management,Trust Blue + Progress Green + Urgency Orange,Progress bars. Backer counts. Social proof. Countdown timers. Reward tiers. Creator profiles. Payment security.
|
|
@@ -42,7 +42,7 @@ No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
|
|
|
42
42
|
41,Accessibility,Focus visible,Show focus only for keyboard users,focus-visible:ring-2,Focus on all interactions,focus-visible:ring-2,focus:ring-2 (shows on click too),Medium,
|
|
43
43
|
42,Accessibility,Reduced motion,Respect user motion preferences,motion-reduce:animate-none,Ignore motion preferences,motion-reduce:transition-none,No reduced motion support,High,https://tailwindcss.com/docs/hover-focus-and-other-states#prefers-reduced-motion
|
|
44
44
|
43,Performance,Configure content paths,Tailwind needs to know where classes are used,Use 'content' array in config,Use deprecated 'purge' option (v2),"content: ['./src/**/*.{js,ts,jsx,tsx}']",purge: [...],High,https://tailwindcss.com/docs/content-configuration
|
|
45
|
-
44,Performance,JIT mode,Use JIT for faster builds and smaller bundles,
|
|
45
|
+
44,Performance,JIT mode,Use JIT for faster builds and smaller bundles,Tailwind v4 uses Lightning CSS engine (faster than JIT),Full CSS in development,Tailwind v4 with Lightning CSS,Tailwind v2 without JIT,Medium,https://tailwindcss.com/docs/installation
|
|
46
46
|
45,Performance,Avoid @apply bloat,Use @apply sparingly,Direct utilities in HTML,Heavy @apply usage,class='px-4 py-2 rounded',@apply px-4 py-2 rounded;,Low,https://tailwindcss.com/docs/reusing-styles
|
|
47
47
|
46,Plugins,Official plugins,Use official Tailwind plugins,@tailwindcss/forms typography aspect-ratio,Custom implementations,@tailwindcss/forms,Custom form reset CSS,Medium,https://tailwindcss.com/docs/plugins
|
|
48
48
|
47,Plugins,Custom utilities,Create utilities for repeated patterns,Custom utility in config,Repeated arbitrary values,Custom shadow utility,"shadow-[0_4px_20px_rgba(0,0,0,0.1)] everywhere",Medium,
|
|
@@ -54,11 +54,21 @@ No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
|
|
|
54
54
|
53,Layout,Use shrink-0 shorthand,Shorter class name for flex-shrink-0,shrink-0 shrink,flex-shrink-0 flex-shrink,shrink-0,flex-shrink-0,Low,https://tailwindcss.com/docs/flex-shrink
|
|
55
55
|
54,Layout,Use size-* for square dimensions,Single utility for equal width and height,size-4 size-8 size-12,Separate h-* w-* for squares,size-6,h-6 w-6,Low,https://tailwindcss.com/docs/size
|
|
56
56
|
55,Images,SVG explicit dimensions,Add width/height attributes to SVGs to prevent layout shift before CSS loads,<svg class='size-6' width='24' height='24'>,SVG without explicit dimensions,<svg class='size-6' width='24' height='24'>,<svg class='size-6'>,High,
|
|
57
|
-
56,TailwindV4,CSS-first configuration,Tailwind v4 uses CSS for configuration instead of JS,@theme directive in CSS,tailwind.config.js for all config,"@theme { --color-primary: #3b82f6; }","module.exports = { theme: { colors: {...} } }",High,https://tailwindcss.com/docs/
|
|
58
|
-
57,TailwindV4,Use @theme directive,Define design tokens with @theme in CSS,@theme for custom values in CSS,JavaScript theme configuration,@theme { --font-sans: 'Inter'; },theme: { fontFamily: { sans: ['Inter'] } },High,https://tailwindcss.com/docs/
|
|
59
|
-
58,TailwindV4,Native CSS variables,Tailwind v4 uses native CSS custom properties,Use var(--color-*) directly,Tailwind color classes only,color: var(--color-primary),Only text-primary class,Medium,https://tailwindcss.com/docs/
|
|
60
|
-
59,TailwindV4,Automatic content detection,Tailwind v4 auto-detects template files,No content configuration needed,Manual content array in config,Automatic detection,"content: ['./src/**/*.{js,ts,jsx,tsx}']",Medium,https://tailwindcss.com/docs/
|
|
61
|
-
60,TailwindV4,Simplified color palette,Tailwind v4 simplifies color naming,Direct color names without number,Color-number pattern,"--color-blue: #3b82f6","colors: { blue: { 500: '#3b82f6' } }",Low,https://tailwindcss.com/docs/
|
|
62
|
-
61,TailwindV4,Lightning CSS integration,Tailwind v4 uses Lightning CSS for processing,Faster builds and modern CSS features,PostCSS-only processing,Built-in Lightning CSS,Separate PostCSS setup,Low,https://tailwindcss.com/docs/
|
|
63
|
-
62,TailwindV4,New gradient syntax,Use bg-linear-* for gradients in v4,bg-linear-to-r for gradients,bg-gradient-to-* syntax,bg-linear-to-r from-blue-500 to-purple-500,bg-gradient-to-r from-blue-500,Medium,https://tailwindcss.com/docs/
|
|
64
|
-
63,TailwindV4,Container queries built-in,Container queries native in v4,@container without plugin,tailwindcss-container-queries plugin,@container @lg:grid-cols-2,@container plugin required,Medium,https://tailwindcss.com/docs/
|
|
57
|
+
56,TailwindV4,CSS-first configuration,Tailwind v4 uses CSS for configuration instead of JS,@theme directive in CSS,tailwind.config.js for all config,"@theme { --color-primary: #3b82f6; }","module.exports = { theme: { colors: {...} } }",High,https://tailwindcss.com/docs/theme
|
|
58
|
+
57,TailwindV4,Use @theme directive,Define design tokens with @theme in CSS,@theme for custom values in CSS,JavaScript theme configuration,@theme { --font-sans: 'Inter'; },theme: { fontFamily: { sans: ['Inter'] } },High,https://tailwindcss.com/docs/theme
|
|
59
|
+
58,TailwindV4,Native CSS variables,Tailwind v4 uses native CSS custom properties,Use var(--color-*) directly,Tailwind color classes only,color: var(--color-primary),Only text-primary class,Medium,https://tailwindcss.com/docs/theme#theme-variable-reference
|
|
60
|
+
59,TailwindV4,Automatic content detection,Tailwind v4 auto-detects template files,No content configuration needed,Manual content array in config,Automatic detection,"content: ['./src/**/*.{js,ts,jsx,tsx}']",Medium,https://tailwindcss.com/docs/detecting-classes-in-source-files
|
|
61
|
+
60,TailwindV4,Simplified color palette,Tailwind v4 simplifies color naming,Direct color names without number,Color-number pattern,"--color-blue: #3b82f6","colors: { blue: { 500: '#3b82f6' } }",Low,https://tailwindcss.com/docs/theme#colors
|
|
62
|
+
61,TailwindV4,Lightning CSS integration,Tailwind v4 uses Lightning CSS for processing,Faster builds and modern CSS features,PostCSS-only processing,Built-in Lightning CSS,Separate PostCSS setup,Low,https://tailwindcss.com/docs/installation
|
|
63
|
+
62,TailwindV4,New gradient syntax,Use bg-linear-* for gradients in v4,bg-linear-to-r for gradients,bg-gradient-to-* syntax,bg-linear-to-r from-blue-500 to-purple-500,bg-gradient-to-r from-blue-500,Medium,https://tailwindcss.com/docs/background-image#linear-gradients
|
|
64
|
+
63,TailwindV4,Container queries built-in,Container queries native in v4,@container without plugin,tailwindcss-container-queries plugin,@container @lg:grid-cols-2,@container plugin required,Medium,https://tailwindcss.com/docs/container-queries
|
|
65
|
+
64,TailwindV4,@starting-style animations,CSS entry animations using @starting-style for appearing elements,@starting-style for enter animations,Framer Motion for simple entry animations,@starting-style { opacity: 0; transform: translateY(10px); },useSpring({ from: { opacity: 0 } }),Medium,https://tailwindcss.com/docs/animation
|
|
66
|
+
65,TailwindV4,Anchor positioning,Native CSS anchor positioning for popovers and tooltips,position-anchor and anchor() for positioning,Popper.js or Floating UI for simple cases,position-anchor: --trigger; top: anchor(bottom);,useFloating({ placement: 'bottom' }),Medium,https://tailwindcss.com/docs/position
|
|
67
|
+
66,TailwindV4,P3 wide gamut colors,Tailwind v4 supports P3 color space for vibrant colors,oklch() color space for vibrant colors,hex/rgb for colors needing vibrancy,--color-accent: oklch(0.7 0.25 250),--color-accent: #3b82f6,Low,https://tailwindcss.com/docs/theme#colors
|
|
68
|
+
67,TailwindV4,Simplified dark mode with light-dark(),Use CSS light-dark() function for dark mode in @theme,light-dark() in @theme variables,dark: prefix on every utility class,@theme { --color-bg: light-dark(#ffffff #0a0a0a); },bg-white dark:bg-gray-900,Medium,https://tailwindcss.com/docs/dark-mode
|
|
69
|
+
68,TailwindV4,Zero-config PostCSS,No postcss.config.js needed in Tailwind v4,@import 'tailwindcss' in CSS,Complex PostCSS configuration,@import 'tailwindcss';,postcss.config.js with plugins array,Low,https://tailwindcss.com/docs/installation
|
|
70
|
+
69,TailwindV4,Angled gradient utilities,New gradient angle utilities in v4,bg-linear-45 bg-linear-135,Custom CSS for angled gradients,bg-linear-45 from-blue-500 to-purple-500,background: linear-gradient(45deg ...),Low,https://tailwindcss.com/docs/background-image#linear-gradients
|
|
71
|
+
70,TailwindV4,@theme namespace customization,Organize theme variables with namespaces,@theme inline for component tokens,Global theme pollution,@theme inline { --card-radius: 0.5rem; },All tokens in global @theme,Low,https://tailwindcss.com/docs/theme#with-a-custom-namespace
|
|
72
|
+
71,TailwindV4,Import Tailwind layers selectively,Import only needed Tailwind layers,@import 'tailwindcss/utilities',Importing all of Tailwind,@import 'tailwindcss/theme' 'tailwindcss/utilities',@import 'tailwindcss' (full),Low,https://tailwindcss.com/docs/preflight#disabling-preflight
|
|
73
|
+
72,TailwindV4,Composable variants,Chain variants without arbitrary variants,hover:focus:text-blue-500,Arbitrary variant syntax,group-hover:focus:visible:underline,[&:hover:focus]:underline,Low,https://tailwindcss.com/docs/hover-focus-and-other-states#stacking-variants
|
|
74
|
+
73,TailwindV4,Use @source for content paths,Explicit source configuration in v4 CSS,@source directive in CSS files,content array in JS config,@source '../components/**/*.tsx';,"content: ['./components/**/*.tsx']",Medium,https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources
|
package/data/stacks/nextjs.csv
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
|
|
2
|
-
1,Routing,Use App Router for new projects,App Router is the recommended approach in Next.js
|
|
2
|
+
1,Routing,Use App Router for new projects,App Router is the recommended approach in Next.js 15+,app/ directory with page.tsx,pages/ for new projects,app/dashboard/page.tsx,pages/dashboard.tsx,Medium,https://nextjs.org/docs/app
|
|
3
3
|
2,Routing,Use file-based routing,Create routes by adding files in app directory,page.tsx for routes layout.tsx for layouts,Manual route configuration,app/blog/[slug]/page.tsx,Custom router setup,Medium,https://nextjs.org/docs/app/building-your-application/routing
|
|
4
4
|
3,Routing,Colocate related files,Keep components styles tests with their routes,Component files alongside page.tsx,Separate components folder,app/dashboard/_components/,components/dashboard/,Low,
|
|
5
5
|
4,Routing,Use route groups for organization,Group routes without affecting URL,Parentheses for route groups,Nested folders affecting URL,(marketing)/about/page.tsx,marketing/about/page.tsx,Low,https://nextjs.org/docs/app/building-your-application/routing/route-groups
|
|
@@ -59,3 +59,11 @@ No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
|
|
|
59
59
|
58,Next15,Instrumentation hook,Run code at server startup,instrumentation.ts for monitoring setup,Initialize in middleware or routes,export async function register() {},Initialize in first route hit,Medium,https://nextjs.org/docs/app/building-your-application/optimizing/instrumentation
|
|
60
60
|
59,Next15,Enhanced Forms,next/form component for client-side navigation,<Form> with automatic prefetching,Standard form without navigation benefit,import { Form } from 'next/form',<form action={...}>,Low,https://nextjs.org/docs/app/api-reference/components/form
|
|
61
61
|
60,Next15,TypeScript config support,next.config.ts with full TypeScript,Use next.config.ts for type safety,JavaScript config only,next.config.ts with types,next.config.js,Low,https://nextjs.org/docs/app/building-your-application/configuring/typescript
|
|
62
|
+
61,View Transitions,Use View Transitions with next/link,Next.js supports View Transitions API natively for smooth page transitions,Add viewTransition prop to Link component,Manual DOM manipulation for page transitions,"<Link viewTransition href=""/about"">About</Link>",router.push() without transition handling,Medium,https://nextjs.org/docs/app/api-reference/components/link#viewtransition
|
|
63
|
+
62,View Transitions,Configure View Transitions globally,Enable experimental view transitions in next.config.js for app-wide support,Enable in experimental config section,Forget browser support varies across browsers,"experimental: { viewTransition: true }",No viewTransition configuration,Medium,https://nextjs.org/docs/app/api-reference/config/next-config-js/viewTransition
|
|
64
|
+
63,View Transitions,View Transition with useTransitionRouter,Use transition-aware navigation with React startTransition for smooth UI updates,Use startTransition with router navigation,Direct push without transition context,"startTransition(() => router.push('/page'))",router.push('/page') without transition,Low,https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating
|
|
65
|
+
64,Next16,Next.js 16 requires React 19+,Next.js 16 fully embraces React 19 features including Server Components Actions and Compiler,Ensure React 19.2+ is installed with Next.js 16,Use React 18 with Next.js 16,"""react"": ""^19.2.0"" ""next"": ""^16.0.0""","""react"": ""^18.2.0"" ""next"": ""^16.0.0""",High,https://nextjs.org/docs/app/building-your-application/upgrading/version-16
|
|
66
|
+
65,Next16,Use Turbopack for both dev and build,Turbopack is now fully stable in Next.js 16 for development and production builds,next build --turbopack for faster builds,Stick with Webpack for production,next build --turbopack,next build (webpack slower),Medium,https://nextjs.org/docs/app/api-reference/turbopack
|
|
67
|
+
66,Next16,Use new caching directives,Next.js 16 introduces more granular caching control with use cache directive,Use cache directives for dynamic data,Rely only on fetch cache options,'use cache'; export default async function Page() {},Manual revalidate logic everywhere,Medium,https://nextjs.org/docs/app/building-your-application/caching
|
|
68
|
+
67,Next16,Enable React Compiler in Next.js 16,Next.js 16 has built-in support for React Compiler for automatic optimization,Enable experimental.reactCompiler in next.config,Manual useMemo/useCallback when Compiler handles it,"experimental: { reactCompiler: true }",Extensive manual memoization,High,https://nextjs.org/docs/app/api-reference/config/next-config-js/reactCompiler
|
|
69
|
+
68,Next16,Leverage improved streaming,Next.js 16 improves streaming performance with better Suspense boundary handling,Use loading.tsx and Suspense for streaming,Block entire page on slow data,export default function Loading() { return <Skeleton />; },await slowData before render,Medium,https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming
|
package/data/stacks/react.csv
CHANGED
|
@@ -58,5 +58,24 @@ No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
|
|
|
58
58
|
57,React19,Use useFormStatus in forms,Access form pending state in child components,useFormStatus in submit button component,Prop drilling pending state,const { pending } = useFormStatus(),<Button disabled={parentPending}/>,Medium,https://react.dev/reference/react-dom/hooks/useFormStatus
|
|
59
59
|
58,React19,Use useActionState for form state,Manage form action results and errors,useActionState for action result state,useState + try/catch pattern,"const [state, formAction] = useActionState(action, initialState)","const [error, setError] = useState()",Medium,https://react.dev/reference/react/useActionState
|
|
60
60
|
59,React19,Use use() for promises and context,Read promises and context with use hook,use(promise) for Suspense integration,useEffect + useState for promises,const data = use(dataPromise),useEffect(() => promise.then(setData)),Medium,https://react.dev/reference/react/use
|
|
61
|
-
60,React19,Ref as prop in function components,Pass ref directly as prop without forwardRef,ref prop in function components,forwardRef wrapper,function Input({ ref }) { return <input ref={ref}/> },forwardRef((props ref) => ...),Low,https://react.dev/
|
|
61
|
+
60,React19,Ref as prop in function components,Pass ref directly as prop without forwardRef,ref prop in function components,forwardRef wrapper,function Input({ ref }) { return <input ref={ref}/> },forwardRef((props ref) => ...),Low,https://react.dev/reference/react-dom/components/common#ref-callback
|
|
62
62
|
61,React19,Document metadata in components,Render title and meta in component tree,<title> <meta> in components render,React Helmet or manual document.title,return <><title>Page</title><div>...</div></>,useEffect(() => document.title = ...),Low,https://react.dev/reference/react-dom/components/title
|
|
63
|
+
62,Animation,Use Framer Motion for complex animations,Framer Motion provides declarative animations with spring physics,Framer Motion for complex orchestrated animations,CSS for complex multi-step animations,"<motion.div animate={{ opacity: 1 scale: 1 }} />",@keyframes with multiple steps,Medium,https://www.framer.com/motion/
|
|
64
|
+
63,Animation,AnimatePresence for exit animations,Wrap components that unmount to animate their exit,AnimatePresence around conditional renders,Unmount without exit animation,"<AnimatePresence>{show && <motion.div exit={{ opacity: 0 }} />}</AnimatePresence>",{show && <div className='fade-out'>},High,https://www.framer.com/motion/animate-presence/
|
|
65
|
+
64,Animation,Layout animations with layout prop,Use layout prop for automatic layout animations,layout prop for position/size changes,Manual FLIP animations,"<motion.div layout>{expanded && <Content />}</motion.div>",useLayoutEffect with getBoundingClientRect,Medium,https://www.framer.com/motion/layout-animations/
|
|
66
|
+
65,Animation,Variants for orchestrated animations,Define animation states as variants for reuse and orchestration,variants with staggerChildren for lists,Inline animate props everywhere,"<motion.ul variants={container}><motion.li variants={item} /></motion.ul>",Each child with separate animate timing,Medium,https://www.framer.com/motion/animation/#variants
|
|
67
|
+
66,Animation,useAnimate hook for imperative control,Use useAnimate for programmatic animation sequences,useAnimate for complex sequences and timelines,Multiple refs with manual animation,"const [scope animate] = useAnimate(); await animate(scope.current { x: 100 })",element.style.transform in useEffect,Medium,https://www.framer.com/motion/use-animate/
|
|
68
|
+
67,Animation,Respect reduced motion preferences,Check prefers-reduced-motion for accessibility,useReducedMotion hook or media query,Ignore motion preferences,"const prefersReduced = useReducedMotion(); <motion.div animate={prefersReduced ? {} : { scale: 1.1 }} />",<motion.div animate={{ scale: 1.1 }} /> always,High,https://www.framer.com/motion/use-reduced-motion/
|
|
69
|
+
68,Animation,whileHover and whileTap gestures,Use gesture props for interactive animations,whileHover whileTap for micro-interactions,onMouseEnter/onMouseLeave with state,"<motion.button whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} />","<button onMouseEnter={() => setHover(true)} style={{ transform: hover ? 'scale(1.05)' : '' }} />",Low,https://www.framer.com/motion/gestures/
|
|
70
|
+
69,Animation,useScroll for scroll-linked animations,Use useScroll hook for scroll-based animations,useScroll with useTransform for parallax,Scroll listeners with state updates,"const { scrollYProgress } = useScroll(); const opacity = useTransform(scrollYProgress [0 1] [0 1])",window.addEventListener('scroll' () => setState(...))",Medium,https://www.framer.com/motion/use-scroll/
|
|
71
|
+
70,Animation,useSpring for physics-based animations,React Spring useSpring provides natural physics-based animations with spring dynamics,useSpring for smooth natural-feeling animations,CSS transitions for dynamic values,"const [springs api] = useSpring(() => ({ from: { opacity: 0 } to: { opacity: 1 } }))",transition: opacity 0.3s ease-in-out,Medium,https://www.react-spring.dev/docs/components/use-spring
|
|
72
|
+
71,Animation,useTransition for list animations,Animate items entering and leaving lists with useTransition,useTransition for adding/removing list items,Manual key tracking with useState,"const transitions = useTransition(items { keys: item => item.id from: { opacity: 0 } enter: { opacity: 1 } leave: { opacity: 0 } })",{items.map(item => <div key={item.id} className={removing ? 'fade-out' : ''} />)},Medium,https://www.react-spring.dev/docs/components/use-transition
|
|
73
|
+
72,Animation,useSprings for multiple animated elements,Animate multiple elements with individual spring configs,useSprings for coordinated multi-element animations,Multiple useSpring calls,"const [springs api] = useSprings(items.length index => ({ x: index * 100 }))",items.map(() => useSpring({...})),Medium,https://www.react-spring.dev/docs/components/use-springs
|
|
74
|
+
73,Animation,useTrail for staggered animations,Create staggered animations where each element follows the previous,useTrail for cascading sequential animations,Manual delay calculations per item,"const trail = useTrail(items.length { from: { opacity: 0 y: 20 } to: { opacity: 1 y: 0 } })",items.map((item i) => ({ animationDelay: i * 100 + 'ms' })),Medium,https://www.react-spring.dev/docs/components/use-trail
|
|
75
|
+
74,Animation,Controller for imperative spring control,Use Controller class for imperative animation control outside React lifecycle,Controller for complex sequences and external triggers,Refs with manual style manipulation,"const ctrl = new Controller({ opacity: 0 }); ctrl.start({ opacity: 1 }); ctrl.stop()",ref.current.style.opacity = '1'; setTimeout(...),Medium,https://www.react-spring.dev/docs/concepts/controllers-and-springs
|
|
76
|
+
75,React-Compiler,Use React Compiler for automatic memoization,React Compiler v1.0 (stable Oct 2025) automatically optimizes re-renders. No manual useMemo/useCallback needed.,Enable React Compiler let it handle memoization,Manual useMemo/useCallback for basic cases,// With React Compiler - no memo needed\nfunction Component({ data }) { return <List items={data} />; },// Old pattern - unnecessary with compiler\nconst memoized = useMemo(() => expensiveCalc(data) [data]);,High,https://react.dev/learn/react-compiler
|
|
77
|
+
76,React192,Use Activity for state preservation,<Activity> component in React 19.2 preserves state of hidden components and pre-renders content,Use <Activity mode="hidden"> to preserve unmounted component state,Unmount components that need state preserved,<Activity mode={isVisible ? "visible" : "hidden"}><ExpensiveComponent /></Activity>,{isVisible && <ExpensiveComponent />},Medium,https://react.dev/reference/react/Activity
|
|
78
|
+
77,React192,Use useEffectEvent for non-reactive Effect logic,useEffectEvent extracts non-reactive logic from Effects avoiding stale closures,useEffectEvent for event handlers in Effects,Disable lint rules to suppress stale closure warnings,"const onTick = useEffectEvent(() => { console.log(count); }); useEffect(() => { const id = setInterval(onTick 1000); return () => clearInterval(id); } []);","useEffect(() => { const id = setInterval(() => console.log(count) 1000); return () => clearInterval(id); } []); // stale count",High,https://react.dev/reference/react/useEffectEvent
|
|
79
|
+
78,React-Compiler,Let Compiler handle memoization,React Compiler automatically determines when to memoize values and callbacks,Write straightforward code Compiler optimizes,Over-optimize with manual memo wrappers,function List({ items }) { return items.map(item => <Item key={item.id} item={item} />); },"const List = memo(({ items }) => { const memoItems = useMemo(() => items.map(...) [items]); });",Medium,https://react.dev/learn/react-compiler
|
|
80
|
+
79,React-Compiler,Use eslint-plugin-react-hooks v6,React Compiler comes with enhanced ESLint rules that catch more issues,Upgrade to eslint-plugin-react-hooks@6 with flat config,Use outdated v4 ESLint rules,"// eslint.config.mjs\nimport reactHooks from 'eslint-plugin-react-hooks';\nexport default [reactHooks.configs.recommended];","// .eslintrc.js - outdated format\nmodule.exports = { extends: ['plugin:react-hooks/recommended'] };",Medium,https://react.dev/learn/react-compiler#usage-with-eslint
|
|
81
|
+
80,React192,Use React 19.0.1+ for security,Critical vulnerabilities found in RSC Dec 2025. Use 19.0.1+ 19.1.2+ or 19.2.1+,Keep React updated to latest patch,Use vulnerable versions (19.0.0 19.1.0-19.1.1 19.2.0),"react": "^19.2.3","react": "19.0.0",Critical,https://react.dev/blog
|
package/data/styles.csv
CHANGED
|
@@ -68,4 +68,9 @@
|
|
|
68
68
|
"67","Emotional Design 2.0","General","Sentiment-aware, mood-responsive, emotional intelligence, adaptive tone, empathetic UI","Mood-adaptive: Calm #E0F2FE, Happy #FEF3C7, Focus #EDE9FE, Alert #FEE2E2","Sentiment-driven accents, time-of-day palette shifts","Breathing backgrounds, mood-responsive micro-animations, sentiment feedback loops","Mental health apps, wellness platforms, journaling, meditation, emotional tracking","Data-heavy dashboards, financial, legal, government","✓ Full","✓ Full","⚡ Good","✓ WCAG AA","✓ High","✓ High","React 10/10, Tailwind 9/10","2024+ Wellness","Medium",".emotional { transition: background-color 1s ease; } .emotional-calm { background: #E0F2FE; } .emotional-happy { background: #FEF3C7; } .emotional-focus { background: #EDE9FE; } .emotional-alert { background: #FEE2E2; } .emotional-breathe { animation: breathe 6s ease-in-out infinite; } @keyframes breathe { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.02); opacity: 1; } } .emotional-feedback { transition: all 400ms ease; border-radius: 16px; padding: 20px; } .emotional-positive { box-shadow: 0 0 20px rgba(34,197,94,0.2); }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}"
|
|
69
69
|
"68","Neo-Skeuomorphism","General","Realistic 3D, tactile, physical metaphors, depth, material design, tangible interfaces","Rich realistic: Leather #8B4513, Metal #C0C0C0, Wood #DEB887, Glass #E8F4F8","Material-specific gradients, realistic lighting, texture overlays","Tactile press animations (300-400ms), material-specific feedback, realistic shadows","Premium apps, gaming interfaces, luxury products, music apps, creative tools","Flat design systems, minimalist brands, accessibility-first","◐ Partial","◐ Partial","⚠ Moderate","⚠ Texture readability","◐ Medium","◐ Medium","CSS-in-JS 8/10, Custom 9/10","2024+ Revival","High",".neo-skeu { background: linear-gradient(180deg, #E8E8E8 0%, #C0C0C0 50%, #A0A0A0 100%); border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.5), inset 0 -2px 0 rgba(0,0,0,0.1); transition: all 300ms ease; } .neo-skeu:active { transform: translateY(2px); box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.3); } .neo-skeu-leather { background: linear-gradient(180deg, #A0522D 0%, #8B4513 50%, #6B3410 100%); } .neo-skeu-wood { background: linear-gradient(180deg, #DEB887 0%, #D2B48C 50%, #C4A882 100%); } .neo-skeu-glass { background: rgba(232,244,248,0.8); backdrop-filter: blur(10px); }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}"
|
|
70
70
|
"69","Data Maximalism","BI/Analytics","Information-dense, organized complexity, high data density, structured chaos, power user","Neutral base #F8FAFC, Category colors for data series, High contrast text #0F172A","Data type specific: Positive #22C55E, Negative #EF4444, Neutral #64748B, Highlight #F59E0B","Hover reveals, progressive disclosure, collapsible sections, zoom interactions","Trading platforms, analytics dashboards, developer tools, research platforms, power user apps","Consumer apps, onboarding flows, mobile-first, elderly users","✓ Full","✓ Full","⚡ Excellent","⚠ Complexity","✗ Low","✗ N/A","D3.js 10/10, AG Grid 10/10, Recharts 9/10","2024+ Pro Tools","High",".data-max { background: #F8FAFC; color: #0F172A; font-family: 'SF Mono', 'Roboto Mono', monospace; font-size: 12px; } .data-max-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; } .data-max-cell { padding: 8px; border: 1px solid #E2E8F0; } .data-max-cell:hover { background: #F1F5F9; } .data-max-positive { color: #22C55E; } .data-max-negative { color: #EF4444; } .data-max-highlight { background: #FEF3C7; } .data-max-collapse { max-height: 0; overflow: hidden; transition: max-height 200ms ease; } .data-max-collapse.open { max-height: 1000px; }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}"
|
|
71
|
-
"70","Ambient Computing UI","General","Contextual, invisible, zero-UI, calm technology, proactive, environment-aware, seamless","Near-invisible: Soft White #FAFAFA, Gentle Grey #E5E7EB, Ambient accents","Context-triggered colors, environment-responsive","Subtle presence indicators, context-aware reveals, ambient notifications, fade transitions","Smart home, IoT dashboards, ambient displays, contextual assistants, background apps","Complex workflows, data entry, explicit control required","✓ Full","✓ Full","⚡ Excellent","✓ WCAG AA","✓ High","◐ Medium","React 10/10, Tailwind 10/10, Custom 10/10","2024+ AI-Era","Low",".ambient { background: #FAFAFA; color: #374151; } .ambient-hidden { opacity: 0; transform: translateY(10px); transition: all 500ms ease; } .ambient-hidden.visible { opacity: 1; transform: translateY(0); } .ambient-notification { background: rgba(255,255,255,0.9); backdrop-filter: blur(8px); border-radius: 12px; padding: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); animation: ambient-fade 300ms ease; } @keyframes ambient-fade { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .ambient-indicator { width: 8px; height: 8px; background: #E5E7EB; border-radius: 50%; transition: background 300ms ease; } .ambient-indicator.active { background: #10B981; }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}"
|
|
71
|
+
"70","Ambient Computing UI","General","Contextual, invisible, zero-UI, calm technology, proactive, environment-aware, seamless","Near-invisible: Soft White #FAFAFA, Gentle Grey #E5E7EB, Ambient accents","Context-triggered colors, environment-responsive","Subtle presence indicators, context-aware reveals, ambient notifications, fade transitions","Smart home, IoT dashboards, ambient displays, contextual assistants, background apps","Complex workflows, data entry, explicit control required","✓ Full","✓ Full","⚡ Excellent","✓ WCAG AA","✓ High","◐ Medium","React 10/10, Tailwind 10/10, Custom 10/10","2024+ AI-Era","Low",".ambient { background: #FAFAFA; color: #374151; } .ambient-hidden { opacity: 0; transform: translateY(10px); transition: all 500ms ease; } .ambient-hidden.visible { opacity: 1; transform: translateY(0); } .ambient-notification { background: rgba(255,255,255,0.9); backdrop-filter: blur(8px); border-radius: 12px; padding: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); animation: ambient-fade 300ms ease; } @keyframes ambient-fade { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .ambient-indicator { width: 8px; height: 8px; background: #E5E7EB; border-radius: 50%; transition: background 300ms ease; } .ambient-indicator.active { background: #10B981; }","{""type"":""spring"",""stiffness"":100,""damping"":15}","{""hidden"":{""opacity"":0,""y"":10},""visible"":{""opacity"":1,""y"":0},""hover"":{""y"":-2}}"
|
|
72
|
+
"71","Agentic Interface","General","AI agent, autonomous, copilot, multi-step workflow, tool use, reasoning, agent chain, Claude, ChatGPT, task orchestration","Neutral base #F8FAFC, AI Purple #7C3AED, Success #10B981, Warning #F59E0B, Processing Blue #3B82F6","Status: Thinking #FDE68A, Acting #93C5FD, Complete #BBF7D0, Error #FECACA, Pending #E5E7EB","Thinking pulse (3-dot), step-by-step reveals, action preview cards, confidence indicators, tool execution spinners","AI assistants, autonomous agents, copilot UIs, workflow automation, Claude/ChatGPT interfaces, task managers","Static forms, traditional CRUD, content-heavy blogs, print-first layouts","✓ Full","✓ Full","⚡ Excellent","✓ WCAG AA","✓ High","✓ High","React 10/10, Tailwind 10/10, Framer Motion 9/10","2026 AI-Native","Medium",".agentic { background: #F8FAFC; } .agent-step { border-left: 3px solid #E5E7EB; padding: 16px; margin: 8px 0; transition: all 300ms ease; } .agent-step.thinking { border-color: #F59E0B; background: #FFFBEB; } .agent-step.acting { border-color: #3B82F6; background: #EFF6FF; } .agent-step.complete { border-color: #10B981; background: #ECFDF5; } .agent-thinking-dots { display: flex; gap: 6px; } .agent-thinking-dots span { width: 8px; height: 8px; background: #F59E0B; border-radius: 50%; animation: agent-bounce 1.4s infinite; } .agent-thinking-dots span:nth-child(2) { animation-delay: 0.2s; } .agent-thinking-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes agent-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-8px); } } .agent-tool { background: #F3F4F6; border-radius: 8px; padding: 12px; font-family: monospace; }","{""type"":""spring"",""stiffness"":120,""damping"":14}","{""hidden"":{""opacity"":0,""x"":-20},""visible"":{""opacity"":1,""x"":0},""thinking"":{""opacity"":[0.5,1],""transition"":{""repeat"":""Infinity"",""duration"":1}},""complete"":{""scale"":[1,1.02,1]}}"
|
|
73
|
+
"72","Streaming UI","General","Token streaming, real-time generation, typewriter effect, LLM output, live text, ChatGPT-style, incremental render, cursor blink","Dark terminal #0F172A, Soft white #F1F5F9, Cursor green #22C55E, Code block #1E293B","Token highlight #FBBF24, Selection #3B82F6, Link #60A5FA, Inline code #E2E8F0","Token-by-token fade-in (50ms), cursor blink (530ms), smooth auto-scroll, code block syntax highlighting","AI chat interfaces, LLM applications, code generation tools, real-time assistants, streaming APIs","Static content, forms, dashboards, data tables, print layouts","✓ Full","✓ Full (dark native)","⚡ Excellent","✓ WCAG AA","✓ High","✓ High","React 10/10, Tailwind 10/10, Vanilla JS 9/10","2026 AI-Native","Low",".streaming-ui { background: #0F172A; color: #F1F5F9; font-family: system-ui, -apple-system, sans-serif; line-height: 1.7; } .streaming-text { display: inline; } .streaming-token { opacity: 0; animation: token-fade 150ms ease forwards; } @keyframes token-fade { to { opacity: 1; } } .streaming-cursor { display: inline-block; width: 2px; height: 1.2em; background: #22C55E; margin-left: 2px; animation: cursor-blink 1.06s step-end infinite; } @keyframes cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .streaming-container { max-height: 70vh; overflow-y: auto; scroll-behavior: smooth; } .streaming-code { background: #1E293B; border-radius: 8px; padding: 16px; font-family: monospace; font-size: 14px; overflow-x: auto; }","{""type"":""tween"",""ease"":""linear"",""duration"":0.05}","{""hidden"":{""opacity"":0},""visible"":{""opacity"":1,""transition"":{""staggerChildren"":0.02}},""token"":{""opacity"":[0,1],""transition"":{""duration"":0.1}}}"
|
|
74
|
+
"73","Spatial UI 3D","General","Vision Pro, AR/VR, spatial computing, depth layers, floating panels, 3D transforms, z-axis, immersive, glass cards, perspective","Deep space #000814, Glass white rgba(255,255,255,0.12), System blue #007AFF, Highlight #5856D6","Depth shadow layers, ambient glow #7C3AED, Focus ring #0A84FF, Surface tint rgba(255,255,255,0.05)","Z-depth parallax, gaze-hover scale (1.03), pinch-select feedback, floating card hover, perspective transforms","VisionOS apps, AR/VR interfaces, spatial dashboards, immersive experiences, 3D product showcases, Apple ecosystem","2D-only platforms, low-end devices, text-heavy content, accessibility-critical apps","✓ Full","✓ Full (dark native)","⚠ Moderate (GPU)","⚠ Depth perception","◐ Medium","✓ High","Three.js 10/10, R3F 10/10, SwiftUI 10/10, CSS 8/10","2026 Spatial Era","High",".spatial-3d { perspective: 1000px; transform-style: preserve-3d; } .spatial-panel { background: rgba(255,255,255,0.12); backdrop-filter: blur(60px) saturate(180%); -webkit-backdrop-filter: blur(60px) saturate(180%); border-radius: 32px; border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 25px 50px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.1) inset; transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1); } .spatial-panel:hover { transform: scale(1.03) translateZ(30px); box-shadow: 0 35px 70px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.15) inset; } .spatial-depth-1 { transform: translateZ(0); } .spatial-depth-2 { transform: translateZ(50px); } .spatial-depth-3 { transform: translateZ(100px); } .spatial-glow { box-shadow: 0 0 40px rgba(124,58,237,0.3); } @keyframes spatial-float { 0%, 100% { transform: translateY(0) translateZ(0); } 50% { transform: translateY(-10px) translateZ(20px); } }","{""type"":""spring"",""stiffness"":60,""damping"":20,""mass"":1.5}","{""hidden"":{""opacity"":0,""z"":-100,""scale"":0.9},""visible"":{""opacity"":1,""z"":0,""scale"":1},""hover"":{""z"":30,""scale"":1.03},""focus"":{""boxShadow"":""0 0 0 4px rgba(10,132,255,0.5)""}}"
|
|
75
|
+
"74","Voice UI","General","Voice-first, audio interface, hands-free, accessibility, speech recognition, audio visualization, waveform, listening state","Minimal chrome #FAFAFA, Voice active #7C3AED, Listening #3B82F6, Speaking #10B981, Error #EF4444","Waveform gradient #818CF8 to #C084FC, Silence state #D1D5DB, Feedback pulse #A78BFA","Audio waveform animation, listening pulse ring, speaking indicator bars, voice activity detection, state transitions","Voice assistants, accessibility tools, hands-free apps, car interfaces, smart speakers, dictation tools","Visual-heavy dashboards, complex forms, data tables, image galleries","✓ Full","✓ Full","⚡ Excellent","✓ Excellent (voice-native)","✓ High","✓ High","React 10/10, Web Audio API 10/10, Tailwind 9/10","2026 AI-Native","Medium",".voice-ui { background: #FAFAFA; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; } .voice-orb { width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(135deg, #818CF8, #C084FC); transition: all 300ms ease; } .voice-orb.listening { animation: voice-pulse 2s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(124,58,237,0.4); } @keyframes voice-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(124,58,237,0.4); } 50% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(124,58,237,0); } } .voice-waveform { display: flex; align-items: center; gap: 3px; height: 40px; } .voice-waveform span { width: 4px; background: #7C3AED; border-radius: 2px; animation: wave-bar 1s ease-in-out infinite; } .voice-waveform span:nth-child(odd) { animation-delay: 0.2s; } @keyframes wave-bar { 0%, 100% { height: 8px; } 50% { height: 32px; } } .voice-transcript { font-size: 1.5rem; text-align: center; max-width: 600px; color: #1F2937; }","{""type"":""spring"",""stiffness"":100,""damping"":18}","{""hidden"":{""opacity"":0,""scale"":0.8},""visible"":{""opacity"":1,""scale"":1},""listening"":{""scale"":[1,1.05,1],""transition"":{""repeat"":""Infinity"",""duration"":2}},""speaking"":{""scale"":1.02,""boxShadow"":""0 0 30px rgba(16,185,129,0.4)""}}"
|
|
76
|
+
"75","Scroll-Driven Animation","General","scroll-driven, animation-timeline, parallax, reveal, scroll-linked, scroll-triggered, viewport animation, CSS scroll","Neutral base #F8FAFC, Reveal accent #3B82F6, Parallax depth #1E293B, Highlight #10B981","Scroll progress #60A5FA, Fade gradient rgba(255,255,255,0), Section divider #E2E8F0","Scroll-linked transforms, viewport reveal animations, parallax depth effects, progress indicators, fade-in on scroll","Modern landing pages, scroll storytelling, product showcases, portfolio sites, marketing pages, interactive articles","Static dashboards, data tables, forms, accessibility-critical apps, print layouts","✓ Full","✓ Full","⚡ Excellent (CSS-only)","✓ WCAG AA (with reduced-motion)","✓ High","✓ High","Vanilla CSS 10/10, Tailwind 9/10, React 9/10","2024+ Modern CSS","Medium","@keyframes reveal { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .scroll-reveal { animation: reveal linear; animation-timeline: view(); animation-range: entry 10% cover 30%; } @keyframes parallax { to { transform: translateY(-50%); } } .scroll-parallax { animation: parallax linear; animation-timeline: scroll(); } .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: #3B82F6; animation: progress linear; animation-timeline: scroll(); } @keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .scroll-reveal, .scroll-parallax { animation: none; opacity: 1; transform: none; } }","{""type"":""linear"",""ease"":""linear""}","{""hidden"":{""opacity"":0,""y"":30},""visible"":{""opacity"":1,""y"":0},""parallax"":{""y"":""-50%""}}"
|
package/data/ux-guidelines.csv
CHANGED
|
@@ -143,3 +143,11 @@ const MobileNav = () => (<nav className=""fixed bottom-0 inset-x-0 bg-white bord
|
|
|
143
143
|
113,Collaboration,Real-time Presence,Web,Show collaborator presence and activity,Cursor positions avatars typing indicators,No indication of other users,Live cursors with names,No presence indication,Medium
|
|
144
144
|
114,AI Systems,Graceful Degradation,All,AI features should degrade gracefully when unavailable,Fallback to non-AI alternative,Feature completely unavailable,"const SmartInput = ({ onSubmit }) => { const { data: suggestions error isLoading } = useAISuggestions(); return (<div className=""space-y-2""><div className=""relative""><input type=""text"" className=""w-full px-3 py-2 border rounded-lg pr-10"" placeholder=""Type or get AI suggestions..."" />{!error && <button onClick={getAISuggestion} disabled={isLoading} className=""absolute right-2 top-1/2 -translate-y-1/2 p-1 hover:bg-gray-100 rounded"" aria-label=""Get AI suggestion""><Sparkles className={`h-4 w-4 ${isLoading ? 'animate-pulse text-gray-400' : 'text-blue-600'}`} /></button>}</div>{error && <p className=""text-sm text-gray-500"">AI suggestions unavailable. Please type manually.</p>}{!error && suggestions && <SuggestionsList items={suggestions} />}</div>);};","// AI unavailable: <div className=""text-red-600"">Error: AI service is down</div> // Feature completely broken",High
|
|
145
145
|
115,Onboarding,AI Expectation Setting,All,Set realistic expectations for AI capabilities,Clear explanation of what AI can and cannot do,Overpromise AI capabilities,"const AIDisclaimer = () => (<div className=""p-4 bg-blue-50 border border-blue-200 rounded-lg""><div className=""flex items-start gap-3""><Info className=""h-5 w-5 text-blue-600 flex-shrink-0 mt-0.5"" /><div><h3 className=""font-medium text-blue-900"">About AI Assistant</h3><div className=""mt-2 text-sm text-blue-800 space-y-2""><p><strong>Can help with:</strong> Drafting content summarizing text answering questions brainstorming ideas</p><p><strong>Limitations:</strong> May produce inaccurate information. Cannot access real-time data or browse the web. Not suitable for medical legal or financial advice.</p><p className=""text-blue-600"">Always verify important information independently.</p></div></div></div></div>);","<p>AI can do anything you need!</p> // Overpromising leads to disappointment",High
|
|
146
|
+
116,Animation,View Transitions API,Web,Use View Transitions for smooth page-to-page navigation,Enable with startViewTransition() or CSS @view-transition,Instant jumps between pages without transition,"document.startViewTransition(() => { updateDOM(); }); // Or in CSS: @view-transition { navigation: auto; }","updateDOM(); // Direct DOM update without transition causes jarring page change",High
|
|
147
|
+
117,Animation,View Transition Names,Web,Named elements persist across page transitions with visual continuity,Add view-transition-name to shared elements like hero images,"Forget to name elements that should persist across views","<img src={hero} style={{ viewTransitionName: 'hero-image' }} alt=""Hero"" /> // Element morphs between pages","<img src={hero} alt=""Hero"" /> // No view-transition-name means no cross-page animation",Medium
|
|
148
|
+
118,Navigation,Cross-Document View Transitions,Web,Same-origin navigation transitions in Next.js/SPAs for seamless UX,Use Link with viewTransition prop in Next.js 15+,Ignore browser support - use progressive enhancement,"<Link viewTransition href=""/about"">About</Link> // Enables smooth cross-document transitions","<Link href=""/about"">About</Link> // No viewTransition prop means instant page swap",Medium
|
|
149
|
+
119,Animation,View Transition Fallback,Web,Handle browsers without View Transitions API support gracefully,Check document.startViewTransition support before using,Assume all browsers support View Transitions API,"if (document.startViewTransition) { document.startViewTransition(() => updateDOM()); } else { updateDOM(); } // Progressive enhancement","document.startViewTransition(() => updateDOM()); // Crashes in unsupported browsers",High
|
|
150
|
+
120,Animation,CSS Scroll-Driven Animations Basics,Web,Use animation-timeline: scroll() for scroll-linked animations,CSS animation-timeline: scroll(),JavaScript scroll event listeners,"animation-timeline: scroll(); animation-range: entry cover;","window.addEventListener('scroll', updateAnimation)",High
|
|
151
|
+
121,Animation,View Timeline for Element Visibility,Web,Use animation-timeline: view() for viewport-based animations,view() timeline for reveal animations,IntersectionObserver for simple reveals,"animation-timeline: view(); animation-range: entry 0% cover 40%;","useIntersectionObserver hook",Medium
|
|
152
|
+
122,Animation,Scroll-Driven Parallax Effects,Web,Create parallax without JavaScript using scroll(),CSS-only parallax with scroll timeline,requestAnimationFrame parallax,"@keyframes parallax { to { transform: translateY(-50%); } } .parallax { animation: parallax linear; animation-timeline: scroll(); }","onScroll={() => setTranslateY(scrollY * 0.5)}",Medium
|
|
153
|
+
123,Animation,Performance of Scroll Animations,Web,Prefer CSS scroll animations for better performance,CSS handles animation compositing,JS mutations every frame,".scroll-anim { animation: reveal linear; animation-timeline: scroll(); } /* Browser optimizes compositing */","requestAnimationFrame(() => element.style.transform = ...) // JS mutations every frame",High
|