component-builder

React 19 + Server Component patterns from official Vercel/React docs. Component templates, hooks patterns, RSC boundaries, performance optimization.

Jump to install

Repository: ktg-one/goodai-mate
Last source activity: May 17, 2026 at 13:00
Detected SKILL.md language: English
Stars: 0
Forks: 0

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/ktg-one/goodai-mate --skill component-builder

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

SKILL.md

Source instructions · Read-only preview

Back to search Back to installation

// src/components/features/search-input.tsx
'use client'

import { useState, useCallback, useTransition } from 'react'
import { useRouter } from 'next/navigation'

interface SearchInputProps {
  placeholder?: string
  defaultValue?: string
}

export default function SearchInput({
  placeholder = 'Search...',
  defaultValue = '',
}: SearchInputProps) {
  const [query, setQuery] = useState(defaultValue)
  const [isPending, startTransition] = useTransition()
  const router = useRouter()

  const handleSearch = useCallback(
    (value: string) => {
      setQuery(value)
      startTransition(() => {
        router.push(`/search?q=${encodeURIComponent(value)}`)
      })
    },
    [router]
  )

  return (
    <input
      type="search"
      value={query}
      onChange={(e) => handleSearch(e.target.value)}
      placeholder={placeholder}
      className="w-full rounded-md border px-3 py-2"
      aria-label="Search"
    />
  )
}

// src/app/dashboard/page.tsx (Server Component)
import InteractiveChart from '@/components/features/interactive-chart'

export default async function DashboardPage() {
  // Fetch data on server — no waterfall, no client bundle
  const data = await getAnalytics()

  // Pass serializable data to client component
  return (
    <div>
      <h1>Dashboard</h1>
      <InteractiveChart data={data} /> {/* client handles interactivity */}
    </div>
  )
}

// src/components/features/interactive-chart.tsx (Client Component)
'use client'

import { useState } from 'react'

interface InteractiveChartProps {
  data: AnalyticsData[] // serializable props only
}

export default function InteractiveChart({ data }: InteractiveChartProps) {
  const [timeRange, setTimeRange] = useState<'day' | 'week' | 'month'>('week')
  const filtered = data.filter((d) => matchesRange(d, timeRange))
  return (/* chart rendering */)
}

const [count, setCount] = useState(0)
const [items, setItems] = useState<Item[]>([])

// ✅ Functional update for stable callbacks (Vercel rule: rerender-functional-setstate)
const increment = useCallback(() => setCount((c) => c + 1), [])

// ✅ Lazy initialization for expensive values (Vercel rule: rerender-lazy-state-init)
const [data, setData] = useState(() => computeExpensiveDefault())

// ✅ Memoize callbacks passed to child components
const handleSubmit = useCallback(async (formData: FormData) => {
  await submitForm(formData)
}, [])

// ❌ Don't memoize simple inline handlers on DOM elements
<button onClick={() => setOpen(true)}>Open</button>  // fine as-is

// ✅ Use for genuinely expensive computations
const sortedItems = useMemo(
  () => items.toSorted((a, b) => a.name.localeCompare(b.name)),
  [items]
)

// ❌ Don't use for simple primitives (Vercel rule: rerender-simple-expression-in-memo)
// const isActive = useMemo(() => status === 'active', [status])  // wasteful
const isActive = status === 'active'  // just compute inline

// ✅ Use for navigation, filtering, tab switches (Vercel rule: rerender-transitions)
const [isPending, startTransition] = useTransition()

function handleTabChange(tab: string) {
  startTransition(() => {
    setActiveTab(tab)
  })
}

// ✅ DOM refs
const inputRef = useRef<HTMLInputElement>(null)

// ✅ Transient values that change frequently (Vercel rule: rerender-use-ref-transient-values)
const scrollPosition = useRef(0)

// ✅ Read context in Server Components
import { use } from 'react'

function ThemeButton() {
  const theme = use(ThemeContext)
  return <button className={theme.buttonClass}>Click</button>
}

// ✅ Dynamic import for heavy components (Vercel rule: bundle-dynamic-imports)
import dynamic from 'next/dynamic'

const CodeEditor = dynamic(() => import('@/components/code-editor'), {
  ssr: false,
  loading: () => <div className="h-96 animate-pulse rounded bg-muted" />,
})

const MapView = dynamic(() => import('@/components/map-view'), {
  ssr: false,
  loading: () => <div className="h-64 animate-pulse rounded bg-muted" />,
})

Rule	Impact	Pattern
`async-parallel`	CRITICAL	`Promise.all()` for independent ops
`bundle-barrel-imports`	CRITICAL	Import from specific file, not index
`bundle-dynamic-imports`	CRITICAL	`next/dynamic` for heavy components
`server-serialization`	HIGH	Minimize data passed to client components
`rerender-memo`	MEDIUM	Extract expensive work into memoized components
`rerender-derived-state`	MEDIUM	Subscribe to derived booleans, not raw values
`rendering-conditional-render`	MEDIUM	Use ternary `? :`, not `&&`

component-builder

Install options

Review the source files