UI/UX Pro Max

design/ui-ux

UI/UX design intelligence with searchable database

#design#ui#ux#design-system

Back to list

Files

28 files

Expand to preview CSV and code files. Default collapsed for scanability.

data/24 files

stacks/13 files

astro.csv11.6 KB

No	Category	Guideline	Description	Do	Don't	Code Good	Code Bad	Severity	Docs URL
1	Architecture	Use Islands Architecture	Astro's partial hydration only loads JS for interactive components	Interactive components with client directives	Hydrate entire page like traditional SPA	<Counter client:load />	Everything as client component	High	https://docs.astro.build/en/concepts/islands/
2	Architecture	Default to zero JS	Astro ships zero JS by default - add only when needed	Static components without client directive	Add client:load to everything	<Header /> (static)	<Header client:load /> (unnecessary)	High	https://docs.astro.build/en/basics/astro-components/
3	Architecture	Choose right client directive	Different directives for different hydration timing	client:visible for below-fold client:idle for non-critical	client:load for everything	<Comments client:visible />	<Comments client:load />	Medium	https://docs.astro.build/en/reference/directives-reference/#client-directives
4	Architecture	Use content collections	Type-safe content management for blogs docs	Content collections for structured content	Loose markdown files without schema	const posts = await getCollection('blog')	import.meta.glob('./posts/*.md')	High	https://docs.astro.build/en/guides/content-collections/
5	Architecture	Define collection schemas	Zod schemas for content validation	Schema with required fields and types	No schema validation	defineCollection({ schema: z.object({...}) })	defineCollection({})	High	https://docs.astro.build/en/guides/content-collections/#defining-a-collection-schema
6	Routing	Use file-based routing	Create routes by adding .astro files in pages/	pages/ directory for routes	Manual route configuration	src/pages/about.astro	Custom router setup	Medium	https://docs.astro.build/en/basics/astro-pages/
7	Routing	Dynamic routes with brackets	Use [param] for dynamic routes	Bracket notation for params	Query strings for dynamic content	pages/blog/[slug].astro	pages/blog.astro?slug=x	Medium	https://docs.astro.build/en/guides/routing/#dynamic-routes
8	Routing	Use getStaticPaths for SSG	Generate static pages at build time	getStaticPaths for known dynamic routes	Fetch at runtime for static content	export async function getStaticPaths() { return [...] }	No getStaticPaths with dynamic route	High	https://docs.astro.build/en/reference/api-reference/#getstaticpaths
9	Routing	Enable SSR when needed	Server-side rendering for dynamic content	output: 'server' or 'hybrid' for dynamic	SSR for purely static sites	export const prerender = false;	SSR for static blog	Medium	https://docs.astro.build/en/guides/server-side-rendering/
10	Components	Keep .astro for static	Use .astro components for static content	Astro components for layout structure	React/Vue for static markup	<Layout><slot /></Layout>	<ReactLayout>{children}</ReactLayout>	High
11	Components	Use framework components for interactivity	React Vue Svelte for complex interactivity	Framework component with client directive	Astro component with inline scripts	<ReactCounter client:load />	<script> in .astro for complex state	Medium	https://docs.astro.build/en/guides/framework-components/
12	Components	Pass data via props	Astro components receive props in frontmatter	Astro.props for component data	Global state for simple data	const { title } = Astro.props;	Import global store	Low	https://docs.astro.build/en/basics/astro-components/#component-props
13	Components	Use slots for composition	Named and default slots for flexible layouts	<slot /> for child content	Props for HTML content	<slot name=header />	<Component header={<div>...</div>} />	Medium	https://docs.astro.build/en/basics/astro-components/#slots
14	Components	Colocate component styles	Scoped styles in component file	<style> in same .astro file	Separate CSS files for component styles	<style> .card { } </style>	import './Card.css'	Low
15	Styling	Use scoped styles by default	Astro scopes styles to component automatically	<style> for component-specific styles	Global styles for everything	<style> h1 { } </style> (scoped)	<style is:global> for everything	Medium	https://docs.astro.build/en/guides/styling/#scoped-styles
16	Styling	Use is:global sparingly	Global styles only when truly needed	is:global for base styles or overrides	is:global for component styles	<style is:global> body { } </style>	<style is:global> .card { } </style>	Medium
17	Styling	Integrate Tailwind properly	Use @astrojs/tailwind integration	Official Tailwind integration	Manual Tailwind setup	npx astro add tailwind	Manual PostCSS config	Low	https://docs.astro.build/en/guides/integrations-guide/tailwind/
18	Styling	Use CSS variables for theming	Define tokens in :root	CSS custom properties for themes	Hardcoded colors everywhere	:root { --primary: #3b82f6; }	color: #3b82f6; everywhere	Medium
19	Data	Fetch in frontmatter	Data fetching in component frontmatter	Top-level await in frontmatter	useEffect for initial data	const data = await fetch(url)	client-side fetch on mount	High	https://docs.astro.build/en/guides/data-fetching/
20	Data	Use Astro.glob for local files	Import multiple local files	Astro.glob for markdown/data files	Manual imports for each file	const posts = await Astro.glob('./posts/*.md')	import post1; import post2;	Medium
21	Data	Prefer content collections over glob	Type-safe collections for structured content	getCollection() for blog/docs	Astro.glob for structured content	await getCollection('blog')	await Astro.glob('./blog/*.md')	High
22	Data	Use environment variables correctly	Import.meta.env for env vars	PUBLIC_ prefix for client vars	Expose secrets to client	import.meta.env.PUBLIC_API_URL	import.meta.env.SECRET in client	High	https://docs.astro.build/en/guides/environment-variables/
23	Performance	Preload critical assets	Use link preload for important resources	Preload fonts above-fold images	No preload hints	<link rel="preload" href="font.woff2" as="font">	No preload for critical assets	Medium
24	Performance	Optimize images with astro:assets	Built-in image optimization	<Image /> component for optimization	<img> for local images	import { Image } from 'astro:assets';	<img src="./image.jpg">	High	https://docs.astro.build/en/guides/images/
25	Performance	Use picture for responsive images	Multiple formats and sizes	<Picture /> for art direction	Single image size for all screens	<Picture /> with multiple sources	<Image /> with single size	Medium
26	Performance	Lazy load below-fold content	Defer loading non-critical content	loading=lazy for images client:visible for components	Load everything immediately	<img loading="lazy">	No lazy loading	Medium
27	Performance	Minimize client directives	Each directive adds JS bundle	Audit client: usage regularly	Sprinkle client:load everywhere	Only interactive components hydrated	Every component with client:load	High

Preview truncated.

View on GitHub

flutter.csv10.2 KB

No	Category	Guideline	Description	Do	Don't	Code Good	Code Bad	Severity	Docs URL
1	Widgets	Use StatelessWidget when possible	Immutable widgets are simpler	StatelessWidget for static UI	StatefulWidget for everything	class MyWidget extends StatelessWidget	class MyWidget extends StatefulWidget (static)	Medium	https://api.flutter.dev/flutter/widgets/StatelessWidget-class.html
2	Widgets	Keep widgets small	Single responsibility principle	Extract widgets into smaller pieces	Large build methods	Column(children: [Header() Content()])	500+ line build method	Medium
3	Widgets	Use const constructors	Compile-time constants for performance	const MyWidget() when possible	Non-const for static widgets	const Text('Hello')	Text('Hello') for literals	High	https://dart.dev/guides/language/language-tour#constant-constructors
4	Widgets	Prefer composition over inheritance	Combine widgets using children	Compose widgets	Extend widget classes	Container(child: MyContent())	class MyContainer extends Container	Medium
5	State	Use setState correctly	Minimal state in StatefulWidget	setState for UI state changes	setState for business logic	setState(() { _counter++; })	Complex logic in setState	Medium	https://api.flutter.dev/flutter/widgets/State/setState.html
6	State	Avoid setState in build	Never call setState during build	setState in callbacks only	setState in build method	onPressed: () => setState(() {})	build() { setState(); }	High
7	State	Use state management for complex apps	Provider Riverpod BLoC	State management for shared state	setState for global state	Provider.of<MyState>(context)	Global setState calls	Medium
8	State	Prefer Riverpod or Provider	Recommended state solutions	Riverpod for new projects	InheritedWidget manually	ref.watch(myProvider)	Custom InheritedWidget	Medium	https://riverpod.dev/
9	State	Dispose resources	Clean up controllers and subscriptions	dispose() for cleanup	Memory leaks from subscriptions	@override void dispose() { controller.dispose(); }	No dispose implementation	High
10	Layout	Use Column and Row	Basic layout widgets	Column Row for linear layouts	Stack for simple layouts	Column(children: [Text(), Button()])	Stack for vertical list	Medium	https://api.flutter.dev/flutter/widgets/Column-class.html
11	Layout	Use Expanded and Flexible	Control flex behavior	Expanded to fill space	Fixed sizes in flex containers	Expanded(child: Container())	Container(width: 200) in Row	Medium
12	Layout	Use SizedBox for spacing	Consistent spacing	SizedBox for gaps	Container for spacing only	SizedBox(height: 16)	Container(height: 16)	Low
13	Layout	Use LayoutBuilder for responsive	Respond to constraints	LayoutBuilder for adaptive layouts	Fixed sizes for responsive	LayoutBuilder(builder: (context constraints) {})	Container(width: 375)	Medium	https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html
14	Layout	Avoid deep nesting	Keep widget tree shallow	Extract deeply nested widgets	10+ levels of nesting	Extract widget to method or class	Column(Row(Column(Row(...))))	Medium
15	Lists	Use ListView.builder	Lazy list building	ListView.builder for long lists	ListView with children for large lists	ListView.builder(itemCount: 100, itemBuilder: ...)	ListView(children: items.map(...).toList())	High	https://api.flutter.dev/flutter/widgets/ListView-class.html
16	Lists	Provide itemExtent when known	Skip measurement	itemExtent for fixed height items	No itemExtent for uniform lists	ListView.builder(itemExtent: 50)	ListView.builder without itemExtent	Medium
17	Lists	Use keys for stateful items	Preserve widget state	Key for stateful list items	No key for dynamic lists	ListTile(key: ValueKey(item.id))	ListTile without key	High
18	Lists	Use SliverList for custom scroll	Custom scroll effects	CustomScrollView with Slivers	Nested ListViews	CustomScrollView(slivers: [SliverList()])	ListView inside ListView	Medium	https://api.flutter.dev/flutter/widgets/SliverList-class.html
19	Navigation	Use Navigator 2.0 or GoRouter	Declarative routing	go_router for navigation	Navigator.push for complex apps	GoRouter(routes: [...])	Navigator.push everywhere	Medium	https://pub.dev/packages/go_router
20	Navigation	Use named routes	Organized navigation	Named routes for clarity	Anonymous routes	Navigator.pushNamed(context '/home')	Navigator.push(context MaterialPageRoute())	Low
21	Navigation	Handle back button (PopScope)	Android back behavior and predictive back (Android 14+)	Use PopScope widget (WillPopScope is deprecated)	Use WillPopScope	PopScope(canPop: false, onPopInvoked: (didPop) => ...)	WillPopScope(onWillPop: ...)	High	https://api.flutter.dev/flutter/widgets/PopScope-class.html
22	Navigation	Pass typed arguments	Type-safe route arguments	Typed route arguments	Dynamic arguments	MyRoute(id: '123')	arguments: {'id': '123'}	Medium
23	Async	Use FutureBuilder	Async UI building	FutureBuilder for async data	setState for async	FutureBuilder(future: fetchData())	fetchData().then((d) => setState())	Medium	https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html
24	Async	Use StreamBuilder	Stream UI building	StreamBuilder for streams	Manual stream subscription	StreamBuilder(stream: myStream)	stream.listen in initState	Medium	https://api.flutter.dev/flutter/widgets/StreamBuilder-class.html
25	Async	Handle loading and error states	Complete async UI states	ConnectionState checks	Only success state	if (snapshot.connectionState == ConnectionState.waiting)	No loading indicator	High
26	Async	Cancel subscriptions	Clean up stream subscriptions	Cancel in dispose	Memory leaks	subscription.cancel() in dispose	No subscription cleanup	High
27	Theming	Use ThemeData	Consistent theming	ThemeData for app theme	Hardcoded colors	Theme.of(context).primaryColor	Color(0xFF123456) everywhere	Medium	https://api.flutter.dev/flutter/material/ThemeData-class.html

Preview truncated.

View on GitHub

html-tailwind.csv11.1 KB

No	Category	Guideline	Description	Do	Don't	Code Good	Code Bad	Severity	Docs URL
1	Animation	Use Tailwind animate utilities	Built-in animations are optimized and respect reduced-motion	Use animate-pulse animate-spin animate-ping	Custom @keyframes for simple effects	animate-pulse	@keyframes pulse {...}	Medium	https://tailwindcss.com/docs/animation
2	Animation	Limit bounce animations	Continuous bounce is distracting and causes motion sickness	Use animate-bounce sparingly on CTAs only	Multiple bounce animations on page	Single CTA with animate-bounce	5+ elements with animate-bounce	High
3	Animation	Transition duration	Use appropriate transition speeds for UI feedback	duration-150 to duration-300 for UI	duration-1000 or longer for UI elements	transition-all duration-200	transition-all duration-1000	Medium	https://tailwindcss.com/docs/transition-duration
4	Animation	Hover transitions	Add smooth transitions on hover state changes	Add transition class with hover states	Instant hover changes without transition	hover:bg-gray-100 transition-colors	hover:bg-gray-100 (no transition)	Low
5	Z-Index	Use Tailwind z-* scale	Consistent stacking context with predefined scale	z-0 z-10 z-20 z-30 z-40 z-50	Arbitrary z-index values	z-50 for modals	z-[9999]	Medium	https://tailwindcss.com/docs/z-index
6	Z-Index	Fixed elements z-index	Fixed navigation and modals need explicit z-index	z-50 for nav z-40 for dropdowns	Relying on DOM order for stacking	fixed top-0 z-50	fixed top-0 (no z-index)	High
7	Z-Index	Negative z-index for backgrounds	Use negative z-index for decorative backgrounds	z-[-1] for background elements	Positive z-index for backgrounds	-z-10 for decorative	z-10 for background	Low
8	Layout	Container max-width	Limit content width for readability	max-w-7xl mx-auto for main content	Full-width content on large screens	max-w-7xl mx-auto px-4	w-full (no max-width)	Medium	https://tailwindcss.com/docs/container
9	Layout	Responsive padding	Adjust padding for different screen sizes	px-4 md:px-6 lg:px-8	Same padding all sizes	px-4 sm:px-6 lg:px-8	px-8 (same all sizes)	Medium
10	Layout	Grid gaps	Use consistent gap utilities for spacing	gap-4 gap-6 gap-8	Margins on individual items	grid gap-6	grid with mb-4 on each item	Medium	https://tailwindcss.com/docs/gap
11	Layout	Flexbox alignment	Use flex utilities for alignment	items-center justify-between	Multiple nested wrappers	flex items-center justify-between	Nested divs for alignment	Low
12	Images	Aspect ratio	Maintain consistent image aspect ratios	aspect-video aspect-square	No aspect ratio on containers	aspect-video rounded-lg	No aspect control	Medium	https://tailwindcss.com/docs/aspect-ratio
13	Images	Object fit	Control image scaling within containers	object-cover object-contain	Stretched distorted images	object-cover w-full h-full	No object-fit	Medium	https://tailwindcss.com/docs/object-fit
14	Images	Lazy loading	Defer loading of off-screen images	loading='lazy' on images	All images eager load	<img loading='lazy'>	<img> without lazy	High
15	Images	Responsive images	Serve appropriate image sizes	srcset and sizes attributes	Same large image all devices	srcset with multiple sizes	4000px image everywhere	High
16	Typography	Prose plugin	Use @tailwindcss/typography for rich text	prose prose-lg for article content	Custom styles for markdown	prose prose-lg max-w-none	Custom text styling	Medium	https://tailwindcss.com/docs/typography-plugin
17	Typography	Line height	Use appropriate line height for readability	leading-relaxed for body text	Default tight line height	leading-relaxed (1.625)	leading-none or leading-tight	Medium	https://tailwindcss.com/docs/line-height
18	Typography	Font size scale	Use consistent text size scale	text-sm text-base text-lg text-xl	Arbitrary font sizes	text-lg	text-[17px]	Low	https://tailwindcss.com/docs/font-size
19	Typography	Text truncation	Handle long text gracefully	truncate or line-clamp-*	Overflow breaking layout	line-clamp-2	No overflow handling	Medium	https://tailwindcss.com/docs/text-overflow
20	Colors	Opacity utilities	Use color opacity utilities	bg-black/50 text-white/80	Separate opacity class	bg-black/50	bg-black opacity-50	Low	https://tailwindcss.com/docs/background-color
21	Colors	Dark mode	Support dark mode with dark: prefix	dark:bg-gray-900 dark:text-white	No dark mode support	dark:bg-gray-900	Only light theme	Medium	https://tailwindcss.com/docs/dark-mode
22	Colors	Semantic colors	Use semantic color naming in config	primary secondary danger success	Generic color names in components	bg-primary	bg-blue-500 everywhere	Medium
23	Spacing	Consistent spacing scale	Use Tailwind spacing scale consistently	p-4 m-6 gap-8	Arbitrary pixel values	p-4 (1rem)	p-[15px]	Low	https://tailwindcss.com/docs/customizing-spacing
24	Spacing	Negative margins	Use sparingly for overlapping effects	-mt-4 for overlapping elements	Negative margins for layout fixing	-mt-8 for card overlap	-m-2 to fix spacing issues	Medium
25	Spacing	Space between	Use space-y-* for vertical lists	space-y-4 on flex/grid column	Margin on each child	space-y-4	Each child has mb-4	Low	https://tailwindcss.com/docs/space
26	Forms	Focus states	Always show focus indicators	focus:ring-2 focus:ring-blue-500	Remove focus outline	focus:ring-2 focus:ring-offset-2	focus:outline-none (no replacement)	High
27	Forms	Input sizing	Consistent input dimensions	h-10 px-3 for inputs	Inconsistent input heights	h-10 w-full px-3	Various heights per input	Medium

Preview truncated.

View on GitHub

jetpack-compose.csv8.00 KB

No	Category	Guideline	Description	Do	Don't	Code Good	Code Bad	Severity	Docs URL
1	Composable	Pure UI composables	Composable functions should only render UI	Accept state and callbacks	Calling usecase/repo	Pure UI composable	Business logic in UI	High	https://developer.android.com/jetpack/compose/mental-model
2	Composable	Small composables	Each composable has single responsibility	Split into components	Huge composable	Reusable UI	Monolithic UI	Medium
3	Composable	Stateless by default	Prefer stateless composables	Hoist state	Local mutable state	Stateless UI	Hidden state	High	https://developer.android.com/jetpack/compose/state#state-hoisting
4	State	Single source of truth	UI state comes from one source	StateFlow from VM	Multiple states	Unified UiState	Scattered state	High	https://developer.android.com/topic/architecture/ui-layer
5	State	Model UI State	Use sealed interface/data class	UiState.Loading	Boolean flags	Explicit state	Flag hell	High
6	State	remember only UI state	remember for UI-only state	Scroll, animation	Business state	Correct remember	Misuse remember	High	https://developer.android.com/jetpack/compose/state
7	State	rememberSaveable	Persist state across config	rememberSaveable	remember	State survives	State lost	High	https://developer.android.com/jetpack/compose/state#restore-ui-state
8	State	derivedStateOf	Optimize recomposition	derivedStateOf	Recompute always	Optimized	Jank	Medium	https://developer.android.com/jetpack/compose/performance
9	SideEffect	LaunchedEffect keys	Use correct keys	LaunchedEffect(id)	LaunchedEffect(Unit)	Scoped effect	Infinite loop	High	https://developer.android.com/jetpack/compose/side-effects
10	SideEffect	rememberUpdatedState	Avoid stale lambdas	rememberUpdatedState	Capture directly	Safe callback	Stale state	Medium	https://developer.android.com/jetpack/compose/side-effects
11	SideEffect	DisposableEffect	Clean up resources	onDispose	No cleanup	No leak	Memory leak	High
12	Architecture	Unidirectional data flow	UI → VM → State	onEvent	Two-way binding	Predictable flow	Hard debug	High	https://developer.android.com/topic/architecture
13	Architecture	No business logic in UI	Logic belongs to VM	Collect state	Call repo	Clean UI	Fat UI	High
14	Architecture	Expose immutable state	Expose StateFlow	asStateFlow	Mutable exposed	Safe API	State mutation	High
15	Lifecycle	Lifecycle-aware collect	Use collectAsStateWithLifecycle	Lifecycle aware	collectAsState	No leak	Leak	High	https://developer.android.com/jetpack/compose/lifecycle
16	Navigation	Event-based navigation	VM emits navigation event	VM: Channel + receiveAsFlow(), V: Collect with Dispatchers.Main.immediate	Nav in UI	Decoupled nav	Using State / SharedFlow for navigation -> event is replayed and navigation fires again (StateFlow)	High	https://developer.android.com/jetpack/compose/navigation
17	Navigation	Typed routes	Use sealed routes	sealed class Route	String routes	Type-safe	Runtime crash	Medium
18	Performance	Stable parameters	Prefer immutable/stable params	@Immutable	Mutable params	Stable recomposition	Extra recomposition	High	https://developer.android.com/jetpack/compose/performance
19	Performance	Use key in Lazy	Provide stable keys	key=id	No key	Stable list	Item jump	High
20	Performance	Avoid heavy work	No heavy computation in UI	Precompute in VM	Compute in UI	Smooth UI	Jank	High
21	Performance	Remember expensive objects	remember heavy objects	remember	Recreate each recomposition	Efficient	Wasteful	Medium
22	Theming	Design system	Centralized theme	Material3 tokens	Hardcoded values	Consistent UI	Inconsistent	High	https://developer.android.com/jetpack/compose/themes
23	Theming	Dark mode support	Theme-based colors	colorScheme	Fixed color	Adaptive UI	Broken dark	Medium
24	Layout	Prefer Modifier over extra layouts	Use Modifier to adjust layout instead of adding wrapper composables	Use Modifier.padding()	Wrap content with extra Box	Padding via modifier	Box just for padding	High	https://developer.android.com/jetpack/compose/modifiers
25	Layout	Avoid deep layout nesting	Deep layout trees increase measure & layout cost	Keep layout flat	Box ? Column ? Box ? Row	Flat hierarchy	Deep nested tree	High
26	Layout	Use Row/Column for linear layout	Linear layouts are simpler and more performant	Use Row / Column	Custom layout for simple cases	Row/Column usage	Over-engineered layout	High
27	Layout	Use Box only for overlapping content	Box should be used only when children overlap	Stack elements	Use Box as Column	Proper overlay	Misused Box	Medium

Preview truncated.

View on GitHub

nextjs.csv12.3 KB

No	Category	Guideline	Description	Do	Don't	Code Good	Code Bad	Severity	Docs URL
1	Routing	Use App Router for new projects	App Router is the recommended approach in Next.js 14+	app/ directory with page.tsx	pages/ for new projects	app/dashboard/page.tsx	pages/dashboard.tsx	Medium	https://nextjs.org/docs/app
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
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
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
5	Routing	Handle loading states	Use loading.tsx for route loading UI	loading.tsx alongside page.tsx	Manual loading state management	app/dashboard/loading.tsx	useState for loading in page	Medium	https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming
6	Routing	Handle errors with error.tsx	Catch errors at route level	error.tsx with reset function	try/catch in every component	app/dashboard/error.tsx	try/catch in page component	High	https://nextjs.org/docs/app/building-your-application/routing/error-handling
7	Rendering	Use Server Components by default	Server Components reduce client JS bundle	Keep components server by default	Add 'use client' unnecessarily	export default function Page()	('use client') for static content	High	https://nextjs.org/docs/app/building-your-application/rendering/server-components
8	Rendering	Mark Client Components explicitly	'use client' for interactive components	Add 'use client' only when needed	Server Component with hooks/events	('use client') for onClick useState	No directive with useState	High	https://nextjs.org/docs/app/building-your-application/rendering/client-components
9	Rendering	Push Client Components down	Keep Client Components as leaf nodes	Client wrapper for interactive parts only	Mark page as Client Component	<InteractiveButton/> in Server Page	('use client') on page.tsx	High
10	Rendering	Use streaming for better UX	Stream content with Suspense boundaries	Suspense for slow data fetches	Wait for all data before render	<Suspense><SlowComponent/></Suspense>	await allData then render	Medium	https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming
11	Rendering	Choose correct rendering strategy	SSG for static SSR for dynamic ISR for semi-static	generateStaticParams for known paths	SSR for static content	export const revalidate = 3600	fetch without cache config	Medium
12	DataFetching	Fetch data in Server Components	Fetch directly in async Server Components	async function Page() { const data = await fetch() }	useEffect for initial data	const data = await fetch(url)	useEffect(() => fetch(url))	High	https://nextjs.org/docs/app/building-your-application/data-fetching
13	DataFetching	Configure caching explicitly (Next.js 15+)	Next.js 15 changed defaults to uncached for fetch	Explicitly set cache: 'force-cache' for static data	Assume default is cached (it's not in Next.js 15)	fetch(url { cache: 'force-cache' })	fetch(url) // Uncached in v15	High	https://nextjs.org/docs/app/building-your-application/upgrading/version-15
14	DataFetching	Deduplicate fetch requests	React and Next.js dedupe same requests	Same fetch call in multiple components	Manual request deduplication	Multiple components fetch same URL	Custom cache layer	Low
15	DataFetching	Use Server Actions for mutations	Server Actions for form submissions	action={serverAction} in forms	API route for every mutation	<form action={createPost}>	<form onSubmit={callApiRoute}>	Medium	https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations
16	DataFetching	Revalidate data appropriately	Use revalidatePath/revalidateTag after mutations	Revalidate after Server Action	'use client' with manual refetch	revalidatePath('/posts')	router.refresh() everywhere	Medium	https://nextjs.org/docs/app/building-your-application/caching#revalidating
17	Images	Use next/image for optimization	Automatic image optimization and lazy loading	<Image> component for all images	<img> tags directly	<Image src={} alt={} width={} height={}>	<img src={}/>	High	https://nextjs.org/docs/app/building-your-application/optimizing/images
18	Images	Provide width and height	Prevent layout shift with dimensions	width and height props or fill	Missing dimensions	<Image width={400} height={300}/>	<Image src={url}/>	High
19	Images	Use fill for responsive images	Fill container with object-fit	fill prop with relative parent	Fixed dimensions for responsive	<Image fill className="object-cover"/>	<Image width={window.width}/>	Medium
20	Images	Configure remote image domains	Whitelist external image sources	remotePatterns in next.config.js	Allow all domains	remotePatterns: [{ hostname: 'cdn.example.com' }]	domains: ['*']	High	https://nextjs.org/docs/app/api-reference/components/image#remotepatterns
21	Images	Use priority for LCP images	Mark above-fold images as priority	priority prop on hero images	All images with priority	<Image priority src={hero}/>	<Image priority/> on every image	Medium
22	Fonts	Use next/font for fonts	Self-hosted fonts with zero layout shift	next/font/google or next/font/local	External font links	import { Inter } from 'next/font/google'	<link href="fonts.googleapis.com"/>	Medium	https://nextjs.org/docs/app/building-your-application/optimizing/fonts
23	Fonts	Apply font to layout	Set font in root layout for consistency	className on body in layout.tsx	Font in individual pages	<body className={inter.className}>	Each page imports font	Low
24	Fonts	Use variable fonts	Variable fonts reduce bundle size	Single variable font file	Multiple font weights as files	Inter({ subsets: ['latin'] })	Inter_400 Inter_500 Inter_700	Low
25	Metadata	Use generateMetadata for dynamic	Generate metadata based on params	export async function generateMetadata()	Hardcoded metadata everywhere	generateMetadata({ params })	export const metadata = {}	Medium	https://nextjs.org/docs/app/building-your-application/optimizing/metadata
26	Metadata	Include OpenGraph images	Add OG images for social sharing	opengraph-image.tsx or og property	Missing social preview images	opengraph: { images: ['/og.png'] }	No OG configuration	Medium
27	Metadata	Use metadata API	Export metadata object for static metadata	export const metadata = {}	Manual head tags	export const metadata = { title: 'Page' }	<head><title>Page</title></head>	Medium

Preview truncated.

View on GitHub

nuxt-ui.csv13.7 KB

No	Category	Guideline	Description	Do	Don't	Code Good	Code Bad	Severity	Docs URL
1	Installation	Add Nuxt UI module	Install and configure Nuxt UI in your Nuxt project	pnpm add @nuxt/ui and add to modules	Manual component imports	modules: ['@nuxt/ui']	import { UButton } from '@nuxt/ui'	High	https://ui.nuxt.com/docs/getting-started/installation/nuxt
2	Installation	Import Tailwind and Nuxt UI CSS	Required CSS imports in main.css file	@import tailwindcss and @import @nuxt/ui	Skip CSS imports	@import "tailwindcss"; @import "@nuxt/ui";	No CSS imports	High	https://ui.nuxt.com/docs/getting-started/installation/nuxt
3	Installation	Wrap app with UApp component	UApp provides global configs for Toast Tooltip and overlays	<UApp> wrapper in app.vue	Skip UApp wrapper	<UApp><NuxtPage/></UApp>	<NuxtPage/> without wrapper	High	https://ui.nuxt.com/docs/components/app
4	Components	Use U prefix for components	All Nuxt UI components use U prefix by default	UButton UInput UModal	Button Input Modal	<UButton>Click</UButton>	<Button>Click</Button>	Medium	https://ui.nuxt.com/docs/getting-started/installation/nuxt
5	Components	Use semantic color props	Use semantic colors like primary secondary error	color=primary color=error	Hardcoded colors	<UButton color="primary">	<UButton class="bg-green-500">	Medium	https://ui.nuxt.com/docs/getting-started/theme/design-system
6	Components	Use variant prop for styling	Nuxt UI provides solid outline soft subtle ghost link variants	variant=soft variant=outline	Custom button classes	<UButton variant="soft">	<UButton class="border bg-transparent">	Medium	https://ui.nuxt.com/docs/components/button
7	Components	Use size prop consistently	Components support xs sm md lg xl sizes	size=sm size=lg	Arbitrary sizing classes	<UButton size="lg">	<UButton class="text-xl px-6">	Low	https://ui.nuxt.com/docs/components/button
8	Icons	Use icon prop with Iconify format	Nuxt UI supports Iconify icons via icon prop	icon=lucide:home icon=heroicons:user	i-lucide-home format	<UButton icon="lucide:home">	<UButton icon="i-lucide-home">	Medium	https://ui.nuxt.com/docs/getting-started/integrations/icons/nuxt
9	Icons	Use leadingIcon and trailingIcon	Position icons with dedicated props for clarity	leadingIcon=lucide:plus trailingIcon=lucide:arrow-right	Manual icon positioning	<UButton leadingIcon="lucide:plus">	<UButton><Icon name="lucide:plus"/>Add</UButton>	Low	https://ui.nuxt.com/docs/components/button
10	Theming	Configure colors in app.config.ts	Runtime color configuration without restart	ui.colors.primary in app.config.ts	Hardcoded colors in components	defineAppConfig({ ui: { colors: { primary: 'blue' } } })	<UButton class="bg-blue-500">	High	https://ui.nuxt.com/docs/getting-started/theme/design-system
11	Theming	Use @theme directive for custom colors	Define design tokens in CSS with Tailwind @theme	@theme { --color-brand-500: #xxx }	Inline color definitions	@theme { --color-brand-500: #ef4444; }	:style={ color: '#ef4444' }	Medium	https://ui.nuxt.com/docs/getting-started/theme/design-system
12	Theming	Extend semantic colors in nuxt.config	Register new colors like tertiary in theme.colors	theme.colors array in ui config	Use undefined colors	ui: { theme: { colors: ['primary', 'tertiary'] } }	<UButton color="tertiary"> without config	Medium	https://ui.nuxt.com/docs/getting-started/theme/design-system
13	Forms	Use UForm with schema validation	UForm supports Zod Yup Joi Valibot schemas	:schema prop with validation schema	Manual form validation	<UForm :schema="schema" :state="state">	Manual @blur validation	High	https://ui.nuxt.com/docs/components/form
14	Forms	Use UFormField for field wrapper	Provides label error message and validation display	UFormField with name prop	Manual error handling	<UFormField name="email" label="Email">	<div><label>Email</label><UInput/><span>error</span></div>	Medium	https://ui.nuxt.com/docs/components/form-field
15	Forms	Handle form submit with @submit	UForm emits submit event with validated data	@submit handler on UForm	@click on submit button	<UForm @submit="onSubmit">	<UButton @click="onSubmit">	Medium	https://ui.nuxt.com/docs/components/form
16	Forms	Use validateOn prop for validation timing	Control when validation triggers (blur change input)	validateOn=['blur'] for performance	Always validate on input	<UForm :validateOn="['blur', 'change']">	<UForm> (validates on every keystroke)	Low	https://ui.nuxt.com/docs/components/form
17	Overlays	Use v-model:open for overlay control	Modal Slideover Drawer use v-model:open	v-model:open for controlled state	Manual show/hide logic	<UModal v-model:open="isOpen">	<UModal v-if=isOpen>	Medium	https://ui.nuxt.com/docs/components/modal
18	Overlays	Use useOverlay composable for programmatic overlays	Open overlays programmatically without template refs	useOverlay().open(MyModal)	Template ref and manual control	const overlay = useOverlay(); overlay.open(MyModal, { props })	const modal = ref(); modal.value.open()	Medium	https://ui.nuxt.com/docs/components/modal
19	Overlays	Use title and description props	Built-in header support for overlays	title=Confirm description=Are you sure?	Manual header content	<UModal title="Confirm" description="Are you sure?">	<UModal><template #header><h2>Confirm</h2></template>	Low	https://ui.nuxt.com/docs/components/modal
20	Dashboard	Use UDashboardSidebar for navigation	Provides collapsible resizable sidebar with mobile support	UDashboardSidebar with header default footer slots	Custom sidebar implementation	<UDashboardSidebar><template #header>...</template></UDashboardSidebar>	<aside class=w-64 border-r>	Medium	https://ui.nuxt.com/docs/components/dashboard-sidebar
21	Dashboard	Use UDashboardGroup for layout	Wraps dashboard components with sidebar state management	UDashboardGroup > UDashboardSidebar + UDashboardPanel	Manual layout flex containers	<UDashboardGroup><UDashboardSidebar/><UDashboardPanel/></UDashboardGroup>	<div class="flex"><aside/><main/></div>	Medium	https://ui.nuxt.com/docs/components/dashboard-group
22	Dashboard	Use UDashboardNavbar for top navigation	Responsive navbar with mobile menu support	UDashboardNavbar in dashboard layout	Custom navbar implementation	<UDashboardNavbar :links=navLinks/>	<nav class=border-b>	Low	https://ui.nuxt.com/docs/components/dashboard-navbar
23	Tables	Use UTable with data and columns props	Powered by TanStack Table with built-in features	:data and :columns props	Manual table markup	<UTable :data="users" :columns="columns"/>	<table><tr v-for="user in users">	High	https://ui.nuxt.com/docs/components/table
24	Tables	Define columns with accessorKey	Column definitions use accessorKey for data binding	accessorKey: 'email' in column def	String column names only	{ accessorKey: 'email', header: 'Email' }	['name', 'email']	Medium	https://ui.nuxt.com/docs/components/table
25	Tables	Use cell slot for custom rendering	Customize cell content with scoped slots	#cell-columnName slot	Override entire table	<template #cell-status={ row }>	Manual column render function	Medium	https://ui.nuxt.com/docs/components/table
26	Tables	Enable sorting with sortable column option	Add sortable: true to column definition	sortable: true in column	Manual sort implementation	{ accessorKey: 'name', sortable: true }	@click=sortBy('name')	Low	https://ui.nuxt.com/docs/components/table
27	Navigation	Use UNavigationMenu for nav links	Horizontal or vertical navigation with dropdown support	UNavigationMenu with items array	Manual nav with v-for	<UNavigationMenu :items="navItems"/>	<nav><a v-for="item in items">	Medium	https://ui.nuxt.com/docs/components/navigation-menu

Preview truncated.

View on GitHub

nuxtjs.csv16.2 KB

No	Category	Guideline	Description	Do	Don't	Code Good	Code Bad	Severity	Docs URL
1	Routing	Use file-based routing	Create routes by adding files in pages directory	pages/ directory with index.vue	Manual route configuration	pages/dashboard/index.vue	Custom router setup	Medium	https://nuxt.com/docs/getting-started/routing
2	Routing	Use dynamic route parameters	Create dynamic routes with bracket syntax	[id].vue for dynamic params	Hardcoded routes for dynamic content	pages/posts/[id].vue	pages/posts/post1.vue	Medium	https://nuxt.com/docs/getting-started/routing
3	Routing	Use catch-all routes	Handle multiple path segments with [...slug]	[...slug].vue for catch-all	Multiple nested dynamic routes	pages/[...slug].vue	pages/[a]/[b]/[c].vue	Low	https://nuxt.com/docs/getting-started/routing
4	Routing	Define page metadata with definePageMeta	Set page-level configuration and middleware	definePageMeta for layout middleware title	Manual route meta configuration	definePageMeta({ layout: 'admin', middleware: 'auth' })	router.beforeEach for page config	High	https://nuxt.com/docs/api/utils/define-page-meta
5	Routing	Use validate for route params	Validate dynamic route parameters before rendering	validate function in definePageMeta	Manual validation in setup	definePageMeta({ validate: (route) => /^\d+$/.test(route.params.id) })	if (!valid) navigateTo('/404')	Medium	https://nuxt.com/docs/api/utils/define-page-meta
6	Rendering	Use SSR by default	Server-side rendering is enabled by default	Keep ssr: true (default)	Disable SSR unnecessarily	ssr: true (default)	ssr: false for all pages	High	https://nuxt.com/docs/guide/concepts/rendering
7	Rendering	Use .client suffix for client-only components	Mark components to render only on client	ComponentName.client.vue suffix	v-if with process.client check	Comments.client.vue	<div v-if=process.client><Comments/></div>	Medium	https://nuxt.com/docs/guide/directory-structure/components
8	Rendering	Use .server suffix for server-only components	Mark components to render only on server	ComponentName.server.vue suffix	Manual server check	HeavyMarkdown.server.vue	v-if=process.server	Low	https://nuxt.com/docs/guide/directory-structure/components
9	DataFetching	Use useFetch for simple data fetching	Wrapper around useAsyncData for URL fetching	useFetch for API calls	$fetch in onMounted	const { data } = await useFetch('/api/posts')	onMounted(async () => { data.value = await $fetch('/api/posts') })	High	https://nuxt.com/docs/api/composables/use-fetch
10	DataFetching	Use useAsyncData for complex fetching	Fine-grained control over async data	useAsyncData for CMS or custom fetching	useFetch for non-URL data sources	const { data } = await useAsyncData('posts', () => cms.getPosts())	const { data } = await useFetch(() => cms.getPosts())	Medium	https://nuxt.com/docs/api/composables/use-async-data
11	DataFetching	Use $fetch for non-reactive requests	$fetch for event handlers and non-component code	$fetch in event handlers or server routes	useFetch in click handlers	async function submit() { await $fetch('/api/submit', { method: 'POST' }) }	async function submit() { await useFetch('/api/submit') }	High	https://nuxt.com/docs/api/utils/dollarfetch
12	DataFetching	Use lazy option for non-blocking fetch	Defer data fetching for better initial load	lazy: true for below-fold content	Blocking fetch for non-critical data	useFetch('/api/comments', { lazy: true })	await useFetch('/api/comments') for footer	Medium	https://nuxt.com/docs/api/composables/use-fetch
13	DataFetching	Use server option to control fetch location	Choose where data is fetched	server: false for client-only data	Server fetch for user-specific client data	useFetch('/api/user-preferences', { server: false })	useFetch for localStorage-dependent data	Medium	https://nuxt.com/docs/api/composables/use-fetch
14	DataFetching	Use pick to reduce payload size	Select only needed fields from response	pick option for large responses	Fetching entire objects when few fields needed	useFetch('/api/user', { pick: ['id', 'name'] })	useFetch('/api/user') then destructure	Low	https://nuxt.com/docs/api/composables/use-fetch
15	DataFetching	Use transform for data manipulation	Transform data before storing in state	transform option for data shaping	Manual transformation after fetch	useFetch('/api/posts', { transform: (posts) => posts.map(p => p.title) })	const titles = data.value.map(p => p.title)	Low	https://nuxt.com/docs/api/composables/use-fetch
16	DataFetching	Handle loading and error states	Always handle pending and error states	Check status pending error refs	Ignoring loading states	<div v-if="status === 'pending'">Loading...</div>	No loading indicator	High	https://nuxt.com/docs/getting-started/data-fetching
17	Lifecycle	Avoid side effects in script setup root	Move side effects to lifecycle hooks	Side effects in onMounted	setInterval in root script setup	onMounted(() => { interval = setInterval(...) })	<script setup>setInterval(...)</script>	High	https://nuxt.com/docs/guide/concepts/nuxt-lifecycle
18	Lifecycle	Use onMounted for DOM access	Access DOM only after component is mounted	onMounted for DOM manipulation	Direct DOM access in setup	onMounted(() => { document.getElementById('el') })	<script setup>document.getElementById('el')</script>	High	https://nuxt.com/docs/api/composables/on-mounted
19	Lifecycle	Use nextTick for post-render access	Wait for DOM updates before accessing elements	await nextTick() after state changes	Immediate DOM access after state change	count.value++; await nextTick(); el.value.focus()	count.value++; el.value.focus()	Medium	https://nuxt.com/docs/api/utils/next-tick
20	Lifecycle	Use onPrehydrate for pre-hydration logic	Run code before Nuxt hydrates the page	onPrehydrate for client setup	onMounted for hydration-critical code	onPrehydrate(() => { console.log(window) })	onMounted for pre-hydration needs	Low	https://nuxt.com/docs/api/composables/on-prehydrate
21	Server	Use server/api for API routes	Create API endpoints in server/api directory	server/api/users.ts for /api/users	Manual Express setup	server/api/hello.ts -> /api/hello	app.get('/api/hello')	High	https://nuxt.com/docs/guide/directory-structure/server
22	Server	Use defineEventHandler for handlers	Define server route handlers	defineEventHandler for all handlers	export default function	export default defineEventHandler((event) => { return { hello: 'world' } })	export default function(req, res) {}	High	https://nuxt.com/docs/guide/directory-structure/server
23	Server	Use server/routes for non-api routes	Routes without /api prefix	server/routes for custom paths	server/api for non-api routes	server/routes/sitemap.xml.ts	server/api/sitemap.xml.ts	Medium	https://nuxt.com/docs/guide/directory-structure/server
24	Server	Use getQuery and readBody for input	Access query params and request body	getQuery(event) readBody(event)	Direct event access	const { id } = getQuery(event)	event.node.req.query	Medium	https://nuxt.com/docs/guide/directory-structure/server
25	Server	Validate server input	Always validate input in server handlers	Zod or similar for validation	Trust client input	const body = await readBody(event); schema.parse(body)	const body = await readBody(event)	High	https://nuxt.com/docs/guide/directory-structure/server
26	State	Use useState for shared reactive state	SSR-friendly shared state across components	useState for cross-component state	ref for shared state	const count = useState('count', () => 0)	const count = ref(0) in composable	High	https://nuxt.com/docs/api/composables/use-state
27	State	Use unique keys for useState	Prevent state conflicts with unique keys	Descriptive unique keys for each state	Generic or duplicate keys	useState('user-preferences', () => ({}))	useState('data') in multiple places	Medium	https://nuxt.com/docs/api/composables/use-state

Preview truncated.

View on GitHub

react-native.csv9.80 KB

No	Category	Guideline	Description	Do	Don't	Code Good	Code Bad	Severity	Docs URL
1	Components	Use functional components	Hooks-based components are standard	Functional components with hooks	Class components	const App = () => { }	class App extends Component	Medium	https://reactnative.dev/docs/intro-react
2	Components	Keep components small	Single responsibility principle	Split into smaller components	Large monolithic components	<Header /><Content /><Footer />	500+ line component	Medium
3	Components	Use TypeScript	Type safety for props and state	TypeScript for new projects	JavaScript without types	const Button: FC<Props> = () => { }	const Button = (props) => { }	Medium
4	Components	Colocate component files	Keep related files together	Component folder with styles	Flat structure	components/Button/index.tsx styles.ts	components/Button.tsx styles/button.ts	Low
5	Styling	Use StyleSheet.create	Optimized style objects	StyleSheet for all styles	Inline style objects	StyleSheet.create({ container: {} })	style={{ margin: 10 }}	High	https://reactnative.dev/docs/stylesheet
6	Styling	Avoid inline styles	Prevent object recreation	Styles in StyleSheet	Inline style objects in render	style={styles.container}	style={{ margin: 10, padding: 5 }}	Medium
7	Styling	Use flexbox for layout	React Native uses flexbox	flexDirection alignItems justifyContent	Absolute positioning everywhere	flexDirection: 'row'	position: 'absolute' everywhere	Medium	https://reactnative.dev/docs/flexbox
8	Styling	Handle platform differences	Platform-specific styles	Platform.select or .ios/.android files	Same styles for both platforms	Platform.select({ ios: {}, android: {} })	Hardcoded iOS values	Medium	https://reactnative.dev/docs/platform-specific-code
9	Styling	Use responsive dimensions	Scale for different screens	Dimensions or useWindowDimensions	Fixed pixel values	useWindowDimensions()	width: 375	Medium
10	Navigation	Use React Navigation	Standard navigation library	React Navigation for routing	Manual navigation management	createStackNavigator()	Custom navigation state	Medium	https://reactnavigation.org/
11	Navigation	Type navigation params	Type-safe navigation	Typed navigation props	Untyped navigation	navigation.navigate<RootStackParamList>('Home', { id })	navigation.navigate('Home', { id })	Medium
12	Navigation	Use deep linking	Support URL-based navigation	Configure linking prop	No deep link support	linking: { prefixes: [] }	No linking configuration	Medium	https://reactnavigation.org/docs/deep-linking/
13	Navigation	Handle back button	Android back button handling	useFocusEffect with BackHandler	Ignore back button	BackHandler.addEventListener	No back handler	High
14	State	Use useState for local state	Simple component state	useState for UI state	Class component state	const [count, setCount] = useState(0)	this.state = { count: 0 }	Medium
15	State	Use useReducer for complex state	Complex state logic	useReducer for related state	Multiple useState for related values	useReducer(reducer initialState)	5+ useState calls	Medium
16	State	Use context sparingly	Context for global state	Context for theme auth locale	Context for frequently changing data	ThemeContext for app theme	Context for list item data	Medium
17	State	Consider Zustand or Redux	External state management	Zustand for simple Redux for complex	useState for global state	create((set) => ({ }))	Prop drilling global state	Medium
18	Lists	Use FlatList for long lists	Virtualized list rendering	FlatList for 50+ items	ScrollView with map	<FlatList data={items} />	<ScrollView>{items.map()}</ScrollView>	High	https://reactnative.dev/docs/flatlist
19	Lists	Provide keyExtractor	Unique keys for list items	keyExtractor with stable ID	Index as key	keyExtractor={(item) => item.id}	keyExtractor={(_, index) => index}	High
20	Lists	Optimize renderItem	Memoize list item components	React.memo for list items	Inline render function	renderItem={({ item }) => <MemoizedItem item={item} />}	renderItem={({ item }) => <View>...</View>}	High
21	Lists	Use getItemLayout for fixed height	Skip measurement for performance	getItemLayout when height known	Dynamic measurement for fixed items	getItemLayout={(_, index) => ({ length: 50, offset: 50 * index, index })}	No getItemLayout for fixed height	Medium
22	Lists	Implement windowSize	Control render window	Smaller windowSize for memory	Default windowSize for large lists	windowSize={5}	windowSize={21} for huge lists	Medium
23	Performance	Use React.memo	Prevent unnecessary re-renders	memo for pure components	No memoization	export default memo(MyComponent)	export default MyComponent	Medium
24	Performance	Use useCallback for handlers	Stable function references	useCallback for props	New function on every render	useCallback(() => {}, [deps])	() => handlePress()	Medium
25	Performance	Use useMemo for expensive ops	Cache expensive calculations	useMemo for heavy computations	Recalculate every render	useMemo(() => expensive(), [deps])	const result = expensive()	Medium
26	Performance	Avoid anonymous functions in JSX	Prevent re-renders	Named handlers or useCallback	Inline arrow functions	onPress={handlePress}	onPress={() => doSomething()}	Medium
27	Performance	Use Hermes engine	Improved startup and memory	Enable Hermes in build	JavaScriptCore for new projects	hermes_enabled: true	hermes_enabled: false	Medium	https://reactnative.dev/docs/hermes

Preview truncated.

View on GitHub

react.csv12.7 KB

No	Category	Guideline	Description	Do	Don't	Code Good	Code Bad	Severity	Docs URL
1	State	Use useState for local state	Simple component state should use useState hook	useState for form inputs toggles counters	Class components this.state	const [count, setCount] = useState(0)	this.state = { count: 0 }	Medium	https://react.dev/reference/react/useState
2	State	Lift state up when needed	Share state between siblings by lifting to parent	Lift shared state to common ancestor	Prop drilling through many levels	Parent holds state passes down	Deep prop chains	Medium	https://react.dev/learn/sharing-state-between-components
3	State	Use useReducer for complex state	Complex state logic benefits from reducer pattern	useReducer for state with multiple sub-values	Multiple useState for related values	useReducer with action types	5+ useState calls that update together	Medium	https://react.dev/reference/react/useReducer
4	State	Avoid unnecessary state	Derive values from existing state when possible	Compute derived values in render	Store derivable values in state	const total = items.reduce(...)	const [total, setTotal] = useState(0)	High	https://react.dev/learn/choosing-the-state-structure
5	State	Initialize state lazily	Use function form for expensive initial state	useState(() => computeExpensive())	useState(computeExpensive())	useState(() => JSON.parse(data))	useState(JSON.parse(data))	Medium	https://react.dev/reference/react/useState#avoiding-recreating-the-initial-state
6	Effects	Clean up effects	Return cleanup function for subscriptions timers	Return cleanup function in useEffect	No cleanup for subscriptions	useEffect(() => { sub(); return unsub; })	useEffect(() => { subscribe(); })	High	https://react.dev/reference/react/useEffect#connecting-to-an-external-system
7	Effects	Specify dependencies correctly	Include all values used inside effect in deps array	All referenced values in dependency array	Empty deps with external references	[value] when using value in effect	[] when using props/state in effect	High	https://react.dev/reference/react/useEffect#specifying-reactive-dependencies
8	Effects	Avoid unnecessary effects	Don't use effects for transforming data or events	Transform data during render handle events directly	useEffect for derived state or event handling	const filtered = items.filter(...)	useEffect(() => setFiltered(items.filter(...)))	High	https://react.dev/learn/you-might-not-need-an-effect
9	Effects	Use refs for non-reactive values	Store values that don't trigger re-renders in refs	useRef for interval IDs DOM elements	useState for values that don't need render	const intervalRef = useRef(null)	const [intervalId, setIntervalId] = useState()	Medium	https://react.dev/reference/react/useRef
10	Rendering	Use keys properly	Stable unique keys for list items	Use stable IDs as keys	Array index as key for dynamic lists	key={item.id}	key={index}	High	https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key
11	Rendering	Memoize expensive calculations	Use useMemo for costly computations	useMemo for expensive filtering/sorting	Recalculate every render	useMemo(() => expensive(), [deps])	const result = expensiveCalc()	Medium	https://react.dev/reference/react/useMemo
12	Rendering	Memoize callbacks passed to children	Use useCallback for functions passed as props	useCallback for handlers passed to memoized children	New function reference every render	useCallback(() => {}, [deps])	const handler = () => {}	Medium	https://react.dev/reference/react/useCallback
13	Rendering	Use React.memo wisely	Wrap components that render often with same props	memo for pure components with stable props	memo everything or nothing	memo(ExpensiveList)	memo(SimpleButton)	Low	https://react.dev/reference/react/memo
14	Rendering	Avoid inline object/array creation in JSX	Create objects outside render or memoize	Define style objects outside component	Inline objects in props	<div style={styles.container}>	<div style={{ margin: 10 }}>	Medium
15	Components	Keep components small and focused	Single responsibility for each component	One concern per component	Large multi-purpose components	<UserAvatar /><UserName />	<UserCard /> with 500 lines	Medium
16	Components	Use composition over inheritance	Compose components using children and props	Use children prop for flexibility	Inheritance hierarchies	<Card>{content}</Card>	class SpecialCard extends Card	Medium	https://react.dev/learn/thinking-in-react
17	Components	Colocate related code	Keep related components and hooks together	Related files in same directory	Flat structure with many files	components/User/UserCard.tsx	components/UserCard.tsx + hooks/useUser.ts	Low
18	Components	Use fragments to avoid extra DOM	Fragment or <> for multiple elements without wrapper	<> for grouping without DOM node	Extra div wrappers	<>{items.map(...)}</>	<div>{items.map(...)}</div>	Low	https://react.dev/reference/react/Fragment
19	Props	Destructure props	Destructure props for cleaner component code	Destructure in function signature	props.name props.value throughout	function User({ name, age })	function User(props)	Low
20	Props	Provide default props values	Use default parameters or defaultProps	Default values in destructuring	Undefined checks throughout	function Button({ size = 'md' })	if (size === undefined) size = 'md'	Low
21	Props	Avoid prop drilling	Use context or composition for deeply nested data	Context for global data composition for UI	Passing props through 5+ levels	<UserContext.Provider>	<A user={u}><B user={u}><C user={u}>	Medium	https://react.dev/learn/passing-data-deeply-with-context
22	Props	Validate props with TypeScript	Use TypeScript interfaces for prop types	interface Props { name: string }	PropTypes or no validation	interface ButtonProps { onClick: () => void }	Button.propTypes = {}	Medium
23	Events	Use synthetic events correctly	React normalizes events across browsers	e.preventDefault() e.stopPropagation()	Access native event unnecessarily	onClick={(e) => e.preventDefault()}	onClick={(e) => e.nativeEvent.preventDefault()}	Low	https://react.dev/reference/react-dom/components/common#react-event-object
24	Events	Avoid binding in render	Use arrow functions in class or hooks	Arrow functions in functional components	bind in render or constructor	const handleClick = () => {}	this.handleClick.bind(this)	Medium
25	Events	Pass event handlers not call results	Pass function reference not invocation	onClick={handleClick}	onClick={handleClick()} causing immediate call	onClick={handleClick}	onClick={handleClick()}	High
26	Forms	Controlled components for forms	Use state to control form inputs	value + onChange for inputs	Uncontrolled inputs with refs	<input value={val} onChange={setVal}>	<input ref={inputRef}>	Medium	https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable
27	Forms	Handle form submission properly	Prevent default and handle in submit handler	onSubmit with preventDefault	onClick on submit button only	<form onSubmit={handleSubmit}>	<button onClick={handleSubmit}>	Medium

Preview truncated.

View on GitHub

shadcn.csv15.5 KB

No	Category	Guideline	Description	Do	Don't	Code Good	Code Bad	Severity	Docs URL
1	Setup	Use CLI for installation	Install components via shadcn CLI for proper setup	npx shadcn@latest add component-name	Manual copy-paste from docs	npx shadcn@latest add button	Copy component code manually	High	https://ui.shadcn.com/docs/cli
2	Setup	Initialize project properly	Run init command to set up components.json and globals.css	npx shadcn@latest init before adding components	Skip init and add components directly	npx shadcn@latest init	npx shadcn@latest add button (without init)	High	https://ui.shadcn.com/docs/installation
3	Setup	Configure path aliases	Set up proper import aliases in tsconfig and components.json	Use @/components/ui path aliases	Relative imports like ../../components	import { Button } from @/components/ui/button	import { Button } from ../../components/ui/button	Medium	https://ui.shadcn.com/docs/installation
4	Theming	Use CSS variables for colors	Define colors as CSS variables in globals.css for theming	CSS variables in :root and .dark	Hardcoded color values in components	bg-primary text-primary-foreground	bg-blue-500 text-white	High	https://ui.shadcn.com/docs/theming
5	Theming	Follow naming convention	Use semantic color names with foreground pattern	primary/primary-foreground secondary/secondary-foreground	Generic color names	--primary --primary-foreground	--blue --light-blue	Medium	https://ui.shadcn.com/docs/theming
6	Theming	Support dark mode	Include .dark class styles for all custom CSS	Define both :root and .dark color schemes	Only light mode colors	.dark { --background: 240 10% 3.9%; }	No .dark class styles	High	https://ui.shadcn.com/docs/dark-mode
7	Components	Use component variants	Leverage cva variants for consistent styling	Use variant prop for different styles	Inline conditional classes	<Button variant=destructive>	<Button className={isError ? bg-red-500 : bg-blue-500}>	Medium	https://ui.shadcn.com/docs/components/button
8	Components	Compose with className	Add custom classes via className prop for overrides	Extend with className for one-off customizations	Modify component source directly	<Button className=w-full>	Edit button.tsx to add w-full	Medium	https://ui.shadcn.com/docs/components/button
9	Components	Use size variants consistently	Apply size prop for consistent sizing across components	size=sm size=lg for sizing	Mix size classes inconsistently	<Button size=lg>	<Button className=text-lg px-8 py-4>	Medium	https://ui.shadcn.com/docs/components/button
10	Components	Prefer compound components	Use provided sub-components for complex UI	Card + CardHeader + CardContent pattern	Single component with many props	<Card><CardHeader><CardTitle>	<Card title=x content=y footer=z>	Medium	https://ui.shadcn.com/docs/components/card
11	Dialog	Use Dialog for modal content	Dialog component for overlay modal windows	Dialog for confirmations forms details	Alert for modal content	<Dialog><DialogContent>	<Alert> styled as modal	High	https://ui.shadcn.com/docs/components/dialog
12	Dialog	Handle dialog state properly	Use open and onOpenChange for controlled dialogs	Controlled state with useState	Uncontrolled with default open only	<Dialog open={open} onOpenChange={setOpen}>	<Dialog defaultOpen={true}>	Medium	https://ui.shadcn.com/docs/components/dialog
13	Dialog	Include proper dialog structure	Use DialogHeader DialogTitle DialogDescription	Complete semantic structure	Missing title or description	<DialogHeader><DialogTitle><DialogDescription>	<DialogContent><p>Content</p></DialogContent>	High	https://ui.shadcn.com/docs/components/dialog
14	Sheet	Use Sheet for side panels	Sheet component for slide-out panels and drawers	Sheet for navigation filters settings	Dialog for side content	<Sheet side=right>	<Dialog> with slide animation	Medium	https://ui.shadcn.com/docs/components/sheet
15	Sheet	Specify sheet side	Set side prop for sheet slide direction	Explicit side=left or side=right	Default side without consideration	<Sheet><SheetContent side=left>	<Sheet><SheetContent>	Low	https://ui.shadcn.com/docs/components/sheet
16	Form	Use Form with react-hook-form	Integrate Form component with react-hook-form for validation	useForm + Form + FormField pattern	Custom form handling without Form	<Form {...form}><FormField control={form.control}>	<form onSubmit={handleSubmit}>	High	https://ui.shadcn.com/docs/components/form
17	Form	Use FormField for inputs	Wrap inputs in FormField for proper labeling and errors	FormField + FormItem + FormLabel + FormControl	Input without FormField wrapper	<FormField><FormItem><FormLabel><FormControl><Input>	<Input onChange={...}>	High	https://ui.shadcn.com/docs/components/form
18	Form	Display form messages	Use FormMessage for validation error display	FormMessage after FormControl	Custom error text without FormMessage	<FormControl><Input/></FormControl><FormMessage/>	<Input/>{error && <span>{error}</span>}	Medium	https://ui.shadcn.com/docs/components/form
19	Form	Use Zod for validation	Define form schema with Zod for type-safe validation	zodResolver with form schema	Manual validation logic	zodResolver(formSchema)	validate: (values) => { if (!values.email) }	Medium	https://ui.shadcn.com/docs/components/form
20	Select	Use Select for dropdowns	Select component for option selection	Select for choosing from list	Native select element	<Select><SelectTrigger><SelectContent>	<select><option>	Medium	https://ui.shadcn.com/docs/components/select
21	Select	Structure Select properly	Include Trigger Value Content and Items	Complete Select structure	Missing SelectValue or SelectContent	<SelectTrigger><SelectValue/></SelectTrigger><SelectContent><SelectItem>	<Select><option>	High	https://ui.shadcn.com/docs/components/select
22	Command	Use Command for search	Command component for searchable lists and palettes	Command for command palette search	Input with custom dropdown	<Command><CommandInput><CommandList>	<Input><div className=dropdown>	Medium	https://ui.shadcn.com/docs/components/command
23	Command	Group command items	Use CommandGroup for categorized items	CommandGroup with heading for sections	Flat list without grouping	<CommandGroup heading=Suggestions><CommandItem>	<CommandItem> without groups	Low	https://ui.shadcn.com/docs/components/command
24	Table	Use Table for data display	Table component for structured data	Table for tabular data display	Div grid for table-like layouts	<Table><TableHeader><TableBody><TableRow>	<div className=grid>	Medium	https://ui.shadcn.com/docs/components/table
25	Table	Include proper table structure	Use TableHeader TableBody TableRow TableCell	Semantic table structure	Missing thead or tbody	<TableHeader><TableRow><TableHead>	<Table><TableRow> without header	High	https://ui.shadcn.com/docs/components/table
26	DataTable	Use DataTable for complex tables	Combine Table with TanStack Table for features	DataTable pattern for sorting filtering pagination	Custom table implementation	useReactTable + Table components	Custom sort filter pagination logic	Medium	https://ui.shadcn.com/docs/components/data-table
27	Tabs	Use Tabs for content switching	Tabs component for tabbed interfaces	Tabs for related content sections	Custom tab implementation	<Tabs><TabsList><TabsTrigger><TabsContent>	<div onClick={() => setTab(...)}	Medium	https://ui.shadcn.com/docs/components/tabs

Preview truncated.

View on GitHub

svelte.csv10.8 KB

No	Category	Guideline	Description	Do	Don't	Code Good	Code Bad	Severity	Docs URL
1	Reactivity	Use $: for reactive statements	Automatic dependency tracking	$: for derived values	Manual recalculation	$: doubled = count * 2	let doubled; count && (doubled = count * 2)	Medium	https://svelte.dev/docs/svelte-components#script-3-$-marks-a-statement-as-reactive
2	Reactivity	Trigger reactivity with assignment	Svelte tracks assignments not mutations	Reassign arrays/objects to trigger update	Mutate without reassignment	items = [...items, newItem]	items.push(newItem)	High	https://svelte.dev/docs/svelte-components#script-2-assignments-are-reactive
3	Reactivity	Use $state in Svelte 5	Runes for explicit reactivity	let count = $state(0)	Implicit reactivity in Svelte 5	let count = $state(0)	let count = 0 (Svelte 5)	Medium	https://svelte.dev/blog/runes
4	Reactivity	Use $derived for computed values	$derived replaces $: in Svelte 5	let doubled = $derived(count * 2)	$: in Svelte 5	let doubled = $derived(count * 2)	$: doubled = count * 2 (Svelte 5)	Medium
5	Reactivity	Use $effect for side effects	$effect replaces $: side effects	Use $effect for subscriptions	$: for side effects in Svelte 5	$effect(() => console.log(count))	$: console.log(count) (Svelte 5)	Medium
6	Props	Export let for props	Declare props with export let	export let propName	Props without export	export let count = 0	let count = 0	High	https://svelte.dev/docs/svelte-components#script-1-export-creates-a-component-prop
7	Props	Use $props in Svelte 5	$props rune for prop access	let { name } = $props()	export let in Svelte 5	let { name, age = 0 } = $props()	export let name; export let age = 0	Medium
8	Props	Provide default values	Default props with assignment	export let count = 0	Required props without defaults	export let count = 0	export let count	Low
9	Props	Use spread props	Pass through unknown props	{...$$restProps} on elements	Manual prop forwarding	<button {...$$restProps}>	<button class={$$props.class}>	Low	https://svelte.dev/docs/basic-markup#attributes-and-props
10	Bindings	Use bind: for two-way binding	Simplified input handling	bind:value for inputs	on:input with manual update	<input bind:value={name}>	<input value={name} on:input={e => name = e.target.value}>	Low	https://svelte.dev/docs/element-directives#bind-property
11	Bindings	Bind to DOM elements	Reference DOM nodes	bind:this for element reference	querySelector in onMount	<div bind:this={el}>	onMount(() => el = document.querySelector())	Medium
12	Bindings	Use bind:group for radios/checkboxes	Simplified group handling	bind:group for radio/checkbox groups	Manual checked handling	<input type="radio" bind:group={selected}>	<input type="radio" checked={selected === value}>	Low
13	Events	Use on: for event handlers	Event directive syntax	on:click={handler}	addEventListener in onMount	<button on:click={handleClick}>	onMount(() => btn.addEventListener())	Medium	https://svelte.dev/docs/element-directives#on-eventname
14	Events	Forward events with on:event	Pass events to parent	on:click without handler	createEventDispatcher for DOM events	<button on:click>	dispatch('click', event)	Low
15	Events	Use createEventDispatcher	Custom component events	dispatch for custom events	on:event for custom events	dispatch('save', { data })	on:save without dispatch	Medium	https://svelte.dev/docs/svelte#createeventdispatcher
16	Lifecycle	Use onMount for initialization	Run code after component mounts	onMount for setup and data fetching	Code in script body for side effects	onMount(() => fetchData())	fetchData() in script body	High	https://svelte.dev/docs/svelte#onmount
17	Lifecycle	Return cleanup from onMount	Automatic cleanup on destroy	Return function from onMount	Separate onDestroy for paired cleanup	onMount(() => { sub(); return unsub })	onMount(sub); onDestroy(unsub)	Medium
18	Lifecycle	Use onDestroy sparingly	Only when onMount cleanup not possible	onDestroy for non-mount cleanup	onDestroy for mount-related cleanup	onDestroy for store unsubscribe	onDestroy(() => clearInterval(id))	Low
19	Lifecycle	Avoid beforeUpdate/afterUpdate	Usually not needed	Reactive statements instead	beforeUpdate for derived state	$: if (x) doSomething()	beforeUpdate(() => doSomething())	Low
20	Stores	Use writable for mutable state	Basic reactive store	writable for shared mutable state	Local variables for shared state	const count = writable(0)	let count = 0 in module	Medium	https://svelte.dev/docs/svelte-store#writable
21	Stores	Use readable for read-only state	External data sources	readable for derived/external data	writable for read-only data	readable(0, set => interval(set))	writable(0) for timer	Low	https://svelte.dev/docs/svelte-store#readable
22	Stores	Use derived for computed stores	Combine or transform stores	derived for computed values	Manual subscription for derived	derived(count, $c => $c * 2)	count.subscribe(c => doubled = c * 2)	Medium	https://svelte.dev/docs/svelte-store#derived
23	Stores	Use $ prefix for auto-subscription	Automatic subscribe/unsubscribe	$storeName in components	Manual subscription	{$count}	count.subscribe(c => value = c)	High
24	Stores	Clean up custom subscriptions	Unsubscribe when component destroys	Return unsubscribe from onMount	Leave subscriptions open	onMount(() => store.subscribe(fn))	store.subscribe(fn) in script	High
25	Slots	Use slots for composition	Content projection	<slot> for flexible content	Props for all content	<slot>Default</slot>	<Component content="text"/>	Medium	https://svelte.dev/docs/special-elements#slot
26	Slots	Name slots for multiple areas	Multiple content areas	<slot name="header">	Single slot for complex layouts	<slot name="header"><slot name="footer">	<slot> with complex conditionals	Low
27	Slots	Check slot content with $$slots	Conditional slot rendering	$$slots.name for conditional rendering	Always render slot wrapper	{#if $$slots.footer}<slot name="footer"/>{/if}	<div><slot name="footer"/></div>	Low

Preview truncated.

View on GitHub

swiftui.csv10.6 KB

No	Category	Guideline	Description	Do	Don't	Code Good	Code Bad	Severity	Docs URL
1	Views	Use struct for views	SwiftUI views are value types	struct MyView: View	class MyView: View	struct ContentView: View { var body: some View }	class ContentView: View	High	https://developer.apple.com/documentation/swiftui/view
2	Views	Keep views small and focused	Single responsibility for each view	Extract subviews for complex layouts	Large monolithic views	Extract HeaderView FooterView	500+ line View struct	Medium
3	Views	Use body computed property	body returns the view hierarchy	var body: some View { }	func body() -> some View	var body: some View { Text("Hello") }	func body() -> Text	High
4	Views	Prefer composition over inheritance	Compose views using ViewBuilder	Combine smaller views	Inheritance hierarchies	VStack { Header() Content() }	class SpecialView extends BaseView	Medium
5	State	Use @State for local state	Simple value types owned by view	@State for view-local primitives	@State for shared data	@State private var count = 0	@State var sharedData: Model	High	https://developer.apple.com/documentation/swiftui/state
6	State	Use @Binding for two-way data	Pass mutable state to child views	@Binding for child input	@State in child for parent data	@Binding var isOn: Bool	$isOn to pass binding	Medium	https://developer.apple.com/documentation/swiftui/binding
7	State	Use @StateObject for reference types	ObservableObject owned by view	@StateObject for view-created objects	@ObservedObject for owned objects	@StateObject private var vm = ViewModel()	@ObservedObject var vm = ViewModel()	High	https://developer.apple.com/documentation/swiftui/stateobject
8	State	Use @ObservedObject for injected objects	Reference types passed from parent	@ObservedObject for injected dependencies	@StateObject for injected objects	@ObservedObject var vm: ViewModel	@StateObject var vm: ViewModel (injected)	High	https://developer.apple.com/documentation/swiftui/observedobject
9	State	Use @EnvironmentObject for shared state	App-wide state injection	@EnvironmentObject for global state	Prop drilling through views	@EnvironmentObject var settings: Settings	Pass settings through 5 views	Medium	https://developer.apple.com/documentation/swiftui/environmentobject
10	State	Use @Published in ObservableObject	Automatically publish property changes	@Published for observed properties	Manual objectWillChange calls	@Published var items: [Item] = []	var items: [Item] { didSet { objectWillChange.send() } }	Medium
11	Observable	Use @Observable macro (iOS 17+)	Modern observation without Combine	@Observable class for view models	ObservableObject for new projects	@Observable class ViewModel { }	class ViewModel: ObservableObject	Medium	https://developer.apple.com/documentation/observation
12	Observable	Use @Bindable for @Observable	Create bindings from @Observable	@Bindable var vm for bindings	@Binding with @Observable	@Bindable var viewModel	$viewModel.name with @Observable	Medium
13	Layout	Use VStack HStack ZStack	Standard stack-based layouts	Stacks for linear arrangements	GeometryReader for simple layouts	VStack { Text() Image() }	GeometryReader for vertical list	Medium	https://developer.apple.com/documentation/swiftui/vstack
14	Layout	Use LazyVStack LazyHStack for lists	Lazy loading for performance	Lazy stacks for long lists	Regular stacks for 100+ items	LazyVStack { ForEach(items) }	VStack { ForEach(largeArray) }	High	https://developer.apple.com/documentation/swiftui/lazyvstack
15	Layout	Use GeometryReader sparingly	Only when needed for sizing	GeometryReader for responsive layouts	GeometryReader everywhere	GeometryReader for aspect ratio	GeometryReader wrapping everything	Medium
16	Layout	Use spacing and padding consistently	Consistent spacing throughout app	Design system spacing values	Magic numbers for spacing	.padding(16) or .padding()	.padding(13), .padding(17)	Low
17	Layout	Use frame modifiers correctly	Set explicit sizes when needed	.frame(maxWidth: .infinity)	Fixed sizes for responsive content	.frame(maxWidth: .infinity)	.frame(width: 375)	Medium
18	Modifiers	Order modifiers correctly	Modifier order affects rendering	Background before padding for full coverage	Wrong modifier order	.padding().background(Color.red)	.background(Color.red).padding()	High
19	Modifiers	Create custom ViewModifiers	Reusable modifier combinations	ViewModifier for repeated styling	Duplicate modifier chains	struct CardStyle: ViewModifier	.shadow().cornerRadius() everywhere	Medium	https://developer.apple.com/documentation/swiftui/viewmodifier
20	Modifiers	Use conditional modifiers carefully	Avoid changing view identity	if-else with same view type	Conditional that changes view identity	Text(title).foregroundColor(isActive ? .blue : .gray)	if isActive { Text().bold() } else { Text() }	Medium
21	Navigation	Use NavigationStack (iOS 16+)	Modern navigation with type-safe paths	NavigationStack with navigationDestination	NavigationView for new projects	NavigationStack { }	NavigationView { } (deprecated)	Medium	https://developer.apple.com/documentation/swiftui/navigationstack
22	Navigation	Use navigationDestination	Type-safe navigation destinations	.navigationDestination(for:)	NavigationLink(destination:)	.navigationDestination(for: Item.self)	NavigationLink(destination: DetailView())	Medium
23	Navigation	Use @Environment for dismiss	Programmatic navigation dismissal	@Environment(\.dismiss) var dismiss	presentationMode (deprecated)	@Environment(\.dismiss) var dismiss	@Environment(\.presentationMode)	Low
24	Lists	Use List for scrollable content	Built-in scrolling and styling	List for standard scrollable content	ScrollView + VStack for simple lists	List { ForEach(items) { } }	ScrollView { VStack { ForEach } }	Low	https://developer.apple.com/documentation/swiftui/list
25	Lists	Provide stable identifiers	Use Identifiable or explicit id	Identifiable protocol or id parameter	Index as identifier	ForEach(items) where Item: Identifiable	ForEach(items.indices, id: \.self)	High
26	Lists	Use onDelete and onMove	Standard list editing	onDelete for swipe to delete	Custom delete implementation	.onDelete(perform: delete)	.onTapGesture for delete	Low
27	Forms	Use Form for settings	Grouped input controls	Form for settings screens	Manual grouping for forms	Form { Section { Toggle() } }	VStack { Toggle() }	Low	https://developer.apple.com/documentation/swiftui/form

Preview truncated.

View on GitHub

vue.csv10.8 KB

No	Category	Guideline	Description	Do	Don't	Code Good	Code Bad	Severity	Docs URL
1	Composition	Use Composition API for new projects	Composition API offers better TypeScript support and logic reuse	<script setup> for components	Options API for new projects	<script setup>	export default { data() }	Medium	https://vuejs.org/guide/extras/composition-api-faq.html
2	Composition	Use script setup syntax	Cleaner syntax with automatic exports	<script setup> with defineProps	setup() function manually	<script setup>	<script> setup() { return {} }	Low	https://vuejs.org/api/sfc-script-setup.html
3	Reactivity	Use ref for primitives	ref() for primitive values that need reactivity	ref() for strings numbers booleans	reactive() for primitives	const count = ref(0)	const count = reactive(0)	Medium	https://vuejs.org/guide/essentials/reactivity-fundamentals.html
4	Reactivity	Use reactive for objects	reactive() for complex objects and arrays	reactive() for objects with multiple properties	ref() for complex objects	const state = reactive({ user: null })	const state = ref({ user: null })	Medium
5	Reactivity	Access ref values with .value	Remember .value in script unwrap in template	Use .value in script	Forget .value in script	count.value++	count++ (in script)	High
6	Reactivity	Use computed for derived state	Computed properties cache and update automatically	computed() for derived values	Methods for derived values	const doubled = computed(() => count.value * 2)	const doubled = () => count.value * 2	Medium	https://vuejs.org/guide/essentials/computed.html
7	Reactivity	Use shallowRef for large objects	Avoid deep reactivity for performance	shallowRef for large data structures	ref for large nested objects	const bigData = shallowRef(largeObject)	const bigData = ref(largeObject)	Medium	https://vuejs.org/api/reactivity-advanced.html#shallowref
8	Watchers	Use watchEffect for simple cases	Auto-tracks dependencies	watchEffect for simple reactive effects	watch with explicit deps when not needed	watchEffect(() => console.log(count.value))	watch(count, (val) => console.log(val))	Low	https://vuejs.org/guide/essentials/watchers.html
9	Watchers	Use watch for specific sources	Explicit control over what to watch	watch with specific refs	watchEffect for complex conditional logic	watch(userId, fetchUser)	watchEffect with conditionals	Medium
10	Watchers	Clean up side effects	Return cleanup function in watchers	Return cleanup in watchEffect	Leave subscriptions open	watchEffect((onCleanup) => { onCleanup(unsub) })	watchEffect without cleanup	High
11	Props	Define props with defineProps	Type-safe prop definitions	defineProps with TypeScript	Props without types	defineProps<{ msg: string }>()	defineProps(['msg'])	Medium	https://vuejs.org/guide/typescript/composition-api.html#typing-component-props
12	Props	Use withDefaults for default values	Provide defaults for optional props	withDefaults with defineProps	Defaults in destructuring	withDefaults(defineProps<Props>(), { count: 0 })	const { count = 0 } = defineProps()	Medium
13	Props	Avoid mutating props	Props should be read-only	Emit events to parent for changes	Direct prop mutation	emit('update:modelValue', newVal)	props.modelValue = newVal	High
14	Emits	Define emits with defineEmits	Type-safe event emissions	defineEmits with types	Emit without definition	defineEmits<{ change: [id: number] }>()	emit('change', id) without define	Medium	https://vuejs.org/guide/typescript/composition-api.html#typing-component-emits
15	Emits	Use v-model for two-way binding	Simplified parent-child data flow	v-model with modelValue prop	:value + @input manually	<Child v-model="value"/>	<Child :value="value" @input="value = $event"/>	Low	https://vuejs.org/guide/components/v-model.html
16	Lifecycle	Use onMounted for DOM access	DOM is ready in onMounted	onMounted for DOM operations	Access DOM in setup directly	onMounted(() => el.value.focus())	el.value.focus() in setup	High	https://vuejs.org/api/composition-api-lifecycle.html
17	Lifecycle	Clean up in onUnmounted	Remove listeners and subscriptions	onUnmounted for cleanup	Leave listeners attached	onUnmounted(() => window.removeEventListener())	No cleanup on unmount	High
18	Lifecycle	Avoid onBeforeMount for data	Use onMounted or setup for data fetching	Fetch in onMounted or setup	Fetch in onBeforeMount	onMounted(async () => await fetchData())	onBeforeMount(async () => await fetchData())	Low
19	Components	Use single-file components	Keep template script style together	.vue files for components	Separate template/script files	Component.vue with all parts	Component.js + Component.html	Low
20	Components	Use PascalCase for components	Consistent component naming	PascalCase in imports and templates	kebab-case in script	<MyComponent/>	<my-component/>	Low	https://vuejs.org/style-guide/rules-strongly-recommended.html
21	Components	Prefer composition over mixins	Composables replace mixins	Composables for shared logic	Mixins for code reuse	const { data } = useApi()	mixins: [apiMixin]	Medium
22	Composables	Name composables with use prefix	Convention for composable functions	useFetch useAuth useForm	getData or fetchApi	export function useFetch()	export function fetchData()	Medium	https://vuejs.org/guide/reusability/composables.html
23	Composables	Return refs from composables	Maintain reactivity when destructuring	Return ref values	Return reactive objects that lose reactivity	return { data: ref(null) }	return reactive({ data: null })	Medium
24	Composables	Accept ref or value params	Use toValue for flexible inputs	toValue() or unref() for params	Only accept ref or only value	const val = toValue(maybeRef)	const val = maybeRef.value	Low	https://vuejs.org/api/reactivity-utilities.html#tovalue
25	Templates	Use v-bind shorthand	Cleaner template syntax	:prop instead of v-bind:prop	Full v-bind syntax	<div :class="cls">	<div v-bind:class="cls">	Low
26	Templates	Use v-on shorthand	Cleaner event binding	@event instead of v-on:event	Full v-on syntax	<button @click="handler">	<button v-on:click="handler">	Low
27	Templates	Avoid v-if with v-for	v-if has higher priority causes issues	Wrap in template or computed filter	v-if on same element as v-for	<template v-for><div v-if>	<div v-for v-if>	High	https://vuejs.org/style-guide/rules-essential.html#avoid-v-if-with-v-for

Preview truncated.

View on GitHub

charts.csv7.47 KB

No	Data Type	Keywords	Best Chart Type	Secondary Options	Color Guidance	Performance Impact	Accessibility Notes	Library Recommendation	Interactive Level
1	Trend Over Time	trend, time-series, line, growth, timeline, progress	Line Chart	Area Chart, Smooth Area	Primary: #0080FF. Multiple series: use distinct colors. Fill: 20% opacity	⚡ Excellent (optimized)	✓ Clear line patterns for colorblind users. Add pattern overlays.	Chart.js, Recharts, ApexCharts	Hover + Zoom
2	Compare Categories	compare, categories, bar, comparison, ranking	Bar Chart (Horizontal or Vertical)	Column Chart, Grouped Bar	Each bar: distinct color. Category: grouped same color. Sorted: descending order	⚡ Excellent	✓ Easy to compare. Add value labels on bars for clarity.	Chart.js, Recharts, D3.js	Hover + Sort
3	Part-to-Whole	part-to-whole, pie, donut, percentage, proportion, share	Pie Chart or Donut	Stacked Bar, Treemap	Colors: 5-6 max. Contrasting palette. Large slices first. Use labels.	⚡ Good (limit 6 slices)	⚠ Hard for accessibility. Better: Stacked bar with legend. Avoid pie if >5 items.	Chart.js, Recharts, D3.js	Hover + Drill
4	Correlation/Distribution	correlation, distribution, scatter, relationship, pattern	Scatter Plot or Bubble Chart	Heat Map, Matrix	Color axis: gradient (blue-red). Size: relative. Opacity: 0.6-0.8 to show density	⚠ Moderate (many points)	⚠ Provide data table alternative. Use pattern + color distinction.	D3.js, Plotly, Recharts	Hover + Brush
5	Heatmap/Intensity	heatmap, heat-map, intensity, density, matrix	Heat Map or Choropleth	Grid Heat Map, Bubble Heat	Gradient: Cool (blue) to Hot (red). Scale: clear legend. Divergent for ±data	⚡ Excellent (color CSS)	⚠ Colorblind: Use pattern overlay. Provide numerical legend.	D3.js, Plotly, ApexCharts	Hover + Zoom
6	Geographic Data	geographic, map, location, region, geo, spatial	Choropleth Map, Bubble Map	Geographic Heat Map	Regional: single color gradient or categorized colors. Legend: clear scale	⚠ Moderate (rendering)	⚠ Include text labels for regions. Provide data table alternative.	D3.js, Mapbox, Leaflet	Pan + Zoom + Drill
7	Funnel/Flow	funnel/flow	Funnel Chart, Sankey	Waterfall (for flows)	Stages: gradient (starting color → ending color). Show conversion %	⚡ Good	✓ Clear stage labels + percentages. Good for accessibility if labeled.	D3.js, Recharts, Custom SVG	Hover + Drill
8	Performance vs Target	performance-vs-target	Gauge Chart or Bullet Chart	Dial, Thermometer	Performance: Red→Yellow→Green gradient. Target: marker line. Threshold colors	⚡ Good	✓ Add numerical value + percentage label beside gauge.	D3.js, ApexCharts, Custom SVG	Hover
9	Time-Series Forecast	time-series-forecast	Line with Confidence Band	Ribbon Chart	Actual: solid line #0080FF. Forecast: dashed #FF9500. Band: light shading	⚡ Good	✓ Clearly distinguish actual vs forecast. Add legend.	Chart.js, ApexCharts, Plotly	Hover + Toggle
10	Anomaly Detection	anomaly-detection	Line Chart with Highlights	Scatter with Alert	Normal: blue #0080FF. Anomaly: red #FF0000 circle/square marker + alert	⚡ Good	✓ Circle/marker for anomalies. Add text alert annotation.	D3.js, Plotly, ApexCharts	Hover + Alert
11	Hierarchical/Nested Data	hierarchical/nested-data	Treemap	Sunburst, Nested Donut, Icicle	Parent: distinct hues. Children: lighter shades. White borders 2-3px.	⚠ Moderate	⚠ Poor - provide table alternative. Label large areas.	D3.js, Recharts, ApexCharts	Hover + Drilldown
12	Flow/Process Data	flow/process-data	Sankey Diagram	Alluvial, Chord Diagram	Gradient from source to target. Opacity 0.4-0.6 for flows.	⚠ Moderate	⚠ Poor - provide flow table alternative.	D3.js (d3-sankey), Plotly	Hover + Drilldown
13	Cumulative Changes	cumulative-changes	Waterfall Chart	Stacked Bar, Cascade	Increases: #4CAF50. Decreases: #F44336. Start: #2196F3. End: #0D47A1.	⚡ Good	✓ Good - clear directional colors with labels.	ApexCharts, Highcharts, Plotly	Hover
14	Multi-Variable Comparison	multi-variable-comparison	Radar/Spider Chart	Parallel Coordinates, Grouped Bar	Single: #0080FF 20% fill. Multiple: distinct colors per dataset.	⚡ Good	⚠ Moderate - limit 5-8 axes. Add data table.	Chart.js, Recharts, ApexCharts	Hover + Toggle
15	Stock/Trading OHLC	stock/trading-ohlc	Candlestick Chart	OHLC Bar, Heikin-Ashi	Bullish: #26A69A. Bearish: #EF5350. Volume: 40% opacity below.	⚡ Good	⚠ Moderate - provide OHLC data table.	Lightweight Charts (TradingView), ApexCharts	Real-time + Hover + Zoom
16	Relationship/Connection Data	relationship/connection-data	Network Graph	Hierarchical Tree, Adjacency Matrix	Node types: categorical colors. Edges: #90A4AE 60% opacity.	❌ Poor (500+ nodes struggles)	❌ Very Poor - provide adjacency list alternative.	D3.js (d3-force), Vis.js, Cytoscape.js	Drilldown + Hover + Drag
17	Distribution/Statistical	distribution/statistical	Box Plot	Violin Plot, Beeswarm	Box: #BBDEFB. Border: #1976D2. Median: #D32F2F. Outliers: #F44336.	⚡ Excellent	✓ Good - include stats table (min, Q1, median, Q3, max).	Plotly, D3.js, Chart.js (plugin)	Hover
18	Performance vs Target (Compact)	performance-vs-target-(compact)	Bullet Chart	Gauge, Progress Bar	Ranges: #FFCDD2, #FFF9C4, #C8E6C9. Performance: #1976D2. Target: black 3px.	⚡ Excellent	✓ Excellent - compact with clear values.	D3.js, Plotly, Custom SVG	Hover
19	Proportional/Percentage	proportional/percentage	Waffle Chart	Pictogram, Stacked Bar 100%	10x10 grid. 3-5 categories max. 2-3px spacing between squares.	⚡ Good	✓ Good - better than pie for accessibility.	D3.js, React-Waffle, Custom CSS Grid	Hover
20	Hierarchical Proportional	hierarchical-proportional	Sunburst Chart	Treemap, Icicle, Circle Packing	Center to outer: darker to lighter. 15-20% lighter per level.	⚠ Moderate	⚠ Poor - provide hierarchy table alternative.	D3.js (d3-hierarchy), Recharts, ApexCharts	Drilldown + Hover
21	Root Cause Analysis	root cause, decomposition, tree, hierarchy, drill-down, ai-split	Decomposition Tree	Decision Tree, Flow Chart	Nodes: #2563EB (Primary) vs #EF4444 (Negative impact). Connectors: Neutral grey.	⚠ Moderate (calculation heavy)	✓ clear hierarchy. Allow keyboard navigation for nodes.	Power BI (native), React-Flow, Custom D3.js	Drill + Expand
22	3D Spatial Data	3d, spatial, immersive, terrain, molecular, volumetric	3D Scatter/Surface Plot	Volumetric Rendering, Point Cloud	Depth cues: lighting/shading. Z-axis: color gradient (cool to warm).	❌ Heavy (WebGL required)	❌ Poor - requires alternative 2D view or data table.	Three.js, Deck.gl, Plotly 3D	Rotate + Zoom + VR
23	Real-Time Streaming	streaming, real-time, ticker, live, velocity, pulse	Streaming Area Chart	Ticker Tape, Moving Gauge	Current: Bright Pulse (#00FF00). History: Fading opacity. Grid: Dark.	⚡ Optimized (canvas/webgl)	⚠ Flashing elements - provide pause button. High contrast.	Smoothed D3.js	CanvasJS
24	Sentiment/Emotion	sentiment, emotion, nlp, opinion, feeling	Word Cloud with Sentiment	Sentiment Arc, Radar Chart	Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Size = Frequency.	⚡ Good	⚠ Word clouds poor for screen readers. Use list view.	D3-cloud, Highcharts, Nivo	Hover + Filter
25	Process Mining	process, mining, variants, path, bottleneck, log	Process Map / Graph	Directed Acyclic Graph (DAG), Petri Net	Happy path: #10B981 (Thick). Deviations: #F59E0B (Thin). Bottlenecks: #EF4444.	⚠ Moderate to Heavy	⚠ Complex graphs hard to navigate. Provide path summary.	React-Flow, Cytoscape.js, Recharts	Drag + Node-Click

View on GitHub

colors.csv9.49 KB

No	Product Type	Primary (Hex)	Secondary (Hex)	CTA (Hex)	Background (Hex)	Text (Hex)	Border (Hex)	Notes
1	SaaS (General)	#2563EB	#3B82F6	#F97316	#F8FAFC	#1E293B	#E2E8F0	Trust blue + orange CTA contrast
2	Micro SaaS	#6366F1	#818CF8	#10B981	#F5F3FF	#1E1B4B	#E0E7FF	Indigo primary + emerald CTA
3	E-commerce	#059669	#10B981	#F97316	#ECFDF5	#064E3B	#A7F3D0	Success green + urgency orange
4	E-commerce Luxury	#1C1917	#44403C	#CA8A04	#FAFAF9	#0C0A09	#D6D3D1	Premium dark + gold accent
5	Service Landing Page	#0EA5E9	#38BDF8	#F97316	#F0F9FF	#0C4A6E	#BAE6FD	Sky blue trust + warm CTA
6	B2B Service	#0F172A	#334155	#0369A1	#F8FAFC	#020617	#E2E8F0	Professional navy + blue CTA
7	Financial Dashboard	#0F172A	#1E293B	#22C55E	#020617	#F8FAFC	#334155	Dark bg + green positive indicators
8	Analytics Dashboard	#1E40AF	#3B82F6	#F59E0B	#F8FAFC	#1E3A8A	#DBEAFE	Blue data + amber highlights
9	Healthcare App	#0891B2	#22D3EE	#059669	#ECFEFF	#164E63	#A5F3FC	Calm cyan + health green
10	Educational App	#4F46E5	#818CF8	#F97316	#EEF2FF	#1E1B4B	#C7D2FE	Playful indigo + energetic orange
11	Creative Agency	#EC4899	#F472B6	#06B6D4	#FDF2F8	#831843	#FBCFE8	Bold pink + cyan accent
12	Portfolio/Personal	#18181B	#3F3F46	#2563EB	#FAFAFA	#09090B	#E4E4E7	Monochrome + blue accent
13	Gaming	#7C3AED	#A78BFA	#F43F5E	#0F0F23	#E2E8F0	#4C1D95	Neon purple + rose action
14	Government/Public Service	#0F172A	#334155	#0369A1	#F8FAFC	#020617	#E2E8F0	High contrast navy + blue
15	Fintech/Crypto	#F59E0B	#FBBF24	#8B5CF6	#0F172A	#F8FAFC	#334155	Gold trust + purple tech
16	Social Media App	#E11D48	#FB7185	#2563EB	#FFF1F2	#881337	#FECDD3	Vibrant rose + engagement blue
17	Productivity Tool	#0D9488	#14B8A6	#F97316	#F0FDFA	#134E4A	#99F6E4	Teal focus + action orange
18	Design System/Component Library	#4F46E5	#6366F1	#F97316	#EEF2FF	#312E81	#C7D2FE	Indigo brand + doc hierarchy
19	AI/Chatbot Platform	#7C3AED	#A78BFA	#06B6D4	#FAF5FF	#1E1B4B	#DDD6FE	AI purple + cyan interactions
20	NFT/Web3 Platform	#8B5CF6	#A78BFA	#FBBF24	#0F0F23	#F8FAFC	#4C1D95	Purple tech + gold value
21	Creator Economy Platform	#EC4899	#F472B6	#F97316	#FDF2F8	#831843	#FBCFE8	Creator pink + engagement orange
22	Sustainability/ESG Platform	#059669	#10B981	#0891B2	#ECFDF5	#064E3B	#A7F3D0	Nature green + ocean blue
23	Remote Work/Collaboration Tool	#6366F1	#818CF8	#10B981	#F5F3FF	#312E81	#E0E7FF	Calm indigo + success green
24	Mental Health App	#8B5CF6	#C4B5FD	#10B981	#FAF5FF	#4C1D95	#EDE9FE	Calming lavender + wellness green
25	Pet Tech App	#F97316	#FB923C	#2563EB	#FFF7ED	#9A3412	#FED7AA	Playful orange + trust blue
26	Smart Home/IoT Dashboard	#1E293B	#334155	#22C55E	#0F172A	#F8FAFC	#475569	Dark tech + status green
27	EV/Charging Ecosystem	#0891B2	#22D3EE	#22C55E	#ECFEFF	#164E63	#A5F3FC	Electric cyan + eco green

Preview truncated.

View on GitHub

icons.csv13.1 KB

No	Category	Icon Name	Keywords	Library	Import Code	Usage	Best For	Style
1	Navigation	menu	hamburger menu navigation toggle bars	Lucide	import { Menu } from 'lucide-react'	<Menu />	Mobile navigation drawer toggle sidebar	Outline
2	Navigation	arrow-left	back previous return navigate	Lucide	import { ArrowLeft } from 'lucide-react'	<ArrowLeft />	Back button breadcrumb navigation	Outline
3	Navigation	arrow-right	next forward continue navigate	Lucide	import { ArrowRight } from 'lucide-react'	<ArrowRight />	Forward button next step CTA	Outline
4	Navigation	chevron-down	dropdown expand accordion select	Lucide	import { ChevronDown } from 'lucide-react'	<ChevronDown />	Dropdown toggle accordion header	Outline
5	Navigation	chevron-up	collapse close accordion minimize	Lucide	import { ChevronUp } from 'lucide-react'	<ChevronUp />	Accordion collapse minimize	Outline
6	Navigation	home	homepage main dashboard start	Lucide	import { Home } from 'lucide-react'	<Home />	Home navigation main page	Outline
7	Navigation	x	close cancel dismiss remove exit	Lucide	import { X } from 'lucide-react'	<X />	Modal close dismiss button	Outline
8	Navigation	external-link	open new tab external link	Lucide	import { ExternalLink } from 'lucide-react'	<ExternalLink />	External link indicator	Outline
9	Action	plus	add create new insert	Lucide	import { Plus } from 'lucide-react'	<Plus />	Add button create new item	Outline
10	Action	minus	remove subtract decrease delete	Lucide	import { Minus } from 'lucide-react'	<Minus />	Remove item quantity decrease	Outline
11	Action	trash-2	delete remove discard bin	Lucide	import { Trash2 } from 'lucide-react'	<Trash2 />	Delete action destructive	Outline
12	Action	edit	pencil modify change update	Lucide	import { Edit } from 'lucide-react'	<Edit />	Edit button modify content	Outline
13	Action	save	disk store persist save	Lucide	import { Save } from 'lucide-react'	<Save />	Save button persist changes	Outline
14	Action	download	export save file download	Lucide	import { Download } from 'lucide-react'	<Download />	Download file export	Outline
15	Action	upload	import file attach upload	Lucide	import { Upload } from 'lucide-react'	<Upload />	Upload file import	Outline
16	Action	copy	duplicate clipboard paste	Lucide	import { Copy } from 'lucide-react'	<Copy />	Copy to clipboard	Outline
17	Action	share	social distribute send	Lucide	import { Share } from 'lucide-react'	<Share />	Share button social	Outline
18	Action	search	find lookup filter query	Lucide	import { Search } from 'lucide-react'	<Search />	Search input bar	Outline
19	Action	filter	sort refine narrow options	Lucide	import { Filter } from 'lucide-react'	<Filter />	Filter dropdown sort	Outline
20	Action	settings	gear cog preferences config	Lucide	import { Settings } from 'lucide-react'	<Settings />	Settings page configuration	Outline
21	Status	check	success done complete verified	Lucide	import { Check } from 'lucide-react'	<Check />	Success state checkmark	Outline
22	Status	check-circle	success verified approved complete	Lucide	import { CheckCircle } from 'lucide-react'	<CheckCircle />	Success badge verified	Outline
23	Status	x-circle	error failed cancel rejected	Lucide	import { XCircle } from 'lucide-react'	<XCircle />	Error state failed	Outline
24	Status	alert-triangle	warning caution attention danger	Lucide	import { AlertTriangle } from 'lucide-react'	<AlertTriangle />	Warning message caution	Outline
25	Status	alert-circle	info notice information help	Lucide	import { AlertCircle } from 'lucide-react'	<AlertCircle />	Info notice alert	Outline
26	Status	info	information help tooltip details	Lucide	import { Info } from 'lucide-react'	<Info />	Information tooltip help	Outline
27	Status	loader	loading spinner processing wait	Lucide	import { Loader } from 'lucide-react'	<Loader className=animate-spin />	Loading state spinner	Outline

Preview truncated.

View on GitHub

landing.csv14.1 KB

No	Pattern Name	Keywords	Section Order	Primary CTA Placement	Color Strategy	Recommended Effects	Conversion Optimization
1	Hero + Features + CTA	hero, hero-centric, features, feature-rich, cta, call-to-action	1. Hero with headline/image, 2. Value prop, 3. Key features (3-5), 4. CTA section, 5. Footer	Hero (sticky) + Bottom	Hero: Brand primary or vibrant. Features: Card bg #FAFAFA. CTA: Contrasting accent color	Hero parallax, feature card hover lift, CTA glow on hover	Deep CTA placement. Use contrasting color (at least 7:1 contrast ratio). Sticky navbar CTA.
2	Hero + Testimonials + CTA	hero, testimonials, social-proof, trust, reviews, cta	1. Hero, 2. Problem statement, 3. Solution overview, 4. Testimonials carousel, 5. CTA	Hero (sticky) + Post-testimonials	Hero: Brand color. Testimonials: Light bg #F5F5F5. Quotes: Italic, muted color #666. CTA: Vibrant	Testimonial carousel slide animations, quote marks animations, avatar fade-in	Social proof before CTA. Use 3-5 testimonials. Include photo + name + role. CTA after social proof.
3	Product Demo + Features	demo, product-demo, features, showcase, interactive	1. Hero, 2. Product video/mockup (center), 3. Feature breakdown per section, 4. Comparison (optional), 5. CTA	Video center + CTA right/bottom	Video surround: Brand color overlay. Features: Icon color #0080FF. Text: Dark #222	Video play button pulse, feature scroll reveals, demo interaction highlights	Embedded product demo increases engagement. Use interactive mockup if possible. Auto-play video muted.
4	Minimal Single Column	minimal, simple, direct, single-column, clean	1. Hero headline, 2. Short description, 3. Benefit bullets (3 max), 4. CTA, 5. Footer	Center, large CTA button	Minimalist: Brand + white #FFFFFF + accent. Buttons: High contrast 7:1+. Text: Black/Dark grey	Minimal hover effects. Smooth scroll. CTA scale on hover (subtle)	Single CTA focus. Large typography. Lots of whitespace. No nav clutter. Mobile-first.
5	Funnel (3-Step Conversion)	funnel, conversion, steps, wizard, onboarding	1. Hero, 2. Step 1 (problem), 3. Step 2 (solution), 4. Step 3 (action), 5. CTA progression	Each step: mini-CTA. Final: main CTA	Step colors: 1 (Red/Problem), 2 (Orange/Process), 3 (Green/Solution). CTA: Brand color	Step number animations, progress bar fill, step transitions smooth scroll	Progressive disclosure. Show only essential info per step. Use progress indicators. Multiple CTAs.
6	Comparison Table + CTA	comparison, table, compare, versus, cta	1. Hero, 2. Problem intro, 3. Comparison table (product vs competitors), 4. Pricing (optional), 5. CTA	Table: Right column. CTA: Below table	Table: Alternating rows (white/light grey). Your product: Highlight #FFFACD (light yellow) or green. Text: Dark	Table row hover highlight, price toggle animations, feature checkmark animations	Use comparison to show unique value. Highlight your product row. Include 'free trial' in pricing row.
7	Lead Magnet + Form	lead, form, signup, capture, email, magnet	1. Hero (benefit headline), 2. Lead magnet preview (ebook cover, checklist, etc), 3. Form (minimal fields), 4. CTA submit	Form CTA: Submit button	Lead magnet: Professional design. Form: Clean white bg. Inputs: Light border #CCCCCC. CTA: Brand color	Form focus state animations, input validation animations, success confirmation animation	Form fields ≤ 3 for best conversion. Offer valuable lead magnet preview. Show form submission progress.
8	Pricing Page + CTA	pricing, plans, tiers, comparison, cta	1. Hero (pricing headline), 2. Price comparison cards, 3. Feature comparison table, 4. FAQ section, 5. Final CTA	Each card: CTA button. Sticky CTA in nav	Free: Grey, Starter: Blue, Pro: Green/Gold, Enterprise: Dark. Cards: 1px border, shadow	Price toggle animation (monthly/yearly), card comparison highlight, FAQ accordion open/close	Recommend starter plan (pre-select/highlight). Show annual discount (20-30%). Use FAQs to address concerns.
9	Video-First Hero	video, hero, media, visual, engaging	1. Hero with video background, 2. Key features overlay, 3. Benefits section, 4. CTA	Overlay on video (center/bottom) + Bottom section	Dark overlay 60% on video. Brand accent for CTA. White text on dark.	Video autoplay muted, parallax scroll, text fade-in on scroll	86% higher engagement with video. Add captions for accessibility. Compress video for performance.
10	Scroll-Triggered Storytelling	storytelling, scroll, narrative, story, immersive	1. Intro hook, 2. Chapter 1 (problem), 3. Chapter 2 (journey), 4. Chapter 3 (solution), 5. Climax CTA	End of each chapter (mini) + Final climax CTA	Progressive reveal. Each chapter has distinct color. Building intensity.	ScrollTrigger animations, parallax layers, progressive disclosure, chapter transitions	Narrative increases time-on-page 3x. Use progress indicator. Mobile: simplify animations.
11	AI Personalization Landing	ai, personalization, smart, recommendation, dynamic	1. Dynamic hero (personalized), 2. Relevant features, 3. Tailored testimonials, 4. Smart CTA	Context-aware placement based on user segment	Adaptive based on user data. A/B test color variations per segment.	Dynamic content swap, fade transitions, personalized product recommendations	20%+ conversion with personalization. Requires analytics integration. Fallback for new users.
12	Waitlist/Coming Soon	waitlist, coming-soon, launch, early-access, notify	1. Hero with countdown, 2. Product teaser/preview, 3. Email capture form, 4. Social proof (waitlist count)	Email form prominent (above fold) + Sticky form on scroll	Anticipation: Dark + accent highlights. Countdown in brand color. Urgency indicators.	Countdown timer animation, email validation feedback, success confetti, social share buttons	Scarcity + exclusivity. Show waitlist count. Early access benefits. Referral program.
13	Comparison Table Focus	comparison, table, versus, compare, features	1. Hero (problem statement), 2. Comparison matrix (you vs competitors), 3. Feature deep-dive, 4. Winner CTA	After comparison table (highlighted row) + Bottom	Your product column highlighted (accent bg or green). Competitors neutral. Checkmarks green.	Table row hover highlight, feature checkmark animations, sticky comparison header	Show value vs competitors. 35% higher conversion. Be factual. Include pricing if favorable.
14	Pricing-Focused Landing	pricing, price, cost, plans, subscription	1. Hero (value proposition), 2. Pricing cards (3 tiers), 3. Feature comparison, 4. FAQ, 5. Final CTA	Each pricing card + Sticky CTA in nav + Bottom	Popular plan highlighted (brand color border/bg). Free: grey. Enterprise: dark/premium.	Price toggle monthly/annual animation, card hover lift, FAQ accordion smooth open	Annual discount 20-30%. Recommend mid-tier (most popular badge). Address objections in FAQ.
15	App Store Style Landing	app, mobile, download, store, install	1. Hero with device mockup, 2. Screenshots carousel, 3. Features with icons, 4. Reviews/ratings, 5. Download CTAs	Download buttons prominent (App Store + Play Store) throughout	Dark/light matching app store feel. Star ratings in gold. Screenshots with device frames.	Device mockup rotations, screenshot slider, star rating animations, download button pulse	Show real screenshots. Include ratings (4.5+ stars). QR code for mobile. Platform-specific CTAs.
16	FAQ/Documentation Landing	faq, documentation, help, support, questions	1. Hero with search bar, 2. Popular categories, 3. FAQ accordion, 4. Contact/support CTA	Search bar prominent + Contact CTA for unresolved questions	Clean, high readability. Minimal color. Category icons in brand color. Success green for resolved.	Search autocomplete, smooth accordion open/close, category hover, helpful feedback buttons	Reduce support tickets. Track search analytics. Show related articles. Contact escalation path.
17	Immersive/Interactive Experience	immersive, interactive, experience, 3d, animation	1. Full-screen interactive element, 2. Guided product tour, 3. Key benefits revealed, 4. CTA after completion	After interaction complete + Skip option for impatient users	Immersive experience colors. Dark background for focus. Highlight interactive elements.	WebGL, 3D interactions, gamification elements, progress indicators, reward animations	40% higher engagement. Performance trade-off. Provide skip option. Mobile fallback essential.
18	Event/Conference Landing	event, conference, meetup, registration, schedule	1. Hero (date/location/countdown), 2. Speakers grid, 3. Agenda/schedule, 4. Sponsors, 5. Register CTA	Register CTA sticky + After speakers + Bottom	Urgency colors (countdown). Event branding. Speaker cards professional. Sponsor logos neutral.	Countdown timer, speaker hover cards with bio, agenda tabs, early bird countdown	Early bird pricing with deadline. Social proof (past attendees). Speaker credibility. Multi-ticket discounts.
19	Product Review/Ratings Focused	reviews, ratings, testimonials, social-proof, stars	1. Hero (product + aggregate rating), 2. Rating breakdown, 3. Individual reviews, 4. Buy/CTA	After reviews summary + Buy button alongside reviews	Trust colors. Star ratings gold. Verified badge green. Review sentiment colors.	Star fill animations, review filtering, helpful vote interactions, photo lightbox	User-generated content builds trust. Show verified purchases. Filter by rating. Respond to negative reviews.
20	Community/Forum Landing	community, forum, social, members, discussion	1. Hero (community value prop), 2. Popular topics/categories, 3. Active members showcase, 4. Join CTA	Join button prominent + After member showcase	Warm, welcoming. Member photos add humanity. Topic badges in brand colors. Activity indicators green.	Member avatars animation, activity feed live updates, topic hover previews, join success celebration	Show active community (member count, posts today). Highlight benefits. Preview content. Easy onboarding.
21	Before-After Transformation	before-after, transformation, results, comparison	1. Hero (problem state), 2. Transformation slider/comparison, 3. How it works, 4. Results CTA	After transformation reveal + Bottom	Contrast: muted/grey (before) vs vibrant/colorful (after). Success green for results.	Slider comparison interaction, before/after reveal animations, result counters, testimonial videos	Visual proof of value. 45% higher conversion. Real results. Specific metrics. Guarantee offer.
22	Marketplace / Directory	marketplace, directory, search, listing	1. Hero (Search focused), 2. Categories, 3. Featured Listings, 4. Trust/Safety, 5. CTA (Become a host/seller)	Hero Search Bar + Navbar 'List your item'	Search: High contrast. Categories: Visual icons. Trust: Blue/Green.	Search autocomplete animation	map hover pins, card carousel, Search bar is the CTA. Reduce friction to search. Popular searches suggestions.
23	Newsletter / Content First	newsletter, content, writer, blog, subscribe	1. Hero (Value Prop + Form), 2. Recent Issues/Archives, 3. Social Proof (Subscriber count), 4. About Author	Hero inline form + Sticky header form	Minimalist. Paper-like background. Text focus. Accent color for Subscribe.	Text highlight animations	typewriter effect, subtle fade-in, Single field form (Email only). Show 'Join X, 000 readers'. Read sample link.
24	Webinar Registration	webinar, registration, event, training, live	1. Hero (Topic + Timer + Form), 2. What you'll learn, 3. Speaker Bio, 4. Urgency/Bonuses, 5. Form (again)	Hero (Right side form) + Bottom anchor	Urgency: Red/Orange. Professional: Blue/Navy. Form: High contrast white.	Countdown timer	speaker avatar float, urgent ticker, Limited seats logic. 'Live' indicator. Auto-fill timezone.
25	Enterprise Gateway	enterprise, corporate, gateway, solutions, portal	1. Hero (Video/Mission), 2. Solutions by Industry, 3. Solutions by Role, 4. Client Logos, 5. Contact Sales	Contact Sales (Primary) + Login (Secondary)	Corporate: Navy/Grey. High integrity. Conservative accents.	Slow video background	logo carousel, tab switching for industries, Path selection (I am a...). Mega menu navigation. Trust signals prominent.
26	Portfolio Grid	portfolio, grid, showcase, gallery, masonry	1. Hero (Name/Role), 2. Project Grid (Masonry), 3. About/Philosophy, 4. Contact	Project Card Hover + Footer Contact	Neutral background (let work shine). Text: Black/White. Accent: Minimal.	Image lazy load reveal	hover overlay info, lightbox view, Visuals first. Filter by category. Fast loading essential.
27	Horizontal Scroll Journey	horizontal, scroll, journey, gallery, storytelling, panoramic	1. Intro (Vertical), 2. The Journey (Horizontal Track), 3. Detail Reveal, 4. Vertical Footer	Floating Sticky CTA or End of Horizontal Track	Continuous palette transition. Chapter colors. Progress bar #000000.	Scroll-jacking (careful), parallax layers, horizontal slide, progress indicator	Immersive product discovery. High engagement. Keep navigation visible. 28,Bento Grid Showcase,bento, grid, features, modular, apple-style, showcase", 1. Hero, 2. Bento Grid (Key Features), 3. Detail Cards, 4. Tech Specs, 5. CTA, Floating Action Button or Bottom of Grid, Card backgrounds: #F5F5F7 or Glass. Icons: Vibrant brand colors. Text: Dark., Hover card scale (1.02), video inside cards, tilt effect, staggered reveal, Scannable value props. High information density without clutter. Mobile stack. 29,Interactive 3D Configurator,3d, configurator, customizer, interactive, product", 1. Hero (Configurator), 2. Feature Highlight (synced), 3. Price/Specs, 4. Purchase, Inside Configurator UI + Sticky Bottom Bar, Neutral studio background. Product: Realistic materials. UI: Minimal overlay., Real-time rendering, material swap animation, camera rotate/zoom, light reflection, Increases ownership feeling. 360 view reduces return rates. Direct add-to-cart. 30,AI-Driven Dynamic Landing,ai, dynamic, personalized, adaptive, generative", 1. Prompt/Input Hero, 2. Generated Result Preview, 3. How it Works, 4. Value Prop, Input Field (Hero) + 'Try it' Buttons, Adaptive to user input. Dark mode for compute feel. Neon accents., Typing text effects, shimmering generation loaders, morphing layouts, Immediate value demonstration. 'Show, don't tell'. Low friction start.

Preview truncated.

View on GitHub

products.csv29.1 KB

No	Product Type	Keywords	Primary Style Recommendation	Secondary Styles	Landing Page Pattern	Dashboard Style (if applicable)	Color Palette Focus	Key Considerations
1	SaaS (General)	app, b2b, cloud, general, saas, software, subscription	Glassmorphism + Flat Design	Soft UI Evolution, Minimalism	Hero + Features + CTA	Data-Dense + Real-Time Monitoring	Trust blue + accent contrast	Balance modern feel with clarity. Focus on CTAs.
2	Micro SaaS	app, b2b, cloud, indie, micro, micro-saas, niche, saas, small, software, solo, subscription	Flat Design + Vibrant & Block	Motion-Driven, Micro-interactions	Minimal & Direct + Demo	Executive Dashboard	Vibrant primary + white space	Keep simple, show product quickly. Speed is key.
3	E-commerce	buy, commerce, e, ecommerce, products, retail, sell, shop, store	Vibrant & Block-based	Aurora UI, Motion-Driven	Feature-Rich Showcase	Sales Intelligence Dashboard	Brand primary + success green	Engagement & conversions. High visual hierarchy.
4	E-commerce Luxury	buy, commerce, e, ecommerce, elegant, exclusive, high-end, luxury, premium, products, retail, sell, shop, store	Liquid Glass + Glassmorphism	3D & Hyperrealism, Aurora UI	Feature-Rich Showcase	Sales Intelligence Dashboard	Premium colors + minimal accent	Elegance & sophistication. Premium materials.
5	Service Landing Page	appointment, booking, consultation, conversion, landing, marketing, page, service	Hero-Centric + Trust & Authority	Social Proof-Focused, Storytelling	Hero-Centric Design	N/A - Analytics for conversions	Brand primary + trust colors	Social proof essential. Show expertise.
6	B2B Service	appointment, b, b2b, booking, business, consultation, corporate, enterprise, service	Trust & Authority + Minimal	Feature-Rich, Conversion-Optimized	Feature-Rich Showcase	Sales Intelligence Dashboard	Professional blue + neutral grey	Credibility essential. Clear ROI messaging.
7	Financial Dashboard	admin, analytics, dashboard, data, financial, panel	Dark Mode (OLED) + Data-Dense	Minimalism, Accessible & Ethical	N/A - Dashboard focused	Financial Dashboard	Dark bg + red/green alerts + trust blue	High contrast, real-time updates, accuracy paramount.
8	Analytics Dashboard	admin, analytics, dashboard, data, panel	Data-Dense + Heat Map & Heatmap	Minimalism, Dark Mode (OLED)	N/A - Analytics focused	Drill-Down Analytics + Comparative	Cool→Hot gradients + neutral grey	Clarity > aesthetics. Color-coded data priority.
9	Healthcare App	app, clinic, health, healthcare, medical, patient	Neumorphism + Accessible & Ethical	Soft UI Evolution, Claymorphism (for patients)	Social Proof-Focused	User Behavior Analytics	Calm blue + health green + trust	Accessibility mandatory. Calming aesthetic.
10	Educational App	app, course, education, educational, learning, school, training	Claymorphism + Micro-interactions	Vibrant & Block-based, Flat Design	Storytelling-Driven	User Behavior Analytics	Playful colors + clear hierarchy	Engagement & ease of use. Age-appropriate design.
11	Creative Agency	agency, creative, design, marketing, studio	Brutalism + Motion-Driven	Retro-Futurism, Storytelling-Driven	Storytelling-Driven	N/A - Portfolio focused	Bold primaries + artistic freedom	Differentiation key. Wow-factor necessary.
12	Portfolio/Personal	creative, personal, portfolio, projects, showcase, work	Motion-Driven + Minimalism	Brutalism, Aurora UI	Storytelling-Driven	N/A - Personal branding	Brand primary + artistic interpretation	Showcase work. Personality shine through.
13	Gaming	entertainment, esports, game, gaming, play	3D & Hyperrealism + Retro-Futurism	Motion-Driven, Vibrant & Block	Feature-Rich Showcase	N/A - Game focused	Vibrant + neon + immersive colors	Immersion priority. Performance critical.
14	Government/Public Service	appointment, booking, consultation, government, public, service	Accessible & Ethical + Minimalism	Flat Design, Inclusive Design	Minimal & Direct	Executive Dashboard	Professional blue + high contrast	WCAG AAA mandatory. Trust paramount.
15	Fintech/Crypto	banking, blockchain, crypto, defi, finance, fintech, money, nft, payment, web3	Glassmorphism + Dark Mode (OLED)	Retro-Futurism, Motion-Driven	Conversion-Optimized	Real-Time Monitoring + Predictive	Dark tech colors + trust + vibrant accents	Security perception. Real-time data critical.
16	Social Media App	app, community, content, entertainment, media, network, sharing, social, streaming, users, video	Vibrant & Block-based + Motion-Driven	Aurora UI, Micro-interactions	Feature-Rich Showcase	User Behavior Analytics	Vibrant + engagement colors	Engagement & retention. Addictive design ethics.
17	Productivity Tool	collaboration, productivity, project, task, tool, workflow	Flat Design + Micro-interactions	Minimalism, Soft UI Evolution	Interactive Product Demo	Drill-Down Analytics	Clear hierarchy + functional colors	Ease of use. Speed & efficiency focus.
18	Design System/Component Library	component, design, library, system	Minimalism + Accessible & Ethical	Flat Design, Zero Interface	Feature-Rich Showcase	N/A - Dev focused	Clear hierarchy + code-like structure	Consistency. Developer-first approach.
19	AI/Chatbot Platform	ai, artificial-intelligence, automation, chatbot, machine-learning, ml, platform	AI-Native UI + Minimalism	Zero Interface, Glassmorphism	Interactive Product Demo	AI/ML Analytics Dashboard	Neutral + AI Purple (#6366F1)	Conversational UI. Streaming text. Context awareness. Minimal chrome.
20	NFT/Web3 Platform	nft, platform, web	Cyberpunk UI + Glassmorphism	Aurora UI, 3D & Hyperrealism	Feature-Rich Showcase	Crypto/Blockchain Dashboard	Dark + Neon + Gold (#FFD700)	Wallet integration. Transaction feedback. Gas fees display. Dark mode essential.
21	Creator Economy Platform	creator, economy, platform	Vibrant & Block-based + Bento Box Grid	Motion-Driven, Aurora UI	Social Proof-Focused	User Behavior Analytics	Vibrant + Brand colors	Creator profiles. Monetization display. Engagement metrics. Social proof.
22	Sustainability/ESG Platform	ai, artificial-intelligence, automation, esg, machine-learning, ml, platform, sustainability	Organic Biophilic + Minimalism	Accessible & Ethical, Flat Design	Trust & Authority	Energy/Utilities Dashboard	Green (#228B22) + Earth tones	Carbon footprint visuals. Progress indicators. Certification badges. Eco-friendly imagery.
23	Remote Work/Collaboration Tool	collaboration, remote, tool, work	Soft UI Evolution + Minimalism	Glassmorphism, Micro-interactions	Feature-Rich Showcase	Drill-Down Analytics	Calm Blue + Neutral grey	Real-time collaboration. Status indicators. Video integration. Notification management.
24	Mental Health App	app, health, mental	Neumorphism + Accessible & Ethical	Claymorphism, Soft UI Evolution	Social Proof-Focused	Healthcare Analytics	Calm Pastels + Trust colors	Calming aesthetics. Privacy-first. Crisis resources. Progress tracking. Accessibility mandatory.
25	Pet Tech App	app, pet, tech	Claymorphism + Vibrant & Block-based	Micro-interactions, Flat Design	Storytelling-Driven	User Behavior Analytics	Playful + Warm colors	Pet profiles. Health tracking. Playful UI. Photo galleries. Vet integration.
26	Smart Home/IoT Dashboard	admin, analytics, dashboard, data, home, iot, panel, smart	Glassmorphism + Dark Mode (OLED)	Minimalism, AI-Native UI	Interactive Product Demo	Real-Time Monitoring	Dark + Status indicator colors	Device status. Real-time controls. Energy monitoring. Automation rules. Quick actions.
27	EV/Charging Ecosystem	charging, ecosystem, ev	Minimalism + Aurora UI	Glassmorphism, Organic Biophilic	Hero-Centric Design	Energy/Utilities Dashboard	Electric Blue (#009CD1) + Green	Charging station maps. Range estimation. Cost calculation. Environmental impact.

Preview truncated.

View on GitHub

react-performance.csv14.5 KB

No	Category	Issue	Keywords	Platform	Description	Do	Don't	Code Example Good	Code Example Bad	Severity
1	Async Waterfall	Defer Await	async await defer branch	React/Next.js	Move await into branches where actually used to avoid blocking unused code paths	Move await operations into branches where they're needed	Await at top of function blocking all branches	if (skip) return { skipped: true }; const data = await fetch()	const data = await fetch(); if (skip) return { skipped: true }	Critical
2	Async Waterfall	Promise.all Parallel	promise all parallel concurrent	React/Next.js	Execute independent async operations concurrently using Promise.all()	Use Promise.all() for independent operations	Sequential await for independent operations	const [user, posts] = await Promise.all([fetchUser(), fetchPosts()])	const user = await fetchUser(); const posts = await fetchPosts()	Critical
3	Async Waterfall	Dependency Parallelization	better-all dependency parallel	React/Next.js	Use better-all for operations with partial dependencies to maximize parallelism	Use better-all to start each task at earliest possible moment	Wait for unrelated data before starting dependent fetch	await all({ user() {}, config() {}, profile() { return fetch((await this.$.user).id) } })	const [user, config] = await Promise.all([...]); const profile = await fetchProfile(user.id)	Critical
4	Async Waterfall	API Route Optimization	api route waterfall promise	React/Next.js	In API routes start independent operations immediately even if not awaited yet	Start promises early and await late	Sequential awaits in API handlers	const sessionP = auth(); const configP = fetchConfig(); const session = await sessionP	const session = await auth(); const config = await fetchConfig()	Critical
5	Async Waterfall	Suspense Boundaries	suspense streaming boundary	React/Next.js	Use Suspense to show wrapper UI faster while data loads	Wrap async components in Suspense boundaries	Await data blocking entire page render	<Suspense fallback={<Skeleton />}><DataDisplay /></Suspense>	const data = await fetchData(); return <DataDisplay data={data} />	High
6	Bundle Size	Barrel Imports	barrel import direct path	React/Next.js	Import directly from source files instead of barrel files to avoid loading unused modules	Import directly from source path	Import from barrel/index files	import Check from 'lucide-react/dist/esm/icons/check'	import { Check } from 'lucide-react'	Critical
7	Bundle Size	Dynamic Imports	dynamic import lazy next	React/Next.js	Use next/dynamic to lazy-load large components not needed on initial render	Use dynamic() for heavy components	Import heavy components at top level	const Monaco = dynamic(() => import('./monaco'), { ssr: false })	import { MonacoEditor } from './monaco-editor'	Critical
8	Bundle Size	Defer Third Party	analytics defer third-party	React/Next.js	Load analytics and logging after hydration since they don't block interaction	Load non-critical scripts after hydration	Include analytics in main bundle	const Analytics = dynamic(() => import('@vercel/analytics'), { ssr: false })	import { Analytics } from '@vercel/analytics/react'	Medium
9	Bundle Size	Conditional Loading	conditional module lazy	React/Next.js	Load large data or modules only when a feature is activated	Dynamic import when feature enabled	Import large modules unconditionally	useEffect(() => { if (enabled) import('./heavy.js') }, [enabled])	import { heavyData } from './heavy.js'	High
10	Bundle Size	Preload Intent	preload hover focus intent	React/Next.js	Preload heavy bundles on hover/focus before they're needed	Preload on user intent signals	Load only on click	onMouseEnter={() => import('./editor')}	onClick={() => import('./editor')}	Medium
11	Server	React.cache Dedup	react cache deduplicate request	React/Next.js	Use React.cache() for server-side request deduplication within single request	Wrap data fetchers with cache()	Fetch same data multiple times in tree	export const getUser = cache(async () => await db.user.find())	export async function getUser() { return await db.user.find() }	Medium
12	Server	LRU Cache Cross-Request	lru cache cross request	React/Next.js	Use LRU cache for data shared across sequential requests	Use LRU for cross-request caching	Refetch same data on every request	const cache = new LRUCache({ max: 1000, ttl: 5601000 })	Always fetch from database	High
13	Server	Minimize Serialization	serialization rsc boundary	React/Next.js	Only pass fields that client actually uses across RSC boundaries	Pass only needed fields to client components	Pass entire objects to client	<Profile name={user.name} />	<Profile user={user} /> // 50 fields serialized	High
14	Server	Parallel Fetching	parallel fetch component composition	React/Next.js	Restructure components to parallelize data fetching in RSC	Use component composition for parallel fetches	Sequential fetches in parent component	<Header /><Sidebar /> // both fetch in parallel	const header = await fetchHeader(); return <><div>{header}</div><Sidebar /></>	Critical
15	Server	After Non-blocking	after non-blocking logging	React/Next.js	Use Next.js after() to schedule work after response is sent	Use after() for logging/analytics	Block response for non-critical operations	after(async () => { await logAction() }); return Response.json(data)	await logAction(); return Response.json(data)	Medium
16	Client	SWR Deduplication	swr dedup cache revalidate	React/Next.js	Use SWR for automatic request deduplication and caching	Use useSWR for client data fetching	Manual fetch in useEffect	const { data } = useSWR('/api/users', fetcher)	useEffect(() => { fetch('/api/users').then(setUsers) }, [])	Medium-High
17	Client	Event Listener Dedup	event listener deduplicate global	React/Next.js	Share global event listeners across component instances	Use useSWRSubscription for shared listeners	Register listener per component instance	useSWRSubscription('global-keydown', () => { window.addEventListener... })	useEffect(() => { window.addEventListener('keydown', handler) }, [])	Low
18	Rerender	Defer State Reads	state read callback subscription	React/Next.js	Don't subscribe to state only used in callbacks	Read state on-demand in callbacks	Subscribe to state used only in handlers	const handleClick = () => { const params = new URLSearchParams(location.search) }	const params = useSearchParams(); const handleClick = () => { params.get('ref') }	Medium
19	Rerender	Memoized Components	memo extract expensive	React/Next.js	Extract expensive work into memoized components for early returns	Extract to memo() components	Compute expensive values before early return	const UserAvatar = memo(({ user }) => ...); if (loading) return <Skeleton />	const avatar = useMemo(() => compute(user)); if (loading) return <Skeleton />	Medium
20	Rerender	Narrow Dependencies	effect dependency primitive	React/Next.js	Specify primitive dependencies instead of objects in effects	Use primitive values in dependency arrays	Use object references as dependencies	useEffect(() => { console.log(user.id) }, [user.id])	useEffect(() => { console.log(user.id) }, [user])	Low
21	Rerender	Derived State	derived boolean subscription	React/Next.js	Subscribe to derived booleans instead of continuous values	Use derived boolean state	Subscribe to continuous values	const isMobile = useMediaQuery('(max-width: 767px)')	const width = useWindowWidth(); const isMobile = width < 768	Medium
22	Rerender	Functional setState	functional setstate callback	React/Next.js	Use functional setState updates for stable callbacks and no stale closures	Use functional form: setState(curr => ...)	Reference state directly in setState	setItems(curr => [...curr, newItem])	setItems([...items, newItem]) // items in deps	Medium
23	Rerender	Lazy State Init	usestate lazy initialization	React/Next.js	Pass function to useState for expensive initial values	Use function form for expensive init	Compute expensive value directly	useState(() => buildSearchIndex(items))	useState(buildSearchIndex(items)) // runs every render	Medium
24	Rerender	Transitions	starttransition non-urgent	React/Next.js	Mark frequent non-urgent state updates as transitions	Use startTransition for non-urgent updates	Block UI on every state change	startTransition(() => setScrollY(window.scrollY))	setScrollY(window.scrollY) // blocks on every scroll	Medium
25	Rendering	SVG Animation Wrapper	svg animation wrapper div	React/Next.js	Wrap SVG in div and animate wrapper for hardware acceleration	Animate div wrapper around SVG	Animate SVG element directly	<div class='animate-spin'><svg>...</svg></div>	<svg class='animate-spin'>...</svg>	Low
26	Rendering	Content Visibility	content-visibility auto	React/Next.js	Apply content-visibility: auto to defer off-screen rendering	Use content-visibility for long lists	Render all list items immediately	.item { content-visibility: auto; contain-intrinsic-size: 0 80px }	Render 1000 items without optimization	High
27	Rendering	Hoist Static JSX	hoist static jsx element	React/Next.js	Extract static JSX outside components to avoid re-creation	Hoist static elements to module scope	Create static elements inside components	const skeleton = <div class='animate-pulse' />; function C() { return skeleton }	function C() { return <div class='animate-pulse' /> }	Low

Preview truncated.

View on GitHub

styles.csv94.3 KB

No	Style Category	Type	Keywords	Primary Colors	Secondary Colors	Effects & Animation	Best For	Do Not Use For	Light Mode ✓	Dark Mode ✓	Performance
1	Minimalism & Swiss Style	General	Clean, simple, spacious, functional, white space, high contrast, geometric, sans-serif, grid-based, essential	Monochromatic, Black #000000, White #FFFFFF	Neutral (Beige #F5F1E8, Grey #808080, Taupe #B38B6D), Primary accent	Subtle hover (200-250ms), smooth transitions, sharp shadows if any, clear type hierarchy, fast loading	Enterprise apps, dashboards, documentation sites, SaaS platforms, professional tools	Creative portfolios, entertainment, playful brands, artistic experiments	✓ Full	✓ Full	⚡ Excellent
2	Neumorphism	General	Soft UI, embossed, debossed, convex, concave, light source, subtle depth, rounded (12-16px), monochromatic	Light pastels: Soft Blue #C8E0F4, Soft Pink #F5E0E8, Soft Grey #E8E8E8	Tints/shades (±30%), gradient subtlety, color harmony	Soft box-shadow (multiple: -5px -5px 15px, 5px 5px 15px), smooth press (150ms), inner subtle shadow	Health/wellness apps, meditation platforms, fitness trackers, minimal interaction UIs	Complex apps, critical accessibility, data-heavy dashboards, high-contrast required	✓ Full	◐ Partial	⚡ Good
3	Glassmorphism	General	Frosted glass, transparent, blurred background, layered, vibrant background, light source, depth, multi-layer	Translucent white: rgba(255,255,255,0.1-0.3)	Vibrant: Electric Blue #0080FF, Neon Purple #8B00FF, Vivid Pink #FF1493, Teal #20B2AA	Backdrop blur (10-20px), subtle border (1px solid rgba white 0.2), light reflection, Z-depth	Modern SaaS, financial dashboards, high-end corporate, lifestyle apps, modal overlays, navigation	Low-contrast backgrounds, critical accessibility, performance-limited, dark text on dark	✓ Full	✓ Full	⚠ Good
4	Brutalism	General	Raw, unpolished, stark, high contrast, plain text, default fonts, visible borders, asymmetric, anti-design	Primary: Red #FF0000, Blue #0000FF, Yellow #FFFF00, Black #000000, White #FFFFFF	Limited: Neon Green #00FF00, Hot Pink #FF00FF, minimal secondary	No smooth transitions (instant), sharp corners (0px), bold typography (700+), visible grid, large blocks	Design portfolios, artistic projects, counter-culture brands, editorial/media sites, tech blogs	Corporate environments, conservative industries, critical accessibility, customer-facing professional	✓ Full	✓ Full	⚡ Excellent
5	3D & Hyperrealism	General	Depth, realistic textures, 3D models, spatial navigation, tactile, skeuomorphic elements, rich detail, immersive	Deep Navy #001F3F, Forest Green #228B22, Burgundy #800020, Gold #FFD700, Silver #C0C0C0	Complex gradients (5-10 stops), realistic lighting, shadow variations (20-40% darker)	WebGL/Three.js 3D, realistic shadows (layers), physics lighting, parallax (3-5 layers), smooth 3D (300-400ms)	Gaming, product showcase, immersive experiences, high-end e-commerce, architectural viz, VR/AR	Low-end mobile, performance-limited, critical accessibility, data tables/forms	◐ Partial	◐ Partial	❌ Poor
6	Vibrant & Block-based	General	Bold, energetic, playful, block layout, geometric shapes, high color contrast, duotone, modern, energetic	Neon Green #39FF14, Electric Purple #BF00FF, Vivid Pink #FF1493, Bright Cyan #00FFFF, Sunburst #FFAA00	Complementary: Orange #FF7F00, Shocking Pink #FF006E, Lime #CCFF00, triadic schemes	Large sections (48px+ gaps), animated patterns, bold hover (color shift), scroll-snap, large type (32px+), 200-300ms	Startups, creative agencies, gaming, social media, youth-focused, entertainment, consumer	Financial institutions, healthcare, formal business, government, conservative, elderly	✓ Full	✓ Full	⚡ Good
7	Dark Mode (OLED)	General	Dark theme, low light, high contrast, deep black, midnight blue, eye-friendly, OLED, night mode, power efficient	Deep Black #000000, Dark Grey #121212, Midnight Blue #0A0E27	Vibrant accents: Neon Green #39FF14, Electric Blue #0080FF, Gold #FFD700, Plasma Purple #BF00FF	Minimal glow (text-shadow: 0 0 10px), dark-to-light transitions, low white emission, high readability, visible focus	Night-mode apps, coding platforms, entertainment, eye-strain prevention, OLED devices, low-light	Print-first content, high-brightness outdoor, color-accuracy-critical	✗ No	✓ Only	⚡ Excellent
8	Accessible & Ethical	General	High contrast, large text (16px+), keyboard navigation, screen reader friendly, WCAG compliant, focus state, semantic	WCAG AA/AAA (4.5:1 min), simple primary, clear secondary, high luminosity (7:1+)	Symbol-based colors (not color-only), supporting patterns, inclusive combinations	Clear focus rings (3-4px), ARIA labels, skip links, responsive design, reduced motion, 44x44px touch targets	Government, healthcare, education, inclusive products, large audience, legal compliance, public	None - accessibility universal	✓ Full	✓ Full	⚡ Excellent
9	Claymorphism	General	Soft 3D, chunky, playful, toy-like, bubbly, thick borders (3-4px), double shadows, rounded (16-24px)	Pastel: Soft Peach #FDBCB4, Baby Blue #ADD8E6, Mint #98FF98, Lilac #E6E6FA, light BG	Soft gradients (pastel-to-pastel), light/dark variations (20-30%), gradient subtle	Inner+outer shadows (subtle, no hard lines), soft press (200ms ease-out), fluffy elements, smooth transitions	Educational apps, children's apps, SaaS platforms, creative tools, fun-focused, onboarding, casual games	Formal corporate, professional services, data-critical, serious/medical, legal apps, finance	✓ Full	◐ Partial	⚡ Good
10	Aurora UI	General	Vibrant gradients, smooth blend, Northern Lights effect, mesh gradient, luminous, atmospheric, abstract	Complementary: Blue-Orange, Purple-Yellow, Electric Blue #0080FF, Magenta #FF1493, Cyan #00FFFF	Smooth transitions (Blue→Purple→Pink→Teal), iridescent effects, blend modes (screen, multiply)	Large flowing CSS/SVG gradients, subtle 8-12s animations, depth via color layering, smooth morph	Modern SaaS, creative agencies, branding, music platforms, lifestyle, premium products, hero sections	Data-heavy dashboards, critical accessibility, content-heavy where distraction issues	✓ Full	✓ Full	⚠ Good
11	Retro-Futurism	General	Vintage sci-fi, 80s aesthetic, neon glow, geometric patterns, CRT scanlines, pixel art, cyberpunk, synthwave	Neon Blue #0080FF, Hot Pink #FF006E, Cyan #00FFFF, Deep Black #1A1A2E, Purple #5D34D0	Metallic Silver #C0C0C0, Gold #FFD700, duotone, 80s Pink #FF10F0, neon accents	CRT scanlines (::before overlay), neon glow (text-shadow+box-shadow), glitch effects (skew/offset keyframes)	Gaming, entertainment, music platforms, tech brands, artistic projects, nostalgic, cyberpunk	Conservative industries, critical accessibility, professional/corporate, elderly, legal/finance	✓ Full	✓ Dark focused	⚠ Moderate
12	Flat Design	General	2D, minimalist, bold colors, no shadows, clean lines, simple shapes, typography-focused, modern, icon-heavy	Solid bright: Red, Orange, Blue, Green, limited palette (4-6 max)	Complementary colors, muted secondaries, high saturation, clean accents	No gradients/shadows, simple hover (color/opacity shift), fast loading, clean transitions (150-200ms ease), minimal icons	Web apps, mobile apps, cross-platform, startup MVPs, user-friendly, SaaS, dashboards, corporate	Complex 3D, premium/luxury, artistic portfolios, immersive experiences, high-detail	✓ Full	✓ Full	⚡ Excellent
13	Skeuomorphism	General	Realistic, texture, depth, 3D appearance, real-world metaphors, shadows, gradients, tactile, detailed, material	Rich realistic: wood, leather, metal colors, detailed gradients (8-12 stops), metallic effects	Realistic lighting gradients, shadow variations (30-50% darker), texture overlays, material colors	Realistic shadows (layers), depth (perspective), texture details (noise, grain), realistic animations (300-500ms)	Legacy apps, gaming, immersive storytelling, premium products, luxury, realistic simulations, education	Modern enterprise, critical accessibility, low-performance, web (use Flat/Modern)	◐ Partial	◐ Partial	❌ Poor
14	Liquid Glass	General	Flowing glass, morphing, smooth transitions, fluid effects, translucent, animated blur, iridescent, chromatic aberration	Vibrant iridescent (rainbow spectrum), translucent base with opacity shifts, gradient fluidity	Chromatic aberration (Red-Cyan), iridescent oil-spill, fluid gradient blends, holographic effects	Morphing elements (SVG/CSS), fluid animations (400-600ms curves), dynamic blur (backdrop-filter), color transitions	Premium SaaS, high-end e-commerce, creative platforms, branding experiences, luxury portfolios	Performance-limited, critical accessibility, complex data, budget projects	✓ Full	✓ Full	⚠ Moderate-Poor
15	Motion-Driven	General	Animation-heavy, microinteractions, smooth transitions, scroll effects, parallax, entrance anim, page transitions	Bold colors emphasize movement, high contrast animated, dynamic gradients, accent action colors	Transitional states, success (Green #22C55E), error (Red #EF4444), neutral feedback	Scroll anim (Intersection Observer), hover (300-400ms), entrance, parallax (3-5 layers), page transitions	Portfolio sites, storytelling platforms, interactive experiences, entertainment apps, creative, SaaS	Data dashboards, critical accessibility, low-power devices, content-heavy, motion-sensitive	✓ Full	✓ Full	⚠ Good
16	Micro-interactions	General	Small animations, gesture-based, tactile feedback, subtle animations, contextual interactions, responsive	Subtle color shifts (10-20%), feedback: Green #22C55E, Red #EF4444, Amber #F59E0B	Accent feedback, neutral supporting, clear action indicators	Small hover (50-100ms), loading spinners, success/error state anim, gesture-triggered (swipe/pinch), haptic	Mobile apps, touchscreen UIs, productivity tools, user-friendly, consumer apps, interactive components	Desktop-only, critical performance, accessibility-first (alternatives needed)	✓ Full	✓ Full	⚡ Excellent
17	Inclusive Design	General	Accessible, color-blind friendly, high contrast, haptic feedback, voice interaction, screen reader, WCAG AAA, universal	WCAG AAA (7:1+ contrast), avoid red-green only, symbol-based indicators, high contrast primary	Supporting patterns (stripes, dots, hatch), symbols, combinations, clear non-color indicators	Haptic feedback (vibration), voice guidance, focus indicators (4px+ ring), motion options, alt content, semantic	Public services, education, healthcare, finance, government, accessible consumer, inclusive	None - accessibility universal	✓ Full	✓ Full	⚡ Excellent
18	Zero Interface	General	Minimal visible UI, voice-first, gesture-based, AI-driven, invisible controls, predictive, context-aware, ambient	Neutral backgrounds: Soft white #FAFAFA, light grey #F0F0F0, warm off-white #F5F1E8	Subtle feedback: light green, light red, minimal UI elements, soft accents	Voice recognition UI, gesture detection, AI predictions (smooth reveal), progressive disclosure, smart suggestions	Voice assistants, AI platforms, future-forward UX, smart home, contextual computing, ambient experiences	Complex workflows, data-entry heavy, traditional systems, legacy support, explicit control	✓ Full	✓ Full	⚡ Excellent
19	Soft UI Evolution	General	Evolved soft UI, better contrast, modern aesthetics, subtle depth, accessibility-focused, improved shadows, hybrid	Improved contrast pastels: Soft Blue #87CEEB, Soft Pink #FFB6C1, Soft Green #90EE90, better hierarchy	Better combinations, accessible secondary, supporting with improved contrast, modern accents	Improved shadows (softer than flat, clearer than neumorphism), modern (200-300ms), focus visible, WCAG AA/AAA	Modern enterprise apps, SaaS platforms, health/wellness, modern business tools, professional, hybrid	Extreme minimalism, critical performance, systems without modern OS	✓ Full	✓ Full	⚡ Excellent
20	Hero-Centric Design	Landing Page	Large hero section, compelling headline, high-contrast CTA, product showcase, value proposition, hero image/video, dramatic visual	Brand primary color, white/light backgrounds for contrast, accent color for CTA	Supporting colors for secondary CTAs, accent highlights, trust elements (testimonials, logos)	Smooth scroll reveal, fade-in animations on hero, subtle background parallax, CTA glow/pulse effect	SaaS landing pages, product launches, service landing pages, B2B platforms, tech companies	Complex navigation, multi-page experiences, data-heavy applications	✓ Full	✓ Full	⚡ Good
21	Conversion-Optimized	Landing Page	Form-focused, minimalist design, single CTA focus, high contrast, urgency elements, trust signals, social proof, clear value	Primary brand color, high-contrast white/light backgrounds, warning/urgency colors for time-limited offers	Secondary CTA color (muted), trust element colors (testimonial highlights), accent for key benefits	Hover states on CTA (color shift, slight scale), form field focus animations, loading spinner, success feedback	E-commerce product pages, free trial signups, lead generation, SaaS pricing pages, limited-time offers	Complex feature explanations, multi-product showcases, technical documentation	✓ Full	✓ Full	⚡ Excellent
22	Feature-Rich Showcase	Landing Page	Multiple feature sections, grid layout, benefit cards, visual feature demonstrations, interactive elements, problem-solution pairs	Primary brand, bright secondary colors for feature cards, contrasting accent for CTAs	Supporting colors for: benefits (green), problems (red/orange), features (blue/purple), social proof (neutral)	Card hover effects (lift/scale), icon animations on scroll, feature toggle animations, smooth section transitions	Enterprise SaaS, software tools landing pages, platform services, complex product explanations, B2B products	Simple product pages, early-stage startups with few features, entertainment landing pages	✓ Full	✓ Full	⚡ Good
23	Minimal & Direct	Landing Page	Minimal text, white space heavy, single column layout, direct messaging, clean typography, visual-centric, fast-loading	Monochromatic primary, white background, single accent color for CTA, black/dark grey text	Minimal secondary colors, reserved for critical CTAs only, neutral supporting elements	Very subtle hover effects, minimal animations, fast page load (no heavy animations), smooth scroll	Simple service landing pages, indie products, consulting services, micro SaaS, freelancer portfolios	Feature-heavy products, complex explanations, multi-product showcases	✓ Full	✓ Full	⚡ Excellent
24	Social Proof-Focused	Landing Page	Testimonials prominent, client logos displayed, case studies sections, reviews/ratings, user avatars, success metrics, credibility markers	Primary brand, trust colors (blue), success/growth colors (green), neutral backgrounds	Testimonial highlight colors, logo grid backgrounds (light grey), badge/achievement colors	Testimonial carousel animations, logo grid fade-in, stat counter animations (number count-up), review star ratings	B2B SaaS, professional services, premium products, e-commerce conversion pages, established brands	Startup MVPs, products without users, niche/experimental products	✓ Full	✓ Full	⚡ Good
25	Interactive Product Demo	Landing Page	Embedded product mockup/video, interactive elements, product walkthrough, step-by-step guides, hover-to-reveal features, embedded demos	Primary brand, interface colors matching product, demo highlight colors for interactive elements	Product UI colors, tutorial step colors (numbered progression), hover state indicators	Product animation playback, step progression animations, hover reveal effects, smooth zoom on interaction	SaaS platforms, tool/software products, productivity apps landing pages, developer tools, productivity software	Simple services, consulting, non-digital products, complexity-averse audiences	✓ Full	✓ Full	⚠ Good (video/interactive)
26	Trust & Authority	Landing Page	Certificates/badges displayed, expert credentials, case studies with metrics, before/after comparisons, industry recognition, security badges	Professional colors (blue/grey), trust colors, certification badge colors (gold/silver accents)	Certificate highlight colors, metric showcase colors, comparison highlight (success green)	Badge hover effects, metric pulse animations, certificate carousel, smooth stat reveal	Healthcare/medical landing pages, financial services, enterprise software, premium/luxury products, legal services	Casual products, entertainment, viral/social-first products	✓ Full	✓ Full	⚡ Excellent
27	Storytelling-Driven	Landing Page	Narrative flow, visual story progression, section transitions, consistent character/brand voice, emotional messaging, journey visualization	Brand primary, warm/emotional colors, varied accent colors per story section, high visual variety	Story section color coding, emotional state colors (calm, excitement, success), transitional gradients	Section-to-section animations, scroll-triggered reveals, character/icon animations, morphing transitions, parallax narrative	Brand/startup stories, mission-driven products, premium/lifestyle brands, documentary-style products, educational	Technical/complex products (unless narrative-driven), traditional enterprise software	✓ Full	✓ Full	⚠ Moderate (animations)

Preview truncated.

View on GitHub

typography.csv31.1 KB

No	Font Pairing Name	Category	Heading Font	Body Font	Mood/Style Keywords	Best For	Google Fonts URL	CSS Import	Tailwind Config	Notes
1	Classic Elegant	Serif + Sans	Playfair Display	Inter	elegant, luxury, sophisticated, timeless, premium, editorial	Luxury brands, fashion, spa, beauty, editorial, magazines, high-end e-commerce	https://fonts.google.com/share?selection.family=Inter:wght@300;400;500;600;700\|Playfair+Display:wght@400;500;600;700	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');	fontFamily: { serif: ['Playfair Display', 'serif'], sans: ['Inter', 'sans-serif'] }	High contrast between elegant heading and clean body. Perfect for luxury/premium.
2	Modern Professional	Sans + Sans	Poppins	Open Sans	modern, professional, clean, corporate, friendly, approachable	SaaS, corporate sites, business apps, startups, professional services	https://fonts.google.com/share?selection.family=Open+Sans:wght@300;400;500;600;700\|Poppins:wght@400;500;600;700	@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');	fontFamily: { heading: ['Poppins', 'sans-serif'], body: ['Open Sans', 'sans-serif'] }	Geometric Poppins for headings, humanist Open Sans for readability.
3	Tech Startup	Sans + Sans	Space Grotesk	DM Sans	tech, startup, modern, innovative, bold, futuristic	Tech companies, startups, SaaS, developer tools, AI products	https://fonts.google.com/share?selection.family=DM+Sans:wght@400;500;700\|Space+Grotesk:wght@400;500;600;700	@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');	fontFamily: { heading: ['Space Grotesk', 'sans-serif'], body: ['DM Sans', 'sans-serif'] }	Space Grotesk has unique character, DM Sans is highly readable.
4	Editorial Classic	Serif + Serif	Cormorant Garamond	Libre Baskerville	editorial, classic, literary, traditional, refined, bookish	Publishing, blogs, news sites, literary magazines, book covers	https://fonts.google.com/share?selection.family=Cormorant+Garamond:wght@400;500;600;700\|Libre+Baskerville:wght@400;700	@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');	fontFamily: { heading: ['Cormorant Garamond', 'serif'], body: ['Libre Baskerville', 'serif'] }	All-serif pairing for traditional editorial feel.
5	Minimal Swiss	Sans + Sans	Inter	Inter	minimal, clean, swiss, functional, neutral, professional	Dashboards, admin panels, documentation, enterprise apps, design systems	https://fonts.google.com/share?selection.family=Inter:wght@300;400;500;600;700	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');	fontFamily: { sans: ['Inter', 'sans-serif'] }	Single font family with weight variations. Ultimate simplicity.
6	Playful Creative	Display + Sans	Fredoka	Nunito	playful, friendly, fun, creative, warm, approachable	Children's apps, educational, gaming, creative tools, entertainment	https://fonts.google.com/share?selection.family=Fredoka:wght@400;500;600;700\|Nunito:wght@300;400;500;600;700	@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@300;400;500;600;700&display=swap');	fontFamily: { heading: ['Fredoka', 'sans-serif'], body: ['Nunito', 'sans-serif'] }	Rounded, friendly fonts perfect for playful UIs.
7	Bold Statement	Display + Sans	Bebas Neue	Source Sans 3	bold, impactful, strong, dramatic, modern, headlines	Marketing sites, portfolios, agencies, event pages, sports	https://fonts.google.com/share?selection.family=Bebas+Neue\|Source+Sans+3:wght@300;400;500;600;700	@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');	fontFamily: { display: ['Bebas Neue', 'sans-serif'], body: ['Source Sans 3', 'sans-serif'] }	Bebas Neue for large headlines only. All-caps display font.
8	Wellness Calm	Serif + Sans	Lora	Raleway	calm, wellness, health, relaxing, natural, organic	Health apps, wellness, spa, meditation, yoga, organic brands	https://fonts.google.com/share?selection.family=Lora:wght@400;500;600;700\|Raleway:wght@300;400;500;600;700	@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Raleway:wght@300;400;500;600;700&display=swap');	fontFamily: { serif: ['Lora', 'serif'], sans: ['Raleway', 'sans-serif'] }	Lora's organic curves with Raleway's elegant simplicity.
9	Developer Mono	Mono + Sans	JetBrains Mono	IBM Plex Sans	code, developer, technical, precise, functional, hacker	Developer tools, documentation, code editors, tech blogs, CLI apps	https://fonts.google.com/share?selection.family=IBM+Plex+Sans:wght@300;400;500;600;700\|JetBrains+Mono:wght@400;500;600;700	@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');	fontFamily: { mono: ['JetBrains Mono', 'monospace'], sans: ['IBM Plex Sans', 'sans-serif'] }	JetBrains for code, IBM Plex for UI. Developer-focused.
10	Retro Vintage	Display + Serif	Abril Fatface	Merriweather	retro, vintage, nostalgic, dramatic, decorative, bold	Vintage brands, breweries, restaurants, creative portfolios, posters	https://fonts.google.com/share?selection.family=Abril+Fatface\|Merriweather:wght@300;400;700	@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Merriweather:wght@300;400;700&display=swap');	fontFamily: { display: ['Abril Fatface', 'serif'], body: ['Merriweather', 'serif'] }	Abril Fatface for hero headlines only. High-impact vintage feel.
11	Geometric Modern	Sans + Sans	Outfit	Work Sans	geometric, modern, clean, balanced, contemporary, versatile	General purpose, portfolios, agencies, modern brands, landing pages	https://fonts.google.com/share?selection.family=Outfit:wght@300;400;500;600;700\|Work+Sans:wght@300;400;500;600;700	@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Work+Sans:wght@300;400;500;600;700&display=swap');	fontFamily: { heading: ['Outfit', 'sans-serif'], body: ['Work Sans', 'sans-serif'] }	Both geometric but Outfit more distinctive for headings.
12	Luxury Serif	Serif + Sans	Cormorant	Montserrat	luxury, high-end, fashion, elegant, refined, premium	Fashion brands, luxury e-commerce, jewelry, high-end services	https://fonts.google.com/share?selection.family=Cormorant:wght@400;500;600;700\|Montserrat:wght@300;400;500;600;700	@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');	fontFamily: { serif: ['Cormorant', 'serif'], sans: ['Montserrat', 'sans-serif'] }	Cormorant's elegance with Montserrat's geometric precision.
13	Friendly SaaS	Sans + Sans	Plus Jakarta Sans	Plus Jakarta Sans	friendly, modern, saas, clean, approachable, professional	SaaS products, web apps, dashboards, B2B, productivity tools	https://fonts.google.com/share?selection.family=Plus+Jakarta+Sans:wght@300;400;500;600;700	@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');	fontFamily: { sans: ['Plus Jakarta Sans', 'sans-serif'] }	Single versatile font. Modern alternative to Inter.
14	News Editorial	Serif + Sans	Newsreader	Roboto	news, editorial, journalism, trustworthy, readable, informative	News sites, blogs, magazines, journalism, content-heavy sites	https://fonts.google.com/share?selection.family=Newsreader:wght@400;500;600;700\|Roboto:wght@300;400;500;700	@import url('https://fonts.googleapis.com/css2?family=Newsreader:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');	fontFamily: { serif: ['Newsreader', 'serif'], sans: ['Roboto', 'sans-serif'] }	Newsreader designed for long-form reading. Roboto for UI.
15	Handwritten Charm	Script + Sans	Caveat	Quicksand	handwritten, personal, friendly, casual, warm, charming	Personal blogs, invitations, creative portfolios, lifestyle brands	https://fonts.google.com/share?selection.family=Caveat:wght@400;500;600;700\|Quicksand:wght@300;400;500;600;700	@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap');	fontFamily: { script: ['Caveat', 'cursive'], sans: ['Quicksand', 'sans-serif'] }	Use Caveat sparingly for accents. Quicksand for body.
16	Corporate Trust	Sans + Sans	Lexend	Source Sans 3	corporate, trustworthy, accessible, readable, professional, clean	Enterprise, government, healthcare, finance, accessibility-focused	https://fonts.google.com/share?selection.family=Lexend:wght@300;400;500;600;700\|Source+Sans+3:wght@300;400;500;600;700	@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');	fontFamily: { heading: ['Lexend', 'sans-serif'], body: ['Source Sans 3', 'sans-serif'] }	Lexend designed for readability. Excellent accessibility.
17	Brutalist Raw	Mono + Mono	Space Mono	Space Mono	brutalist, raw, technical, monospace, minimal, stark	Brutalist designs, developer portfolios, experimental, tech art	https://fonts.google.com/share?selection.family=Space+Mono:wght@400;700	@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');	fontFamily: { mono: ['Space Mono', 'monospace'] }	All-mono for raw brutalist aesthetic. Limited weights.
18	Fashion Forward	Sans + Sans	Syne	Manrope	fashion, avant-garde, creative, bold, artistic, edgy	Fashion brands, creative agencies, art galleries, design studios	https://fonts.google.com/share?selection.family=Manrope:wght@300;400;500;600;700\|Syne:wght@400;500;600;700	@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Syne:wght@400;500;600;700&display=swap');	fontFamily: { heading: ['Syne', 'sans-serif'], body: ['Manrope', 'sans-serif'] }	Syne's unique character for headlines. Manrope for readability.
19	Soft Rounded	Sans + Sans	Varela Round	Nunito Sans	soft, rounded, friendly, approachable, warm, gentle	Children's products, pet apps, friendly brands, wellness, soft UI	https://fonts.google.com/share?selection.family=Nunito+Sans:wght@300;400;500;600;700\|Varela+Round	@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;500;600;700&family=Varela+Round&display=swap');	fontFamily: { heading: ['Varela Round', 'sans-serif'], body: ['Nunito Sans', 'sans-serif'] }	Both rounded and friendly. Perfect for soft UI designs.
20	Premium Sans	Sans + Sans	Satoshi	General Sans	premium, modern, clean, sophisticated, versatile, balanced	Premium brands, modern agencies, SaaS, portfolios, startups	https://fonts.google.com/share?selection.family=DM+Sans:wght@400;500;700	@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');	fontFamily: { sans: ['DM Sans', 'sans-serif'] }	Note: Satoshi/General Sans on Fontshare. DM Sans as Google alternative.
21	Vietnamese Friendly	Sans + Sans	Be Vietnam Pro	Noto Sans	vietnamese, international, readable, clean, multilingual, accessible	Vietnamese sites, multilingual apps, international products	https://fonts.google.com/share?selection.family=Be+Vietnam+Pro:wght@300;400;500;600;700\|Noto+Sans:wght@300;400;500;600;700	@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&family=Noto+Sans:wght@300;400;500;600;700&display=swap');	fontFamily: { sans: ['Be Vietnam Pro', 'Noto Sans', 'sans-serif'] }	Be Vietnam Pro excellent Vietnamese support. Noto as fallback.
22	Japanese Elegant	Serif + Sans	Noto Serif JP	Noto Sans JP	japanese, elegant, traditional, modern, multilingual, readable	Japanese sites, Japanese restaurants, cultural sites, anime/manga	https://fonts.google.com/share?selection.family=Noto+Sans+JP:wght@300;400;500;700\|Noto+Serif+JP:wght@400;500;600;700	@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@400;500;600;700&display=swap');	fontFamily: { serif: ['Noto Serif JP', 'serif'], sans: ['Noto Sans JP', 'sans-serif'] }	Noto fonts excellent Japanese support. Traditional + modern feel.
23	Korean Modern	Sans + Sans	Noto Sans KR	Noto Sans KR	korean, modern, clean, professional, multilingual, readable	Korean sites, K-beauty, K-pop, Korean businesses, multilingual	https://fonts.google.com/share?selection.family=Noto+Sans+KR:wght@300;400;500;700	@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');	fontFamily: { sans: ['Noto Sans KR', 'sans-serif'] }	Clean Korean typography. Single font with weight variations.
24	Chinese Traditional	Serif + Sans	Noto Serif TC	Noto Sans TC	chinese, traditional, elegant, cultural, multilingual, readable	Traditional Chinese sites, cultural content, Taiwan/Hong Kong markets	https://fonts.google.com/share?selection.family=Noto+Sans+TC:wght@300;400;500;700\|Noto+Serif+TC:wght@400;500;600;700	@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&family=Noto+Serif+TC:wght@400;500;600;700&display=swap');	fontFamily: { serif: ['Noto Serif TC', 'serif'], sans: ['Noto Sans TC', 'sans-serif'] }	Traditional Chinese character support. Elegant pairing.
25	Chinese Simplified	Sans + Sans	Noto Sans SC	Noto Sans SC	chinese, simplified, modern, professional, multilingual, readable	Simplified Chinese sites, mainland China market, business apps	https://fonts.google.com/share?selection.family=Noto+Sans+SC:wght@300;400;500;700	@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');	fontFamily: { sans: ['Noto Sans SC', 'sans-serif'] }	Simplified Chinese support. Clean modern look.
26	Arabic Elegant	Serif + Sans	Noto Naskh Arabic	Noto Sans Arabic	arabic, elegant, traditional, cultural, RTL, readable	Arabic sites, Middle East market, Islamic content, bilingual sites	https://fonts.google.com/share?selection.family=Noto+Naskh+Arabic:wght@400;500;600;700\|Noto+Sans+Arabic:wght@300;400;500;700	@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@300;400;500;700&display=swap');	fontFamily: { serif: ['Noto Naskh Arabic', 'serif'], sans: ['Noto Sans Arabic', 'sans-serif'] }	RTL support. Naskh for traditional, Sans for modern Arabic.
27	Thai Modern	Sans + Sans	Noto Sans Thai	Noto Sans Thai	thai, modern, readable, clean, multilingual, accessible	Thai sites, Southeast Asia, tourism, Thai restaurants	https://fonts.google.com/share?selection.family=Noto+Sans+Thai:wght@300;400;500;700	@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;700&display=swap');	fontFamily: { sans: ['Noto Sans Thai', 'sans-serif'] }	Clean Thai typography. Excellent readability.

Preview truncated.

View on GitHub

ui-reasoning.csv30.3 KB

No	UI_Category	Recommended_Pattern	Style_Priority	Color_Mood	Typography_Mood	Key_Effects	Decision_Rules	Anti_Patterns	Severity
1	SaaS (General)	Hero + Features + CTA	Glassmorphism + Flat Design	Trust blue + Accent contrast	Professional + Hierarchy	Subtle hover (200-250ms) + Smooth transitions	{"if_ux_focused": "prioritize-minimalism", "if_data_heavy": "add-glassmorphism"}	Excessive animation + Dark mode by default	HIGH
2	Micro SaaS	Minimal & Direct + Demo	Flat Design + Vibrant & Block	Vibrant primary + White space	Bold + Clean typography	Large CTA hover (300ms) + Scroll reveal	{"if_quick_onboarding": "reduce-steps", "if_demo_available": "feature-interactive-demo"}	Complex onboarding flow + Cluttered layout	HIGH
3	E-commerce	Feature-Rich Showcase	Vibrant & Block-based	Brand primary + Success green	Engaging + Clear hierarchy	Card hover lift (200ms) + Scale effect	{"if_luxury": "switch-to-liquid-glass", "if_conversion_focused": "add-urgency-colors"}	Flat design without depth + Text-heavy pages	HIGH
4	E-commerce Luxury	Feature-Rich Showcase	Liquid Glass + Glassmorphism	Premium colors + Minimal accent	Elegant + Refined typography	Chromatic aberration + Fluid animations (400-600ms)	{"if_checkout": "emphasize-trust", "if_hero_needed": "use-3d-hyperrealism"}	Vibrant & Block-based + Playful colors	HIGH
5	Healthcare App	Social Proof-Focused	Neumorphism + Accessible & Ethical	Calm blue + Health green	Readable + Large type (16px+)	Soft box-shadow + Smooth press (150ms)	{"must_have": "wcag-aaa-compliance", "if_medication": "red-alert-colors"}	Bright neon colors + Motion-heavy animations + AI purple/pink gradients	HIGH
6	Fintech/Crypto	Conversion-Optimized	Glassmorphism + Dark Mode (OLED)	Dark tech colors + Vibrant accents	Modern + Confident typography	Real-time chart animations + Alert pulse/glow	{"must_have": "security-badges", "if_real_time": "add-streaming-data"}	Light backgrounds + No security indicators	HIGH
7	Education	Feature-Rich Showcase	Claymorphism + Micro-interactions	Playful colors + Clear hierarchy	Friendly + Engaging typography	Soft press (200ms) + Fluffy elements	{"if_gamification": "add-progress-animation", "if_children": "increase-playfulness"}	Dark modes + Complex jargon	MEDIUM
8	Portfolio/Personal	Storytelling-Driven	Motion-Driven + Minimalism	Brand primary + Artistic	Expressive + Variable typography	Parallax (3-5 layers) + Scroll-triggered reveals	{"if_creative_field": "add-brutalism", "if_minimal_portfolio": "reduce-motion"}	Corporate templates + Generic layouts	MEDIUM
9	Government/Public	Minimal & Direct	Accessible & Ethical + Minimalism	Professional blue + High contrast	Clear + Large typography	Clear focus rings (3-4px) + Skip links	{"must_have": "wcag-aaa", "must_have": "keyboard-navigation"}	Ornate design + Low contrast + Motion effects + AI purple/pink gradients	HIGH
10	Fintech (Banking)	Trust & Authority	Minimalism + Accessible & Ethical	Navy + Trust Blue + Gold	Professional + Trustworthy	Smooth state transitions + Number animations	{"must_have": "security-first", "if_dashboard": "use-dark-mode"}	Playful design + Unclear fees + AI purple/pink gradients	HIGH
11	Social Media App	Feature-Rich Showcase	Vibrant & Block-based + Motion-Driven	Vibrant + Engagement colors	Modern + Bold typography	Large scroll animations + Icon animations	{"if_engagement_metric": "add-motion", "if_content_focused": "minimize-chrome"}	Heavy skeuomorphism + Accessibility ignored	MEDIUM
12	Startup Landing	Hero-Centric + Trust	Motion-Driven + Vibrant & Block	Bold primaries + Accent contrast	Modern + Energetic typography	Scroll-triggered animations + Parallax	{"if_pre_launch": "use-waitlist-pattern", "if_video_ready": "add-hero-video"}	Static design + No video + Poor mobile	HIGH
13	Gaming	Feature-Rich Showcase	3D & Hyperrealism + Retro-Futurism	Vibrant + Neon + Immersive	Bold + Impactful typography	WebGL 3D rendering + Glitch effects	{"if_competitive": "add-real-time-stats", "if_casual": "increase-playfulness"}	Minimalist design + Static assets	HIGH
14	Creative Agency	Storytelling-Driven	Brutalism + Motion-Driven	Bold primaries + Artistic freedom	Bold + Expressive typography	CRT scanlines + Neon glow + Glitch effects	{"must_have": "case-studies", "if_boutique": "increase-artistic-freedom"}	Corporate minimalism + Hidden portfolio	HIGH
15	Wellness/Mental Health	Social Proof-Focused	Neumorphism + Accessible & Ethical	Calm Pastels + Trust colors	Calming + Readable typography	Soft press + Breathing animations	{"must_have": "privacy-first", "if_meditation": "add-breathing-animation"}	Bright neon + Motion overload	HIGH
16	Restaurant/Food	Hero-Centric + Conversion	Vibrant & Block-based + Motion-Driven	Warm colors (Orange Red Brown)	Appetizing + Clear typography	Food image reveal + Menu hover effects	{"must_have": "high_quality_images", "if_delivery": "emphasize-speed"}	Low-quality imagery + Outdated hours	HIGH
17	Real Estate	Hero-Centric + Feature-Rich	Glassmorphism + Minimalism	Trust Blue + Gold + White	Professional + Confident	3D property tour zoom + Map hover	{"if_luxury": "add-3d-models", "must_have": "map-integration"}	Poor photos + No virtual tours	HIGH
18	Travel/Tourism	Storytelling-Driven + Hero	Aurora UI + Motion-Driven	Vibrant destination + Sky Blue	Inspirational + Engaging	Destination parallax + Itinerary animations	{"if_experience_focused": "use-storytelling", "must_have": "mobile-booking"}	Generic photos + Complex booking	HIGH
19	SaaS Dashboard	Data-Dense Dashboard	Data-Dense + Heat Map	Cool to Hot gradients + Neutral grey	Clear + Readable typography	Hover tooltips + Chart zoom + Real-time pulse	{"must_have": "real-time-updates", "if_large_dataset": "prioritize-performance"}	Ornate design + Slow rendering	HIGH
20	B2B SaaS Enterprise	Feature-Rich Showcase	Trust & Authority + Minimal	Professional blue + Neutral grey	Formal + Clear typography	Subtle section transitions + Feature reveals	{"must_have": "case-studies", "must_have": "roi-messaging"}	Playful design + Hidden features + AI purple/pink gradients	HIGH
21	Music/Entertainment	Feature-Rich Showcase	Dark Mode (OLED) + Vibrant & Block-based	Dark (#121212) + Vibrant accents + Album art colors	Modern + Bold typography	Waveform visualization + Playlist animations	{"must_have": "audio-player-ux", "if_discovery_focused": "add-playlist-recommendations"}	Cluttered layout + Poor audio player UX	HIGH
22	Video Streaming/OTT	Hero-Centric + Feature-Rich	Dark Mode (OLED) + Motion-Driven	Dark bg + Poster colors + Brand accent	Bold + Engaging typography	Video player animations + Content carousel (parallax)	{"must_have": "continue-watching", "if_personalized": "add-recommendations"}	Static layout + Slow video player	HIGH
23	Job Board/Recruitment	Conversion-Optimized + Feature-Rich	Flat Design + Minimalism	Professional Blue + Success Green + Neutral	Clear + Professional typography	Search/filter animations + Application flow	{"must_have": "advanced-search", "if_salary_focused": "highlight-compensation"}	Outdated forms + Hidden filters	HIGH
24	Marketplace (P2P)	Feature-Rich Showcase + Social Proof	Vibrant & Block-based + Flat Design	Trust colors + Category colors + Success green	Modern + Engaging typography	Review star animations + Listing hover effects	{"must_have": "seller-profiles", "must_have": "secure-payment"}	Low trust signals + Confusing layout	HIGH
25	Logistics/Delivery	Feature-Rich Showcase + Real-Time	Minimalism + Flat Design	Blue (#2563EB) + Orange (tracking) + Green	Clear + Functional typography	Real-time tracking animation + Status pulse	{"must_have": "tracking-map", "must_have": "delivery-updates"}	Static tracking + No map integration + AI purple/pink gradients	HIGH
26	Agriculture/Farm Tech	Feature-Rich Showcase	Organic Biophilic + Flat Design	Earth Green (#4A7C23) + Brown + Sky Blue	Clear + Informative typography	Data visualization + Weather animations	{"must_have": "sensor-dashboard", "if_crop_focused": "add-health-indicators"}	Generic design + Ignored accessibility + AI purple/pink gradients	MEDIUM
27	Construction/Architecture	Hero-Centric + Feature-Rich	Minimalism + 3D & Hyperrealism	Grey (#4A4A4A) + Orange (safety) + Blueprint Blue	Professional + Bold typography	3D model viewer + Timeline animations	{"must_have": "project-portfolio", "if_team_collaboration": "add-real-time-updates"}	2D-only layouts + Poor image quality + AI purple/pink gradients	HIGH

Preview truncated.

View on GitHub

ux-guidelines.csv18.3 KB

No	Category	Issue	Platform	Description	Do	Don't	Code Example Good	Code Example Bad	Severity
1	Navigation	Smooth Scroll	Web	Anchor links should scroll smoothly to target section	Use scroll-behavior: smooth on html element	Jump directly without transition	html { scroll-behavior: smooth; }	<a href='#section'> without CSS	High
2	Navigation	Sticky Navigation	Web	Fixed nav should not obscure content	Add padding-top to body equal to nav height	Let nav overlap first section content	pt-20 (if nav is h-20)	No padding compensation	Medium
3	Navigation	Active State	All	Current page/section should be visually indicated	Highlight active nav item with color/underline	No visual feedback on current location	text-primary border-b-2	All links same style	Medium
4	Navigation	Back Button	Mobile	Users expect back to work predictably	Preserve navigation history properly	Break browser/app back button behavior	history.pushState()	location.replace()	High
5	Navigation	Deep Linking	All	URLs should reflect current state for sharing	Update URL on state/view changes	Static URLs for dynamic content	Use query params or hash	Single URL for all states	Medium
6	Navigation	Breadcrumbs	Web	Show user location in site hierarchy	Use for sites with 3+ levels of depth	Use for flat single-level sites	Home > Category > Product	Only on deep nested pages	Low
7	Animation	Excessive Motion	All	Too many animations cause distraction and motion sickness	Animate 1-2 key elements per view maximum	Animate everything that moves	Single hero animation	animate-bounce on 5+ elements	High
8	Animation	Duration Timing	All	Animations should feel responsive not sluggish	Use 150-300ms for micro-interactions	Use animations longer than 500ms for UI	transition-all duration-200	duration-1000	Medium
9	Animation	Reduced Motion	All	Respect user's motion preferences	Check prefers-reduced-motion media query	Ignore accessibility motion settings	@media (prefers-reduced-motion: reduce)	No motion query check	High
10	Animation	Loading States	All	Show feedback during async operations	Use skeleton screens or spinners	Leave UI frozen with no feedback	animate-pulse skeleton	Blank screen while loading	High
11	Animation	Hover vs Tap	All	Hover effects don't work on touch devices	Use click/tap for primary interactions	Rely only on hover for important actions	onClick handler	onMouseEnter only	High
12	Animation	Continuous Animation	All	Infinite animations are distracting	Use for loading indicators only	Use for decorative elements	animate-spin on loader	animate-bounce on icons	Medium
13	Animation	Transform Performance	Web	Some CSS properties trigger expensive repaints	Use transform and opacity for animations	Animate width/height/top/left properties	transform: translateY()	top: 10px animation	Medium
14	Animation	Easing Functions	All	Linear motion feels robotic	Use ease-out for entering ease-in for exiting	Use linear for UI transitions	ease-out	linear	Low
15	Layout	Z-Index Management	Web	Stacking context conflicts cause hidden elements	Define z-index scale system (10 20 30 50)	Use arbitrary large z-index values	z-10 z-20 z-50	z-[9999]	High
16	Layout	Overflow Hidden	Web	Hidden overflow can clip important content	Test all content fits within containers	Blindly apply overflow-hidden	overflow-auto with scroll	overflow-hidden truncating content	Medium
17	Layout	Fixed Positioning	Web	Fixed elements can overlap or be inaccessible	Account for safe areas and other fixed elements	Stack multiple fixed elements carelessly	Fixed nav + fixed bottom with gap	Multiple overlapping fixed elements	Medium
18	Layout	Stacking Context	Web	New stacking contexts reset z-index	Understand what creates new stacking context	Expect z-index to work across contexts	Parent with z-index isolates children	z-index: 9999 not working	Medium
19	Layout	Content Jumping	Web	Layout shift when content loads is jarring	Reserve space for async content	Let images/content push layout around	aspect-ratio or fixed height	No dimensions on images	High
20	Layout	Viewport Units	Web	100vh can be problematic on mobile browsers	Use dvh or account for mobile browser chrome	Use 100vh for full-screen mobile layouts	min-h-dvh or min-h-screen	h-screen on mobile	Medium
21	Layout	Container Width	Web	Content too wide is hard to read	Limit max-width for text content (65-75ch)	Let text span full viewport width	max-w-prose or max-w-3xl	Full width paragraphs	Medium
22	Touch	Touch Target Size	Mobile	Small buttons are hard to tap accurately	Minimum 44x44px touch targets	Tiny clickable areas	min-h-[44px] min-w-[44px]	w-6 h-6 buttons	High
23	Touch	Touch Spacing	Mobile	Adjacent touch targets need adequate spacing	Minimum 8px gap between touch targets	Tightly packed clickable elements	gap-2 between buttons	gap-0 or gap-1	Medium
24	Touch	Gesture Conflicts	Mobile	Custom gestures can conflict with system	Avoid horizontal swipe on main content	Override system gestures	Vertical scroll primary	Horizontal swipe carousel only	Medium
25	Touch	Tap Delay	Mobile	300ms tap delay feels laggy	Use touch-action CSS or fastclick	Default mobile tap handling	touch-action: manipulation	No touch optimization	Medium
26	Touch	Pull to Refresh	Mobile	Accidental refresh is frustrating	Disable where not needed	Enable by default everywhere	overscroll-behavior: contain	Default overscroll	Low
27	Touch	Haptic Feedback	Mobile	Tactile feedback improves interaction feel	Use for confirmations and important actions	Overuse vibration feedback	navigator.vibrate(10)	Vibrate on every tap	Low

Preview truncated.

View on GitHub

web-interface.csv7.30 KB

No	Category	Issue	Keywords	Platform	Description	Do	Don't	Code Example Good	Code Example Bad	Severity
1	Accessibility	Icon Button Labels	icon button aria-label	Web	Icon-only buttons must have accessible names	Add aria-label to icon buttons	Icon button without label	<button aria-label='Close'><XIcon /></button>	<button><XIcon /></button>	Critical
2	Accessibility	Form Control Labels	form input label aria	Web	All form controls need labels or aria-label	Use label element or aria-label	Input without accessible name	<label for='email'>Email</label><input id='email' />	<input placeholder='Email' />	Critical
3	Accessibility	Keyboard Handlers	keyboard onclick onkeydown	Web	Interactive elements must support keyboard interaction	Add onKeyDown alongside onClick	Click-only interaction	<div onClick={fn} onKeyDown={fn} tabIndex={0}>	<div onClick={fn}>	High
4	Accessibility	Semantic HTML	semantic button a label	Web	Use semantic HTML before ARIA attributes	Use button/a/label elements	Div with role attribute	<button onClick={fn}>Submit</button>	<div role='button' onClick={fn}>Submit</div>	High
5	Accessibility	Aria Live	aria-live polite async	Web	Async updates need aria-live for screen readers	Add aria-live='polite' for dynamic content	Silent async updates	<div aria-live='polite'>{status}</div>	<div>{status}</div> // no announcement	Medium
6	Accessibility	Decorative Icons	aria-hidden decorative icon	Web	Decorative icons should be hidden from screen readers	Add aria-hidden='true' to decorative icons	Decorative icon announced	<Icon aria-hidden='true' />	<Icon /> // announced as 'image'	Medium
7	Focus	Visible Focus States	focus-visible outline ring	Web	All interactive elements need visible focus states	Use :focus-visible with ring/outline	No focus indication	focus-visible:ring-2 focus-visible:ring-blue-500	outline-none // no replacement	Critical
8	Focus	Never Remove Outline	outline-none focus replacement	Web	Never remove outline without providing replacement	Replace outline with visible alternative	Remove outline completely	focus:outline-none focus:ring-2	focus:outline-none // nothing else	Critical
9	Focus	Checkbox Radio Hit Target	checkbox radio label target	Web	Checkbox/radio must share hit target with label	Wrap input and label together	Separate tiny checkbox	<label class='flex gap-2'><input type='checkbox' /><span>Option</span></label>	<input type='checkbox' id='x' /><label for='x'>Option</label>	Medium
10	Forms	Autocomplete Attribute	autocomplete input form	Web	Inputs need autocomplete attribute for autofill	Add appropriate autocomplete value	Missing autocomplete	<input autocomplete='email' type='email' />	<input type='email' />	High
11	Forms	Semantic Input Types	input type email tel url	Web	Use semantic input type attributes	Use email/tel/url/number types	text type for everything	<input type='email' />	<input type='text' /> // for email	Medium
12	Forms	Never Block Paste	paste onpaste password	Web	Never prevent paste functionality	Allow paste on all inputs	Block paste on password/code	<input type='password' />	<input onPaste={e => e.preventDefault()} />	High
13	Forms	Spellcheck Disable	spellcheck email code	Web	Disable spellcheck on emails and codes	Set spellcheck='false' on codes	Spellcheck on technical input	<input spellCheck='false' type='email' />	<input type='email' /> // red squiggles	Low
14	Forms	Submit Button Enabled	submit button disabled loading	Web	Keep submit enabled and show spinner during requests	Show loading spinner keep enabled	Disable button during submit	<button>{loading ? <Spinner /> : 'Submit'}</button>	<button disabled={loading}>Submit</button>	Medium
15	Forms	Inline Errors	error message inline focus	Web	Show error messages inline near the problem field	Inline error with focus on first error	Single error at top	<input /><span class='text-red-500'>{error}</span>	<div class='error'>{allErrors}</div> // at top	High
16	Performance	Virtualize Lists	virtualize list 50 items	Web	Virtualize lists exceeding 50 items	Use virtual list for large datasets	Render all items	<VirtualList items={items} />	items.map(item => <Item />)	High
17	Performance	Avoid Layout Reads	layout read render getboundingclientrect	Web	Avoid layout reads during render phase	Read layout in effects or callbacks	getBoundingClientRect in render	useEffect(() => { el.getBoundingClientRect() })	const rect = el.getBoundingClientRect() // in render	Medium
18	Performance	Batch DOM Operations	batch dom write read	Web	Group DOM operations to minimize reflows	Batch writes then reads	Interleave reads and writes	writes.forEach(w => w()); reads.forEach(r => r())	write(); read(); write(); read(); // thrashing	Medium
19	Performance	Preconnect CDN	preconnect link cdn	Web	Add preconnect links for CDN domains	Preconnect to known domains	<link rel='preconnect' href='https://cdn.example.com' />	// no preconnect hint	Low
20	Performance	Lazy Load Images	lazy loading image below-fold	Web	Lazy-load images below the fold	Use loading='lazy' for below-fold images	Load all images eagerly	<img loading='lazy' src='...' />	<img src='...' /> // above fold only	Medium
21	State	URL Reflects State	url state query params	Web	URL should reflect current UI state	Sync filters/tabs/pagination to URL	State only in memory	?tab=settings&page=2	useState only // lost on refresh	High
22	State	Deep Linking	deep link stateful component	Web	Stateful components should support deep-linking	Enable sharing current view via URL	No shareable state	router.push({ query: { ...filters } })	setFilters(f) // not in URL	Medium
23	State	Confirm Destructive Actions	confirm destructive delete modal	Web	Destructive actions require confirmation	Show confirmation dialog before delete	Delete without confirmation	if (confirm('Delete?')) delete()	onClick={delete} // no confirmation	High
24	Typography	Proper Unicode	unicode ellipsis quotes	Web	Use proper Unicode characters	Use ... curly quotes proper dashes	ASCII approximations	'Hello...' with proper ellipsis	'Hello...' with three dots	Low
25	Typography	Text Overflow	truncate line-clamp overflow	Web	Handle text overflow properly	Use truncate/line-clamp/break-words	Text overflows container	<p class='truncate'>Long text...</p>	<p>Long text...</p> // overflows	Medium
26	Typography	Non-Breaking Spaces	nbsp unit brand	Web	Use non-breaking spaces for units and brand names	Use   between number and unit	10 kg or Next.js 14	10 kg // may wrap	Low
27	Anti-Pattern	No Zoom Disable	viewport zoom disable	Web	Never disable zoom in viewport meta	Allow user zoom	<meta name='viewport' content='width=device-width'>	<meta name='viewport' content='maximum-scale=1'>	Critical

Preview truncated.

View on GitHub

scripts/3 files

core.py9.99 KB

#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
UI/UX Pro Max Core - BM25 search engine for UI/UX style guides
"""

import csv
import re
from pathlib import Path
from math import log
from collections import defaultdict

# ============ CONFIGURATION ============
DATA_DIR = Path(__file__).parent.parent / "data"
MAX_RESULTS = 3

CSV_CONFIG = {
    "style": {
        "file": "styles.csv",
        "search_cols": ["Style Category", "Keywords", "Best For", "Type", "AI Prompt Keywords"],
        "output_cols": ["Style Category", "Type", "Keywords", "Primary Colors", "Effects & Animation", "Best For", "Performance", "Accessibility", "Framework Compatibility", "Complexity", "AI Prompt Keywords", "CSS/Technical Keywords", "Implementation Checklist", "Design System Variables"]
    },
    "color": {
        "file": "colors.csv",
        "search_cols": ["Product Type", "Notes"],
        "output_cols": ["Product Type", "Primary (Hex)", "Secondary (Hex)", "CTA (Hex)", "Background (Hex)", "Text (Hex)", "Notes"]
    },
    "chart": {
        "file": "charts.csv",
        "search_cols": ["Data Type", "Keywords", "Best Chart Type", "Accessibility Notes"],
        "output_cols": ["Data Type", "Keywords", "Best Chart Type", "Secondary Options", "Color Guidance", "Accessibility Notes", "Library Recommendation", "Interactive Level"]
    },
    "landing": {
        "file": "landing.csv",
        "search_cols": ["Pattern Name", "Keywords", "Conversion Optimization", "Section Order"],
        "output_cols": ["Pattern Name", "Keywords", "Section Order", "Primary CTA Placement", "Color Strategy", "Conversion Optimization"]
    },
    "product": {
        "file": "products.csv",
        "search_cols": ["Product Type", "Keywords", "Primary Style Recommendation", "Key Considerations"],
        "output_cols": ["Product Type", "Keywords", "Primary Style Recommendation", "Secondary Styles", "Landing Page Pattern", "Dashboard Style (if applicable)", "Color Palette Focus"]
    },
    "ux": {
        "file": "ux-guidelines.csv",
        "search_cols": ["Category", "Issue", "Description", "Platform"],
        "output_cols": ["Category", "Issue", "Platform", "Description", "Do", "Don't", "Code Example Good", "Code Example Bad", "Severity"]
    },
    "typography": {
        "file": "typography.csv",
        "search_cols": ["Font Pairing Name", "Category", "Mood/Style Keywords", "Best For", "Heading Font", "Body Font"],
        "output_cols": ["Font Pairing Name", "Category", "Heading Font", "Body Font", "Mood/Style Keywords", "Best For", "Google Fonts URL", "CSS Import", "Tailwind Config", "Notes"]
    },
    "icons": {
        "file": "icons.csv",
        "search_cols": ["Category", "Icon Name", "Keywords", "Best For"],
        "output_cols": ["Category", "Icon Name", "Keywords", "Library", "Import Code", "Usage", "Best For", "Style"]
    },
    "react": {
        "file": "react-performance.csv",
        "search_cols": ["Category", "Issue", "Keywords", "Description"],
        "output_cols": ["Category", "Issue", "Platform", "Description", "Do", "Don't", "Code Example Good", "Code Example Bad", "Severity"]
    },
    "web": {
        "file": "web-interface.csv",
        "search_cols": ["Category", "Issue", "Keywords", "Description"],
        "output_cols": ["Category", "Issue", "Platform", "Description", "Do", "Don't", "Code Example Good", "Code Example Bad", "Severity"]
    }
}

STACK_CONFIG = {
    "html-tailwind": {"file": "stacks/html-tailwind.csv"},
    "react": {"file": "stacks/react.csv"},
    "nextjs": {"file": "stacks/nextjs.csv"},
    "astro": {"file": "stacks/astro.csv"},
    "vue": {"file": "stacks/vue.csv"},
    "nuxtjs": {"file": "stacks/nuxtjs.csv"},
    "nuxt-ui": {"file": "stacks/nuxt-ui.csv"},
    "svelte": {"file": "stacks/svelte.csv"},
    "swiftui": {"file": "stacks/swiftui.csv"},
    "react-native": {"file": "stacks/react-native.csv"},
    "flutter": {"file": "stacks/flutter.csv"},
    "shadcn": {"file": "stacks/shadcn.csv"},
    "jetpack-compose": {"file": "stacks/jetpack-compose.csv"}
}

# Common columns for all stacks
_STACK_COLS = {
    "search_cols": ["Category", "Guideline", "Description", "Do", "Don't"],
    "output_cols": ["Category", "Guideline", "Description", "Do", "Don't", "Code Good", "Code Bad", "Severity", "Docs URL"]
}

AVAILABLE_STACKS = list(STACK_CONFIG.keys())


# ============ BM25 IMPLEMENTATION ============
class BM25:
    """BM25 ranking algorithm for text search"""

    def __init__(self, k1=1.5, b=0.75):
        self.k1 = k1
        self.b = b
        self.corpus = []
        self.doc_lengths = []
        self.avgdl = 0
        self.idf = {}
        self.doc_freqs = defaultdict(int)
        self.N = 0

    def tokenize(self, text):
        """Lowercase, split, remove punctuation, filter short words"""
        text = re.sub(r'[^\w\s]', ' ', str(text).lower())
        return [w for w in text.split() if len(w) > 2]

    def fit(self, documents):
        """Build BM25 index from documents"""
        self.corpus = [self.tokenize(doc) for doc in documents]
        self.N = len(self.corpus)
        if self.N == 0:
            return
        self.doc_lengths = [len(doc) for doc in self.corpus]
        self.avgdl = sum(self.doc_lengths) / self.N

        for doc in self.corpus:
            seen = set()
            for word in doc:
                if word not in seen:
                    self.doc_freqs[word] += 1
                    seen.add(word)

        for word, freq in self.doc_freqs.items():
            self.idf[word] = log((self.N - freq + 0.5) / (freq + 0.5) + 1)

    def score(self, query):
        """Score all documents against query"""
        query_tokens = self.tokenize(query)
        scores = []

        for idx, doc in enumerate(self.corpus):
            score = 0
            doc_len = self.doc_lengths[idx]
            term_freqs = defaultdict(int)
            for word in doc:
                term_freqs[word] += 1

            for token in query_tokens:
                if token in self.idf:
                    tf = term_freqs[token]
                    idf = self.idf[token]
                    numerator = tf * (self.k1 + 1)
                    denominator = tf + self.k1 * (1 - self.b + self.b * doc_len / self.avgdl)
                    score += idf * numerator / denominator

            scores.append((idx, score))

        return sorted(scores, key=lambda x: x[1], reverse=True)


# ============ SEARCH FUNCTIONS ============
def _load_csv(filepath):
    """Load CSV and return list of dicts"""
    with open(filepath, 'r', encoding='utf-8') as f:
        return list(csv.DictReader(f))


def _search_csv(filepath, search_cols, output_cols, query, max_results):
    """Core search function using BM25"""
    if not filepath.exists():
        return []

    data = _load_csv(filepath)

    # Build documents from search columns
    documents = [" ".join(str(row.get(col, "")) for col in search_cols) for row in data]

    # BM25 search
    bm25 = BM25()
    bm25.fit(documents)
    ranked = bm25.score(query)

    # Get top results with score > 0
    results = []
    for idx, score in ranked[:max_results]:
        if score > 0:
            row = data[idx]
            results.append({col: row.get(col, "") for col in output_cols if col in row})

    return results


def detect_domain(query):
    """Auto-detect the most relevant domain from query"""
    query_lower = query.lower()

    domain_keywords = {
        "color": ["color", "palette", "hex", "#", "rgb"],
        "chart": ["chart", "graph", "visualization", "trend", "bar", "pie", "scatter", "heatmap", "funnel"],
        "landing": ["landing", "page", "cta", "conversion", "hero", "testimonial", "pricing", "section"],
        "product": ["saas", "ecommerce", "e-commerce", "fintech", "healthcare", "gaming", "portfolio", "crypto", "dashboard"],
        "style": ["style", "design", "ui", "minimalism", "glassmorphism", "neumorphism", "brutalism", "dark mode", "flat", "aurora", "prompt", "css", "implementation", "variable", "checklist", "tailwind"],
        "ux": ["ux", "usability", "accessibility", "wcag", "touch", "scroll", "animation", "keyboard", "navigation", "mobile"],
        "typography": ["font", "typography", "heading", "serif", "sans"],
        "icons": ["icon", "icons", "lucide", "heroicons", "symbol", "glyph", "pictogram", "svg icon"],
        "react": ["react", "next.js", "nextjs", "suspense", "memo", "usecallback", "useeffect", "rerender", "bundle", "waterfall", "barrel", "dynamic import", "rsc", "server component"],
        "web": ["aria", "focus", "outline", "semantic", "virtualize", "autocomplete", "form", "input type", "preconnect"]
    }

    scores = {domain: sum(1 for kw in keywords if kw in query_lower) for domain, keywords in domain_keywords.items()}
    best = max(scores, key=scores.get)
    return best if scores[best] > 0 else "style"


def search(query, domain=None, max_results=MAX_RESULTS):
    """Main search function with auto-domain detection"""
    if domain is None:
        domain = detect_domain(query)

    config = CSV_CONFIG.get(domain, CSV_CONFIG["style"])
    filepath = DATA_DIR / config["file"]

    if not filepath.exists():

Preview truncated.

View on GitHub

design_system.py42.6 KB

#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
Design System Generator - Aggregates search results and applies reasoning
to generate comprehensive design system recommendations.

Usage:
    from design_system import generate_design_system
    result = generate_design_system("SaaS dashboard", "My Project")
    
    # With persistence (Master + Overrides pattern)
    result = generate_design_system("SaaS dashboard", "My Project", persist=True)
    result = generate_design_system("SaaS dashboard", "My Project", persist=True, page="dashboard")
"""

import csv
import json
import os
from datetime import datetime
from pathlib import Path
from core import search, DATA_DIR


# ============ CONFIGURATION ============
REASONING_FILE = "ui-reasoning.csv"

SEARCH_CONFIG = {
    "product": {"max_results": 1},
    "style": {"max_results": 3},
    "color": {"max_results": 2},
    "landing": {"max_results": 2},
    "typography": {"max_results": 2}
}


# ============ DESIGN SYSTEM GENERATOR ============
class DesignSystemGenerator:
    """Generates design system recommendations from aggregated searches."""

    def __init__(self):
        self.reasoning_data = self._load_reasoning()

    def _load_reasoning(self) -> list:
        """Load reasoning rules from CSV."""
        filepath = DATA_DIR / REASONING_FILE
        if not filepath.exists():
            return []
        with open(filepath, 'r', encoding='utf-8') as f:
            return list(csv.DictReader(f))

    def _multi_domain_search(self, query: str, style_priority: list = None) -> dict:
        """Execute searches across multiple domains."""
        results = {}
        for domain, config in SEARCH_CONFIG.items():
            if domain == "style" and style_priority:
                # For style, also search with priority keywords
                priority_query = " ".join(style_priority[:2]) if style_priority else query
                combined_query = f"{query} {priority_query}"
                results[domain] = search(combined_query, domain, config["max_results"])
            else:
                results[domain] = search(query, domain, config["max_results"])
        return results

    def _find_reasoning_rule(self, category: str) -> dict:
        """Find matching reasoning rule for a category."""
        category_lower = category.lower()

        # Try exact match first
        for rule in self.reasoning_data:
            if rule.get("UI_Category", "").lower() == category_lower:
                return rule

        # Try partial match
        for rule in self.reasoning_data:
            ui_cat = rule.get("UI_Category", "").lower()
            if ui_cat in category_lower or category_lower in ui_cat:
                return rule

        # Try keyword match
        for rule in self.reasoning_data:
            ui_cat = rule.get("UI_Category", "").lower()
            keywords = ui_cat.replace("/", " ").replace("-", " ").split()
            if any(kw in category_lower for kw in keywords):
                return rule

        return {}

    def _apply_reasoning(self, category: str, search_results: dict) -> dict:
        """Apply reasoning rules to search results."""
        rule = self._find_reasoning_rule(category)

        if not rule:
            return {
                "pattern": "Hero + Features + CTA",
                "style_priority": ["Minimalism", "Flat Design"],
                "color_mood": "Professional",
                "typography_mood": "Clean",
                "key_effects": "Subtle hover transitions",
                "anti_patterns": "",
                "decision_rules": {},
                "severity": "MEDIUM"
            }

        # Parse decision rules JSON
        decision_rules = {}
        try:
            decision_rules = json.loads(rule.get("Decision_Rules", "{}"))
        except json.JSONDecodeError:
            pass

        return {
            "pattern": rule.get("Recommended_Pattern", ""),
            "style_priority": [s.strip() for s in rule.get("Style_Priority", "").split("+")],
            "color_mood": rule.get("Color_Mood", ""),
            "typography_mood": rule.get("Typography_Mood", ""),
            "key_effects": rule.get("Key_Effects", ""),
            "anti_patterns": rule.get("Anti_Patterns", ""),
            "decision_rules": decision_rules,
            "severity": rule.get("Severity", "MEDIUM")
        }

    def _select_best_match(self, results: list, priority_keywords: list) -> dict:
        """Select best matching result based on priority keywords."""
        if not results:
            return {}

        if not priority_keywords:
            return results[0]

        # First: try exact style name match
        for priority in priority_keywords:
            priority_lower = priority.lower().strip()
            for result in results:
                style_name = result.get("Style Category", "").lower()
                if priority_lower in style_name or style_name in priority_lower:
                    return result

        # Second: score by keyword match in all fields
        scored = []
        for result in results:
            result_str = str(result).lower()
            score = 0
            for kw in priority_keywords:
                kw_lower = kw.lower().strip()
                # Higher score for style name match
                if kw_lower in result.get("Style Category", "").lower():
                    score += 10
                # Lower score for keyword field match
                elif kw_lower in result.get("Keywords", "").lower():
                    score += 3
                # Even lower for other field matches
                elif kw_lower in result_str:
                    score += 1
            scored.append((score, result))

        scored.sort(key=lambda x: x[0], reverse=True)
        return scored[0][1] if scored and scored[0][0] > 0 else results[0]

    def _extract_results(self, search_result: dict) -> list:
        """Extract results list from search result dict."""
        return search_result.get("results", [])

    def generate(self, query: str, project_name: str = None) -> dict:
        """Generate complete design system recommendation."""
        # Step 1: First search product to get category
        product_result = search(query, "product", 1)
        product_results = product_result.get("results", [])
        category = "General"
        if product_results:
            category = product_results[0].get("Product Type", "General")

        # Step 2: Get reasoning rules for this category
        reasoning = self._apply_reasoning(category, {})
        style_priority = reasoning.get("style_priority", [])

        # Step 3: Multi-domain search with style priority hints
        search_results = self._multi_domain_search(query, style_priority)
        search_results["product"] = product_result  # Reuse product search

        # Step 4: Select best matches from each domain using priority
        style_results = self._extract_results(search_results.get("style", {}))
        color_results = self._extract_results(search_results.get("color", {}))
        typography_results = self._extract_results(search_results.get("typography", {}))
        landing_results = self._extract_results(search_results.get("landing", {}))

        best_style = self._select_best_match(style_results, reasoning.get("style_priority", []))
        best_color = color_results[0] if color_results else {}
        best_typography = typography_results[0] if typography_results else {}
        best_landing = landing_results[0] if landing_results else {}

        # Step 5: Build final recommendation
        # Combine effects from both reasoning and style search
        style_effects = best_style.get("Effects & Animation", "")
        reasoning_effects = reasoning.get("key_effects", "")
        combined_effects = style_effects if style_effects else reasoning_effects

        return {
            "project_name": project_name or query.upper(),
            "category": category,
            "pattern": {
                "name": best_landing.get("Pattern Name", reasoning.get("pattern", "Hero + Features + CTA")),
                "sections": best_landing.get("Section Order", "Hero > Features > CTA"),
                "cta_placement": best_landing.get("Primary CTA Placement", "Above fold"),
                "color_strategy": best_landing.get("Color Strategy", ""),
                "conversion": best_landing.get("Conversion Optimization", "")
            },
            "style": {
                "name": best_style.get("Style Category", "Minimalism"),
                "type": best_style.get("Type", "General"),
                "effects": style_effects,
                "keywords": best_style.get("Keywords", ""),
                "best_for": best_style.get("Best For", ""),
                "performance": best_style.get("Performance", ""),
                "accessibility": best_style.get("Accessibility", "")
            },
            "colors": {
                "primary": best_color.get("Primary (Hex)", "#2563EB"),
                "secondary": best_color.get("Secondary (Hex)", "#3B82F6"),
                "cta": best_color.get("CTA (Hex)", "#F97316"),
                "background": best_color.get("Background (Hex)", "#F8FAFC"),

Preview truncated.

View on GitHub

search.py4.98 KB

#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
UI/UX Pro Max Search - BM25 search engine for UI/UX style guides
Usage: python search.py "<query>" [--domain <domain>] [--stack <stack>] [--max-results 3]
       python search.py "<query>" --design-system [-p "Project Name"]
       python search.py "<query>" --design-system --persist [-p "Project Name"] [--page "dashboard"]

Domains: style, prompt, color, chart, landing, product, ux, typography
Stacks: html-tailwind, react, nextjs

Persistence (Master + Overrides pattern):
  --persist    Save design system to design-system/MASTER.md
  --page       Also create a page-specific override file in design-system/pages/
"""

import argparse
from core import CSV_CONFIG, AVAILABLE_STACKS, MAX_RESULTS, search, search_stack
from design_system import generate_design_system, persist_design_system


def format_output(result):
    """Format results for Claude consumption (token-optimized)"""
    if "error" in result:
        return f"Error: {result['error']}"

    output = []
    if result.get("stack"):
        output.append(f"## UI Pro Max Stack Guidelines")
        output.append(f"**Stack:** {result['stack']} | **Query:** {result['query']}")
    else:
        output.append(f"## UI Pro Max Search Results")
        output.append(f"**Domain:** {result['domain']} | **Query:** {result['query']}")
    output.append(f"**Source:** {result['file']} | **Found:** {result['count']} results\n")

    for i, row in enumerate(result['results'], 1):
        output.append(f"### Result {i}")
        for key, value in row.items():
            value_str = str(value)
            if len(value_str) > 300:
                value_str = value_str[:300] + "..."
            output.append(f"- **{key}:** {value_str}")
        output.append("")

    return "\n".join(output)


if __name__ == "__main__":
    parser = argparse.ArgumentParser(description="UI Pro Max Search")
    parser.add_argument("query", help="Search query")
    parser.add_argument("--domain", "-d", choices=list(CSV_CONFIG.keys()), help="Search domain")
    parser.add_argument("--stack", "-s", choices=AVAILABLE_STACKS, help="Stack-specific search (html-tailwind, react, nextjs)")
    parser.add_argument("--max-results", "-n", type=int, default=MAX_RESULTS, help="Max results (default: 3)")
    parser.add_argument("--json", action="store_true", help="Output as JSON")
    # Design system generation
    parser.add_argument("--design-system", "-ds", action="store_true", help="Generate complete design system recommendation")
    parser.add_argument("--project-name", "-p", type=str, default=None, help="Project name for design system output")
    parser.add_argument("--format", "-f", choices=["ascii", "markdown"], default="ascii", help="Output format for design system")
    # Persistence (Master + Overrides pattern)
    parser.add_argument("--persist", action="store_true", help="Save design system to design-system/MASTER.md (creates hierarchical structure)")
    parser.add_argument("--page", type=str, default=None, help="Create page-specific override file in design-system/pages/")
    parser.add_argument("--output-dir", "-o", type=str, default=None, help="Output directory for persisted files (default: current directory)")

    args = parser.parse_args()

    # Design system takes priority
    if args.design_system:
        result = generate_design_system(
            args.query, 
            args.project_name, 
            args.format,
            persist=args.persist,
            page=args.page,
            output_dir=args.output_dir
        )
        print(result)
        
        # Print persistence confirmation
        if args.persist:
            project_slug = args.project_name.lower().replace(' ', '-') if args.project_name else "default"
            print("\n" + "=" * 60)
            print(f"✅ Design system persisted to design-system/{project_slug}/")
            print(f"   📄 design-system/{project_slug}/MASTER.md (Global Source of Truth)")
            if args.page:
                page_filename = args.page.lower().replace(' ', '-')
                print(f"   📄 design-system/{project_slug}/pages/{page_filename}.md (Page Overrides)")
            print("")
            print(f"📖 Usage: When building a page, check design-system/{project_slug}/pages/[page].md first.")
            print(f"   If exists, its rules override MASTER.md. Otherwise, use MASTER.md.")
            print("=" * 60)
    # Stack search
    elif args.stack:
        result = search_stack(args.query, args.stack, args.max_results)
        if args.json:
            import json
            print(json.dumps(result, indent=2, ensure_ascii=False))
        else:
            print(format_output(result))
    # Domain search
    else:
        result = search(args.query, args.domain, args.max_results)
        if args.json:
            import json
            print(json.dumps(result, indent=2, ensure_ascii=False))
        else:
            print(format_output(result))

View on GitHub

SKILL.md10.2 KB
Rendered below. Jump to instructions.
View on GitHub

Instructions

name: ui-ux-pro-max description: UI/UX design intelligence with searchable database

ui-ux-pro-max

Comprehensive design guide for web and mobile applications. Contains 67 styles, 96 color palettes, 56 font pairings, 98 UX guidelines, and 25 chart types across 13 technology stacks. Searchable database with priority-based recommendations.

Prerequisites

Check if Python is installed:

python3 --version || python --version

If Python is not installed, install it based on user's OS:

macOS:

brew install python3

Ubuntu/Debian:

sudo apt update && sudo apt install python3

Windows:

winget install Python.Python.3.12

How to Use This Skill

When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow:

Note: run the commands below from this skill directory (the folder containing SKILL.md).

Step 1: Analyze User Requirements

Extract key information from user request:

Product type: SaaS, e-commerce, portfolio, dashboard, landing page, etc.
Style keywords: minimal, playful, professional, elegant, dark mode, etc.
Industry: healthcare, fintech, gaming, education, etc.
Stack: React, Vue, Next.js, or default to html-tailwind

Step 2: Generate Design System (REQUIRED)

Always start with --design-system to get comprehensive recommendations with reasoning:

python3 scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]

This command:

Searches 5 domains in parallel (product, style, color, landing, typography)
Applies reasoning rules from ui-reasoning.csv to select best matches
Returns complete design system: pattern, style, colors, typography, effects
Includes anti-patterns to avoid

Example:

python3 scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"

Step 2b: Persist Design System (Master + Overrides Pattern)

To save the design system for hierarchical retrieval across sessions, add --persist:

python3 scripts/search.py "<query>" --design-system --persist -p "Project Name"

This creates:

design-system/MASTER.md — Global Source of Truth with all design rules
design-system/pages/ — Folder for page-specific overrides

With page-specific override:

python3 scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"

This also creates:

design-system/pages/dashboard.md — Page-specific deviations from Master

How hierarchical retrieval works:

When building a specific page (e.g., "Checkout"), first check design-system/pages/checkout.md
If the page file exists, its rules override the Master file
If not, use design-system/MASTER.md exclusively

Step 3: Supplement with Detailed Searches (as needed)

After getting the design system, use domain searches to get additional details:

python3 scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]

When to use detailed searches:

Need	Domain	Example
More style options	`style`	`--domain style "glassmorphism dark"`
Chart recommendations	`chart`	`--domain chart "real-time dashboard"`
UX best practices	`ux`	`--domain ux "animation accessibility"`
Alternative fonts	`typography`	`--domain typography "elegant luxury"`
Landing structure	`landing`	`--domain landing "hero social-proof"`

Step 4: Stack Guidelines (Default: html-tailwind)

Get implementation-specific best practices. If user doesn't specify a stack, default to html-tailwind.

python3 scripts/search.py "<keyword>" --stack html-tailwind

Available stacks: html-tailwind, react, nextjs, vue, svelte, swiftui, react-native, flutter, shadcn, jetpack-compose

Search Reference

Available Domains

Domain	Use For	Example Keywords
`product`	Product type recommendations	SaaS, e-commerce, portfolio, healthcare, beauty, service
`style`	UI styles, colors, effects	glassmorphism, minimalism, dark mode, brutalism
`typography`	Font pairings, Google Fonts	elegant, playful, professional, modern
`color`	Color palettes by product type	saas, ecommerce, healthcare, beauty, fintech, service
`landing`	Page structure, CTA strategies	hero, hero-centric, testimonial, pricing, social-proof
`chart`	Chart types, library recommendations	trend, comparison, timeline, funnel, pie
`ux`	Best practices, anti-patterns	animation, accessibility, z-index, loading
`react`	React/Next.js performance	waterfall, bundle, suspense, memo, rerender, cache
`web`	Web interface guidelines	aria, focus, keyboard, semantic, virtualize
`prompt`	AI prompts, CSS keywords	(style name)

Available Stacks

Stack	Focus
`html-tailwind`	Tailwind utilities, responsive, a11y (DEFAULT)
`react`	State, hooks, performance, patterns
`nextjs`	SSR, routing, images, API routes
`vue`	Composition API, Pinia, Vue Router
`svelte`	Runes, stores, SvelteKit
`swiftui`	Views, State, Navigation, Animation
`react-native`	Components, Navigation, Lists
`flutter`	Widgets, State, Layout, Theming
`shadcn`	shadcn/ui components, theming, forms, patterns
`jetpack-compose`	Composables, Modifiers, State Hoisting, Recomposition

Example Workflow

User request: "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp"

Step 1: Analyze Requirements

Product type: Beauty/Spa service
Style keywords: elegant, professional, soft
Industry: Beauty/Wellness
Stack: html-tailwind (default)

Step 2: Generate Design System (REQUIRED)

python3 scripts/search.py "beauty spa wellness service elegant" --design-system -p "Serenity Spa"

Output: Complete design system with pattern, style, colors, typography, effects, and anti-patterns.

Step 3: Supplement with Detailed Searches (as needed)

# Get UX guidelines for animation and accessibility
python3 scripts/search.py "animation accessibility" --domain ux

# Get alternative typography options if needed
python3 scripts/search.py "elegant luxury serif" --domain typography

Step 4: Stack Guidelines

python3 scripts/search.py "layout responsive form" --stack html-tailwind

Then: Synthesize design system + detailed searches and implement the design.

Output Formats

The --design-system flag supports two output formats:

# ASCII box (default) - best for terminal display
python3 scripts/search.py "fintech crypto" --design-system

# Markdown - best for documentation
python3 scripts/search.py "fintech crypto" --design-system -f markdown

Tips for Better Results

Be specific with keywords - "healthcare SaaS dashboard" > "app"
Search multiple times - Different keywords reveal different insights
Combine domains - Style + Typography + Color = Complete design system
Always check UX - Search "animation", "z-index", "accessibility" for common issues
Use stack flag - Get implementation-specific best practices
Iterate - If first search doesn't match, try different keywords

Common Rules for Professional UI

These are frequently overlooked issues that make UI look unprofessional:

Icons & Visual Elements

Rule	Do	Don't
No emoji icons	Use SVG icons (Heroicons, Lucide, Simple Icons)	Use emojis like 🎨 🚀 ⚙️ as UI icons
Stable hover states	Use color/opacity transitions on hover	Use scale transforms that shift layout
Correct brand logos	Research official SVG from Simple Icons	Guess or use incorrect logo paths
Consistent icon sizing	Use fixed viewBox (24x24) with w-6 h-6	Mix different icon sizes randomly

Interaction & Cursor

Rule	Do	Don't
Cursor pointer	Add `cursor-pointer` to all clickable/hoverable cards	Leave default cursor on interactive elements
Hover feedback	Provide visual feedback (color, shadow, border)	No indication element is interactive
Smooth transitions	Use `transition-colors duration-200`	Instant state changes or too slow (>500ms)

Light/Dark Mode Contrast

Rule	Do	Don't
Glass card light mode	Use `bg-white/80` or higher opacity	Use `bg-white/10` (too transparent)
Text contrast light	Use `#0F172A` (slate-900) for text	Use `#94A3B8` (slate-400) for body text
Muted text light	Use `#475569` (slate-600) minimum	Use gray-400 or lighter
Border visibility	Use `border-gray-200` in light mode	Use `border-white/10` (invisible)

Layout & Spacing

Rule	Do	Don't
Floating navbar	Add `top-4 left-4 right-4` spacing	Stick navbar to `top-0 left-0 right-0`
Content padding	Account for fixed navbar height	Let content hide behind fixed elements
Consistent max-width	Use same `max-w-6xl` or `max-w-7xl`	Mix different container widths

Pre-Delivery Checklist

Before delivering UI code, verify these items:

Visual Quality

No emojis used as icons (use SVG instead)
All icons from consistent icon set (Heroicons/Lucide)
Brand logos are correct (verified from Simple Icons)
Hover states don't cause layout shift
Use theme colors directly (bg-primary) not var() wrapper

Interaction

All clickable elements have cursor-pointer
Hover states provide clear visual feedback
Transitions are smooth (150-300ms)
Focus states visible for keyboard navigation

Light/Dark Mode

Light mode text has sufficient contrast (4.5:1 minimum)
Glass/transparent elements visible in light mode
Borders visible in both modes
Test both modes before delivery

Layout

Floating elements have proper spacing from edges
No content hidden behind fixed navbars
Responsive at 375px, 768px, 1024px, 1440px
No horizontal scroll on mobile

Accessibility

All images have alt text
Form inputs have labels
Color is not the only indicator
prefers-reduced-motion respected

Quick install

Install this skill into a target agent environment.

Agent

npx skillhub@latest add ui-ux-pro-max --agent codex --registry xue1213888/skills-repo

Uses the planned installer CLI. If --registry is present, it points to this registry repo.

Metadata

idui-ux-pro-max

pathskills/design/ui-ux/ui-ux-pro-max

runtimepython>=3.9

agentscodex