Diamond Fysio Frontend Skill

This skill ensures consistency with the Diamond Fysio project's frontend patterns and best practices.

Project Overview

• Framework: Next.js 16 with Pages Router (primary) + App Router (new routes)
• React: v19
• TypeScript: Mixed (TSX and JSX components)
• Styling: Tailwind CSS
• CMS: Contentful with GraphQL
• Icons: Heroicons, FontAwesome, React Icons
• Forms: React Hook Form
• Animation: Framer Motion
• i18n: Dutch (nl) and English (en) locales

Code Review Checklist

When reviewing or writing components, verify:

1. Accessibility (Critical)

• ARIA labels: All interactive elements must have aria-label attributes
• Keyboard navigation: Use tabIndex={0} for focusable elements
• Focus states: Apply focus:outline-none focus-visible:ring-2 focus-visible:ring-teal-500
• Semantic HTML: Use proper heading hierarchy (h1, h2, h3)
• Alt text: All images must have meaningful alt attributes

Example from Button.jsx:

<p className={btnType} role="button" aria-label={title} tabIndex={0}>
  {title}
</p>

2. Styling Patterns

• Use Tailwind CSS exclusively (no inline styles or CSS modules)
• Gradient buttons: Follow the pattern bg-gradient-to-r from-teal-500 to-cyan-600
• Hover states: hover:from-teal-400 hover:to-cyan-500
• Responsive design: Use md:, lg: prefixes for breakpoints
• Consistent spacing: Use Tailwind spacing scale (px-8, py-3, etc.)

Common button classes:

const btnType =
  'w-full inline-flex items-center justify-center px-8 py-3 text-base font-medium rounded-md text-white bg-gradient-to-r from-teal-500 to-cyan-600 hover:from-teal-400 hover:to-cyan-500 md:py-4 md:text-lg md:px-10 shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-teal-500';

3. Internationalization (i18n)

• Support both nl and en locales
• Use router locale: const locale = router?.locale || 'nl'
• Provide fallback defaults for all translated strings
• Structure: Create defaults object with nl/en keys

Example pattern:

const router = useRouter();
const locale = router?.locale || 'nl';
const isEn = locale === 'en';

const defaults = {
  nl: { title: 'Nederlandse tekst', ... },
  en: { title: 'English text', ... }
};

const t = {
  title: i18n?.title || defaults[locale].title
};

4. Next.js Routing

• Internal links: Use next/link with <Link href={path}>
• External links: Use <a href={url} rel="noopener noreferrer">
• Locale awareness: Check router.locale for current language
• Pages structure: Components in /components, pages in /pages

5. React Patterns

• Hooks: Use modern hooks (useState, useRouter, etc.)
• Props destructuring: ({ title, type, internal_link }) => {}
• Default props: Use ES6 defaults extra_classes = ''
• No React import needed: Next.js handles this automatically

6. Contentful Integration

• GraphQL queries: Store in /lib/query/
• Content types: Check /components/contentTypes/ for type definitions
• Rich text: Use @contentful/rich-text-react-renderer
• Image optimization: Use Next.js <Image> component when possible

7. Form Handling

• Use React Hook Form for complex forms
• Validation: Implement client-side validation
• Error states: Show user-friendly error messages in both languages
• Loading states: Display loading indicators during submission
• Success feedback: Use CheckCircleIcon from Heroicons for success states

8. Component Structure

• File organization:
  • Simple components: Single file in /components/ComponentName.jsx
  • Complex components: Directory /components/ComponentName/ with sub-components
• Export pattern: Use export default ComponentName
• Naming: PascalCase for component files and names

9. Code Quality

• ESLint compliance: Follow the project's ESLint config
  • React hooks rules enforced
  • jsx-a11y warnings enabled
  • Promise handling patterns
• No unused variables: Clean up unused imports and variables
• Consistent formatting: Use Prettier (runs via Husky pre-commit)

10. Performance Considerations

• Lazy loading: Use dynamic imports for heavy components
• Image optimization: Leverage Next.js Image component
• Memoization: Use React.memo for expensive renders (when needed)
• Avoid unnecessary re-renders: Check useEffect dependencies

Common Issues to Flag

1. Missing accessibility attributes (aria-label, alt text, tabIndex)
2. Inline styles instead of Tailwind classes
3. Missing i18n translations (only Dutch or only English)
4. Incorrect link components (using <a> for internal links)
5. Missing focus states on interactive elements
6. Non-semantic HTML (divs instead of buttons, missing headings)
7. Hard-coded text that should be translatable
8. Missing error handling in forms or API calls

Project-Specific Patterns

Gradient Colors

Primary gradient: from-teal-500 to-cyan-600 Hover gradient: from-teal-400 to-cyan-500 Focus ring: focus-visible:ring-teal-500

Icons

• Heroicons: @heroicons/react/solid or @heroicons/react/outline
• FontAwesome: @fortawesome/react-fontawesome
• React Icons: react-icons

Layout

• Use <Layout> wrapper from /components/Layout/Layout.jsx
• Headers: Different header types in /components/Headers/
• Footer: Consistent footer from /components/Layout/Footer.jsx

Example Code Reviews

Good Example ✅

import Link from 'next/link';

const Button = ({ title, internal_link, external_link, extra_classes = '' }) => {
  const btnType =
    'inline-flex items-center px-8 py-3 rounded-md bg-gradient-to-r from-teal-500 to-cyan-600 hover:from-teal-400 hover:to-cyan-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-teal-500';

  return internal_link ? (
    <Link href={internal_link}>
      <p className={btnType} role="button" aria-label={title} tabIndex={0}>
        {title}
      </p>
    </Link>
  ) : (
    <a href={external_link} className={btnType} aria-label={title} rel="noopener noreferrer">
      {title}
    </a>
  );
};

export default Button;

Issues to Fix ❌

// Missing: Next.js Link, accessibility, Tailwind classes
const Button = ({ title, link }) => {
  return (
    <a href={link} style={{ backgroundColor: 'teal' }}>
      {' '}
      {/* inline style! */}
      {title} {/* no aria-label! */}
    </a>
  );
};

When Adding New Features

1. Check existing components for similar patterns first
2. Maintain accessibility from the start
3. Support both languages (nl/en)
4. Use Tailwind utilities instead of custom CSS
5. Test keyboard navigation and focus states
6. Follow the gradient/color scheme for consistency
7. Add proper error handling and loading states
8. Document complex logic with comments if needed

Testing Considerations

• Verify accessibility with keyboard navigation
• Test both Dutch and English versions
• Check mobile responsiveness (Tailwind breakpoints)
• Validate form submissions
• Test with Contentful data (staging and production)

Deployment & Testing URLs

• Live URL: https://fysiodiamondfactory.nl
• Recent deployments: Check fysiodiamondfactory.nl for the latest production version

When testing features, always verify on the live site to ensure proper deployment.

Resources

• Tailwind config: /tailwind.config.js
• ESLint config: /eslint.config.js
• TypeScript config: /tsconfig.json
• Documentation: /docs/ folder