🎯

nextfriday-react

🎯Skill

from next-friday/nextfriday-skills

What it does

Provides React/JSX best practices and patterns for clean, maintainable component development and code organization.

📦

Part of

next-friday/nextfriday-skills(7 items)

nextfriday-react

Installation

Quick InstallInstall with npx

npx skills add next-friday/nextfriday-skills --skill nextfriday-best-practices

Quick InstallInstall with npx

npx skills add next-friday/nextfriday-skills --skill nextfriday-naming

Quick InstallInstall with npx

npx skills add next-friday/nextfriday-skills --skill nextfriday-code-style

Quick InstallInstall with npx

npx skills add next-friday/nextfriday-skills --skill nextfriday-react

Quick InstallInstall with npx

npx skills add next-friday/nextfriday-skills

📖 Extracted from docs: next-friday/nextfriday-skills

Need more details? View full documentation on GitHub →

1Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

Next Friday React/JSX patterns for components, props, and formatting. Use when writing React components or JSX code.

Overview

# Next Friday React/JSX

Rules for React components and JSX patterns.

Lazy Loading

Suspense Required

Always wrap lazy-loaded components in Suspense.

```tsx

// Bad:

const Modal = lazy(() => import("./Modal"));

return ;

// Good:

const Modal = lazy(() => import("./Modal"));

return (

);

```

Props

No Inline Objects

Extract inline objects in JSX props to const variables.

```tsx

// Bad:

// Good:

const cardStyle = { padding: 16, margin: 8 };

```

Destructure in Body

Destructure props inside component body, not in parameters.

```tsx

// Bad:

const Card = ({ title, children }: Readonly) => ...

// Good:

const Card = (props: Readonly) => {

const { title, children } = props;

return ...

};

```

Component Structure

No Helper Functions

Move non-component functions to separate files.

```tsx

// Bad:

const formatPrice = (value: number): string => $${value.toFixed(2)};

const Card = (props: Readonly) =>

{formatPrice(props.price)}

;

// Good:

import { formatPrice } from "@/utils/format";

const Card = (props: Readonly) =>

{formatPrice(props.price)}

;

```

No Variables in Callbacks

Extract JSX callbacks with variables to render functions.

```tsx

// Bad:

{items.map((item) => {

const label = ${item.name} - ${item.category};

return

{label}

;

})}

// Good:

const renderItem = (item: Item) => {

const label = ${item.name} - ${item.category};

return

{label}

;

};

return

{items.map(renderItem)};

```

Imports

Direct React Imports

Import React types directly, not as React.X.

```tsx

// Bad:

const Card = (props: { children: React.ReactNode }) => ...

// Good:

import type { ReactNode } from "react";

const Card = (props: { children: ReactNode }) => ...

```

Formatting

Newlines Between Elements

Add blank lines between multi-line sibling JSX elements.

```tsx

// Bad:

</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span></section></span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span><section className="content"></span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span> <List items={items} /></span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span></section></span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>// Good:</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span><section className="header"></span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span> <Title value={title} /></span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span></section></span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span><section className="content"></span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span> <List items={items} /></span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span></section></span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>```</span></p><h4 class="mb-2 mt-4 font-semibold text-zinc-800 dark:text-zinc-200">Template Literals</h4><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>Use template literals instead of mixing text with expressions.</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>```tsx</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>// Bad:</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span><span>Total: {total}</span></span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>// Good:</span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span><span>{<code class="rounded bg-zinc-100 px-1.5 py-0.5 text-sm dark:bg-zinc-800">Total: ${total}</code>}</span></span></p><p class="mb-3 text-zinc-600 dark:text-zinc-400"><span>```</span></p></div></div></div></div></div><div class="mt-12 border-t border-zinc-200 pt-8 dark:border-zinc-800"><h2 class="mb-4 flex items-center gap-2 text-lg font-semibold text-zinc-900 dark:text-white"><span>More from this repository</span><span class="rounded-full bg-violet-100 px-2 py-0.5 text-sm font-medium text-violet-700 dark:bg-violet-900/50 dark:text-violet-300">6</span></h2><div class="grid gap-3 sm:grid-cols-2"><a class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50" href="/skills/next-friday/nextfriday-skills/nextfriday-nextjs"><span class="text-xl">🎯</span><div class="min-w-0 flex-1"><div class="flex items-center gap-2"><span class="truncate font-medium text-zinc-900 dark:text-white">nextfriday-nextjs</span><span class="inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs "><span>🎯</span><span>Skill</span></span></div><p class="truncate text-sm text-zinc-500 dark:text-zinc-400">Enforces Next.js environment variable best practices by requiring `NEXT_PUBLIC_` prefix and preventing fallback values in client components.</p></div></a><a class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50" href="/skills/next-friday/nextfriday-skills/nextfriday-types"><span class="text-xl">🎯</span><div class="min-w-0 flex-1"><div class="flex items-center gap-2"><span class="truncate font-medium text-zinc-900 dark:text-white">nextfriday-types</span><span class="inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs "><span>🎯</span><span>Skill</span></span></div><p class="truncate text-sm text-zinc-500 dark:text-zinc-400">Defines TypeScript type patterns for React props, function parameters, and return types to improve code consistency and readability.</p></div></a><a class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50" href="/skills/next-friday/nextfriday-skills/nextfriday-code-style"><span class="text-xl">🎯</span><div class="min-w-0 flex-1"><div class="flex items-center gap-2"><span class="truncate font-medium text-zinc-900 dark:text-white">nextfriday-code-style</span><span class="inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs "><span>🎯</span><span>Skill</span></span></div><p class="truncate text-sm text-zinc-500 dark:text-zinc-400">Generates clean, consistent code formatting and style guidelines for Next Friday projects using predefined configuration rules.</p></div></a><a class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50" href="/skills/next-friday/nextfriday-skills/nextfriday-naming"><span class="text-xl">🎯</span><div class="min-w-0 flex-1"><div class="flex items-center gap-2"><span class="truncate font-medium text-zinc-900 dark:text-white">nextfriday-naming</span><span class="inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs "><span>🎯</span><span>Skill</span></span></div><p class="truncate text-sm text-zinc-500 dark:text-zinc-400">Generates unique, memorable names for projects, products, or teams using creative naming strategies and linguistic techniques.</p></div></a><a class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50" href="/skills/next-friday/nextfriday-skills/nextfriday-imports"><span class="text-xl">🎯</span><div class="min-w-0 flex-1"><div class="flex items-center gap-2"><span class="truncate font-medium text-zinc-900 dark:text-white">nextfriday-imports</span><span class="inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs "><span>🎯</span><span>Skill</span></span></div><p class="truncate text-sm text-zinc-500 dark:text-zinc-400">Enforces consistent import rules with absolute paths, type imports, and standardized date utilities for TypeScript projects.</p></div></a><a class="flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50" href="/skills/next-friday/nextfriday-skills/nextfriday-best-practices"><span class="text-xl">🎯</span><div class="min-w-0 flex-1"><div class="flex items-center gap-2"><span class="truncate font-medium text-zinc-900 dark:text-white">nextfriday-best-practices</span><span class="inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs "><span>🎯</span><span>Skill</span></span></div><p class="truncate text-sm text-zinc-500 dark:text-zinc-400">Enforces comprehensive TypeScript/React/Next.js coding standards across 41 rules for consistent, high-quality project development.</p></div></a></div></div></div></main><footer class="border-t border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900"><div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8"><div class="grid grid-cols-1 gap-8 md:grid-cols-4"><div class="md:col-span-1"><a class="flex items-center" href="/"><img alt="Vibe Index" loading="lazy" width="140" height="40" decoding="async" data-nimg="1" class="h-8 w-auto dark:hidden" style="color:transparent" src="/logo.png?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS"/><img alt="Vibe Index" loading="lazy" width="140" height="40" decoding="async" data-nimg="1" class="hidden h-8 w-auto dark:block" style="color:transparent" src="/logo-dark.png?v=3&dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS"/></a><p class="mt-4 text-sm text-zinc-600 dark:text-zinc-400">Everything you need for vibe coding. Real-time updates on skills, plugins, MCP servers, and marketplaces.</p></div><div><h3 class="text-sm font-semibold text-zinc-900 dark:text-white">Resources</h3><ul class="mt-4 space-y-2"><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/skills">Skills</a></li><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/mcp">MCP Servers</a></li><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/marketplaces">Marketplaces</a></li><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/plugins">Plugins</a></li></ul></div><div><h3 class="text-sm font-semibold text-zinc-900 dark:text-white">Support</h3><ul class="mt-4 space-y-2"><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/about">About Us</a></li><li><a href="mailto:admin@vibeindex.ai" class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white">Contact Us</a></li><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/feedback">Feedback</a></li><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/activity">Sync Activity</a></li></ul></div><div><h3 class="text-sm font-semibold text-zinc-900 dark:text-white">Legal</h3><ul class="mt-4 space-y-2"><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/privacy">Privacy Policy</a></li><li><a class="text-sm text-zinc-600 transition-colors hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white" href="/terms">Terms of Service</a></li></ul></div></div><div class="mt-8 border-t border-zinc-200 pt-8 dark:border-zinc-800"><p class="text-center text-sm text-zinc-500 dark:text-zinc-500">© 2026 Vibe Index. All rights reserved. Operated by <a href="https://jolab.ai" target="_blank" rel="noopener noreferrer" class="text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white transition-colors">JoLab</a></p></div></div></footer><script src="/_next/static/chunks/a8c74b565bd8a7a9.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[26817,[\"/_next/static/chunks/0a6842a76c315c9c.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"default\"]\n3:I[44636,[\"/_next/static/chunks/0a6842a76c315c9c.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"Providers\"]\n4:I[3374,[\"/_next/static/chunks/0a6842a76c315c9c.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"default\"]\n5:I[39756,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"default\"]\n6:I[37457,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"default\"]\n7:I[22016,[\"/_next/static/chunks/0a6842a76c315c9c.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/8544c26c9ccb1a8a.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"\"]\n8:I[58234,[\"/_next/static/chunks/0a6842a76c315c9c.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"default\"]\na:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"OutletBoundary\"]\nb:\"$Sreact.suspense\"\nd:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"ViewportBoundary\"]\nf:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"MetadataBoundary\"]\n11:I[68027,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"default\"]\n:HL[\"/_next/static/chunks/2473c16c0c2f6b5f.css?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"style\"]\n:HL[\"/_next/static/chunks/2e466e6eeb5ad364.css?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"style\"]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.dbea232f.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.853070df.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"KWwxlk9yk9iWRPDa88xZi\",\"c\":[\"\",\"skills\",\"next-friday\",\"nextfriday-skills\",\"nextfriday-react\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"skills\",{\"children\":[[\"owner\",\"next-friday\",\"d\"],{\"children\":[[\"repo\",\"nextfriday-skills\",\"d\"],{\"children\":[[\"skill\",\"nextfriday-react\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]}]}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/2473c16c0c2f6b5f.css?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/2e466e6eeb5ad364.css?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0a6842a76c315c9c.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"geist_a71539c9-module__T19VSG__variable geist_mono_8d43a2aa-module__8Li5zG__variable antialiased min-h-screen flex flex-col\",\"children\":[[\"$\",\"$L2\",null,{}],[\"$\",\"$L3\",null,{\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"main\",null,{\"className\":\"flex-1\",\"children\":[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"flex min-h-[60vh] flex-col items-center justify-center px-4\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-6xl font-bold text-zinc-900 dark:text-white\",\"children\":\"404\"}],[\"$\",\"h2\",null,{\"className\":\"mt-4 text-xl font-semibold text-zinc-700 dark:text-zinc-300\",\"children\":\"Page Not Found\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-zinc-500 dark:text-zinc-400\",\"children\":\"The page you're looking for doesn't exist or has been moved.\"}],[\"$\",\"$L7\",null,{\"href\":\"/\",\"className\":\"mt-8 inline-flex items-center rounded-lg bg-zinc-900 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200\",\"children\":\"Go Home\"}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],[\"$\",\"$L8\",null,{}]]}]]}]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[\"$L9\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/8544c26c9ccb1a8a.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$La\",null,{\"children\":[\"$\",\"$b\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@c\"}]}]]}],{},null,false,false]},null,false,false]},null,false,false]},null,false,false]},null,false,false]},null,false,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$Ld\",null,{\"children\":\"$Le\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$Lf\",null,{\"children\":[\"$\",\"$b\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L10\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$11\",[]],\"S\":false}\n"])</script><script>self.__next_f.push([1,"e:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"12:I[27201,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"IconMark\"]\nc:null\n"])</script><script>self.__next_f.push([1,"10:[[\"$\",\"title\",\"0\",{\"children\":\"nextfriday-react | Vibe Index\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Provides React/JSX best practices and patterns for clean, maintainable component development and code organization.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"author\",\"content\":\"Vibe Index Team\"}],[\"$\",\"meta\",\"3\",{\"name\":\"keywords\",\"content\":\"vibe coding, vibecoding, AI coding, Claude Code, MCP servers, AI skills, AI plugins, AI development, AI assistants, Claude, cursor, windsurf, aider, cline\"}],[\"$\",\"meta\",\"4\",{\"name\":\"creator\",\"content\":\"Vibe Index\"}],[\"$\",\"meta\",\"5\",{\"name\":\"publisher\",\"content\":\"Vibe Index\"}],[\"$\",\"meta\",\"6\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"7\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"link\",\"8\",{\"rel\":\"canonical\",\"href\":\"https://vibeindex.ai\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:title\",\"content\":\"Vibe Index - The Ultimate Vibe Coding Directory\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:description\",\"content\":\"The ultimate directory for vibe coding. Discover AI coding tools - skills, plugins, MCP servers, and marketplaces for Claude Code and other AI assistants.\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:url\",\"content\":\"https://vibeindex.ai\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:site_name\",\"content\":\"Vibe Index\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:image\",\"content\":\"https://vibeindex.ai/icon.png\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:image:width\",\"content\":\"512\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:image:height\",\"content\":\"512\"}],[\"$\",\"meta\",\"17\",{\"property\":\"og:image:alt\",\"content\":\"Vibe Index Logo\"}],[\"$\",\"meta\",\"18\",{\"property\":\"og:locale:alternate\",\"content\":\"ko_KR\"}],[\"$\",\"meta\",\"19\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:title\",\"content\":\"Vibe Index - Vibe Coding Directory\"}],[\"$\",\"meta\",\"22\",{\"name\":\"twitter:description\",\"content\":\"The ultimate directory for vibe coding. Discover AI coding tools - skills, plugins, MCP servers, and marketplaces for Claude Code and other AI assistants.\"}],[\"$\",\"meta\",\"23\",{\"name\":\"twitter:image\",\"content\":\"https://vibeindex.ai/icon.png\"}],[\"$\",\"link\",\"24\",{\"rel\":\"icon\",\"href\":\"/favicon-16x16.png\",\"sizes\":\"16x16\",\"type\":\"image/png\"}],[\"$\",\"link\",\"25\",{\"rel\":\"icon\",\"href\":\"/favicon-32x32.png\",\"sizes\":\"32x32\",\"type\":\"image/png\"}],[\"$\",\"link\",\"26\",{\"rel\":\"icon\",\"href\":\"/icon.png\",\"sizes\":\"512x512\",\"type\":\"image/png\"}],[\"$\",\"link\",\"27\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-touch-icon.png\"}],[\"$\",\"$L12\",\"28\",{}]]\n"])</script><script>self.__next_f.push([1,"13:I[74533,[\"/_next/static/chunks/0a6842a76c315c9c.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/8544c26c9ccb1a8a.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"FavoriteButton\"]\n14:I[54371,[\"/_next/static/chunks/0a6842a76c315c9c.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/8544c26c9ccb1a8a.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"default\"]\n15:I[38848,[\"/_next/static/chunks/0a6842a76c315c9c.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/8544c26c9ccb1a8a.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"default\"]\n"])</script><script>self.__next_f.push([1,"9:[\"$\",\"div\",null,{\"className\":\"mx-auto max-w-4xl px-4 py-12 sm:px-6 lg:px-8\",\"children\":[[\"$\",\"nav\",null,{\"className\":\"mb-6\",\"children\":[\"$\",\"ol\",null,{\"className\":\"flex items-center gap-2 text-sm\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L7\",null,{\"href\":\"/skills\",\"className\":\"text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-300\",\"children\":\"Skills\"}]}],[\"$\",\"li\",null,{\"className\":\"text-zinc-400\",\"children\":\"/\"}],[\"$\",\"li\",null,{\"className\":\"text-zinc-900 dark:text-white\",\"children\":\"nextfriday-react\"}]]}]}],[\"$\",\"div\",null,{\"className\":\"mb-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-start gap-4\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-5xl\",\"children\":\"🎯\"}],[\"$\",\"div\",null,{\"className\":\"flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2 flex-wrap\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"text-3xl font-bold text-zinc-900 dark:text-white\",\"children\":\"nextfriday-react\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2.5 py-1 text-sm \",\"children\":[[\"$\",\"span\",null,{\"children\":\"🎯\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}],[\"$\",\"$L13\",null,{\"resourceId\":\"038017d3-face-4eee-ae4c-ab28fd7f2671\",\"size\":\"sm\"}],false]}],[\"$\",\"p\",null,{\"className\":\"mt-2 text-zinc-600 dark:text-zinc-400\",\"children\":[\"from \",\"next-friday\",\"/\",\"nextfriday-skills\"]}]]}]]}],[\"$\",\"$L14\",null,{\"description\":\"Provides React/JSX best practices and patterns for clean, maintainable component development and code organization.\",\"descriptionKo\":\"React/JSX의 모범 사례와 패턴을 제공하여 깔끔하고 유지보수 가능한 컴포넌트 개발 및 코드 구조화를 지원합니다.\",\"resourceId\":\"038017d3-face-4eee-ae4c-ab28fd7f2671\",\"resourceName\":\"nextfriday-react\",\"resourceType\":\"skill\",\"descriptionType\":\"ai\"}],null,null,[\"$\",\"$L7\",null,{\"href\":\"/collection/next-friday/nextfriday-skills\",\"className\":\"mt-4 flex items-center gap-3 rounded-lg border border-zinc-200 bg-zinc-50 p-4 transition-all hover:border-zinc-300 hover:bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800/50 dark:hover:border-zinc-600 dark:hover:bg-zinc-800\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-2xl\",\"children\":\"📦\"}],[\"$\",\"div\",null,{\"className\":\"flex-1\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"Part of\"}],[\"$\",\"p\",null,{\"className\":\"font-semibold text-zinc-900 dark:text-white\",\"children\":[\"next-friday\",\"/\",\"nextfriday-skills\",[\"$\",\"span\",null,{\"className\":\"ml-2 text-sm font-normal text-zinc-500 dark:text-zinc-400\",\"children\":[\"(\",7,\" \",\"items\",\")\"]}]]}]]}],[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"className\":\"h-5 w-5 text-zinc-400\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"stroke\":\"currentColor\",\"children\":[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeWidth\":2,\"d\":\"M9 5l7 7-7 7\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"mt-4 flex flex-wrap gap-2\",\"children\":[[\"$\",\"span\",\"nextfriday-react\",{\"onClick\":\"$undefined\",\"className\":\"inline-flex items-center rounded-full bg-zinc-100 px-2 py-0.5 text-xs font-medium text-zinc-600 transition-colors hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-700 \",\"children\":\"nextfriday-react\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"mb-8\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"mb-4 text-lg font-semibold text-zinc-900 dark:text-white\",\"children\":\"Installation\"}],[\"$\",\"$L15\",null,{\"installGuide\":{\"found\":true,\"commands\":[{\"label\":\"Quick Install\",\"command\":\"npx skills add next-friday/nextfriday-skills --skill nextfriday-best-practices\",\"description\":\"Install with npx\",\"type\":\"skills-sh\"},{\"label\":\"Quick Install\",\"command\":\"npx skills add next-friday/nextfriday-skills --skill nextfriday-naming\",\"description\":\"Install with npx\",\"type\":\"skills-sh\"},{\"label\":\"Quick Install\",\"command\":\"npx skills add next-friday/nextfriday-skills --skill nextfriday-code-style\",\"description\":\"Install with npx\",\"type\":\"skills-sh\"},{\"label\":\"Quick Install\",\"command\":\"npx skills add next-friday/nextfriday-skills --skill nextfriday-react\",\"description\":\"Install with npx\",\"type\":\"skills-sh\"},{\"label\":\"Quick Install\",\"command\":\"npx skills add next-friday/nextfriday-skills\",\"description\":\"Install with npx\",\"type\":\"skills-sh\"}],\"jsonConfig\":\"$undefined\",\"rawSection\":\"## Installation\\n\\n```bash\"},\"githubUrl\":\"https://github.com/next-friday/nextfriday-skills\",\"owner\":\"next-friday\",\"repo\":\"nextfriday-skills\",\"resourceType\":\"skill\",\"resourceName\":\"nextfriday-react\"}]]}],\"$L16\",\"$L17\",\"$L18\",\"$L19\"]}]\n"])</script><script>self.__next_f.push([1,"1a:I[74533,[\"/_next/static/chunks/0a6842a76c315c9c.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/8544c26c9ccb1a8a.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"FavoriteCount\"]\n1b:I[13428,[\"/_next/static/chunks/0a6842a76c315c9c.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/6875684dac0d32c7.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/7ac56969506ec814.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\",\"/_next/static/chunks/8544c26c9ccb1a8a.js?dpl=dpl_CSPVqvHqkLqu7f2153bfo7EbijCS\"],\"default\"]\n"])</script><script>self.__next_f.push([1,"16:[\"$\",\"div\",null,{\"className\":\"mb-8 flex gap-6 text-sm text-zinc-500 dark:text-zinc-400\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"title\":\"Installs\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"className\":\"h-4 w-4\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"stroke\":\"currentColor\",\"children\":[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeWidth\":2,\"d\":\"M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4\"}]}],[\"$\",\"span\",null,{\"className\":\"font-medium text-zinc-700 dark:text-zinc-300\",\"children\":\"1\"}],[\"$\",\"span\",null,{\"className\":\"text-zinc-400 dark:text-zinc-500\",\"children\":\"Installs\"}]]}],false,[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"className\":\"h-4 w-4 text-violet-500\",\"fill\":\"currentColor\",\"stroke\":\"currentColor\",\"strokeWidth\":0.5,\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"d\":\"M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z\"}]}],[\"$\",\"span\",null,{\"className\":\"font-medium text-zinc-700 dark:text-zinc-300\",\"children\":[\"$\",\"$L1a\",null,{\"resourceId\":\"038017d3-face-4eee-ae4c-ab28fd7f2671\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"span\",null,{\"children\":\"Added\"}],[\"$\",\"span\",null,{\"className\":\"font-medium text-zinc-700 dark:text-zinc-300\",\"children\":\"Feb 4, 2026\"}]]}]]}]\n"])</script><script>self.__next_f.push([1,"17:[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-4\",\"children\":[[\"$\",\"a\",null,{\"href\":\"https://github.com/next-friday/nextfriday-skills\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"inline-flex items-center gap-2 rounded-lg bg-zinc-900 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200\",\"children\":[[\"$\",\"svg\",null,{\"className\":\"h-5 w-5\",\"fill\":\"currentColor\",\"viewBox\":\"0 0 24 24\",\"children\":[\"$\",\"path\",null,{\"fillRule\":\"evenodd\",\"d\":\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z\",\"clipRule\":\"evenodd\"}]}],\"View on GitHub\"]}],[\"$\",\"$L7\",null,{\"href\":\"/skills\",\"className\":\"inline-flex items-center gap-2 rounded-lg border border-zinc-300 bg-white px-6 py-3 text-sm font-medium text-zinc-700 transition-colors hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700\",\"children\":[[\"$\",\"svg\",null,{\"xmlns\":\"http://www.w3.org/2000/svg\",\"className\":\"h-5 w-5\",\"fill\":\"none\",\"viewBox\":\"0 0 24 24\",\"stroke\":\"currentColor\",\"children\":[\"$\",\"path\",null,{\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"strokeWidth\":2,\"d\":\"M10 19l-7-7m0 0l7-7m-7 7h18\"}]}],\"Back to Skills\"]}]]}]\n"])</script><script>self.__next_f.push([1,"1c:Tada,"])</script><script>self.__next_f.push([1,"---\nname: nextfriday-react\ndescription: Next Friday React/JSX patterns for components, props, and formatting. Use when writing React components or JSX code.\nuser-invocable: false\n---\n\n# Next Friday React/JSX\n\nRules for React components and JSX patterns.\n\n## Lazy Loading\n\n### Suspense Required\n\nAlways wrap lazy-loaded components in Suspense.\n\n```tsx\n// Bad:\nconst Modal = lazy(() =\u003e import(\"./Modal\"));\nreturn \u003cModal isOpen={isOpen} /\u003e;\n\n// Good:\nconst Modal = lazy(() =\u003e import(\"./Modal\"));\nreturn (\n \u003cSuspense fallback={\u003cLoading /\u003e}\u003e\n \u003cModal isOpen={isOpen} /\u003e\n \u003c/Suspense\u003e\n);\n```\n\n## Props\n\n### No Inline Objects\n\nExtract inline objects in JSX props to const variables.\n\n```tsx\n// Bad:\n\u003cCard style={{ padding: 16, margin: 8 }} /\u003e\n\n// Good:\nconst cardStyle = { padding: 16, margin: 8 };\n\u003cCard style={cardStyle} /\u003e\n```\n\n### Destructure in Body\n\nDestructure props inside component body, not in parameters.\n\n```tsx\n// Bad:\nconst Card = ({ title, children }: Readonly\u003cCardProps\u003e) =\u003e ...\n\n// Good:\nconst Card = (props: Readonly\u003cCardProps\u003e) =\u003e {\n const { title, children } = props;\n\n return ...\n};\n```\n\n## Component Structure\n\n### No Helper Functions\n\nMove non-component functions to separate files.\n\n```tsx\n// Bad:\nconst formatPrice = (value: number): string =\u003e `$${value.toFixed(2)}`;\nconst Card = (props: Readonly\u003cCardProps\u003e) =\u003e \u003cdiv\u003e{formatPrice(props.price)}\u003c/div\u003e;\n\n// Good:\nimport { formatPrice } from \"@/utils/format\";\nconst Card = (props: Readonly\u003cCardProps\u003e) =\u003e \u003cdiv\u003e{formatPrice(props.price)}\u003c/div\u003e;\n```\n\n### No Variables in Callbacks\n\nExtract JSX callbacks with variables to render functions.\n\n```tsx\n// Bad:\n{items.map((item) =\u003e {\n const label = `${item.name} - ${item.category}`;\n return \u003cli key={item.id}\u003e{label}\u003c/li\u003e;\n})}\n\n// Good:\nconst renderItem = (item: Item) =\u003e {\n const label = `${item.name} - ${item.category}`;\n\n return \u003cli key={item.id}\u003e{label}\u003c/li\u003e;\n};\n\nreturn \u003cul\u003e{items.map(renderItem)}\u003c/ul\u003e;\n```\n\n## Imports\n\n### Direct React Imports\n\nImport React types directly, not as `React.X`.\n\n```tsx\n// Bad:\nconst Card = (props: { children: React.ReactNode }) =\u003e ...\n\n// Good:\nimport type { ReactNode } from \"react\";\nconst Card = (props: { children: ReactNode }) =\u003e ...\n```\n\n## Formatting\n\n### Newlines Between Elements\n\nAdd blank lines between multi-line sibling JSX elements.\n\n```tsx\n// Bad:\n\u003csection className=\"header\"\u003e\n \u003cTitle value={title} /\u003e\n\u003c/section\u003e\n\u003csection className=\"content\"\u003e\n \u003cList items={items} /\u003e\n\u003c/section\u003e\n\n// Good:\n\u003csection className=\"header\"\u003e\n \u003cTitle value={title} /\u003e\n\u003c/section\u003e\n\n\u003csection className=\"content\"\u003e\n \u003cList items={items} /\u003e\n\u003c/section\u003e\n```\n\n### Template Literals\n\nUse template literals instead of mixing text with expressions.\n\n```tsx\n// Bad:\n\u003cspan\u003eTotal: {total}\u003c/span\u003e\n\n// Good:\n\u003cspan\u003e{`Total: ${total}`}\u003c/span\u003e\n```\n"])</script><script>self.__next_f.push([1,"18:[\"$\",\"div\",null,{\"className\":\"mt-8\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"mb-4 text-lg font-semibold text-zinc-900 dark:text-white\",\"children\":\"Skill Details\"}],[\"$\",\"$L1b\",null,{\"content\":\"$1c\"}]]}]\n"])</script><script>self.__next_f.push([1,"19:[\"$\",\"div\",null,{\"className\":\"mt-12 border-t border-zinc-200 pt-8 dark:border-zinc-800\",\"children\":[[\"$\",\"h2\",null,{\"className\":\"mb-4 flex items-center gap-2 text-lg font-semibold text-zinc-900 dark:text-white\",\"children\":[[\"$\",\"span\",null,{\"children\":\"More from this repository\"}],[\"$\",\"span\",null,{\"className\":\"rounded-full bg-violet-100 px-2 py-0.5 text-sm font-medium text-violet-700 dark:bg-violet-900/50 dark:text-violet-300\",\"children\":6}]]}],[\"$\",\"div\",null,{\"className\":\"grid gap-3 sm:grid-cols-2\",\"children\":[[\"$\",\"$L7\",\"cc049ecf-3cb0-489a-a284-5d776e9de5cb\",{\"href\":\"/skills/next-friday/nextfriday-skills/nextfriday-nextjs\",\"className\":\"flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"🎯\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate font-medium text-zinc-900 dark:text-white\",\"children\":\"nextfriday-nextjs\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs \",\"children\":[[\"$\",\"span\",null,{\"children\":\"🎯\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}]]}],[\"$\",\"p\",null,{\"className\":\"truncate text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"Enforces Next.js environment variable best practices by requiring `NEXT_PUBLIC_` prefix and preventing fallback values in client components.\"}]]}]]}],[\"$\",\"$L7\",\"cfba30df-98ea-4b65-9a0e-758000aea6d8\",{\"href\":\"/skills/next-friday/nextfriday-skills/nextfriday-types\",\"className\":\"flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"🎯\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate font-medium text-zinc-900 dark:text-white\",\"children\":\"nextfriday-types\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs \",\"children\":[[\"$\",\"span\",null,{\"children\":\"🎯\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}]]}],[\"$\",\"p\",null,{\"className\":\"truncate text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"Defines TypeScript type patterns for React props, function parameters, and return types to improve code consistency and readability.\"}]]}]]}],[\"$\",\"$L7\",\"5a40029a-98ee-465c-b4ee-bd09e28d88a2\",{\"href\":\"/skills/next-friday/nextfriday-skills/nextfriday-code-style\",\"className\":\"flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"🎯\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate font-medium text-zinc-900 dark:text-white\",\"children\":\"nextfriday-code-style\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs \",\"children\":[[\"$\",\"span\",null,{\"children\":\"🎯\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}]]}],[\"$\",\"p\",null,{\"className\":\"truncate text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"Generates clean, consistent code formatting and style guidelines for Next Friday projects using predefined configuration rules.\"}]]}]]}],\"$L1d\",\"$L1e\",\"$L1f\"]}]]}]\n"])</script><script>self.__next_f.push([1,"1d:[\"$\",\"$L7\",\"0112f3cb-e9a6-4494-8c6f-14278270d1bb\",{\"href\":\"/skills/next-friday/nextfriday-skills/nextfriday-naming\",\"className\":\"flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"🎯\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate font-medium text-zinc-900 dark:text-white\",\"children\":\"nextfriday-naming\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs \",\"children\":[[\"$\",\"span\",null,{\"children\":\"🎯\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}]]}],[\"$\",\"p\",null,{\"className\":\"truncate text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"Generates unique, memorable names for projects, products, or teams using creative naming strategies and linguistic techniques.\"}]]}]]}]\n1e:[\"$\",\"$L7\",\"03d95962-8a39-4be1-adfb-cc2425d82a2c\",{\"href\":\"/skills/next-friday/nextfriday-skills/nextfriday-imports\",\"className\":\"flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"🎯\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate font-medium text-zinc-900 dark:text-white\",\"children\":\"nextfriday-imports\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs \",\"children\":[[\"$\",\"span\",null,{\"children\":\"🎯\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}]]}],[\"$\",\"p\",null,{\"className\":\"truncate text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"Enforces consistent import rules with absolute paths, type imports, and standardized date utilities for TypeScript projects.\"}]]}]]}]\n1f:[\"$\",\"$L7\",\"c71421b9-0417-487e-8fa8-ef9eb9ff48b1\",{\"href\":\"/skills/next-friday/nextfriday-skills/nextfriday-best-practices\",\"className\":\"flex items-center gap-3 rounded-lg border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/50\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xl\",\"children\":\"🎯\"}],[\"$\",\"div\",null,{\"className\":\"min-w-0 flex-1\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"className\":\"truncate font-medium text-zinc-900 dark:text-white\",\"children\":\"nextfriday-best-practices\"}],[\"$\",\"span\",null,{\"className\":\"inline-flex items-center gap-1 whitespace-nowrap font-medium rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 px-2 py-0.5 text-xs \",\"children\":[[\"$\",\"span\",null,{\"children\":\"🎯\"}],[\"$\",\"span\",null,{\"children\":\"Skill\"}]]}]]}],[\"$\",\"p\",null,{\"className\":\"truncate text-sm text-zinc-500 dark:text-zinc-400\",\"children\":\"Enforces comprehensive TypeScript/React/Next.js coding standards across 41 rules for consistent, high-quality project development.\"}]]}]]}]\n"])</script></body></html>