create-web-form
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.
Best use case
create-web-form is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
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.
Teams using create-web-form should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/create-web-form/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How create-web-form Compares
| Feature / Agent | create-web-form | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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 ### 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 - `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
Related Skills
create-readme
Create a README.md file for the project
create-oo-component-documentation
Create comprehensive, standardized documentation for object-oriented components following industry best practices and architectural documentation standards.
angular-performance
Angular performance: NgOptimizedImage, @defer, lazy loading, SSR. Trigger: When optimizing Angular app performance, images, or lazy loading.
angular-forms
Angular forms: Signal Forms (experimental) and Reactive Forms. Trigger: When working with forms, validation, or form state in Angular.
create-specification
Create a new specification file for the solution, optimized for Generative AI consumption.
git:create-worktree
Create and setup git worktrees for parallel development with automatic dependency installation
create-pr
Create pull requests following Sentry conventions. Use when opening PRs, writing PR descriptions, or preparing changes for review. Follows Sentry's code review guidelines.
create-github-pull-request-from-specification
Create GitHub Pull Request for feature request from specification file using pull_request_template.md template.
create-github-issues-for-unmet-specification-requirements
Create GitHub Issues for unimplemented requirements from specification files using feature_request.yml template.
create-github-issues-feature-from-implementation-plan
Create GitHub Issues from implementation plan phases using feature_request.yml or chore_request.yml templates.
adr-create
Creates a single Architecture Decision Record (ADR) for a current technical decision. Unlike retrospective (which reconstructs past ADRs from git history), this skill documents decisions as they happen with full context, alternatives considered, and expected consequences.
mcp-create-adaptive-cards
Skill converted from mcp-create-adaptive-cards.prompt.md