Claude/headless woocommerce setup 011 c ut fa di rc brr eay td whoe#17
Open
mattbylett wants to merge 6 commits intodiet103:mainfrom
Open
Conversation
This commit adds a production-ready Next.js eCommerce template with comprehensive infrastructure for building maintainable eCommerce applications. Key Features: - Complete design token system (CSS custom properties) - 6 foundational components (Button, Card, Input, Form, Modal, Table) - WooCommerce REST API integration with type-safe client - Stripe payment integration - Example products feature demonstrating all patterns - Custom Claude Code skill for pattern enforcement - Full TypeScript coverage with strict typing - CSS Modules with design token enforcement - Features-first architecture for scalability Core Principles Enforced: - DRY (Don't Repeat Yourself) - SRP (Single Responsibility Principle) - NO inline styles - all styling through Component.module.css - Design tokens only - no hardcoded colors/spacing/values Components Created: - Button: 5 variants, 3 sizes, loading states, full accessibility - Card: Flexible layout with header/body/footer sections - Input: Text/email/password/textarea with validation & icons - Form: Structured forms with error handling - Modal: Accessible dialogs with focus trapping - Table: Sortable, responsive data tables Integration Libraries: - WooCommerce client (src/lib/woocommerce/) - Stripe client (src/lib/stripe/) - Complete TypeScript type definitions Documentation: - Comprehensive README with examples - Quick start SETUP_GUIDE - Claude Code skill with detailed patterns - Inline documentation throughout Configuration: - TypeScript with strict checking - ESLint + Prettier - Next.js 14 with App Router - Path aliases for clean imports This template provides everything needed to start a new Next.js + WooCommerce eCommerce project with enforced best practices from day one.
- skill-rules.json: Defines triggers for auto-activation - README.md: Explains how skills work and usage - Enables automatic enforcement without manual reminders
Demonstrates what happens when user asks: 'Create a filter system for the shop sidebar' Created Components: - FilterSidebar.tsx - Fully featured filter component - FilterSidebar.module.css - Design token-based styling - FilterSidebar.example.tsx - Usage demonstration - filters.ts - TypeScript type definitions Pattern Adherence (Enforced by Skill): ✅ NO inline styles - all via .module.css ✅ Design tokens only - every value from tokens.css ✅ TypeScript with full JSDoc documentation ✅ React.FC pattern with proper interfaces ✅ Accessibility features (ARIA labels, keyboard nav) ✅ Responsive design using design token breakpoints ✅ Clean component structure Features Implemented: - Expandable/collapsible filter groups - Price range slider with inputs - Checkbox filters with counts - Active filter display with removal - Clear all functionality - Keyboard navigation support - Mobile responsive design - Beautiful spacing and typography using tokens This is exactly what the skill produces automatically.
Created three key documents for skill management: 1. SKILLS_ROADMAP.md (17 Planned Skills): Essential: API routes, error handling, notifications High: Cart/checkout, auth, form validation Medium: Testing, middleware, email, data fetching Low: Performance, security, SEO, i18n, analytics 2. HOW_TO_ADD_SKILLS.md: Complete guide for implementing skills Two methods: Ask Claude vs DIY Configuration options and examples 3. Updated README.md with documentation links Allows incremental skill implementation as needed.
Author
|
Adding Framework For New Site |
This patch contains all changes for the complete template. To apply on your local machine: 1. Download this patch file 2. Run: git apply nextjs-ecommerce-template.patch 3. The nextjs-ecommerce-template directory will appear
Extract with: tar -xzf NEXTJS_ECOMMERCE_TEMPLATE.tar.gz
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.