styling-patterns
について
このClaude Skillは、DaisyUI v5デザインシステムのパターンを提供し、一貫したUIスタイリングを実現します。確立されたデザイン原則に基づいて、背景、ボーダー、テキストサイズ、セマンティックカラー、間隔の実装にご利用いただけます。開発者が適切に階層化されたインターフェースを、正しいビジュアルヒエラルキーと不透明度の使用で作成することを支援します。
クイックインストール
Claude Code
推奨/plugin add https://github.com/spences10/devhub-crmgit clone https://github.com/spences10/devhub-crm.git ~/.claude/skills/styling-patternsこのコマンドをClaude Codeにコピー&ペーストしてスキルをインストールします
ドキュメント
Styling Patterns
Quick Start
<!-- ✅ Correct: Proper background hierarchy -->
<div class="bg-base-200 p-6">
<div class="card bg-base-100 p-4 shadow-md">
<h2 class="mb-3 text-2xl font-bold">Section Title</h2>
<p class="text-base">Main content text</p>
<p class="text-sm opacity-60">Secondary metadata</p>
</div>
</div>
<!-- ❌ Wrong: Same background as parent -->
<div class="bg-base-100">
<div class="card bg-base-100">No visual separation</div>
</div>
Core Principles
- Background hierarchy: base-200 (page) → base-100 (card) → base-200 (nested) - never same as parent
- Borders: Use
border-base-300solid (no opacity) - Text sizes: 3xl (h1) → 2xl (h2) → xl (h3) → base (body) → sm (metadata) → xs (hints)
- Opacity: ONLY 60/70/80, ONLY on metadata/descriptions (never titles/buttons/primary actions)
- Shadows: md (default) → lg (hover) → xl (important)
- Semantic colors: error/success should NOT have opacity
- Test contrast: Always verify on both light and dark themes
Reference Files
- styling-guide.md - Complete design system with all rules and examples
GitHub リポジトリ
関連スキル
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.
