@ranimontagna/agent-toolkit 0.3.5 → 0.3.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +5 -0
- package/README.md +8 -8
- package/dist/src/installers/superpowers.js +23 -7
- package/dist/src/installers/superpowers.js.map +1 -1
- package/package.json +5 -5
- package/skills/backend/fastify-best-practices/NOTICE.md +1 -1
- package/skills/backend/fastify-best-practices/rules/authentication.md +13 -0
- package/skills/backend/fastify-best-practices/rules/configuration.md +9 -0
- package/skills/backend/fastify-best-practices/rules/content-type.md +16 -0
- package/skills/backend/fastify-best-practices/rules/cors-security.md +18 -0
- package/skills/backend/fastify-best-practices/rules/database.md +12 -0
- package/skills/backend/fastify-best-practices/rules/decorators.md +14 -0
- package/skills/backend/fastify-best-practices/rules/deployment.md +16 -0
- package/skills/backend/fastify-best-practices/rules/error-handling.md +16 -0
- package/skills/backend/fastify-best-practices/rules/hooks.md +20 -0
- package/skills/backend/fastify-best-practices/rules/http-proxy.md +11 -0
- package/skills/backend/fastify-best-practices/rules/logging.md +18 -0
- package/skills/backend/fastify-best-practices/rules/performance.md +20 -0
- package/skills/backend/fastify-best-practices/rules/plugins.md +14 -0
- package/skills/backend/fastify-best-practices/rules/routes.md +18 -0
- package/skills/backend/fastify-best-practices/rules/schemas.md +20 -0
- package/skills/backend/fastify-best-practices/rules/serialization.md +19 -0
- package/skills/backend/fastify-best-practices/rules/testing.md +17 -0
- package/skills/backend/fastify-best-practices/rules/typescript.md +15 -0
- package/skills/backend/fastify-best-practices/rules/websockets.md +15 -0
- package/skills/backend/go/golang-patterns/NOTICE.md +1 -1
- package/skills/backend/go/golang-patterns/SKILL.md +2 -1
- package/skills/devops/docker-patterns/NOTICE.md +1 -1
- package/skills/devops/docker-patterns/SKILL.md +3 -3
- package/skills/frontend/design/revenue-centric-design/NOTICE.md +1 -1
- package/skills/frontend/design/revenue-centric-design/SKILL.md +6 -4
- package/skills/frontend/design/revenue-centric-design/assets/1985681720104903142__1.jpg +0 -0
- package/skills/frontend/design/revenue-centric-design/assets/1999584679247134761__1.jpg +0 -0
- package/skills/frontend/design/revenue-centric-design/assets/2000930776636940333__1.jpg +0 -0
- package/skills/frontend/design/revenue-centric-design/assets/2018693884449009956__3.jpg +0 -0
- package/skills/frontend/design/revenue-centric-design/assets/2081714430811730162__1.jpg +0 -0
- package/skills/frontend/design/revenue-centric-design/assets/2092692547244007852__q__1.jpg +0 -0
- package/skills/frontend/design/revenue-centric-design/assets/2092692547244007852__q__2.jpg +0 -0
- package/skills/frontend/design/revenue-centric-design/assets/2092692547244007852__q__3.jpg +0 -0
- package/skills/frontend/design/revenue-centric-design/references/checkout-and-forms.md +39 -0
- package/skills/frontend/design/revenue-centric-design/references/churn-and-retention.md +25 -0
- package/skills/frontend/design/revenue-centric-design/references/conversion-and-landing-pages.md +52 -1
- package/skills/frontend/design/revenue-centric-design/references/dashboards-and-data-viz.md +23 -0
- package/skills/frontend/design/revenue-centric-design/references/metrics-and-experimentation.md +13 -0
- package/skills/frontend/design/revenue-centric-design/references/onboarding-and-activation.md +7 -1
- package/skills/frontend/design/revenue-centric-design/references/pricing-and-monetization.md +35 -8
- package/skills/frontend/design/revenue-centric-design/references/product-strategy-and-features.md +37 -0
- package/skills/frontend/design/revenue-centric-design/references/revenue-centric-design.md +2 -2
- package/skills/frontend/design/ui-ux-pro-max/NOTICE.md +6 -4
- package/skills/frontend/design/ui-ux-pro-max/SKILL.md +103 -573
- package/skills/frontend/design/ui-ux-pro-max/data/app-interface.csv +29 -27
- package/skills/frontend/design/ui-ux-pro-max/data/catalog-summary.json +78 -0
- package/skills/frontend/design/ui-ux-pro-max/data/charts.csv +26 -26
- package/skills/frontend/design/ui-ux-pro-max/data/colors.csv +191 -160
- package/skills/frontend/design/ui-ux-pro-max/data/data-provenance.json +1348 -0
- package/skills/frontend/design/ui-ux-pro-max/data/google-font-licenses.json +20185 -0
- package/skills/frontend/design/ui-ux-pro-max/data/google-fonts.csv +1934 -1923
- package/skills/frontend/design/ui-ux-pro-max/data/icons.csv +106 -106
- package/skills/frontend/design/ui-ux-pro-max/data/landing.csv +35 -35
- package/skills/frontend/design/ui-ux-pro-max/data/motion.csv +18 -0
- package/skills/frontend/design/ui-ux-pro-max/data/phosphor-icons-upstream.json +32582 -0
- package/skills/frontend/design/ui-ux-pro-max/data/products.csv +192 -161
- package/skills/frontend/design/ui-ux-pro-max/data/react-performance.csv +37 -37
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/angular.csv +51 -51
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/astro.csv +54 -54
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/avalonia.csv +57 -0
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/flutter.csv +53 -53
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/html-tailwind.csv +60 -56
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/javafx.csv +76 -0
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/jetpack-compose.csv +53 -53
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/laravel.csv +51 -51
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/nextjs.csv +62 -53
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/nuxt-ui.csv +77 -51
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/nuxtjs.csv +68 -59
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/react-native.csv +52 -52
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/react.csv +67 -54
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/shadcn.csv +69 -61
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/svelte.csv +56 -54
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/swiftui.csv +51 -51
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/threejs.csv +54 -54
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/uno.csv +60 -0
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/uwp.csv +56 -0
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/vue.csv +50 -50
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/winui.csv +60 -0
- package/skills/frontend/design/ui-ux-pro-max/data/stacks/wpf.csv +57 -0
- package/skills/frontend/design/ui-ux-pro-max/data/styles.csv +89 -85
- package/skills/frontend/design/ui-ux-pro-max/data/typography.csv +74 -73
- package/skills/frontend/design/ui-ux-pro-max/data/ui-reasoning.csv +193 -162
- package/skills/frontend/design/ui-ux-pro-max/data/ux-guidelines.csv +30 -10
- package/skills/frontend/design/ui-ux-pro-max/references/pro-rules.md +117 -0
- package/skills/frontend/design/ui-ux-pro-max/references/quick-reference.md +256 -0
- package/skills/frontend/design/ui-ux-pro-max/scripts/core.py +800 -69
- package/skills/frontend/design/ui-ux-pro-max/scripts/design_system.py +700 -180
- package/skills/frontend/design/ui-ux-pro-max/scripts/reasoning_contract.py +123 -0
- package/skills/frontend/design/ui-ux-pro-max/scripts/search.py +105 -42
- package/skills/frontend/design/ui-ux-pro-max/scripts/validate_data.py +1095 -0
- package/skills/frontend/react-native/react-native-unistyles-v3/NOTICE.md +1 -1
- package/skills/frontend/react-native/react-native-unistyles-v3/SKILL.md +33 -24
- package/skills/frontend/react-native/react-native-unistyles-v3/references/api-reference.md +135 -78
- package/skills/frontend/react-native/react-native-unistyles-v3/references/common-issues.md +48 -31
- package/skills/frontend/react-native/react-native-unistyles-v3/references/setup-guide.md +76 -34
- package/skills/frontend/react-native/react-native-unistyles-v3/references/styling-patterns.md +145 -52
- package/skills/frontend/react-native/react-native-unistyles-v3/references/third-party-integration.md +76 -27
- package/skills/media/brag-slim/NOTICE.md +3 -3
- package/skills/media/brag-slim/SKILL.md +4 -0
- package/tools.lock.json +20 -20
- package/skills/frontend/design/revenue-centric-design/assets/2018693884449009956__1.jpg +0 -0
- package/skills/frontend/design/ui-ux-pro-max/data/_sync_all.py +0 -414
- package/skills/frontend/design/ui-ux-pro-max/data/design.csv +0 -1776
- package/skills/frontend/design/ui-ux-pro-max/data/draft.csv +0 -1779
|
@@ -1,50 +1,50 @@
|
|
|
1
|
-
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL
|
|
2
|
-
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
|
|
3
|
-
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
|
|
4
|
-
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
|
|
5
|
-
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,
|
|
6
|
-
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,
|
|
7
|
-
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
|
|
8
|
-
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
|
|
9
|
-
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
|
|
10
|
-
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,
|
|
11
|
-
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,
|
|
12
|
-
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
|
|
13
|
-
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,
|
|
14
|
-
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,
|
|
15
|
-
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
|
|
16
|
-
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
|
|
17
|
-
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
|
|
18
|
-
17,Lifecycle,Clean up in onUnmounted,Remove listeners and subscriptions,onUnmounted for cleanup,Leave listeners attached,onUnmounted(() => window.removeEventListener()),No cleanup on unmount,High,
|
|
19
|
-
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,
|
|
20
|
-
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,
|
|
21
|
-
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
|
|
22
|
-
21,Components,Prefer composition over mixins,Composables replace mixins,Composables for shared logic,Mixins for code reuse,const { data } = useApi(),mixins: [apiMixin],Medium,
|
|
23
|
-
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
|
|
24
|
-
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,
|
|
25
|
-
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
|
|
26
|
-
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,
|
|
27
|
-
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,
|
|
28
|
-
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
|
|
29
|
-
28,Templates,Use key with v-for,Proper list rendering and updates,Unique key for each item,Index as key for dynamic lists,"v-for=""item in items"" :key=""item.id""","v-for=""(item, i) in items"" :key=""i""",High,
|
|
30
|
-
29,State,Use Pinia for global state,Official state management for Vue 3,Pinia stores for shared state,Vuex for new projects,const store = useCounterStore(),Vuex with mutations,Medium,https://pinia.vuejs.org
|
|
31
|
-
30,State,Define stores with defineStore,Composition API style stores,Setup stores with defineStore,Options stores for complex state,"defineStore('counter', () => {})","defineStore('counter', { state })",Low,
|
|
32
|
-
31,State,Use storeToRefs for destructuring,Maintain reactivity when destructuring,storeToRefs(store),Direct destructuring,const { count } = storeToRefs(store),const { count } = store,High,https://pinia.vuejs.org/core-concepts/#destructuring-from-a-store
|
|
33
|
-
32,Routing,Use useRouter and useRoute,Composition API router access,useRouter() useRoute() in setup,this.$router this.$route,const router = useRouter(),this.$router.push(),Medium,https://router.vuejs.org/guide/advanced/composition-api.html
|
|
34
|
-
33,Routing,Lazy load route components,Code splitting for routes,() => import() for components,Static imports for all routes,component: () => import('./Page.vue'),component: Page,Medium,https://router.vuejs.org/guide/advanced/lazy-loading.html
|
|
35
|
-
34,Routing,Use navigation guards,Protect routes and handle redirects,beforeEach for auth checks,Check auth in each component,router.beforeEach((to) => {}),Check auth in onMounted,Medium,
|
|
36
|
-
35,Performance,Use v-once for static content,Skip re-renders for static elements,v-once on never-changing content,v-once on dynamic content,<div v-once>{{ staticText }}</div>,<div v-once>{{ dynamicText }}</div>,Low,https://vuejs.org/api/built-in-directives.html#v-once
|
|
37
|
-
36,Performance,Use v-memo for expensive lists,Memoize list items,v-memo with dependency array,Re-render entire list always,"<div v-for v-memo=""[item.id]"">",<div v-for> without memo,Medium,https://vuejs.org/api/built-in-directives.html#v-memo
|
|
38
|
-
37,Performance,Use shallowReactive for flat objects,Avoid deep reactivity overhead,shallowReactive for flat state,reactive for simple objects,shallowReactive({ count: 0 }),reactive({ count: 0 }),Low,
|
|
39
|
-
38,Performance,Use defineAsyncComponent,Lazy load heavy components,defineAsyncComponent for modals dialogs,Import all components eagerly,defineAsyncComponent(() => import()),import HeavyComponent from,Medium,https://vuejs.org/guide/components/async.html
|
|
40
|
-
39,TypeScript,Use generic components,Type-safe reusable components,Generic with defineComponent,Any types in components,"<script setup lang=""ts"" generic=""T"">",<script setup> without types,Medium,https://vuejs.org/guide/typescript/composition-api.html
|
|
41
|
-
40,TypeScript,Type template refs,Proper typing for DOM refs,ref<HTMLInputElement>(null),ref(null) without type,const input = ref<HTMLInputElement>(null),const input = ref(null),Medium,
|
|
42
|
-
41,TypeScript,Use PropType for complex props,Type complex prop types,PropType<User> for object props,Object without type,type: Object as PropType<User>,type: Object,Medium,
|
|
43
|
-
42,Testing,Use Vue Test Utils,Official testing library,mount shallowMount for components,Manual DOM testing,import { mount } from '@vue/test-utils',document.createElement,Medium,https://test-utils.vuejs.org
|
|
44
|
-
43,Testing,Test component behavior,Focus on inputs and outputs,Test props emit and rendered output,Test internal implementation,expect(wrapper.text()).toContain(),expect(wrapper.vm.internalState),Medium,
|
|
45
|
-
44,Forms,Use v-model modifiers,Built-in input handling,.lazy .number .trim modifiers,Manual input parsing,"<input v-model.number=""age"">","<input v-model=""age""> then parse",Low,https://vuejs.org/guide/essentials/forms.html#modifiers
|
|
46
|
-
45,Forms,Use VeeValidate or FormKit,Form validation libraries,VeeValidate for complex forms,Manual validation logic,useField useForm from vee-validate,Custom validation in each input,Medium,
|
|
47
|
-
46,Accessibility,Use semantic elements,Proper HTML elements in templates,button nav main for purpose,div for everything,<button @click>,<div @click>,High,
|
|
48
|
-
47,Accessibility,Bind aria attributes dynamically,Keep ARIA in sync with state,":aria-expanded=""isOpen""",Static ARIA values,":aria-expanded=""menuOpen""","aria-expanded=""true""",Medium,
|
|
49
|
-
48,SSR,Use Nuxt for SSR,Full-featured SSR framework,Nuxt 3 for SSR apps,Manual SSR setup,npx nuxi init my-app,Custom SSR configuration,Medium,https://nuxt.com
|
|
50
|
-
49,SSR,Handle hydration mismatches,Client/server content must match,ClientOnly for browser-only content,Different content server/client,<ClientOnly><BrowserWidget/></ClientOnly>,<div>{{ Date.now() }}</div>,High,
|
|
1
|
+
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL,Applies To,Status,Verified At
|
|
2
|
+
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,vue 3.5.x,active,2026-08-13
|
|
3
|
+
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,vue 3.5.x,active,2026-08-13
|
|
4
|
+
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,vue 3.5.x,active,2026-08-13
|
|
5
|
+
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,,vue 3.5.x,active,2026-08-13
|
|
6
|
+
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,https://vuejs.org/guide/essentials/reactivity-fundamentals.html,vue 3.5.x,active,2026-08-13
|
|
7
|
+
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,vue 3.5.x,active,2026-08-13
|
|
8
|
+
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,vue 3.5.x,active,2026-08-13
|
|
9
|
+
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,vue 3.5.x,active,2026-08-13
|
|
10
|
+
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,,vue 3.5.x,active,2026-08-13
|
|
11
|
+
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,https://vuejs.org/guide/essentials/watchers.html,vue 3.5.x,active,2026-08-13
|
|
12
|
+
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,vue 3.5.x,active,2026-08-13
|
|
13
|
+
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,,vue 3.5.x,active,2026-08-13
|
|
14
|
+
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,https://vuejs.org/guide/components/props,vue 3.5.x,active,2026-08-13
|
|
15
|
+
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,vue 3.5.x,active,2026-08-13
|
|
16
|
+
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,vue 3.5.x,active,2026-08-13
|
|
17
|
+
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,vue 3.5.x,active,2026-08-13
|
|
18
|
+
17,Lifecycle,Clean up in onUnmounted,Remove listeners and subscriptions,onUnmounted for cleanup,Leave listeners attached,onUnmounted(() => window.removeEventListener()),No cleanup on unmount,High,https://vuejs.org/api/composition-api-lifecycle.html#onunmounted,vue 3.5.x,active,2026-08-13
|
|
19
|
+
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,,vue 3.5.x,active,2026-08-13
|
|
20
|
+
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,,vue 3.5.x,active,2026-08-13
|
|
21
|
+
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,vue 3.5.x,active,2026-08-13
|
|
22
|
+
21,Components,Prefer composition over mixins,Composables replace mixins,Composables for shared logic,Mixins for code reuse,const { data } = useApi(),mixins: [apiMixin],Medium,,vue 3.5.x,active,2026-08-13
|
|
23
|
+
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,vue 3.5.x,active,2026-08-13
|
|
24
|
+
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,,vue 3.5.x,active,2026-08-13
|
|
25
|
+
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,vue 3.5.x,active,2026-08-13
|
|
26
|
+
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,,vue 3.5.x,active,2026-08-13
|
|
27
|
+
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,,vue 3.5.x,active,2026-08-13
|
|
28
|
+
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,vue 3.5.x,active,2026-08-13
|
|
29
|
+
28,Templates,Use key with v-for,Proper list rendering and updates,Unique key for each item,Index as key for dynamic lists,"v-for=""item in items"" :key=""item.id""","v-for=""(item, i) in items"" :key=""i""",High,https://vuejs.org/guide/essentials/list.html#maintaining-state-with-key,vue 3.5.x,active,2026-08-13
|
|
30
|
+
29,State,Use Pinia for global state,Official state management for Vue 3,Pinia stores for shared state,Vuex for new projects,const store = useCounterStore(),Vuex with mutations,Medium,https://pinia.vuejs.org/,vue 3.5.x,active,2026-08-13
|
|
31
|
+
30,State,Define stores with defineStore,Composition API style stores,Setup stores with defineStore,Options stores for complex state,"defineStore('counter', () => {})","defineStore('counter', { state })",Low,,vue 3.5.x,active,2026-08-13
|
|
32
|
+
31,State,Use storeToRefs for destructuring,Maintain reactivity when destructuring,storeToRefs(store),Direct destructuring,const { count } = storeToRefs(store),const { count } = store,High,https://pinia.vuejs.org/core-concepts/#destructuring-from-a-store,vue 3.5.x,active,2026-08-13
|
|
33
|
+
32,Routing,Use useRouter and useRoute,Composition API router access,useRouter() useRoute() in setup,this.$router this.$route,const router = useRouter(),this.$router.push(),Medium,https://router.vuejs.org/guide/advanced/composition-api.html,vue 3.5.x,active,2026-08-13
|
|
34
|
+
33,Routing,Lazy load route components,Code splitting for routes,() => import() for components,Static imports for all routes,component: () => import('./Page.vue'),component: Page,Medium,https://router.vuejs.org/guide/advanced/lazy-loading.html,vue 3.5.x,active,2026-08-13
|
|
35
|
+
34,Routing,Use navigation guards,Protect routes and handle redirects,beforeEach for auth checks,Check auth in each component,router.beforeEach((to) => {}),Check auth in onMounted,Medium,,vue 3.5.x,active,2026-08-13
|
|
36
|
+
35,Performance,Use v-once for static content,Skip re-renders for static elements,v-once on never-changing content,v-once on dynamic content,<div v-once>{{ staticText }}</div>,<div v-once>{{ dynamicText }}</div>,Low,https://vuejs.org/api/built-in-directives.html#v-once,vue 3.5.x,active,2026-08-13
|
|
37
|
+
36,Performance,Use v-memo for expensive lists,Memoize list items,v-memo with dependency array,Re-render entire list always,"<div v-for v-memo=""[item.id]"">",<div v-for> without memo,Medium,https://vuejs.org/api/built-in-directives.html#v-memo,vue 3.5.x,active,2026-08-13
|
|
38
|
+
37,Performance,Use shallowReactive for flat objects,Avoid deep reactivity overhead,shallowReactive for flat state,reactive for simple objects,shallowReactive({ count: 0 }),reactive({ count: 0 }),Low,,vue 3.5.x,active,2026-08-13
|
|
39
|
+
38,Performance,Use defineAsyncComponent,Lazy load heavy components,defineAsyncComponent for modals dialogs,Import all components eagerly,defineAsyncComponent(() => import()),import HeavyComponent from,Medium,https://vuejs.org/guide/components/async.html,vue 3.5.x,active,2026-08-13
|
|
40
|
+
39,TypeScript,Use generic components,Type-safe reusable components,Generic with defineComponent,Any types in components,"<script setup lang=""ts"" generic=""T"">",<script setup> without types,Medium,https://vuejs.org/guide/typescript/composition-api.html,vue 3.5.x,active,2026-08-13
|
|
41
|
+
40,TypeScript,Type template refs,Proper typing for DOM refs,ref<HTMLInputElement>(null),ref(null) without type,const input = ref<HTMLInputElement>(null),const input = ref(null),Medium,,vue 3.5.x,active,2026-08-13
|
|
42
|
+
41,TypeScript,Use PropType for complex props,Type complex prop types,PropType<User> for object props,Object without type,type: Object as PropType<User>,type: Object,Medium,,vue 3.5.x,active,2026-08-13
|
|
43
|
+
42,Testing,Use Vue Test Utils,Official testing library,mount shallowMount for components,Manual DOM testing,import { mount } from '@vue/test-utils',document.createElement,Medium,https://test-utils.vuejs.org/,vue 3.5.x,active,2026-08-13
|
|
44
|
+
43,Testing,Test component behavior,Focus on inputs and outputs,Test props emit and rendered output,Test internal implementation,expect(wrapper.text()).toContain(),expect(wrapper.vm.internalState),Medium,,vue 3.5.x,active,2026-08-13
|
|
45
|
+
44,Forms,Use v-model modifiers,Built-in input handling,.lazy .number .trim modifiers,Manual input parsing,"<input v-model.number=""age"">","<input v-model=""age""> then parse",Low,https://vuejs.org/guide/essentials/forms.html#modifiers,vue 3.5.x,active,2026-08-13
|
|
46
|
+
45,Forms,Use VeeValidate or FormKit,Form validation libraries,VeeValidate for complex forms,Manual validation logic,useField useForm from vee-validate,Custom validation in each input,Medium,,vue 3.5.x,active,2026-08-13
|
|
47
|
+
46,Accessibility,Use semantic elements,Proper HTML elements in templates,button nav main for purpose,div for everything,<button @click>,<div @click>,High,https://vuejs.org/guide/best-practices/accessibility.html,vue 3.5.x,active,2026-08-13
|
|
48
|
+
47,Accessibility,Bind aria attributes dynamically,Keep ARIA in sync with state,":aria-expanded=""isOpen""",Static ARIA values,":aria-expanded=""menuOpen""","aria-expanded=""true""",Medium,,vue 3.5.x,active,2026-08-13
|
|
49
|
+
48,SSR,Use Nuxt for SSR,Full-featured SSR framework,Nuxt 3 for SSR apps,Manual SSR setup,npx nuxi init my-app,Custom SSR configuration,Medium,https://nuxt.com/,vue 3.5.x,active,2026-08-13
|
|
50
|
+
49,SSR,Handle hydration mismatches,Client/server content must match,ClientOnly for browser-only content,Different content server/client,<ClientOnly><BrowserWidget/></ClientOnly>,<div>{{ Date.now() }}</div>,High,https://vuejs.org/guide/scaling-up/ssr.html#hydration-mismatch,vue 3.5.x,active,2026-08-13
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL,Applies To,Status,Verified At
|
|
2
|
+
1,XAML,Use x:Bind for compiled bindings,Compile-time checked bindings with better performance,x:Bind for type-safe bindings,{Binding} when x:Bind works,"<TextBlock Text=""{x:Bind ViewModel.Title, Mode=OneWay}""/>","<TextBlock Text=""{Binding Title}""/>",High,https://learn.microsoft.com/en-us/windows/apps/develop/platform/xaml/x-bind-markup-extension,winui current windows app sdk,active,2026-08-13
|
|
3
|
+
2,XAML,Use x:Load for deferred loading,Only instantiate UI elements when needed,x:Load=False for hidden panels and dialogs,Loading all UI upfront,"<StackPanel x:Load=""{x:Bind ShowDetails, Mode=OneWay}"">",Always-loaded collapsed panels,Medium,https://learn.microsoft.com/en-us/windows/apps/develop/platform/xaml/x-load-attribute,winui current windows app sdk,active,2026-08-13
|
|
4
|
+
3,XAML,Use x:Phase for incremental rendering,Load list items in phases for smooth scrolling,x:Phase on secondary content in DataTemplates,Loading all template content in phase 0,"<TextBlock x:Phase=""1"" Text=""{x:Bind Description}""/>",All content in single phase for complex templates,Medium,https://learn.microsoft.com/en-us/windows/apps/develop/platform/xaml/x-bind-markup-extension,winui current windows app sdk,active,2026-08-13
|
|
5
|
+
4,XAML,Use x:DefaultBindMode,Set default binding mode for a scope,x:DefaultBindMode=OneWay on containers with many bindings,Mode=OneWay on every individual x:Bind,"<StackPanel x:DefaultBindMode=""OneWay"">",Mode=OneWay repeated on 20 bindings,Low,https://learn.microsoft.com/en-us/windows/apps/develop/platform/xaml/x-bind-markup-extension,winui current windows app sdk,active,2026-08-13
|
|
6
|
+
5,Controls,Use NavigationView for app navigation,WinUI 3 NavigationView with Left Top and LeftCompact display modes plus footer items,NavigationView with PaneDisplayMode for main app shell,Custom hamburger menu implementation,"<NavigationView><NavigationView.MenuItems><NavigationViewItem Content=""Home""/></NavigationView.MenuItems></NavigationView>",Custom SplitView with manual hamburger button,High,https://learn.microsoft.com/en-us/windows/apps/develop/ui/controls/navigationview,winui current windows app sdk,active,2026-08-13
|
|
7
|
+
6,Controls,Use InfoBar for status messages,Non-intrusive informational messages,InfoBar for success warning and error messages,Custom styled StackPanel for status,"<InfoBar IsOpen=""True"" Severity=""Warning"" Title=""Update available""/>","<StackPanel Background=""Yellow""><TextBlock Text=""Warning""/></StackPanel>",Medium,https://learn.microsoft.com/en-us/windows/apps/develop/ui/controls/infobar,winui current windows app sdk,active,2026-08-13
|
|
8
|
+
7,Controls,Use TeachingTip for onboarding,Contextual tips attached to UI elements,TeachingTip for feature discovery,Custom popup for teaching,"<TeachingTip Target=""{x:Bind SearchBox}"" Title=""Try searching""/>",Custom Popup positioned near target element,Low,https://learn.microsoft.com/en-us/windows/apps/develop/ui/controls/dialogs-and-flyouts/teaching-tip,winui current windows app sdk,active,2026-08-13
|
|
9
|
+
8,Controls,Use ContentDialog for modal interactions,Standard modal dialog pattern,ContentDialog for confirmations and input,Custom overlay Panel as dialog,"<ContentDialog Title=""Delete?"" PrimaryButtonText=""Delete"" CloseButtonText=""Cancel""/>",Grid overlay with manual focus trapping,Medium,https://learn.microsoft.com/en-us/windows/apps/develop/ui/controls/dialogs-and-flyouts/dialogs,winui current windows app sdk,active,2026-08-13
|
|
10
|
+
9,Controls,Use BreadcrumbBar for hierarchy,Show navigation path in hierarchical apps,BreadcrumbBar for folder or category navigation,Manual TextBlock breadcrumb chain,"<BreadcrumbBar ItemsSource=""{x:Bind Breadcrumbs}""/>","<StackPanel Orientation=""Horizontal""><TextBlock Text=""Home > Settings > Display""/></StackPanel>",Low,https://learn.microsoft.com/en-us/windows/apps/develop/ui/controls/breadcrumbbar,winui current windows app sdk,active,2026-08-13
|
|
11
|
+
10,Styling,Use Lightweight Styling,Override control sub-properties via resources,Lightweight styling resource keys to tweak controls,Full ControlTemplate override for small changes,"<Button><Button.Resources><ResourceDictionary><ResourceDictionary.ThemeDictionaries><ResourceDictionary x:Key=""Light""><SolidColorBrush x:Key=""ButtonBackground"" Color=""MediumSlateBlue""/></ResourceDictionary></ResourceDictionary.ThemeDictionaries></ResourceDictionary></Button.Resources></Button>",Full ControlTemplate copy to change background color,High,https://learn.microsoft.com/en-us/windows/apps/develop/platform/xaml/xaml-styles#lightweight-styling,winui current windows app sdk,active,2026-08-13
|
|
12
|
+
11,Styling,Use WinUI theme resources,Consistent Fluent Design colors and brushes,WinUI theme resource keys for colors,Hardcoded hex color values,"Background=""{ThemeResource CardBackgroundFillColorDefaultBrush}""","Background=""#FF2D2D30""",High,https://learn.microsoft.com/en-us/windows/apps/design/signature-experiences/color,winui current windows app sdk,active,2026-08-13
|
|
13
|
+
12,Styling,Support light and dark themes,Respect user and system theme preference,ThemeResource for theme-adaptive values,Hardcoded colors that break in dark mode,"Foreground=""{ThemeResource TextFillColorPrimaryBrush}""","Foreground=""Black""",High,https://learn.microsoft.com/en-us/windows/apps/develop/platform/xaml/xaml-theme-resources,winui current windows app sdk,active,2026-08-13
|
|
14
|
+
13,Styling,Use Fluent Design system,Acrylic Mica Reveal and rounded corners,Built-in Fluent materials and effects,Custom blur and shadow implementations,"<Grid Background=""{ThemeResource AcrylicInAppFillColorDefaultBrush}""/>",Custom CompositionBrush recreating acrylic,Medium,https://learn.microsoft.com/en-us/windows/apps/design/signature-experiences/materials,winui current windows app sdk,active,2026-08-13
|
|
15
|
+
14,Navigation,Use Frame for page navigation,Microsoft.UI.Xaml.Controls.Frame for WinUI 3 page navigation,Frame.Navigate with page types and parameters,Swapping UserControls in a ContentControl,"rootFrame.Navigate(typeof(SettingsPage), parameter);",contentArea.Content = new SettingsControl();,Medium,https://learn.microsoft.com/en-us/windows/apps/develop/ui/navigation/navigate-between-two-pages,winui current windows app sdk,active,2026-08-13
|
|
16
|
+
15,Navigation,Pass typed navigation parameters,Type-safe data passing between pages,Typed parameter in OnNavigatedTo,Dictionary or string parsing for parameters,protected override void OnNavigatedTo(NavigationEventArgs e) { var item = (Item)e.Parameter; },var id = int.Parse(e.Parameter.ToString());,Medium,https://learn.microsoft.com/en-us/windows/apps/develop/ui/navigation/navigate-between-two-pages,winui current windows app sdk,active,2026-08-13
|
|
17
|
+
16,Navigation,Handle back navigation,WinUI 3 uses NavigationView.BackRequested instead of UWP SystemNavigationManager,Register NavigationView.BackRequested handler and manage back stack,Ignoring back navigation,navigationView.BackRequested += OnBackRequested;,No back button support,Medium,https://learn.microsoft.com/en-us/windows/apps/develop/ui/navigation/navigation-history-and-backwards-navigation,winui current windows app sdk,active,2026-08-13
|
|
18
|
+
17,Navigation,Use deep linking,Handle protocol activation so URIs route to the right page,Register protocol then check ExtendedActivationKind.Protocol on activation,Single entry point ignoring activation context,AppInstance.GetCurrent().GetActivatedEventArgs() with ExtendedActivationKind.Protocol,Ignoring activation arguments,Medium,https://learn.microsoft.com/en-us/windows/apps/windows-app-sdk/applifecycle/applifecycle-rich-activation,winui current windows app sdk,active,2026-08-13
|
|
19
|
+
18,Data Binding,Use ObservableCollection for lists,Notifies UI of collection changes,ObservableCollection<T> for bound ItemsSources,List<T> for bound collections,ObservableCollection<Item> Items { get; } = new();,List<Item> Items { get; set; } = new();,High,https://learn.microsoft.com/en-us/windows/apps/develop/data-binding/data-binding-in-depth,winui current windows app sdk,active,2026-08-13
|
|
20
|
+
19,Data Binding,Use INotifyPropertyChanged,Enable property change notification for UI updates,INotifyPropertyChanged on ViewModels,Properties without notification,"public string Name { get => _name; set => SetProperty(ref _name, value); }",public string Name { get; set; } without notification,High,https://learn.microsoft.com/en-us/windows/apps/develop/data-binding/data-binding-in-depth,winui current windows app sdk,active,2026-08-13
|
|
21
|
+
20,Data Binding,Use function binding with x:Bind,Call methods directly in bindings,x:Bind with method references for transforms,IValueConverter for simple logic,"<TextBlock Visibility=""{x:Bind local:Converters.BoolToVisibility(IsActive), Mode=OneWay}""/>",IValueConverter class for bool to visibility,Medium,https://learn.microsoft.com/en-us/windows/apps/develop/data-binding/function-bindings,winui current windows app sdk,active,2026-08-13
|
|
22
|
+
21,Data Binding,Specify Mode explicitly on x:Bind,x:Bind defaults to OneTime not OneWay,Mode=OneWay or Mode=TwoWay when updates needed,Forgetting Mode and getting stale UI,"Text=""{x:Bind Title, Mode=OneWay}""","Text=""{x:Bind Title}"" expecting live updates",High,https://learn.microsoft.com/en-us/windows/apps/develop/platform/xaml/x-bind-markup-extension,winui current windows app sdk,active,2026-08-13
|
|
23
|
+
22,Performance,Use ItemsRepeater for custom lists,Virtualizing layout with full control,ItemsRepeater for custom list layouts,ListView for highly customized item layouts,"<ItemsRepeater ItemsSource=""{x:Bind Items}""><ItemsRepeater.Layout><StackLayout/></ItemsRepeater.Layout></ItemsRepeater>",ListView with heavily modified template and removed chrome,Medium,https://learn.microsoft.com/en-us/windows/apps/develop/ui/controls/items-repeater,winui current windows app sdk,active,2026-08-13
|
|
24
|
+
23,Performance,Use incremental loading,Load data on demand as user scrolls,ISupportIncrementalLoading for large data sets,Loading entire dataset upfront,"class IncrementalItemSource : ObservableCollection<Item>, ISupportIncrementalLoading",await LoadAllItems() on page load for 10K items,Medium,https://learn.microsoft.com/en-us/windows/apps/develop/data-binding/data-binding-in-depth,winui current windows app sdk,active,2026-08-13
|
|
25
|
+
24,Performance,Reduce visual tree complexity,Simpler trees render faster,Minimal nesting in DataTemplates,Deeply nested panels in item templates,<StackPanel><TextBlock/><TextBlock/></StackPanel>,<Grid><Border><StackPanel><Grid>... 8 levels deep,Medium,https://learn.microsoft.com/en-us/windows/apps/develop/performance/optimize-xaml-loading,winui current windows app sdk,active,2026-08-13
|
|
26
|
+
25,Performance,Use compiled bindings over reflection,x:Bind generates code at compile time,x:Bind for hot paths and list items,{Binding} in DataTemplates and frequently updated UI,"<DataTemplate x:DataType=""local:Item""><TextBlock Text=""{x:Bind Name}""/></DataTemplate>","<DataTemplate><TextBlock Text=""{Binding Name}""/></DataTemplate>",High,https://learn.microsoft.com/en-us/windows/apps/develop/platform/xaml/x-bind-markup-extension,winui current windows app sdk,active,2026-08-13
|
|
27
|
+
26,Threading,Use DispatcherQueue not Dispatcher,WinUI 3 uses Microsoft.UI.Dispatching.DispatcherQueue instead of UWP CoreDispatcher,DispatcherQueue.TryEnqueue for UI thread access,Dispatcher.RunAsync (UWP pattern),"_dispatcherQueue.TryEnqueue(() => Status = ""Done"");","Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () => ...);",High,https://learn.microsoft.com/en-us/windows/windows-app-sdk/api/winrt/microsoft.ui.dispatching.dispatcherqueue,winui current windows app sdk,active,2026-08-13
|
|
28
|
+
27,Threading,Use async/await for IO operations,Keep UI responsive during file and network access,async/await for IO so the UI thread keeps rendering,Synchronous IO on UI thread,var data = await httpClient.GetStringAsync(url);,var data = httpClient.GetStringAsync(url).Result;,High,https://learn.microsoft.com/en-us/dotnet/csharp/asynchronous-programming/,winui current windows app sdk,active,2026-08-13
|
|
29
|
+
28,Threading,Use Task.Run for CPU-bound work,Offload compute to thread pool,Task.Run for heavy computation,Long-running CPU work on UI thread,var result = await Task.Run(() => ProcessLargeDataSet());,var result = ProcessLargeDataSet(); blocking UI,High,https://learn.microsoft.com/en-us/dotnet/standard/parallel-programming/task-based-asynchronous-programming,winui current windows app sdk,active,2026-08-13
|
|
30
|
+
29,Packaging,Use WinAppSDK correctly,Windows App SDK provides the runtime,WinAppSDK NuGet package and WindowsAppSDK bootstrapper,Mixing UWP and WinUI 3 APIs,"<PackageReference Include=""Microsoft.WindowsAppSDK""/>",Using Windows.UI.Xaml instead of Microsoft.UI.Xaml,High,https://learn.microsoft.com/en-us/windows/apps/windows-app-sdk/,winui current windows app sdk,active,2026-08-13
|
|
31
|
+
30,Packaging,Use unpackaged or packaged appropriately,Choose deployment model for your scenario,Packaged (MSIX) for Store distribution,Unpackaged without considering API limitations,<WindowsPackageType>None</WindowsPackageType> for unpackaged,Assuming all APIs work in unpackaged mode,Medium,https://learn.microsoft.com/en-us/windows/apps/windows-app-sdk/deploy-packaged-apps,winui current windows app sdk,active,2026-08-13
|
|
32
|
+
31,Packaging,Use single-project MSIX,Simplified packaging for single app,Single-project MSIX packaging,Separate WAP project when not needed,<EnableMsixTooling>true</EnableMsixTooling> in csproj,Separate Windows Application Packaging project for simple apps,Low,https://learn.microsoft.com/en-us/windows/apps/windows-app-sdk/single-project-msix,winui current windows app sdk,active,2026-08-13
|
|
33
|
+
32,Accessibility,Set AutomationProperties,Enable Narrator and screen reader support,AutomationProperties.Name on all interactive controls,Controls without accessible names,"<Button AutomationProperties.Name=""Save document""><FontIcon Glyph=""""/></Button>","<Button><FontIcon Glyph=""""/></Button> without name",High,https://learn.microsoft.com/en-us/windows/apps/design/accessibility/basic-accessibility-information,winui current windows app sdk,active,2026-08-13
|
|
34
|
+
33,Accessibility,Support keyboard navigation,Full keyboard accessibility,Tab navigation and access keys for all controls,Mouse-only interactions,"<Button AccessKey=""S"" Content=""Save""/>",Interactive elements unreachable by keyboard,High,https://learn.microsoft.com/en-us/windows/apps/develop/input/keyboard-interactions,winui current windows app sdk,active,2026-08-13
|
|
35
|
+
34,Accessibility,Use proper heading levels,Screen readers use headings for navigation,AutomationProperties.HeadingLevel on section headers,All text at same heading level,"<TextBlock AutomationProperties.HeadingLevel=""Level1"" Text=""Settings""/>","<TextBlock Style=""{StaticResource TitleTextBlockStyle}""/> without heading level",Medium,https://learn.microsoft.com/en-us/windows/apps/design/accessibility/basic-accessibility-information,winui current windows app sdk,active,2026-08-13
|
|
36
|
+
35,Accessibility,Support high contrast,Respect system high contrast settings,ThemeResource brushes that adapt to high contrast,Hardcoded colors ignoring high contrast,"Foreground=""{ThemeResource TextFillColorPrimaryBrush}""","Foreground=""#333333""",High,https://learn.microsoft.com/en-us/windows/apps/design/accessibility/high-contrast-themes,winui current windows app sdk,active,2026-08-13
|
|
37
|
+
36,Accessibility,Test with Accessibility Insights,Validate accessibility compliance,Accessibility Insights for Windows scanning,Manual accessibility checking only,Run Accessibility Insights FastPass on every page,Ship without accessibility testing,Medium,https://accessibilityinsights.io/,winui current windows app sdk,active,2026-08-13
|
|
38
|
+
37,Architecture,Use MVVM with CommunityToolkit,Source generators reduce boilerplate,[ObservableProperty] and [RelayCommand] attributes,Manual INotifyPropertyChanged and ICommand,[ObservableProperty] private string _title; [RelayCommand] private void Save() { },Full INotifyPropertyChanged implementation per property,Medium,https://learn.microsoft.com/en-us/dotnet/communitytoolkit/mvvm/,winui current windows app sdk,active,2026-08-13
|
|
39
|
+
38,Architecture,Use dependency injection,Register services with Microsoft.Extensions.DI,IServiceProvider for ViewModel and service resolution,new ViewModel() and new Service() everywhere,"services.AddTransient<MainViewModel>(); services.AddSingleton<IDataService, DataService>();",new MainViewModel(new DataService()) in code-behind,Medium,https://learn.microsoft.com/en-us/dotnet/core/extensions/dependency-injection/overview,winui current windows app sdk,active,2026-08-13
|
|
40
|
+
39,Architecture,Use Template Studio patterns,Start with proven architectural templates,Template Studio for WinUI 3 project scaffolding,Blank project with manual setup for complex apps,WinUI 3 Template Studio with MVVM and navigation,Blank App template for production app,Low,https://github.com/microsoft/TemplateStudio,winui current windows app sdk,active,2026-08-13
|
|
41
|
+
40,Architecture,Separate platform from business logic,Keep business logic in .NET Standard or shared libraries,Business logic in separate class library,Business logic mixed with WinUI types,Shared.Core project with no WinUI references,ViewModel importing Microsoft.UI.Xaml types,Medium,https://learn.microsoft.com/en-us/dotnet/communitytoolkit/mvvm/,winui current windows app sdk,active,2026-08-13
|
|
42
|
+
41,Architecture,Use WinUI 3 Window management,Proper window lifecycle management,AppWindow API for multi-window scenarios,Single Window assumption in complex apps,var appWindow = this.AppWindow;,Relying solely on MainWindow for everything,Medium,https://learn.microsoft.com/en-us/windows/apps/develop/ui/manage-app-windows,winui current windows app sdk,active,2026-08-13
|
|
43
|
+
42,Testing,Unit test ViewModels,Test logic independent of UI framework,xUnit or MSTest on ViewModel properties and commands,Testing through UI only,[Fact] public async Task LoadItems_PopulatesCollection() { await vm.LoadCommand.ExecuteAsync(null); Assert.NotEmpty(vm.Items); },Manual testing by running the app,Medium,https://learn.microsoft.com/en-us/dotnet/core/testing/unit-testing-best-practices,winui current windows app sdk,active,2026-08-13
|
|
44
|
+
43,Testing,Use WinAppDriver for UI tests,Automated UI testing for WinUI 3,WinAppDriver or Appium for end-to-end tests,Manual regression testing,"var element = session.FindElementByAccessibilityId(""SaveButton""); element.Click();",Click-through manual testing,Medium,https://github.com/microsoft/WinAppDriver,winui current windows app sdk,active,2026-08-13
|
|
45
|
+
44,Testing,Mock WinRT APIs in tests,Isolate tests from platform dependencies,Interface wrappers around WinRT APIs,Direct WinRT API calls in testable code,IFileService wrapping StorageFile APIs,StorageFile.GetFileFromPathAsync directly in ViewModel,Medium,https://learn.microsoft.com/en-us/dotnet/core/testing/unit-testing-best-practices,winui current windows app sdk,active,2026-08-13
|
|
46
|
+
45,Controls,Use NumberBox for numeric input,Built-in numeric entry with validation formatting and spin buttons,NumberBox with Minimum Maximum and SpinButtonPlacementMode,TextBox with manual numeric parsing and validation,"<NumberBox Value=""{x:Bind Quantity, Mode=TwoWay}"" Minimum=""0"" Maximum=""100"" SpinButtonPlacementMode=""Inline""/>",TextBox with regex validation for numbers,Medium,https://learn.microsoft.com/en-us/windows/apps/develop/ui/controls/number-box,winui current windows app sdk,active,2026-08-13
|
|
47
|
+
46,Controls,Use Expander for collapsible sections,Expandable content area with header for progressive disclosure,Expander for settings groups and optional content,Manual visibility toggling with buttons,"<Expander Header=""Advanced Settings""><StackPanel><ToggleSwitch Header=""Debug mode""/></StackPanel></Expander>",Button toggling StackPanel.Visibility for collapsible content,Low,https://learn.microsoft.com/en-us/windows/apps/develop/ui/controls/expander,winui current windows app sdk,active,2026-08-13
|
|
48
|
+
47,Controls,Use ProgressRing and ProgressBar for loading,Built-in loading indicators for determinate and indeterminate states,ProgressRing for indeterminate and ProgressBar for determinate progress,Custom spinning animation or text-based loading indicators,"<ProgressRing IsActive=""{x:Bind IsLoading, Mode=OneWay}""/>","<TextBlock Text=""Loading..."" Visibility=""{x:Bind IsLoading}""/>",Medium,https://learn.microsoft.com/en-us/windows/apps/develop/ui/controls/progress-controls,winui current windows app sdk,active,2026-08-13
|
|
49
|
+
48,Layout,Use VisualStateManager for responsive layouts,Adapt UI layout to window size using adaptive triggers,AdaptiveTrigger with MinWindowWidth for responsive breakpoints,Fixed layouts that break at different window sizes,"<VisualState><VisualState.StateTriggers><AdaptiveTrigger MinWindowWidth=""720""/></VisualState.StateTriggers><VisualState.Setters><Setter Target=""sidebar.Visibility"" Value=""Visible""/></VisualState.Setters></VisualState>",Fixed two-column layout at all window sizes,High,https://learn.microsoft.com/en-us/windows/apps/develop/ui/layouts-with-xaml,winui current windows app sdk,active,2026-08-13
|
|
50
|
+
49,Lifecycle,Handle app activation and launch,WinUI 3 apps receive activation events for URI and notification launches,Check LaunchActivatedEventArgs in OnLaunched for activation context,Ignoring activation arguments losing deep link context,"protected override void OnLaunched(LaunchActivatedEventArgs args) { if (args.Arguments.Contains(""settings"")) NavigateToSettings(); }",Empty OnLaunched ignoring all activation parameters,Medium,https://learn.microsoft.com/en-us/windows/apps/windows-app-sdk/applifecycle/applifecycle-rich-activation,winui current windows app sdk,active,2026-08-13
|
|
51
|
+
50,Lifecycle,Use single instancing with AppInstance,Prevent multiple app windows competing for resources,AppInstance.FindOrRegisterForKey for single-instance enforcement,Multiple instances with conflicting state,"var instance = AppInstance.FindOrRegisterForKey(""main""); if (!instance.IsCurrent) { await instance.RedirectActivationToAsync(args); }",No instance management allowing duplicate windows,Medium,https://learn.microsoft.com/en-us/windows/apps/windows-app-sdk/applifecycle/applifecycle-instancing,winui current windows app sdk,active,2026-08-13
|
|
52
|
+
51,Lifecycle,Save and restore app state,Persist UI state across app restarts for continuity (ApplicationData APIs require packaged apps; unpackaged apps must use file IO or registry),Save state to local settings on window close or navigation,Losing user context on every restart,"ApplicationData.Current.LocalSettings.Values[""lastPage""] = currentPage;",No state persistence losing navigation position on restart,Medium,https://learn.microsoft.com/en-us/windows/apps/develop/data/store-and-retrieve-app-data,winui current windows app sdk,active,2026-08-13
|
|
53
|
+
52,Styling,Choose Mica vs Acrylic by surface lifetime,Mica is for long-lived primary surfaces like main windows; Acrylic is for transient light-dismiss surfaces like flyouts and context menus,Mica on root window backgrounds and Acrylic on flyouts and overlays,Acrylic on the main window or Mica on transient flyouts,"<Window.SystemBackdrop><MicaBackdrop/></Window.SystemBackdrop> ... <FlyoutPresenter Background=""{ThemeResource AcrylicInAppFillColorDefaultBrush}""/>",Acrylic on every Window background causing battery and perf cost,Medium,https://learn.microsoft.com/en-us/windows/apps/design/signature-experiences/materials,winui current windows app sdk,active,2026-08-13
|
|
54
|
+
53,Styling,Set SystemBackdrop on Window directly,WinUI 3 1.3+ exposes Window.SystemBackdrop with MicaBackdrop and DesktopAcrylicBackdrop classes replacing manual MicaController plumbing,Window.SystemBackdrop in XAML or code,Hand-rolled MicaController wiring when SystemBackdrop API is available,"<Window.SystemBackdrop><MicaBackdrop Kind=""Base""/></Window.SystemBackdrop>",var ctrl = new Microsoft.UI.Composition.SystemBackdrops.MicaController(); ctrl.AddSystemBackdropTarget(this.As<ICompositionSupportsSystemBackdrop>());,Medium,https://learn.microsoft.com/en-us/windows/apps/develop/ui/system-backdrops,winui current windows app sdk,active,2026-08-13
|
|
55
|
+
54,Architecture,Open secondary windows with new Window,WinUI 3 supports multiple top-level windows; each Window owns an AppWindow accessible via Window.AppWindow for size and position control,new Window().Activate() for secondary windows tracking them in App state,Faking multi-window via main-window content swaps or ContentDialog,var settings = new SettingsWindow(); settings.Activate();,MainWindow.Content = new SettingsView(); when a separate window is needed,Medium,https://learn.microsoft.com/en-us/windows/apps/develop/ui/manage-app-windows,winui current windows app sdk,active,2026-08-13
|
|
56
|
+
55,Architecture,Extend client area into the title bar,Use Window.ExtendsContentIntoTitleBar with SetTitleBar to host custom XAML in the chrome while preserving caption buttons,ExtendsContentIntoTitleBar=true plus SetTitleBar(element) for custom drag region,Hardcoded chrome height or custom caption buttons that break with theme and size changes,this.ExtendsContentIntoTitleBar = true; this.SetTitleBar(AppTitleBar);,"Padding=""0,32,0,0"" to reserve space without SetTitleBar leaves window non-draggable",Medium,https://learn.microsoft.com/en-us/windows/apps/develop/title-bar,winui current windows app sdk,active,2026-08-13
|
|
57
|
+
56,Accessibility,Use KeyboardAccelerator for shortcuts,Map Ctrl/Alt/Shift combinations to commands using KeyboardAccelerator on UIElement,KeyboardAccelerator with Modifiers and Key on relevant controls,Manual KeyDown handlers swallowing shortcuts,"<Button Command=""{x:Bind SaveCommand}""><Button.KeyboardAccelerators><KeyboardAccelerator Modifiers=""Control"" Key=""S""/></Button.KeyboardAccelerators></Button>","Window.PreviewKeyDown=""OnKeyDown"" with switch over args.Key",High,https://learn.microsoft.com/en-us/windows/apps/develop/input/keyboard-accelerators,winui current windows app sdk,active,2026-08-13
|
|
58
|
+
57,Styling,Organize resources with merged dictionaries,Share styles and brushes via App.xaml MergedDictionaries instead of duplicating per page,MergedDictionaries in App.xaml for shared styles brushes and colors,Duplicating SolidColorBrush definitions on every page,"<Application.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><ResourceDictionary Source=""Themes/Brushes.xaml""/></ResourceDictionary.MergedDictionaries></ResourceDictionary></Application.Resources>",SolidColorBrush Color hardcoded inline on every page,Medium,https://learn.microsoft.com/en-us/windows/apps/develop/platform/xaml/xaml-resource-dictionary,winui current windows app sdk,active,2026-08-13
|
|
59
|
+
58,Architecture,Use AsyncRelayCommand for async commands,AsyncRelayCommand exposes IsRunning and supports cancellation for IO bound work,[RelayCommand] on async Task method or AsyncRelayCommand for IO work,async void event handlers or fire-and-forget Task.Run from button click,[RelayCommand] private async Task LoadAsync(CancellationToken ct) { Items = await _service.FetchAsync(ct); },"private async void Button_Click(object s, RoutedEventArgs e) { await LoadAsync(); }",Medium,https://learn.microsoft.com/en-us/dotnet/communitytoolkit/mvvm/asyncrelaycommand,winui current windows app sdk,active,2026-08-13
|
|
60
|
+
59,Architecture,Use ILogger for structured logging,Microsoft.Extensions.Logging ILogger<T> with DI for structured leveled logs,ILogger<T> injected via constructor for diagnostic logging,Debug.WriteLine or Console.WriteLine for app diagnostics,"public MainViewModel(ILogger<MainViewModel> logger) { _logger = logger; } _logger.LogInformation(""Loaded {Count} items"", count);","Debug.WriteLine($""Loaded {count} items"");",Medium,https://learn.microsoft.com/en-us/dotnet/core/extensions/logging/overview,winui current windows app sdk,active,2026-08-13
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
No,Category,Guideline,Description,Do,Don't,Code Good,Code Bad,Severity,Docs URL,Applies To,Status,Verified At
|
|
2
|
+
1,XAML,Use XAML for declarative UI,Define layout and visuals in XAML not code-behind,XAML for structure and styling,Build UI trees in C# code-behind,"<Button Content=""Save"" Click=""OnSave""/>","var btn = new Button(); btn.Content = ""Save"";",Low,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/xaml/,wpf current,active,2026-08-13
|
|
3
|
+
2,XAML,Set x:Class on root element,Connects XAML to its code-behind partial class,x:Class on Window UserControl and Page,Missing x:Class or mismatched namespace,"<Window x:Class=""MyApp.MainWindow"">",<Window> without x:Class,High,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/xaml/,wpf current,active,2026-08-13
|
|
4
|
+
3,XAML,Use x:Name sparingly,Only name elements accessed from code-behind,x:Name when code-behind reference is needed,Naming every element,"<TextBox x:Name=""SearchBox""/>",x:Name on every control,Low,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/xaml/,wpf current,active,2026-08-13
|
|
5
|
+
4,XAML,Prefer attached properties for layout,Grid.Row Grid.Column DockPanel.Dock etc,Attached properties for panel positioning,Margin hacks for alignment,"<Button Grid.Row=""1"" Grid.Column=""2""/>","<Button Margin=""200,100,0,0""/>",Medium,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/properties/attached-properties-overview,wpf current,active,2026-08-13
|
|
6
|
+
5,XAML,Use routed events for tree-wide handling,Events bubble up or tunnel down the element tree letting parents handle child events with one handler,Handler at parent using TypeName.EventName syntax with e.Handled=true when consumed,Wiring identical handlers on every child when one parent handler suffices,"<StackPanel Button.Click=""OnAnyButtonClick"">","Click=""OnClick"" repeated on every Button under a common parent",Medium,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/events/routed-events-overview,wpf current,active,2026-08-13
|
|
7
|
+
6,Data Binding,Implement INotifyPropertyChanged,Enable UI updates when properties change,INotifyPropertyChanged on ViewModels,Public properties without notification,public string Name { get => _name; set { if (_name != value) { _name = value; OnPropertyChanged(); } } },public string Name { get; set; } without notification,High,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/data/how-to-implement-property-change-notification,wpf current,active,2026-08-13
|
|
8
|
+
7,Data Binding,Use ObservableCollection for lists,Notifies UI of add remove and reset,ObservableCollection<T> for bound collections,List<T> or Array for bound ItemsSources,ObservableCollection<Item> Items { get; } = new();,List<Item> Items { get; set; } = new();,High,https://learn.microsoft.com/en-us/dotnet/api/system.collections.objectmodel.observablecollection-1,wpf current,active,2026-08-13
|
|
9
|
+
8,Data Binding,Set DataContext at the right level,Enables binding for the visual subtree,DataContext on Window or root container,DataContext on every child control,"<Window DataContext=""{Binding Source={StaticResource VM}}"">",Setting DataContext on each TextBlock individually,Medium,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/data/,wpf current,active,2026-08-13
|
|
10
|
+
9,Data Binding,Prefer Binding over code-behind assignments,Declarative binding keeps UI and logic separate,{Binding Path=Name} in XAML,textBlock.Text = viewModel.Name in code-behind,"<TextBlock Text=""{Binding Name}""/>",Loaded event handler that sets every property,Medium,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/data/data-binding-overview,wpf current,active,2026-08-13
|
|
11
|
+
10,Data Binding,Use UpdateSourceTrigger appropriately,Controls when source updates,PropertyChanged for instant feedback,Default LostFocus when search-as-you-type is needed,"Text=""{Binding Query, UpdateSourceTrigger=PropertyChanged}""","Text=""{Binding Query}"" when search-as-you-type needed",Medium,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/data/how-to-control-when-the-textbox-text-updates-the-source,wpf current,active,2026-08-13
|
|
12
|
+
11,Data Binding,Use IValueConverter for display transforms,Convert data for presentation without changing the model,IValueConverter for bool-to-visibility etc,Visibility properties on ViewModel,"<TextBlock Visibility=""{Binding IsActive, Converter={StaticResource BoolToVis}}""/>",public Visibility IsActiveVisibility => IsActive ? Visibility.Visible : Visibility.Collapsed;,Medium,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/data/how-to-convert-bound-data,wpf current,active,2026-08-13
|
|
13
|
+
12,Data Binding,Use INotifyDataErrorInfo for validation,Surface validation errors to the binding system instead of ad-hoc error UI,ObservableValidator with DataAnnotations attributes,Throwing in setters or maintaining separate error properties,public partial class FormVm : ObservableValidator { [ObservableProperty][NotifyDataErrorInfo][Required] private string _email; },"if (string.IsNullOrEmpty(Email)) ErrorMessage = ""Required"";",Medium,https://learn.microsoft.com/en-us/dotnet/communitytoolkit/mvvm/observablevalidator,wpf current,active,2026-08-13
|
|
14
|
+
13,Layout,Use Grid for complex layouts,Rows and columns with proportional or fixed sizing,Grid with RowDefinitions and ColumnDefinitions,Canvas with absolute positions for forms,"<Grid><Grid.RowDefinitions><RowDefinition Height=""Auto""/><RowDefinition Height=""*""/></Grid.RowDefinitions></Grid>","<Canvas><TextBox Canvas.Left=""50"" Canvas.Top=""80""/></Canvas>",Medium,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/controls/grid,wpf current,active,2026-08-13
|
|
15
|
+
14,Layout,Use StackPanel for linear content,Simple vertical or horizontal stacking,StackPanel for toolbars and simple lists,Grid with single column for linear content,"<StackPanel Orientation=""Horizontal""><Button/><Button/></StackPanel>",<Grid><Grid.RowDefinitions>..12 Auto rows..</Grid.RowDefinitions></Grid>,Medium,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/controls/stackpanel,wpf current,active,2026-08-13
|
|
16
|
+
15,Layout,Use DockPanel for docked regions,Dock children to edges with last child filling,DockPanel for shell layouts (menu top sidebar left),Nested StackPanels to simulate docking,"<DockPanel><Menu DockPanel.Dock=""Top""/><TreeView DockPanel.Dock=""Left""/><Frame/></DockPanel>",Nested StackPanels with fixed widths for shell,Medium,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/controls/dockpanel,wpf current,active,2026-08-13
|
|
17
|
+
16,Layout,Avoid hardcoded sizes,Use Auto Star and MinWidth/MaxWidth,Proportional sizing with * and Auto,Fixed pixel widths on resizable content,"<ColumnDefinition Width=""2*""/>","<ColumnDefinition Width=""350""/> on main content",Medium,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/controls/grid,wpf current,active,2026-08-13
|
|
18
|
+
17,Layout,Use ScrollViewer for overflow,Wrap content that may exceed available space,ScrollViewer around long forms or lists,Clipping content without scroll,<ScrollViewer><StackPanel>...long content...</StackPanel></ScrollViewer>,<StackPanel> that clips off-screen items,Medium,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/controls/scrollviewer,wpf current,active,2026-08-13
|
|
19
|
+
18,Styling,Use Resource Dictionaries,Centralize colors brushes and styles,ResourceDictionary in App.xaml for theme values,Inline colors and font sizes on every element,"<SolidColorBrush x:Key=""PrimaryBrush"" Color=""#0078D4""/>","<Button Background=""#0078D4""/> repeated everywhere",Medium,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/systems/xaml-resources-overview,wpf current,active,2026-08-13
|
|
20
|
+
19,Styling,Use pack URIs for embedded resources,Reference embedded images fonts and resource dictionaries via the pack scheme,"pack://application:,,, syntax for cross-assembly assets",File-system paths for resources compiled into the assembly,"<Image Source=""pack://application:,,,/MyApp;component/Resources/icon.png""/>","<Image Source=""C:\Resources\icon.png""/>",Medium,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/app-development/pack-uris-in-wpf,wpf current,active,2026-08-13
|
|
21
|
+
20,Styling,Use implicit styles,Apply a Style to all instances of a TargetType,Style with TargetType and no x:Key for defaults,Manually styling every Button instance,"<Style TargetType=""Button""><Setter Property=""Padding"" Value=""12,6""/></Style>","Padding=""12,6"" on every Button",Medium,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/controls/styles-templates-overview,wpf current,active,2026-08-13
|
|
22
|
+
21,Styling,Use explicit styles with x:Key and BasedOn,Named variant styles that inherit from a base via BasedOn,x:Key styles that BasedOn an implicit or named style,Duplicating setters across variants,"<Style x:Key=""PrimaryButton"" TargetType=""Button"" BasedOn=""{StaticResource {x:Type Button}}"">",Copy-pasting 10 Setters into a second Style,Medium,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/controls/styles-templates-overview,wpf current,active,2026-08-13
|
|
23
|
+
22,Styling,Prefer StaticResource over DynamicResource,StaticResource is resolved once and faster,StaticResource for values that do not change at runtime,DynamicResource for static theme values,"Background=""{StaticResource PrimaryBrush}""","Background=""{DynamicResource PrimaryBrush}"" when theme never changes",Medium,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/systems/xaml-resources-overview,wpf current,active,2026-08-13
|
|
24
|
+
23,Styling,Use ControlTemplate for full control,Override default rendering of a control,ControlTemplate when built-in styles are insufficient,Nesting extra panels to hide the default template,"<ControlTemplate TargetType=""Button""><Border><ContentPresenter/></Border></ControlTemplate>",Wrapping Button in Border to fake a custom look,Medium,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/controls/how-to-create-apply-template,wpf current,active,2026-08-13
|
|
25
|
+
24,Styling,Use DataTemplate for data presentation,Define how data objects render in ItemsControls,DataTemplate for ListBox ComboBox and ItemsControl items,ToString overrides for display,"<DataTemplate DataType=""{x:Type local:Person}""><TextBlock Text=""{Binding FullName}""/></DataTemplate>",Relying on ToString() in ListBox,Medium,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/data/data-templating-overview,wpf current,active,2026-08-13
|
|
26
|
+
25,Styling,Use Fluent theme on .NET 9+,ThemeMode applies the Windows 11 Fluent style; values are Light Dark System and None (default Aero2),ThemeMode on Application or Window,Legacy Aero2 styling for new Windows 11 apps,"<Application ThemeMode=""System"">",<Application> with default Aero2 look,Medium,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/whats-new/net90,wpf current,active,2026-08-13
|
|
27
|
+
26,Commands,Use ICommand for user actions,Decouple UI actions from logic,ICommand implementations (RelayCommand DelegateCommand),Click event handlers in code-behind,"<Button Command=""{Binding SaveCommand}""/>","<Button Click=""OnSaveClick""/> with logic in code-behind",High,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/advanced/commanding-overview,wpf current,active,2026-08-13
|
|
28
|
+
27,Commands,Use CanExecute for enable/disable,Automatically disable controls when action unavailable; call NotifyCanExecuteChanged when state changes,CanExecute returning false to disable buttons,IsEnabled binding to a separate bool,"new RelayCommand(Save, () => !IsBusy)","<Button IsEnabled=""{Binding IsNotBusy}""/>",Medium,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/advanced/commanding-overview,wpf current,active,2026-08-13
|
|
29
|
+
28,Commands,Use RelayCommand or DelegateCommand,Avoid implementing ICommand from scratch every time,RelayCommand (CommunityToolkit.Mvvm) or DelegateCommand (Prism),New ICommand class per command,[RelayCommand] private void Save() { },class SaveCommand : ICommand { ... } for each action,Medium,https://learn.microsoft.com/en-us/dotnet/communitytoolkit/mvvm/relaycommand,wpf current,active,2026-08-13
|
|
30
|
+
29,Commands,Use AsyncRelayCommand for async operations,Tracks IsRunning and disables the command while it executes preventing re-entry,AsyncRelayCommand or [RelayCommand] on async Task method,async void event handlers in code-behind,[RelayCommand] private async Task SaveAsync() { await _service.SaveAsync(); },"private async void OnSaveClick(object s, RoutedEventArgs e) { await _service.SaveAsync(); }",Medium,https://learn.microsoft.com/en-us/dotnet/communitytoolkit/mvvm/asyncrelaycommand,wpf current,active,2026-08-13
|
|
31
|
+
30,Commands,Use CommandParameter for context,Pass data from the UI element to the command handler,CommandParameter for item-specific actions,Relying on SelectedItem in every command,"<Button Command=""{Binding DeleteCommand}"" CommandParameter=""{Binding}""/>",Command handler accessing SelectedItem directly,Low,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/advanced/commanding-overview,wpf current,active,2026-08-13
|
|
32
|
+
31,Commands,Use InputBindings for keyboard shortcuts,Bind keyboard gestures to commands without manual key handling,KeyBinding inside Window.InputBindings,Custom key handling in PreviewKeyDown,"<Window.InputBindings><KeyBinding Key=""S"" Modifiers=""Ctrl"" Command=""{Binding SaveCommand}""/></Window.InputBindings>",PreviewKeyDown handler checking for Ctrl+S,Medium,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/advanced/commanding-overview,wpf current,active,2026-08-13
|
|
33
|
+
32,Performance,Use VirtualizingStackPanel for large lists,Only creates UI elements for visible items. ListBox/ListView virtualize by default; TreeView requires opt-in,VirtualizingStackPanel.IsVirtualizing=True (set on TreeView; default for ListBox),Disabling virtualization on long lists,"<TreeView VirtualizingStackPanel.IsVirtualizing=""True"" VirtualizingStackPanel.VirtualizationMode=""Recycling""/>","<ListBox ScrollViewer.CanContentScroll=""False""/>",High,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/advanced/optimizing-performance-controls,wpf current,active,2026-08-13
|
|
34
|
+
33,Performance,Freeze Freezable objects,Frozen brushes and geometries skip change tracking,Freeze brushes and pens that do not change,Mutable brushes used as static resources,var brush = new SolidColorBrush(Colors.Blue); brush.Freeze();,new SolidColorBrush() without Freeze in resources,Medium,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/advanced/freezable-objects-overview,wpf current,active,2026-08-13
|
|
35
|
+
34,Performance,Use DependencyProperty for custom-control binding targets,Binding target properties on custom controls must be DependencyProperties (sources can be plain CLR properties with INPC),Define DependencyProperty for properties bound TO on a custom control,Plain CLR properties as binding targets on custom controls,public static readonly DependencyProperty NameProperty = ...,public string Name { get; set; } as binding target on custom control,Medium,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/properties/dependency-properties-overview,wpf current,active,2026-08-13
|
|
36
|
+
35,Performance,Use async for long operations,Keep UI thread responsive,async/await with Task.Run for CPU work,Synchronous operations that freeze the UI,await Task.Run(() => HeavyComputation());,HeavyComputation() on UI thread,High,https://learn.microsoft.com/en-us/dotnet/csharp/asynchronous-programming/,wpf current,active,2026-08-13
|
|
37
|
+
36,Performance,Profile with PerfView and Visual Studio,Measure before optimizing,Visual Studio diagnostic tools and PerfView,Guessing at performance bottlenecks,Performance Profiler in Visual Studio (Alt+F2),Optimize without profiling,Medium,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/advanced/optimizing-wpf-application-performance,wpf current,active,2026-08-13
|
|
38
|
+
37,Threading,Use Dispatcher for UI updates,UI elements can only be accessed from the UI thread,Dispatcher.Invoke or BeginInvoke from background threads,Accessing UI elements from background threads,"Application.Current.Dispatcher.Invoke(() => Status = ""Done"");","textBlock.Text = ""Done"" from Task.Run",High,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/advanced/threading-model,wpf current,active,2026-08-13
|
|
39
|
+
38,Threading,Prefer async/await over Dispatcher,Modern async code returns to UI context automatically,async/await which resumes on captured SynchronizationContext,Manual Dispatcher.BeginInvoke for every callback,var data = await LoadDataAsync(); Items = data;,Dispatcher.BeginInvoke(() => Items = result) in callback,Medium,https://learn.microsoft.com/en-us/dotnet/csharp/asynchronous-programming/,wpf current,active,2026-08-13
|
|
40
|
+
39,Threading,Use Task.Run for CPU-bound work,Offload intensive work from UI thread,Task.Run for compute-bound work,Long-running computations on UI thread,var result = await Task.Run(() => Compute());,var result = Compute(); on UI thread,High,https://learn.microsoft.com/en-us/dotnet/standard/parallel-programming/task-based-asynchronous-programming,wpf current,active,2026-08-13
|
|
41
|
+
40,Threading,Report progress from background tasks,Update UI with progress during long operations,IProgress<T> with Task.Run,Polling a shared variable for progress,var progress = new Progress<int>(p => ProgressBar.Value = p); await Task.Run(() => Work(progress));,while (!done) { Thread.Sleep(100); check shared int; },Medium,https://learn.microsoft.com/en-us/dotnet/api/system.progress-1,wpf current,active,2026-08-13
|
|
42
|
+
41,Threading,Handle DispatcherUnhandledException,Catch unhandled UI-thread exceptions to log them and prevent the default WPF crash dialog,Subscribe in App.xaml or App.OnStartup and set e.Handled=true after logging,Letting WPF show its default crash dialog and silently shut down,"<Application DispatcherUnhandledException=""App_OnUnhandledException"">",No global handler so any unhandled exception crashes the app,High,https://learn.microsoft.com/en-us/dotnet/api/system.windows.application.dispatcherunhandledexception,wpf current,active,2026-08-13
|
|
43
|
+
42,Accessibility,Set AutomationProperties,Enable screen reader support,AutomationProperties.Name on interactive controls,Controls without automation names,"<Button AutomationProperties.Name=""Save document""/>","<Button><Image Source=""save.png""/></Button> without name",High,https://learn.microsoft.com/en-us/dotnet/api/system.windows.automation.automationproperties,wpf current,active,2026-08-13
|
|
44
|
+
43,Accessibility,Support keyboard navigation,All functionality reachable via keyboard,Tab order and KeyboardNavigation properties,Mouse-only interactions,"<StackPanel KeyboardNavigation.TabNavigation=""Cycle"">",Click handlers with no keyboard equivalent,High,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/advanced/focus-overview,wpf current,active,2026-08-13
|
|
45
|
+
44,Accessibility,Support high contrast themes,Respect Windows high contrast settings,SystemColors and SystemFonts resources,Hardcoded colors that disappear in high contrast,"Foreground=""{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}""","Foreground=""#333333"" everywhere",Medium,https://learn.microsoft.com/en-us/dotnet/framework/ui-automation/accessibility-best-practices,wpf current,active,2026-08-13
|
|
46
|
+
45,Accessibility,Use appropriate control types,Semantic controls convey role to assistive tech,Button for actions CheckBox for toggles,Styled TextBlock with click handler as fake button,"<Button Content=""Submit""/>","<TextBlock MouseDown=""OnSubmitClick"" Text=""Submit""/>",High,https://learn.microsoft.com/en-us/dotnet/framework/ui-automation/accessibility-best-practices,wpf current,active,2026-08-13
|
|
47
|
+
46,Accessibility,Support DPI scaling,Ensure UI is crisp at all display scale factors,Device-independent units and vector graphics,Pixel-based bitmaps that blur at high DPI,"<Path Data=""M 10,10 L 20,20""/> or DrawingImage","<Image Source=""icon_32x32.png""/> at 200% scaling",Medium,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/graphics-multimedia/graphics,wpf current,active,2026-08-13
|
|
48
|
+
47,Accessibility,Declare PerMonitorV2 DPI awareness,WPF defaults to System-DPI-aware unless you opt into PerMonitorV2 via app.manifest,app.manifest with dpiAwareness PerMonitorV2,Default System DPI awareness for Windows 10/11 apps,"<dpiAwareness xmlns=""http://schemas.microsoft.com/SMI/2016/WindowsSettings"">PerMonitorV2</dpiAwareness>",No app.manifest leaving app at System DPI,Medium,https://learn.microsoft.com/en-us/windows/win32/hidpi/high-dpi-desktop-application-development-on-windows,wpf current,active,2026-08-13
|
|
49
|
+
48,Architecture,Use MVVM pattern,Separate View ViewModel and Model concerns,MVVM with data binding and commands,Logic in code-behind,ViewModel with INotifyPropertyChanged and ICommand,MainWindow.xaml.cs with all business logic,High,https://learn.microsoft.com/en-us/dotnet/communitytoolkit/mvvm/,wpf current,active,2026-08-13
|
|
50
|
+
49,Architecture,Override App.OnStartup for app initialization,Wire DI build the host resolve MainWindow and parse command-line args in OnStartup,Override OnStartup when DI or argument parsing is needed,Relying on StartupUri when MainWindow needs constructor injection,protected override void OnStartup(StartupEventArgs e) { _host.Start(); _host.Services.GetRequiredService<MainWindow>().Show(); },"<Application StartupUri=""MainWindow.xaml""/> when MainWindow has constructor dependencies",Medium,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/app-development/application-management-overview,wpf current,active,2026-08-13
|
|
51
|
+
50,Architecture,Use dependency injection,Wire Microsoft.Extensions.Hosting Generic Host in App.OnStartup and resolve ViewModels from the container,Generic Host with Microsoft.Extensions.DependencyInjection,new Service() in ViewModel constructors,services.AddTransient<MainViewModel>();,new MainViewModel(new DataService()) in App.xaml.cs,Medium,https://learn.microsoft.com/en-us/dotnet/core/extensions/dependency-injection/overview,wpf current,active,2026-08-13
|
|
52
|
+
51,Architecture,Use CommunityToolkit.Mvvm,Source generators reduce MVVM boilerplate,[ObservableProperty] and [RelayCommand] attributes,Hand-written INotifyPropertyChanged for every property,[ObservableProperty] private string _name;,private string _name; public string Name { get ... set ... OnPropertyChanged ... },Medium,https://learn.microsoft.com/en-us/dotnet/communitytoolkit/mvvm/,wpf current,active,2026-08-13
|
|
53
|
+
52,Architecture,Keep code-behind minimal,Code-behind should only contain view-specific logic,View logic like focus management and animations in code-behind,Business logic and data access in code-behind,Loaded handler that sets initial focus,Loaded handler that calls database and populates grid,Medium,https://learn.microsoft.com/en-us/dotnet/desktop/wpf/xaml/,wpf current,active,2026-08-13
|
|
54
|
+
53,Architecture,Use messaging for loose coupling,Communicate between ViewModels without references,WeakReferenceMessenger from CommunityToolkit.Mvvm,Direct ViewModel-to-ViewModel references,WeakReferenceMessenger.Default.Send(new ItemSavedMessage(item));,MainViewModel.Instance.RefreshItems() from DetailViewModel,Medium,https://learn.microsoft.com/en-us/dotnet/communitytoolkit/mvvm/messenger,wpf current,active,2026-08-13
|
|
55
|
+
54,Testing,Unit test ViewModels,Test business logic independent of UI,xUnit or NUnit tests on ViewModel methods and properties,Manual testing through the UI only,[Fact] public void Save_WhenValid_SetsIsBusy() { vm.Save(); Assert.True(vm.IsBusy); },Clicking buttons in the running app to verify,Medium,https://learn.microsoft.com/en-us/dotnet/communitytoolkit/mvvm/,wpf current,active,2026-08-13
|
|
56
|
+
55,Testing,Mock services in tests,Isolate ViewModel from external dependencies,Moq or NSubstitute for service interfaces,Real database calls in unit tests,var mock = new Mock<IDataService>(); var vm = new MainViewModel(mock.Object);,new MainViewModel(new SqlDataService()) in tests,Medium,https://learn.microsoft.com/en-us/dotnet/core/testing/unit-testing-best-practices,wpf current,active,2026-08-13
|
|
57
|
+
56,Testing,Use UI Automation for integration tests,Automated UI testing with Microsoft UI Automation,FlaUI or Appium 2 (appium-windows-driver) for end-to-end tests,Manual regression testing only,"AutomationElement.FindFirst(TreeScope.Children, condition)",Manual click-through testing,Medium,https://learn.microsoft.com/en-us/dotnet/framework/ui-automation/ui-automation-overview,wpf current,active,2026-08-13
|