메뉴
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.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
Create or modify API endpoints in IdeaForge backend. Triggers: new route, controller, service, repository, CRUD operation, Zod validation, API debugging. Pattern: Routes → Controller → Service → Repository.
IdeaForge brand identity - colors, typography, and visual guidelines. Use when styling UI components, creating marketing materials, or ensuring brand consistency.
Make database schema changes in IdeaForge. Triggers: create migration, add table/column, modify column type, add index, use JSONB, use pgvector. File-based migrations with raw SQL, no ORM.
Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. When Claude needs to work with professional documents (.docx files) for (1) Creating new documents, (2) Modifying or editing content, (3) Working with tracked changes, (4) Adding comments, or any other document tasks.
Comprehensive PDF manipulation toolkit for extracting text and tables, creating new PDFs, merging/splitting documents, and handling forms. When Claude needs to fill in a PDF form or programmatically process, generate, or analyze PDF documents at scale.
Presentation creation, editing, and analysis. When Claude needs to work with presentations (.pptx files) for (1) Creating new presentations, (2) Modifying or editing content, (3) Working with layouts, (4) Adding comments or speaker notes, or any other presentation tasks.
SOC 직업 분류 기준
| 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/
├── app/ # Pages (App Router)
├── components/ # React components
├── contexts/ # React Context providers
├── lib/api.ts # Backend API client
└── types/ # TypeScript types
'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>
);
}
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
const response = await api.getIdeas();
if (response.success) {
setItems(response.data.ideas);
} else {
setError(response.error.message);
}
// 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" />
'use client' for stateful components