Back to Skills

form-patterns

spences10
Updated Today
21 views
5
5
View on GitHub
Testingaidesign

About

This Claude Skill provides DaisyUI v5 form components and patterns for building styled forms with Svelte. It includes ready-to-use templates for inputs, selects, textareas, and validation with proper fieldset/legend structure. Use it when you need pre-built form layouts that follow DaisyUI v5's updated class conventions.

Quick Install

Claude Code

Recommended
Plugin CommandRecommended
/plugin add https://github.com/spences10/devhub-crm
Git CloneAlternative
git clone https://github.com/spences10/devhub-crm.git ~/.claude/skills/form-patterns

Copy and paste this command in Claude Code to install this skill

Documentation

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 Repository

spences10/devhub-crm
Path: .claude/skills/form-patterns

Related Skills

sglang

Meta

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.

View skill

evaluating-llms-harness

Testing

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.

View skill

llamaguard

Other

LlamaGuard is Meta's 7-8B parameter model for moderating LLM inputs and outputs across six safety categories like violence and hate speech. It offers 94-95% accuracy and can be deployed using vLLM, Hugging Face, or Amazon SageMaker. Use this skill to easily integrate content filtering and safety guardrails into your AI applications.

View skill

content-collections

Meta

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.

View skill