frontend-patterns

Holo00's avatarfrom Holo00

Build React components and pages in IdeaForge frontend. Triggers: new component, dark mode, API calls, React Context, SSE streams, Tailwind styling. Stack: Next.js 16 App Router, React 19, TypeScript, Tailwind, next-themes.

⭐0stars🔀0forks📁View on GitHub🕐Updated Nov 28, 2025
[Code Generation]

When & Why to Use This Skill

This Claude skill automates the creation of high-quality React components and pages specifically for the IdeaForge frontend ecosystem. By leveraging a modern stack including Next.js 16 App Router, React 19, and Tailwind CSS, it ensures that all generated code adheres to strict brand guidelines, dark mode requirements, and TypeScript standards, significantly accelerating the development lifecycle while maintaining UI consistency.

Use Cases

  • Scenario 1: Rapidly scaffolding new React components with pre-configured Tailwind CSS brand colors (Mint and Coral) and default dark mode support.
  • Scenario 2: Building complex frontend pages using the Next.js 16 App Router structure, including integrated React Context providers and state management.
  • Scenario 3: Implementing standardized backend interactions using the built-in API client and handling real-time data with SSE (Server-Sent Events) streams.
  • Scenario 4: Ensuring architectural consistency across the codebase by automatically applying project-specific rules like PascalCase naming and mandatory Props interfaces.
namefrontend-patterns
descriptionBuild React components and pages in IdeaForge frontend. Triggers: new component, dark mode, API calls, React Context, SSE streams, Tailwind styling. Stack: Next.js 16 App Router, React 19, TypeScript, Tailwind, next-themes.

Frontend Patterns

Structure

frontend/
├── app/           # Pages (App Router)
├── components/    # React components
├── contexts/      # React Context providers
├── lib/api.ts     # Backend API client
└── types/         # TypeScript types

Component Template

'use client';

interface Props {
  title: string;
  onClick?: () => void;
}

export default function MyComponent({ title, onClick }: Props) {
  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
      <h2 className="text-gray-900 dark:text-gray-100">{title}</h2>
    </div>
  );
}

Brand Colors (Required)

Read @skills/brand-guidelines/SKILL.md for full palette.

IdeaForge uses dark mode as default:

// Backgrounds
bg-[#0f1419]              // Base
bg-[#1c2128]              // Surface/cards
bg-[#262c36]              // Elevated/hover

// Primary (Mint)
text-emerald-400          // #34D399
bg-gradient-to-r from-emerald-400 to-emerald-500  // Primary button

// Text
text-[#f0f6fc]            // Primary
text-[#8b949e]            // Secondary

// Accent (Coral - text only)
text-red-400              // #FF6B6B highlights

API Calls

const response = await api.getIdeas();
if (response.success) {
  setItems(response.data.ideas);
} else {
  setError(response.error.message);
}

Common Elements

// Card
<div className="bg-[#1c2128] rounded-xl p-6 border border-gray-700/50">

// Primary Button
<button className="px-4 py-2 bg-gradient-to-r from-emerald-400 to-emerald-500 text-gray-900 font-semibold rounded-lg hover:from-emerald-300 hover:to-emerald-400 disabled:opacity-50">

// Secondary Button
<button className="px-4 py-2 border border-white/30 text-gray-100 rounded-lg hover:bg-white/5">

// Input
<input className="w-full px-3 py-2 border border-gray-700 rounded-lg bg-gray-800 text-gray-100 placeholder-gray-500 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500" />

Rules

  1. 'use client' for stateful components
  2. Props interface always defined
  3. Dark mode classes on all elements
  4. PascalCase filenames for components