메뉴
Frontend development skill for Resume Matcher. Handles Next.js pages, React components, Tailwind CSS with Swiss International Style, API integration, hooks, and i18n. Use when creating or modifying frontend code.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| name | frontend-dev |
| description | Frontend development skill for Resume Matcher. Handles Next.js pages, React components, Tailwind CSS with Swiss International Style, API integration, hooks, and i18n. Use when creating or modifying frontend code. |
Use when creating or modifying Next.js pages, React components, Tailwind CSS styles, API integration, hooks, or i18n.
docs/agent/architecture/frontend-workflow.md for user flowdocs/agent/design/style-guide.md for Swiss International Style (REQUIRED)docs/agent/coding-standards.md for conventionsapps/frontend/components/rounded-none everywhere - no rounded corners, evershadow-[4px_4px_0px_0px_#000000], never soft shadowsnpm run lint before committingnpm run format before committing| Element | Value |
|---|---|
| Canvas bg | #F0F0E8 / bg-[#F0F0E8] |
| Ink text | #000000 |
| Hyper Blue | #1D4ED8 / text-blue-700 |
| Signal Green | #15803D / text-green-700 |
| Alert Red | #DC2626 / text-red-600 |
| Headers | font-serif |
| Body | font-sans |
| Labels | font-mono text-sm uppercase tracking-wider |
| Borders | rounded-none border-2 border-black |
| Shadows | shadow-[4px_4px_0px_0px_#000000] |
| Hover | hover:translate-y-[1px] hover:translate-x-[1px] hover:shadow-none |
rounded-* (except rounded-none)'use client';
interface MyComponentProps {
title: string;
onAction: () => void;
}
export function MyComponent({ title, onAction }: MyComponentProps) {
return (
<div className="bg-white border-2 border-black shadow-[4px_4px_0px_0px_#000000] p-6">
<h3 className="font-serif text-xl mb-4">{title}</h3>
<button
onClick={onAction}
className="rounded-none border-2 border-black px-4 py-2 bg-blue-700 text-white shadow-[2px_2px_0px_0px_#000000] hover:translate-y-[1px] hover:translate-x-[1px] hover:shadow-none transition-all"
>
Action
</button>
</div>
);
}
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (e.key === 'Enter') e.stopPropagation();
};
<textarea onKeyDown={handleKeyDown} className="w-full rounded-none border-2 border-black p-3 font-sans" />
// Direct icon import (NOT barrel import)
import FileText from 'lucide-react/dist/esm/icons/file-text';
// Dynamic import for heavy components
import dynamic from 'next/dynamic';
const PDFViewer = dynamic(() => import('./PDFViewer'), { ssr: false });
// Use Promise.all for independent fetches
const [resumes, jobs] = await Promise.all([
api.get('/api/v1/resumes'),
api.get('/api/v1/jobs'),
]);
npm run lint passesnpm run format runrounded-none on all elementsnext/dynamicPromise.all()You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
Use when receiving code review feedback, before implementing suggestions, especially if feedback seems unclear or technically questionable - requires technical rigor and verification, not performative agreement or blind implementation
Navigate, search, and understand the Resume Matcher codebase using ripgrep, ack, or grep. Find functions, classes, components, API endpoints, trace data flows, and understand architecture. Use FIRST when exploring code, finding files, or understanding project structure.
Swiss International Style for Resume Matcher. Invoke ONLY when designing new UI components or modifying existing component styles.
Build Python APIs with FastAPI, Pydantic v2, and SQLAlchemy 2.0 async. Covers project structure, JWT auth, validation, and database integration with uv package manager. Prevents 7 documented errors. Use when: creating Python APIs, implementing JWT auth, or troubleshooting 422 validation, CORS, async blocking, form data, background tasks, or OpenAPI schema errors.
Codebase orientation. Use FIRST when exploring code, finding files, or understanding project structure. For advanced search, see the codebase-navigator skill.