Skip to content

add-feature

Access: /template add-feature or /t add-feature

Add new application features to your MakerKit SaaS project.

License Required

MakerKit is a commercial product that requires a license. Visit https://makerkit.dev for licensing information.

Overview

The add-feature command creates complete feature modules following MakerKit's architectural patterns. It generates all necessary components, hooks, API routes, and database migrations.

Usage

bash
/template add-feature "Feature description"
# or
/t add-feature "Feature description"

Examples

bash
# Add a user dashboard
/template add-feature "User dashboard with activity charts and recent transactions"

# Add a comments system
/t add-feature "Comments system for blog posts with nested replies"

# Add file upload
/template add-feature "File upload with drag-and-drop and progress tracking"

What Gets Created

When you run this command, it creates:

  1. Feature Directory - src/features/[feature-name]/
  2. React Components - UI components with proper styling
  3. Server Actions - Type-safe server-side logic
  4. Database Schema - Tables and relationships if needed
  5. API Routes - RESTful or tRPC endpoints
  6. Hooks - Custom React hooks for data fetching
  7. Tests - Unit and integration tests
  8. Documentation - CLAUDE.md file for the feature

Prerequisites

  • MakerKit project initialized
  • Valid MakerKit license
  • Database configured (if feature requires persistence)

Best Practices

  • Be specific in your feature description
  • Include UI/UX requirements
  • Mention any third-party integrations
  • Specify performance requirements

Example Output

typescript
// src/features/comments/components/CommentList.tsx
export function CommentList({ postId }: { postId: string }) {
  const { data: comments, isLoading } = useComments(postId);
  
  if (isLoading) return <CommentSkeleton />;
  
  return (
    <div className="space-y-4">
      {comments?.map((comment) => (
        <Comment key={comment.id} comment={comment} />
      ))}
    </div>
  );
}

See Also

Built with ❤️ for the AI Coding community, by Praney Behl