create-web-form

Name: create-web-form
Author: github

github.com/github開発40.5k7.0k 回インストール今日更新

リポジトリ

create-web-form について

create-web-formは、Webフォームを作成する開発者向けのリファレンススキルです。HTML、スタイル、アクセシビリティ、検証、サーバー側処理、データ処理、セキュリティ、パフォーマンスの資料をまとめています。

主な機能

01HTML構造とフォームコントロール
02CSSスタイルとJavaScriptの動作
03アクセシビリティの指針
04PHPとPythonによる処理資料
05データ処理、セキュリティ、性能

活用シーン

01アクセシブルなフォーム構造の計画
02クライアント側の検証と操作性の追加
03PHPまたはPythonで送信内容を処理
04フォームのセキュリティと性能の確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/github/awesome-copilot --skill create-web-form

インストール後、Claude Code で/create-web-formを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/

accessibility.md

aria-form-role.md

css-styling.md

form-basics.md

form-controls.md

form-data-handling.md

html-form-elements.md

html-form-example.md

hypertext-transfer-protocol.md

javascript.md

php-cookies.md

php-forms.md

php-json.md

php-mysql-database.md

progressive-web-app.md

python-as-web-framework.md

python-contact-form.md

python-flask-app.md

python-flask.md

security.md

styling-web-forms.md

web-api.md

web-performance.md

xml.md

詳細

Webフォーム作成スキル

概要

このスキルでは、Webフォームの作成に役立つ包括的な参考資料とベストプラクティスを提供します。HTMLの構文、UI/UXデザイン、フォームの検証、サーバーサイド処理（PHPおよびPython）、データ処理、ネットワーク通信を扱います。

目的

以下を提供し、堅牢でアクセシブル、かつ使いやすいWebフォームを開発できるようにします。

HTMLフォームの構文と構造
フォーム要素のCSSスタイル設定テクニック
フォームのインタラクションと検証に使用するJavaScript
アクセシビリティのベストプラクティス
PHPおよびPythonによるサーバーサイドのフォーム処理
データベースの統合方法
ネットワークデータの処理とセキュリティ
パフォーマンスの最適化

参考ファイル

このスキルには、以下の参考ドキュメントが含まれています。

UIとスタイル設定

styling-web-forms.md - フォームのスタイル設定テクニックとベストプラクティス
css-styling.md - フォームのスタイル設定に関する包括的なCSSリファレンス

ユーザーエクスペリエンス

accessibility.md - フォームのWebアクセシビリティガイドライン
javascript.md - フォーム機能のためのJavaScriptテクニック
form-controls.md - ネイティブフォームコントロールとその使い方
progressive-web-app.md - プログレッシブウェブアプリとの統合

HTMLの構造

form-basics.md - HTMLフォームの基本的な構造
aria-form-role.md - アクセシブルなフォームのためのARIAロール
html-form-elements.md - HTMLフォーム要素の完全なリファレンス
html-form-example.md - 実践的なHTMLフォームの例

サーバーサイド処理

form-data-handling.md - ネットワーク上のフォームデータ処理
php-forms.md - PHPによるフォーム処理
php-cookies.md - PHPでのCookie管理
php-json.md - PHPでのJSON処理
php-mysql-database.md - PHPによるデータベース統合
python-contact-form.md - Pythonによるお問い合わせフォームの実装
python-flask.md - Flaskフォームのチュートリアル
python-flask-app.md - Flask Webアプリケーションの構築
python-as-web-framework.md - Python Webフレームワークの基礎

データとネットワーク

xml.md - XMLデータ形式のリファレンス
hypertext-transfer-protocol.md - HTTPプロトコルのリファレンス
security.md - Webセキュリティのベストプラクティス
web-api.md - Web APIの統合
web-performance.md - パフォーマンス最適化のテクニック

使用方法

Webフォームを作成する際は、必要に応じて適切な参考ファイルを参照してください。

計画：form-basics.mdとform-controls.mdを確認します
構造：html-form-elements.mdとaria-form-role.mdを使用します
スタイル設定：styling-web-forms.mdとcss-styling.mdを参照します
インタラクション：javascript.mdのテクニックを適用します
アクセシビリティ：accessibility.mdのガイドラインに従います
サーバー処理：PHPまたはPythonの参考資料を選びます
データ保存：データベースとデータ形式の参考資料を参照します
最適化：web-performance.mdとsecurity.mdを確認します

ベストプラクティス

クライアント側とサーバー側の両方で、必ず入力を検証します
すべてのユーザーがフォームを利用できるようにします
セマンティックなHTML要素を使用します
適切なエラー処理とユーザーフィードバックを実装します
HTTPSを使用してフォームデータの送信を保護します
プログレッシブエンハンスメントの原則に従います
さまざまなブラウザーやデバイスでフォームをテストします
パフォーマンスとユーザーエクスペリエンスを最適化します

Markdown 対応

ログインしてコメント

基本情報

作者: github
リポジトリ: github/awesome-copilot
カテゴリ: 開発
インストール数: 6,970
GitHub スター: 40,516

問題を報告

おすすめの Skills

すべての Skills

remotion-render

github.com/inference-sh

1.6M

inference.sh を介して React/Remotion コンポーネントコードから動画をレンダリングします。TSX コードを渡すと MP4 を取得できます。useCurrentFrame、useVideoConfig、spring、interpolate、AbsoluteFill、Sequence など、すべての Remotion API に対応します。解像度、FPS、長さ、コーデックを設定できます。用途：プログラムによる動画生成、アニメーショングラフィック、モーションデザイン、データ駆動型動画、React アニメーションの動画化。トリガー：remotion、render video from code、tsx to video、react video、programmatic video、remotion render、code to video、animated video、motion graphics code、react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

コードベースをスキャンして改善の機会を探し、ビジュアル HTML レポートとして提示し、選択したものを詳しく掘り下げる。

design-mobile-apps

github.com/designed-by-ai

1.1M

Sleek でモバイルアプリの画面をデザインし、Sleek プロジェクトを編集して、React Native または HTML でデザインを実装します。

vercel-react-best-practices

github.com/vercel-labs

848.6k

Vercel Engineering の React および Next.js パフォーマンス最適化ガイドライン。React / Next.js コードを記述、レビュー、またはリファクタリングするときに、最適なパフォーマンスパターンを確保するため、このスキルを使用する必要があります。React コンポーネント、Next.js ページ、データ取得、バンドル最適化、またはパフォーマンス改善を含むタスクで発火します。