# render_task_form
> Render the task creation form using a Next.js form component with Tailwind CSS styling. Use this skill whenever create_task is called to provide a user interface for task creation with validation and orchestration handled by Claude code.
- Author: Zahida Raees
- Repository: zahidaraees/hackathon-ii-phase-ii-Full-Stack-Web-Application
- Version: 20260207224919
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-07
- Source: https://github.com/zahidaraees/hackathon-ii-phase-ii-Full-Stack-Web-Application
- Web: https://mule.run/skillshub/@@zahidaraees/hackathon-ii-phase-ii-Full-Stack-Web-Application~render_task_form:20260207224919
---
---
name: render_task_form
description: Render the task creation form using a Next.js form component with Tailwind CSS styling. Use this skill whenever create_task is called to provide a user interface for task creation with validation and orchestration handled by Claude code.
license: Complete terms in LICENSE.txt
---
# Render Task Form Skill
This skill provides a user interface for creating new tasks through a form component.
## Purpose
Render a task creation form that allows users to input task details and submit them for processing. This skill handles the presentation layer of task creation.
## When to Use
Use this skill whenever the `create_task` function is called to provide a user interface for task creation. This includes:
- Displaying a form for new task entry
- Collecting task details from users
- Validating user input before submission
- Handling form submission and orchestration
## Implementation Overview
The task form rendering is implemented using:
- Next.js form component for the user interface
- Tailwind CSS for responsive styling
- Claude code for validation and orchestration
## Detailed Implementation
### 1. Next.js Form Component
Create a task form component in your Next.js application:
```jsx
// components/TaskForm.jsx
import { useState } from 'react';
const TaskForm = ({ onSubmit }) => {
const [formData, setFormData] = useState({
title: '',
description: '',
priority: 'medium',
dueDate: '',
assignee: '',
tags: []
});
const [errors, setErrors] = useState({});
const [isSubmitting, setIsSubmitting] = useState(false);
const handleChange = (e) => {
const { name, value } = e.target;
setFormData(prev => ({
...prev,
[name]: value
}));
// Clear error when user starts typing
if (errors[name]) {
setErrors(prev => {
const newErrors = { ...prev };
delete newErrors[name];
return newErrors;
});
}
};
const handleTagChange = (e) => {
const tagString = e.target.value;
const tags = tagString.split(',').map(tag => tag.trim()).filter(tag => tag);
setFormData(prev => ({
...prev,
tags
}));
};
const validateForm = () => {
const newErrors = {};
if (!formData.title.trim()) {
newErrors.title = 'Title is required';
} else if (formData.title.length > 100) {
newErrors.title = 'Title must be less than 100 characters';
}
if (formData.description.length > 500) {
newErrors.description = 'Description must be less than 500 characters';
}
if (!formData.dueDate) {
newErrors.dueDate = 'Due date is required';
} else {
const dueDate = new Date(formData.dueDate);
const today = new Date();
today.setHours(0, 0, 0, 0);
if (dueDate < today) {
newErrors.dueDate = 'Due date cannot be in the past';
}
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const handleSubmit = async (e) => {
e.preventDefault();
if (!validateForm()) {
return;
}
setIsSubmitting(true);
try {
// Submit the form data
await onSubmit(formData);
// Reset form after successful submission
setFormData({
title: '',
description: '',
priority: 'medium',
dueDate: '',
assignee: '',
tags: []
});
} catch (error) {
console.error('Error submitting task:', error);
} finally {
setIsSubmitting(false);
}
};
return (
);
};
export default TaskForm;
```
### 2. Tailwind CSS Styling
The form uses Tailwind CSS for responsive styling. Make sure your `tailwind.config.js` is properly configured:
```javascript
// tailwind.config.js
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
```
And that Tailwind CSS is properly imported in your global CSS file:
```css
/* styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
```
### 3. Claude Code Validation and Orchestration
The form includes validation logic that can be enhanced by Claude code. Here's an example of how Claude might orchestrate additional validation:
```javascript
// utils/taskValidation.js
export const validateTaskData = (taskData) => {
const errors = {};
// Title validation
if (!taskData.title || taskData.title.trim().length === 0) {
errors.title = 'Task title is required';
} else if (taskData.title.length > 100) {
errors.title = 'Task title must be less than 100 characters';
}
// Description validation
if (taskData.description && taskData.description.length > 500) {
errors.description = 'Task description must be less than 500 characters';
}
// Due date validation
if (!taskData.dueDate) {
errors.dueDate = 'Due date is required';
} else {
const dueDate = new Date(taskData.dueDate);
const today = new Date();
today.setHours(0, 0, 0, 0);
if (dueDate < today) {
errors.dueDate = 'Due date cannot be in the past';
}
}
// Priority validation
const validPriorities = ['low', 'medium', 'high', 'urgent'];
if (!validPriorities.includes(taskData.priority)) {
errors.priority = 'Invalid priority level';
}
// Assignee validation (example with email format)
if (taskData.assignee && !isValidEmail(taskData.assignee)) {
errors.assignee = 'Invalid assignee email format';
}
return {
isValid: Object.keys(errors).length === 0,
errors
};
};
const isValidEmail = (email) => {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
};
// Additional orchestration function
export const processTaskSubmission = async (taskData) => {
// Validate the task data
const validation = validateTaskData(taskData);
if (!validation.isValid) {
throw new Error(`Validation failed: ${JSON.stringify(validation.errors)}`);
}
// Perform any additional orchestration steps
// e.g., check for duplicate tasks, notify assignees, etc.
// Submit the task to the backend
try {
const response = await fetch('/api/tasks', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(taskData),
});
if (!response.ok) {
throw new Error(`Failed to create task: ${response.statusText}`);
}
return await response.json();
} catch (error) {
console.error('Error creating task:', error);
throw error;
}
};
```
### 4. Using the Task Form Component
Here's how to use the TaskForm component in a Next.js page:
```jsx
// pages/tasks/create.jsx
import TaskForm from '../../components/TaskForm';
import { processTaskSubmission } from '../../utils/taskValidation';
import { useRouter } from 'next/router';
import { toast } from 'react-toastify'; // Assuming you're using react-toastify for notifications
const CreateTaskPage = () => {
const router = useRouter();
const handleSubmit = async (taskData) => {
try {
// Process the task submission with Claude-enhanced validation
const result = await processTaskSubmission(taskData);
// Show success notification
toast.success('Task created successfully!');
// Redirect to the task list or dashboard
router.push('/tasks');
} catch (error) {
console.error('Error creating task:', error);
toast.error(error.message || 'Failed to create task');
}
};
return (
Create New Task
);
};
export default CreateTaskPage;
```
## Additional Features
The form includes several UX enhancements:
- Real-time validation feedback
- Character count warnings
- Loading states during submission
- Responsive layout using Tailwind's grid system
- Accessible form labels and error messages
- Proper focus states for keyboard navigation
## Security Considerations
- Sanitize user inputs before processing
- Implement CSRF protection
- Validate and sanitize data on the server side as well
- Use proper authentication and authorization checks
- Implement rate limiting for form submissions