npm - @tinkcarlos/skillora - Versions diffs - 0.2.0 - Mend

@tinkcarlos/skillora 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (234) hide show

package/.claude/skills/code-review/references/frontend-advanced.md ADDED Viewed

@@ -0,0 +1,654 @@
+# Advanced Frontend Review Patterns
+Deep dive into CSS, responsive design, browser compatibility, Vue.js, and advanced frontend concerns.
+## CSS Issues
+### Specificity Problems
+```css
+/* 🚫 Over-specific selectors */
+div#main .container ul li a.nav-link { color: blue; }
+/* Hard to override without !important */
+/* ✅ Flat, composable classes */
+.nav-link { color: blue; }
+.nav-link--active { color: red; }
+```
+```css
+/* 🚫 !important abuse */
+.button {
+  background: blue !important;
+  color: white !important;
+}
+/* ✅ Proper cascade management */
+.button { background: blue; color: white; }
+.button.button--danger { background: red; }
+```
+### Z-Index Chaos
+```css
+/* 🚫 Magic z-index values */
+.modal { z-index: 9999; }
+.tooltip { z-index: 99999; }
+.dropdown { z-index: 999999; } /* Race to infinity */
+/* ✅ Z-index scale system */
+:root {
+  --z-dropdown: 100;
+  --z-sticky: 200;
+  --z-modal: 300;
+  --z-tooltip: 400;
+  --z-notification: 500;
+}
+.modal { z-index: var(--z-modal); }
+```
+### Layout Issues
+```css
+/* 🚫 Fixed heights breaking content */
+.card { height: 200px; } /* Text overflow on long content */
+/* ✅ Min-height for flexibility */
+.card { min-height: 200px; }
+```
+```css
+/* 🚫 Horizontal scroll from 100vw */
+.container { width: 100vw; } /* Includes scrollbar! */
+/* ✅ Use 100% of parent */
+.container { width: 100%; }
+```
+```css
+/* 🚫 Flexbox without flex-wrap */
+.row { display: flex; }
+/* Items shrink to 0 or overflow */
+/* ✅ Allow wrapping */
+.row { display: flex; flex-wrap: wrap; }
+```
+### CSS Grid Issues
+```css
+/* 🚫 Fixed columns on mobile */
+.grid { display: grid; grid-template-columns: repeat(4, 1fr); }
+/* ✅ Responsive auto-fit */
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1rem;
+}
+```
+## Responsive Design
+### Breakpoint Anti-Patterns
+```css
+/* 🚫 Device-specific breakpoints */
+@media (width: 375px) { } /* Only iPhone SE? */
+@media (width: 414px) { } /* Only iPhone Plus? */
+/* ✅ Content-based breakpoints */
+@media (min-width: 40rem) { } /* When content needs more space */
+@media (min-width: 60rem) { }
+```
+```css
+/* 🚫 Desktop-first (harder to maintain) */
+.sidebar { width: 300px; }
+@media (max-width: 768px) { .sidebar { display: none; } }
+/* ✅ Mobile-first */
+.sidebar { display: none; }
+@media (min-width: 768px) { .sidebar { width: 300px; display: block; } }
+```
+### Touch Target Issues
+```css
+/* 🚫 Tiny touch targets */
+.icon-button { width: 24px; height: 24px; }
+/* ✅ Minimum 44x44px for touch */
+.icon-button {
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+```
+### Viewport Issues
+```html
+<!-- 🚫 Missing viewport meta -->
+<head><title>App</title></head>
+<!-- ✅ Proper viewport -->
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>App</title>
+</head>
+```
+```css
+/* 🚫 100vh on mobile (broken by address bar) */
+.fullscreen { height: 100vh; }
+/* ✅ Use svh/dvh or JS fallback */
+.fullscreen { height: 100svh; }
+/* Or with CSS custom property set by JS */
+.fullscreen { height: var(--vh, 100vh); }
+```
+## Browser Compatibility
+### Feature Detection
+```javascript
+// 🚫 Browser sniffing
+if (navigator.userAgent.includes('Safari')) {
+  // Fragile and often wrong
+}
+// ✅ Feature detection
+if ('IntersectionObserver' in window) {
+  // Use IntersectionObserver
+} else {
+  // Polyfill or fallback
+}
+```
+### CSS Feature Queries
+```css
+/* ✅ Progressive enhancement */
+.container { display: flex; }
+@supports (display: grid) {
+  .container { display: grid; }
+}
+@supports (aspect-ratio: 1) {
+  .video { aspect-ratio: 16/9; }
+}
+```
+### Common Compatibility Issues
+```css
+/* 🚫 gap in flexbox (older Safari) */
+.flex { display: flex; gap: 1rem; }
+/* ✅ Fallback for older browsers */
+.flex { display: flex; }
+.flex > * + * { margin-left: 1rem; }
+@supports (gap: 1rem) {
+  .flex { gap: 1rem; }
+  .flex > * + * { margin-left: 0; }
+}
+```
+## Vue.js Patterns
+### Reactivity Gotchas
+```javascript
+// 🚫 Adding new properties (Vue 2)
+this.user.newProp = 'value'; // Not reactive!
+// ✅ Vue 2: Use $set
+this.$set(this.user, 'newProp', 'value');
+// ✅ Vue 3: Refs are deeply reactive
+const user = ref({ name: 'John' });
+user.value.newProp = 'value'; // Reactive
+```
+```javascript
+// 🚫 Destructuring reactive objects
+const { count } = reactive({ count: 0 });
+// count is now a plain number, not reactive
+// ✅ Use toRefs
+const state = reactive({ count: 0 });
+const { count } = toRefs(state);
+// count.value is reactive
+```
+### Composition API Issues
+```javascript
+// 🚫 Forgetting to return from setup
+setup() {
+  const count = ref(0);
+  function increment() { count.value++ }
+  // Missing return!
+}
+// ✅ Return or use <script setup>
+setup() {
+  const count = ref(0);
+  const increment = () => count.value++;
+  return { count, increment };
+}
+// ✅ Or <script setup> (auto-exposed)
+<script setup>
+const count = ref(0);
+const increment = () => count.value++;
+</script>
+```
+### Performance
+```javascript
+// 🚫 Heavy computation in template
+<template>
+  <div v-for="item in items.filter(x => x.active).sort((a,b) => a.date - b.date)">
+// ✅ Use computed
+const sortedActiveItems = computed(() =>
+  items.value.filter(x => x.active).sort((a,b) => a.date - b.date)
+);
+```
+```javascript
+// 🚫 v-if with v-for
+<li v-for="user in users" v-if="user.active">
+// ✅ Computed filter or template wrapper
+<li v-for="user in activeUsers">
+// OR
+<template v-for="user in users">
+  <li v-if="user.active">
+</template>
+```
+## Form Handling
+### Validation Issues
+```typescript
+// 🚫 Only client-side validation
+const handleSubmit = () => {
+  if (isValidEmail(email)) {
+    api.createUser({ email });
+  }
+};
+// ✅ Client + Server validation
+const handleSubmit = async () => {
+  if (!isValidEmail(email)) {
+    setError('email', 'Invalid email');
+    return;
+  }
+  try {
+    await api.createUser({ email });
+  } catch (e) {
+    if (e.code === 'EMAIL_EXISTS') {
+      setError('email', 'Email already registered');
+    }
+  }
+};
+```
+### Input Handling
+```typescript
+// 🚫 Uncontrolled to controlled switch
+const [value, setValue] = useState(); // undefined initially
+<input value={value} onChange={e => setValue(e.target.value)} />
+// Warning: uncontrolled to controlled
+// ✅ Initialize with empty string
+const [value, setValue] = useState('');
+```
+```typescript
+// 🚫 No debounce on search
+<input onChange={e => searchApi(e.target.value)} />
+// API call on every keystroke
+// ✅ Debounced search
+const debouncedSearch = useMemo(
+  () => debounce(searchApi, 300),
+  []
+);
+<input onChange={e => debouncedSearch(e.target.value)} />
+```
+## Bundle Size
+### Import Analysis
+```typescript
+// 🚫 Importing entire library
+import _ from 'lodash';
+_.debounce(fn, 300);
+// Bundles entire lodash (~70KB)
+// ✅ Cherry-pick imports
+import debounce from 'lodash/debounce';
+debounce(fn, 300);
+// Only ~2KB
+```
+```typescript
+// 🚫 Importing heavy components directly
+import { DataGrid } from 'heavy-ui-library';
+// ✅ Dynamic import for heavy components
+const DataGrid = lazy(() => import('heavy-ui-library/DataGrid'));
+```
+### Tree Shaking Issues
+```typescript
+// 🚫 Re-exporting everything (breaks tree shaking)
+// utils/index.ts
+export * from './string';
+export * from './date';
+export * from './number';
+// ✅ Explicit exports
+// utils/index.ts
+export { formatDate } from './date';
+export { capitalize } from './string';
+```
+## Accessibility (a11y) Deep Dive
+### Focus Management
+```typescript
+// 🚫 No focus management in modal
+function Modal({ isOpen }) {
+  return isOpen ? <div className="modal">...</div> : null;
+}
+// ✅ Trap focus and restore on close
+function Modal({ isOpen, onClose }) {
+  const modalRef = useRef();
+  const previousFocus = useRef();
+  useEffect(() => {
+    if (isOpen) {
+      previousFocus.current = document.activeElement;
+      modalRef.current?.focus();
+    } else {
+      previousFocus.current?.focus();
+    }
+  }, [isOpen]);
+  return isOpen ? (
+    <FocusTrap>
+      <div ref={modalRef} role="dialog" aria-modal="true" tabIndex={-1}>
+        ...
+      </div>
+    </FocusTrap>
+  ) : null;
+}
+```
+### Screen Reader Issues
+```html
+<!-- 🚫 Icon button without label -->
+<button><svg>...</svg></button>
+<!-- ✅ Accessible icon button -->
+<button aria-label="Close dialog">
+  <svg aria-hidden="true">...</svg>
+</button>
+```
+```html
+<!-- 🚫 Image without alt -->
+<img src="chart.png">
+<!-- ✅ Descriptive alt -->
+<img src="chart.png" alt="Sales increased 25% from Q1 to Q2">
+<!-- ✅ Decorative image -->
+<img src="decoration.png" alt="" role="presentation">
+```
+### ARIA Mistakes
+```html
+<!-- 🚫 Redundant ARIA -->
+<button role="button">Click</button>
+<a href="/" role="link">Home</a>
+<!-- ✅ Native semantics sufficient -->
+<button>Click</button>
+<a href="/">Home</a>
+```
+```html
+<!-- 🚫 Div with click handler (not accessible) -->
+<div onClick={handleClick}>Click me</div>
+<!-- ✅ Use button or add proper ARIA -->
+<button onClick={handleClick}>Click me</button>
+<!-- Or if div required: -->
+<div
+  role="button"
+  tabIndex={0}
+  onClick={handleClick}
+  onKeyDown={(e) => e.key === 'Enter' && handleClick()}
+>Click me</div>
+```
+## SSR/SSG Issues
+### Hydration Mismatches
+```typescript
+// 🚫 Client-only values during render
+function Component() {
+  return <div>Time: {new Date().toISOString()}</div>;
+  // Different on server vs client!
+}
+// ✅ useEffect for client-only values
+function Component() {
+  const [time, setTime] = useState<string>();
+  useEffect(() => setTime(new Date().toISOString()), []);
+  return <div>Time: {time ?? 'Loading...'}</div>;
+}
+```
+```typescript
+// 🚫 Accessing window during SSR
+function Component() {
+  const width = window.innerWidth; // window undefined on server!
+}
+// ✅ Guard window access
+function Component() {
+  const [width, setWidth] = useState(0);
+  useEffect(() => {
+    setWidth(window.innerWidth);
+  }, []);
+}
+```
+### Data Fetching
+```typescript
+// 🚫 Fetching in component (waterfall)
+function Page() {
+  const [data, setData] = useState();
+  useEffect(() => {
+    fetchData().then(setData);
+  }, []);
+  // Renders blank, then fetches, then re-renders
+}
+// ✅ Server-side data fetching (Next.js example)
+export async function getServerSideProps() {
+  const data = await fetchData();
+  return { props: { data } };
+}
+function Page({ data }) {
+  // Data available on first render
+}
+```
+## TypeScript/React Critical Bug Patterns
+### Type Safety Violations
+```typescript
+// 🚫 Using `any` defeats type safety
+function processData(data: any) {
+    return data.value;  // No type checking, runtime crash if value undefined
+}
+// ✅ Use proper types
+interface DataPayload {
+    value: string;
+    count?: number;
+}
+function processData(data: DataPayload) {
+    return data.value;  // Type-safe access
+}
+// 🚫 Type assertion without validation
+const user = JSON.parse(response) as User;  // Could be anything!
+// ✅ Runtime validation with type guard
+function isUser(obj: unknown): obj is User {
+    return obj !== null &&
+           typeof obj === 'object' &&
+           'id' in obj &&
+           'name' in obj;
+}
+const parsed = JSON.parse(response);
+if (!isUser(parsed)) throw new Error('Invalid user data');
+```
+### Props Mutation (Critical React Anti-Pattern)
+```typescript
+// 🚫 Mutating props - breaks React's immutability contract
+function UserProfile({ user }: Props) {
+    user.lastViewed = new Date();  // 💀 Direct prop mutation!
+    user.visits++;                  // 💀 Side effect in render
+    return <div>{user.name}</div>;
+}
+// ✅ Use callbacks to notify parent
+function UserProfile({ user, onView }: Props) {
+    useEffect(() => {
+        onView(user.id, new Date());  // Parent handles state update
+    }, [user.id, onView]);
+    return <div>{user.name}</div>;
+}
+// 🚫 Mutating nested objects in state
+const [user, setUser] = useState({ profile: { name: 'John' } });
+user.profile.name = 'Jane';  // 💀 Mutation won't trigger re-render
+setUser(user);               // 💀 Same reference, no update
+// ✅ Immutable update
+setUser(prev => ({
+    ...prev,
+    profile: { ...prev.profile, name: 'Jane' }
+}));
+```
+### Async Error Handling Gaps
+```typescript
+// 🚫 No error handling on fetch
+async function fetchUser(id: string) {
+    const response = await fetch(`/api/users/${id}`);
+    return response.json();  // 💀 Crashes if network fails or 404
+}
+// ✅ Complete error handling
+async function fetchUser(id: string): Promise<User> {
+    try {
+        const response = await fetch(`/api/users/${id}`);
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        return await response.json();
+    } catch (error) {
+        console.error('Failed to fetch user:', error);
+        throw error;  // Re-throw for caller to handle
+    }
+}
+// 🚫 Unhandled promise in event handler
+function Button() {
+    const handleClick = () => {
+        submitForm();  // 💀 Promise ignored, errors swallowed
+    };
+    return <button onClick={handleClick}>Submit</button>;
+}
+// ✅ Handle async in event handler
+function Button() {
+    const [error, setError] = useState<Error | null>(null);
+    const handleClick = async () => {
+        try {
+            await submitForm();
+        } catch (e) {
+            setError(e as Error);
+        }
+    };
+    return <button onClick={handleClick}>Submit</button>;
+}
+```
+### useCallback/useMemo Pitfalls
+```typescript
+// 🚫 Inline function creates new reference every render
+<Button onClick={() => handleSubmit(formData)} />
+// Child re-renders even if formData unchanged
+// ✅ Memoize callback
+const handleClick = useCallback(() => {
+    handleSubmit(formData);
+}, [formData]);
+<Button onClick={handleClick} />
+// 🚫 Missing dependency in useCallback
+const handleSave = useCallback(() => {
+    save(currentData);  // 💀 Stale closure - uses old currentData
+}, []);  // Missing currentData dependency
+// ✅ Include all dependencies
+const handleSave = useCallback(() => {
+    save(currentData);
+}, [currentData]);
+```
+**Detection commands**:
+```bash
+# Find `any` type usage
+grep -rn ": any" --include="*.ts" --include="*.tsx"
+# Find potential props mutation (assignment in function body)
+grep -rn "props\.\w* =" --include="*.tsx"
+# Find fetch without error check
+grep -rn "await fetch" --include="*.ts" --include="*.tsx" -A 2 | grep -v "response.ok\|try\|catch"
+```