frontend-dev_skill

Overview

This skill is a frontend development agent tailored for the Resume Matcher app. It guides creation and modification of Next.js pages, React components, Tailwind CSS styled in Swiss International Style, API integration, hooks, and i18n. Use it to implement consistent UI, performance-minded patterns, and accessibility-minded behavior for resume tools.

How this skill works

The agent inspects project structure under apps/frontend and follows the provided workflow, style guide, and coding standards. It generates or updates components, pages, hooks, and API clients while enforcing Swiss International Style rules (colors, typography, borders, hard shadows) and project conventions like direct icon imports and dynamic loading for heavy pieces. It also validates textarea Enter handling, linting, and formatting requirements before finalizing changes.

When to use it

• Creating new Next.js pages (app/) for dashboard, builder, tailor, print, or settings
• Building or refactoring reusable React components in components/
• Applying Swiss International Style and Tailwind classes consistently
• Integrating with backend APIs via lib/api and optimizing fetches with Promise.all
• Adding i18n strings or using useTranslations hooks
• Implementing or updating custom hooks in hooks/

Best practices

• Follow Swiss International Style: palette, serif headers, sans body, mono labels, no rounded corners
• Use rounded-none everywhere and apply hard shadow class shadow-[4px_4px_0px_0px_#000000]
• Import icons directly from their ESM path and use next/dynamic for heavy components
• Use Promise.all for independent API calls and centralize API client usage in lib/api
• Ensure all textareas stop Enter key propagation and add tests or manual checks for keyboard behavior
• Run npm run lint and npm run format before committing; keep commits small and focused

Example use cases

• Create a resume preview component that matches the Swiss palette and uses hard shadows and border-2 styles
• Add an AI tailoring page under tailor/ with dynamic import for heavy visualization components
• Refactor a form component to include Enter key handling on textareas and consistent typography classes
• Integrate job and resume fetches using Promise.all and the central api client
• Add i18n translations and consume them via useTranslations for multilingual UI