chore: add Prettier configuration with Tailwind plugin

[JoniUzan]

Summary

• Add comprehensive Prettier configuration to enforce consistent code formatting
• Install and configure prettier-plugin-tailwindcss for automatic class sorting
• Create .prettierignore to exclude build outputs and generated files
• Apply formatting across entire codebase

Configuration Details

.prettierrc.json

• Standard formatting rules (semi-colons, quotes, spacing)
• Tailwind CSS plugin for automatic class sorting
• Custom functions support: cn() and cva()
• Overrides for Markdown (prose wrap at 80 chars) and JSON files (100 char width)

.prettierignore

Excludes:

• Build outputs (.next, dist, storybook-static)
• Dependencies (node_modules)
• Database files and migrations
• Generated files and lock files
• IDE and OS files

Changes

• New files: .prettierrc.json, .prettierignore
• Package: Added prettier-plugin-tailwindcss@^0.6.14
• 28 files formatted with Tailwind class sorting applied

Benefits

✅ Consistent code formatting across the monorepo
✅ Automatic Tailwind class sorting (improves readability and reduces conflicts)
✅ IDE integration for format-on-save
✅ CI-ready configuration for automated checks

Test Plan

• Create Prettier configuration with Tailwind plugin
• Install prettier-plugin-tailwindcss
• Run pnpm format successfully across all files
• Verify Tailwind classes are properly sorted in components
• Confirm ignored files are excluded from formatting

🤖 Generated with Claude Code

[claude]

Code Review: Prettier Configuration with Tailwind Plugin

Summary

This PR adds comprehensive Prettier configuration with the Tailwind CSS plugin to enforce consistent code formatting across the monorepo. Overall, this is a well-executed infrastructure improvement that will benefit the codebase long-term.

✅ Strengths

1. Excellent Configuration Choices

• .prettierrc.json follows industry-standard settings (80 char width, 2 spaces, semicolons, LF line endings)
• Proper JSON schema reference for IDE autocomplete
• Smart overrides for Markdown (prose wrap) and JSON (100 char width)
• tailwindFunctions: ["cn", "cva"] correctly targets the utility functions used in the codebase

2. Comprehensive .prettierignore

• Well-organized with clear section comments
• Correctly excludes build outputs, dependencies, generated files, and lock files
• Prisma migrations exclusion is critical (prevents reformatting SQL)
• Public assets exclusion prevents issues with binary/image files

3. Consistent Application

• 28 files formatted systematically
• Tailwind class sorting applied correctly (e.g., apps/web/app/page.tsx:5 now has properly ordered utility classes)
• Markdown files rewrapped to 80 characters for better readability

4. Good PR Documentation

• Clear summary with test plan
• Explicit benefits listed
• Configuration details documented

⚠️ Issues & Recommendations

1. Dependency Management Inconsistency ⚠️

Issue: prettier-plugin-tailwindcss is hardcoded in package.json:16 instead of using the workspace catalog pattern.

Current:
```json
"prettier-plugin-tailwindcss": "^0.6.14"
```

Should be:
```json
"prettier-plugin-tailwindcss": "catalog:"
```

And add to pnpm-workspace.yaml:8 (after prettier):
```yaml
prettier-plugin-tailwindcss: "^0.6.14"
```

Why: The CLAUDE.md explicitly states: "Never hardcode versions in package.json - always reference the workspace catalog" for consistency across the monorepo.

2. Missing Test Verification 📋

Recommendation: Add verification that:

• pnpm lint still passes after formatting changes
• pnpm build completes successfully
• No runtime issues introduced by class reordering

While formatting shouldn't break anything, it's good practice to verify, especially with Tailwind class sorting.

3. Future CI Integration 💡

Suggestion: Consider adding a CI check to enforce formatting:
```json
"format:check": "prettier --check "**/*.{ts,tsx,md}""
```

This could be added to your CI pipeline to prevent unformatted code from being merged.

4. Minor: Prettier Plugin Version 🔍

The latest prettier-plugin-tailwindcss is 0.6.15 (you're using 0.6.14). While not critical, consider updating to the latest patch version for bug fixes.

🔒 Security

✅ No security concerns. All changes are configuration and formatting only.

🚀 Performance

✅ No performance impact. Formatting is a development-time concern.

🧪 Test Coverage

⚠️ Not Applicable - This is an infrastructure change. However, recommend verifying:

• Existing tests still pass
• Build process completes
• Storybook still builds and serves correctly

📝 Code Quality

Score: 8.5/10

Excellent:

• Clean, well-organized configuration
• Thoughtful overrides for different file types
• Comprehensive ignore patterns

Could Improve:

• Catalog consistency (main issue)
• Explicit CI integration mentioned in PR description

Final Verdict

✅ APPROVE with minor changes requested

This PR significantly improves code consistency and developer experience. The only blocking issue is the dependency management inconsistency. Once that's addressed, this is ready to merge.

Action Items:

1. Move prettier-plugin-tailwindcss to workspace catalog
2. Verify pnpm lint and pnpm build pass
3. Consider adding format:check script for CI

Great work on improving the codebase infrastructure! 🎉

---

🤖 Review generated with Claude Code

[claude]

Pull Request Review: Prettier Configuration with Tailwind Plugin

Overall Assessment: APPROVED WITH MINOR SUGGESTIONS

This is a well-executed PR that adds comprehensive Prettier configuration to enforce consistent code formatting across the monorepo.

Code Quality & Best Practices - Strengths

1. Excellent Configuration Structure - .prettierrc.json uses clear, standard formatting rules with schema reference for IDE autocompletion
2. Smart Tailwind Integration - prettier-plugin-tailwindcss properly configured with custom tailwindFunctions for cn() and cva()
3. Thoughtful Overrides - Markdown prose wrap at 80 chars, JSON files at 100 chars
4. Comprehensive .prettierignore - Excludes all appropriate files (build outputs, dependencies, generated files)
5. Proper Dependency Management - Uses pnpm catalog for centralized version control
6. Clean Commit History - Two logical commits with quality checks mentioned

Potential Issues & Concerns

Tailwind Class Ordering Issue in Button Component

Location: packages/ui/src/components/button/button.tsx:8

The base button variant classes are on a single, extremely long line that is hard to read and maintain. The ordering appears unusual with state classes (focus-visible, aria-invalid) appearing before base layout classes.

Expected Tailwind ordering: layout → display → positioning → sizing → spacing → typography → visual → states

Recommendation: Consider using template literals with multiple lines for better readability in cva() calls, or verify this is the intended output from the plugin.

Performance Considerations

No Performance Concerns - Prettier is a dev-time tool with no runtime impact. Tailwind class ordering is purely aesthetic and doesn't affect bundle size.

Security Concerns

No Security Issues - Dependencies are from trusted sources. .prettierignore correctly excludes .env files.

Test Coverage

Quality checks mentioned in commit: Lint passed, Build passed, Prettier works with catalog reference.

Recommendations:

1. Add CI Integration: pnpm format --check
2. Consider pre-commit hooks for automatic formatting
3. Add documentation in CLAUDE.md about when to run pnpm format

Style & Convention Adherence

Follows Project Conventions - Aligns with monorepo structure, consistent with existing tooling, proper separation of concerns.

Final Score: 9.2/10 - Excellent contribution!

Category	Rating
Code Quality	9/10
Best Practices	10/10
Security	10/10
Performance	10/10
Test Coverage	8/10
Documentation	8/10

Suggested Next Steps

1. Merge this PR - It's ready and provides immediate value
2. Follow-up: Investigate the button.tsx class ordering (separate issue/PR)
3. Enhancement: Add CI check for formatting consistency
4. Optional: Set up pre-commit hooks for automatic formatting

Great work on improving code consistency across the monorepo! This will significantly reduce formatting-related merge conflicts and make the codebase more maintainable.

Review generated by Claude Code