Add skill to create web forms

Add skill to create web forms

skills/create-web-form/SKILL.md

@@ -0,0 +1,87 @@
+---
+name: create-web-form
+description: 'Create robust, accessible web forms with best practices for HTML structure, CSS styling, JavaScript interactivity, form validation, and server-side processing. Use when asked to "create a form", "build a web form", "add a contact form", "make a signup form", or when building any HTML form with data handling. Covers PHP and Python backends, MySQL database integration, REST APIs, XML data exchange, accessibility (ARIA), and progressive web apps.'
+---
+
+# Create Web Form Skill
+
+## Overview
+
+This skill provides comprehensive reference materials and best practices for creating web forms. It covers HTML syntax, UI/UX design, form validation, server-side processing (PHP and Python), data handling, and network communication.
+
+## Purpose
+
+Enable developers to build robust, accessible, and user-friendly web forms by providing:
+
+- HTML form syntax and structure
+- CSS styling techniques for form elements
+- JavaScript for form interactivity and validation
+- Accessibility best practices
+- Server-side form processing with PHP and Python
+- Database integration methods
+- Network data handling and security
+- Performance optimization
+
+## Reference Files
+
+This skill includes the following reference documentation:
+
+### UI & Styling
+- `styling-web-forms.md` - Form styling techniques and best practices
+- `css-styling.md` - Comprehensive CSS reference for form styling
+
+### User Experience
+- `accessibility.md` - Web accessibility guidelines for forms
+- `javascript.md` - JavaScript techniques for form functionality
+- `form-controls.md` - Native form controls and their usage
+- `progressive-web-app.md` - Progressive web app integration
+
+### HTML Structure
+- `form-basics.md` - Fundamental HTML form structure
+- `aria-form-role.md` - ARIA roles for accessible forms
+- `html-form-elements.md` - Complete HTML form elements reference
+- `html-form-example.md` - Practical HTML form examples
+- `html-reference.md` - General HTML reference
+
+### Server-Side Processing
+- `form-data-handling.md` - Network form data handling
+- `php-forms.md` - PHP form processing
+- `php-cookies.md` - Cookie management in PHP
+- `php-json.md` - JSON handling in PHP
+- `php-mysql-database.md` - Database integration with PHP
+- `php-reference.md` - PHP language reference
+- `python-contact-form.md` - Python contact form implementation
+- `python-flask.md` - Flask forms tutorial
+- `python-flask-app.md` - Building Flask web applications
+- `python-as-web-framework.md` - Python web framework basics
+
+### Data & Network
+- `xml.md` - XML data format reference
+- `hypertext-transfer-protocol.md` - HTTP protocol reference
+- `security.md` - Web security best practices
+- `web-api.md` - Web API integration
+- `web-performance.md` - Performance optimization techniques
+
+## Usage
+
+When creating a web form, consult the appropriate reference files based on your needs:
+
+1. **Planning**: Review `form-basics.md` and `form-controls.md`
+2. **Structure**: Use `html-form-elements.md` and `aria-form-role.md`
+3. **Styling**: Reference `styling-web-forms.md` and `css-styling.md`
+4. **Interactivity**: Apply techniques from `javascript.md`
+5. **Accessibility**: Follow guidelines in `accessibility.md`
+6. **Server Processing**: Choose between PHP or Python references
+7. **Data Storage**: Consult database and data format references
+8. **Optimization**: Review `web-performance.md` and `security.md`
+
+## Best Practices
+
+- Always validate input on both client and server sides
+- Ensure forms are accessible to all users
+- Use semantic HTML elements
+- Implement proper error handling and user feedback
+- Secure form data transmission with HTTPS
+- Follow progressive enhancement principles
+- Test forms across different browsers and devices
+- Optimize for performance and user experience