$pwd:

frontend-patterns

Name: Frontend Patterns
Author: 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.

$ git log --oneline --stat

stars:0

forks:0

updated:2025年11月28日 16:16

SKILL.md

readonly

package.json

"author": "Holo00"

"repository": "Holo00/IdeaForge"

$ git clone

$ download --local

[HINT] 下载包含 SKILL.md 和所有相关文件的完整技能目录

related-imports.ts

// 相关技能

import frontend-implementation

from "jpicklyk"

111

import mvp-product-director

from "ledagame"

import frontend-storyboard-artist

from "shredbx"

import app-development

from "asmith7013"

import ui-ux-designer

from "MUmerRazzaq"

import web-artifacts-builder

from "oferhalevi"

import frontend-design

from "bowlneba"

import frontend-design

from "ferg-cod3s"

import moai-lib-shadcn-ui

from "modu-ai"

310

import web-development

from "TencentCloudBase"

308

import ui-template-library

from "glittercowboy"

import elegant-design

from "rand"

name: frontend-patterns description: 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.

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

'use client' for stateful components
Props interface always defined
Dark mode classes on all elements
PascalCase filenames for components