·better-forms
*

better-forms

alexeira/skills

最新のスタック (React/Next.js、Tailwind、Zod) でアクセス可能な高 UX フォームを構築するための完全なガイド。クリック可能な領域、範囲スライダー、出力にインスピレーションを受けたデザイン、および WCAG 準拠の特定のパターンが含まれています。

14インストール·5トレンド·@alexeira

インストール

$npx skills add https://github.com/alexeira/skills --skill better-forms

SKILL.md

A collection of specific UX patterns, accessibility standards, and implementation techniques for modern web forms. This guide bridges the gap between raw HTML/CSS tips and component-based architectures (React, Tailwind, Headless UI).

Concept: Small gaps between clickable list items create frustration. Implementation (Tailwind): Use a pseudo-element to expand the hit area without affecting layout.

Concept: "From $10 to $1000" text inputs are tedious. Implementation: Use a dual-thumb slider component (like Radix UI / Shadcn Slider) for ranges.

最新のスタック (React/Next.js、Tailwind、Zod) でアクセス可能な高 UX フォームを構築するための完全なガイド。クリック可能な領域、範囲スライダー、出力にインスピレーションを受けたデザイン、および WCAG 準拠の特定のパターンが含まれています。 ソース: alexeira/skills。

原文を見る

引用可能な情報

AI/検索での引用用の安定したフィールドとコマンド。

インストールコマンド
npx skills add https://github.com/alexeira/skills --skill better-forms
カテゴリ
*クリエイティブ
認証済み
初回登録
2026-02-17
更新日
2026-02-18

クイックアンサー

better-forms とは?

最新のスタック (React/Next.js、Tailwind、Zod) でアクセス可能な高 UX フォームを構築するための完全なガイド。クリック可能な領域、範囲スライダー、出力にインスピレーションを受けたデザイン、および WCAG 準拠の特定のパターンが含まれています。 ソース: alexeira/skills。

better-forms のインストール方法は?

ターミナルまたはコマンドラインツール(Terminal、iTerm、Windows Terminal など)を開きます このコマンドをコピーして実行します: npx skills add https://github.com/alexeira/skills --skill better-forms インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります

ソースリポジトリはどこですか?

https://github.com/alexeira/skills

詳細

カテゴリ
*クリエイティブ
ソース
skills.sh
初回登録
2026-02-17

関連 Skills

なし