feat: biblioteca inteligente libs/ + 5 novas skills (20 skills total)
NOVAS SKILLS: - next-best-practices v0.1.0 (CLEAN) — Next.js App Router, RSC, caching, data - nextjs-patterns v1.0.0 (CLEAN) — Next.js 15: Server Actions, route handlers - vite v1.0.0 (CLEAN) — env vars, aliases, proxy, CJS compat - uncle-bob v1.0.0 (CLEAN) — Clean Code, SOLID, Clean Architecture - clean-code-review v1.0.0 (CLEAN) — naming, guard clauses, anti-patterns, refactoring - vue v1.0.0 (CLEAN) — Vue framework - vue-composition-api-best-practices v1.0.0 (CLEAN) — composables, Pinia, reactivity BIBLIOTECA INTELIGENTE libs/ (10 dominios, 11 arquivos): - typescript/ — TS safe + generics gotchas - react/ — Next.js App Router + Vite config - vue/ — Composition API + Pinia - linux/ — System diagnostic cheatsheet - database/ — PostgreSQL + MySQL patterns - browser/ — Chromium CLI + E2E testing - security/ — SAST audit (OWASP Top 10) - best-practices/ — Clean Code + SOLID + Clean Architecture - deploy/ — Docker multi-stack + OpenClaw ops - + INDEX.md como guia de navegacao .learnings/ — LRN-20260519-003 criado (biblioteca compartilhada)
This commit is contained in:
@@ -0,0 +1,57 @@
|
||||
# Component Patterns
|
||||
|
||||
## Props Best Practices
|
||||
|
||||
- Type your props: `defineProps<{msg: string, count?: number}>()`
|
||||
- Required props have no `?`—TypeScript enforces
|
||||
- Default values: `withDefaults(defineProps<Props>(), {count: 0})`
|
||||
- Props are readonly—never mutate, emit event to parent instead
|
||||
|
||||
## Emit Patterns
|
||||
|
||||
- Type your emits: `defineEmits<{(e: 'update', value: string): void}>()`
|
||||
- Emit returns boolean if event handler returns false
|
||||
- Vue 3.3+ shorthand: `defineEmits<{update: [value: string]}>()`
|
||||
- Always emit for changes—maintain one-way data flow
|
||||
|
||||
## v-model Patterns
|
||||
|
||||
- `v-model` = `:modelValue` + `@update:modelValue`
|
||||
- Multiple v-model: `v-model:title`, `v-model:content`—different props
|
||||
- `defineModel()` (3.4+) creates ref that syncs automatically—much simpler
|
||||
- v-model modifiers: `.trim`, `.number`, `.lazy`—access via `modelModifiers`
|
||||
|
||||
## Slots Patterns
|
||||
|
||||
- Default slot: `<slot></slot>`—or `<slot>fallback content</slot>`
|
||||
- Named slots: `<slot name="header">` + `<template #header>`
|
||||
- Scoped slots: `<slot :item="item">` + `<template #default="{item}">`
|
||||
- `$slots.header?.()` to check if slot provided
|
||||
|
||||
## Dynamic Components
|
||||
|
||||
- `<component :is="componentName">`—switch between components
|
||||
- `<KeepAlive>` preserves state when switching—cached in memory
|
||||
- `include`/`exclude` props on KeepAlive—control which are cached
|
||||
- `max` prop limits cache size—LRU eviction
|
||||
|
||||
## Async Components
|
||||
|
||||
- `defineAsyncComponent(() => import('./Comp.vue'))`—lazy loading
|
||||
- Loading component: `loadingComponent` option—shown while loading
|
||||
- Error component: `errorComponent` option—shown on load failure
|
||||
- Combine with `<Suspense>` for coordinated loading states
|
||||
|
||||
## Teleport
|
||||
|
||||
- `<Teleport to="body">`—render content outside component tree
|
||||
- Useful for modals, dropdowns, tooltips—need to escape overflow/z-index
|
||||
- `disabled` prop for conditional teleporting
|
||||
- Events still bubble in Vue component tree—not DOM tree
|
||||
|
||||
## Provide/Inject
|
||||
|
||||
- `provide('key', value)` in ancestor—available to all descendants
|
||||
- `inject('key', defaultValue)` to receive
|
||||
- Provide reactive value for reactive inject—`provide('count', ref(0))`
|
||||
- Symbol keys for type safety—avoid string collisions
|
||||
Reference in New Issue
Block a user