Frontend Development Skill

Frontend Development

Use when creating or modifying Next.js pages, React components, Tailwind CSS styles, API integration, hooks, or i18n.

Before Writing Code

Read docs/agent/architecture/frontend-workflow.md for user flow
Read docs/agent/design/style-guide.md for Swiss International Style (REQUIRED)
Read docs/agent/coding-standards.md for conventions
Check existing components in apps/frontend/components/

Non-Negotiable Rules

Swiss International Style - ALL UI changes must follow it
rounded-none everywhere - no rounded corners, ever
Hard shadows - shadow-[4px_4px_0px_0px_#000000], never soft shadows
Run npm run lint before committing
Run npm run format before committing
Enter key handling on all textareas

Swiss International Style Quick Reference

| 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 |

Anti-Patterns (NEVER)

rounded-* (except rounded-none)
Gradients or blur shadows
Colors outside the palette
Pastel or soft colors
Decorative icons without function

Patterns

New Component

'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>
  );
}

Textarea (Enter key fix)

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" />

Bundle Optimization

// 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 });

API Integration

// Use Promise.all for independent fetches
const [resumes, jobs] = await Promise.all([
  api.get('/api/v1/resumes'),
  api.get('/api/v1/jobs'),
]);

Checklist

[ ] npm run lint passes
[ ] npm run format run
[ ] rounded-none on all elements
[ ] Hard shadows, Swiss palette only
[ ] Correct typography (serif headers, mono labels, sans body)
[ ] Textareas have Enter key handler
[ ] Icons imported directly, heavy components use next/dynamic
[ ] Independent fetches use Promise.all()

Agent Skills: Frontend Development

Install this agent skill to your local

Skill Files