MCP HubMCP Hub
スキル一覧に戻る

form-patterns

spences10
更新日 Yesterday
45 閲覧
5
5
GitHubで表示
テストaidesign

について

このClaudeスキルは、Svelteでスタイルされたフォームを構築するためのDaisyUI v5フォームコンポーネントとパターンを提供します。入力フィールド、セレクトボックス、テキストエリア、適切なfieldset/legend構造を用いたバリデーションのためのすぐに使用できるテンプレートを含みます。DaisyUI v5の更新されたクラス規約に従った事前構築済みのフォームレイアウトが必要な場合にご利用ください。

クイックインストール

Claude Code

推奨
プラグインコマンド推奨
/plugin add https://github.com/spences10/devhub-crm
Git クローン代替
git clone https://github.com/spences10/devhub-crm.git ~/.claude/skills/form-patterns

このコマンドをClaude Codeにコピー&ペーストしてスキルをインストールします

ドキュメント

Form Patterns

Quick Start

<form {...my_form} class="space-y-4">
	<fieldset class="fieldset">
		<legend class="fieldset-legend">Name</legend>
		<label class="validator input w-full">
			<input
				type="text"
				name="name"
				placeholder="Your name"
				class="grow"
				required
			/>
		</label>
	</fieldset>

	{#if my_form.error}
		<div class="alert alert-error">{my_form.error}</div>
	{/if}

	<button class="btn btn-block btn-primary" type="submit"
		>Submit</button
	>
</form>

Core Principles

  • v5 structure: Use fieldset/fieldset-legend (NOT old form-control/label-text)
  • Input wrapper: <label class="input w-full"> contains <input class="grow">
  • Validation: Add validator class to label for automatic validation UI
  • Selects/textareas: Apply classes directly (e.g., select w-full) - no wrapper
  • Error handling: Remote functions provide .error property automatically
  • Spacing: Use space-y-4 on forms for consistent spacing

Reference Files

GitHub リポジトリ

spences10/devhub-crm
パス: .claude/skills/form-patterns

関連スキル

content-collections

メタ

This skill provides a production-tested setup for Content Collections, a TypeScript-first tool that transforms Markdown/MDX files into type-safe data collections with Zod validation. Use it when building blogs, documentation sites, or content-heavy Vite + React applications to ensure type safety and automatic content validation. It covers everything from Vite plugin configuration and MDX compilation to deployment optimization and schema validation.

スキルを見る

creating-opencode-plugins

メタ

This skill provides the structure and API specifications for creating OpenCode plugins that hook into 25+ event types like commands, files, and LSP operations. It offers implementation patterns for JavaScript/TypeScript modules that intercept and extend the AI assistant's lifecycle. Use it when you need to build event-driven plugins for monitoring, custom handling, or extending OpenCode's capabilities.

スキルを見る

evaluating-llms-harness

テスト

This Claude Skill runs the lm-evaluation-harness to benchmark LLMs across 60+ standardized academic tasks like MMLU and GSM8K. It's designed for developers to compare model quality, track training progress, or report academic results. The tool supports various backends including HuggingFace and vLLM models.

スキルを見る

sglang

メタ

SGLang is a high-performance LLM serving framework that specializes in fast, structured generation for JSON, regex, and agentic workflows using its RadixAttention prefix caching. It delivers significantly faster inference, especially for tasks with repeated prefixes, making it ideal for complex, structured outputs and multi-turn conversations. Choose SGLang over alternatives like vLLM when you need constrained decoding or are building applications with extensive prefix sharing.

スキルを見る