Back to Skills

styling-patterns

spences10
Updated Today
12 views
5
5
View on GitHub
Designaidesign

About

This Claude Skill provides DaisyUI v5 design system patterns for consistent UI styling. Use it for implementing backgrounds, borders, text sizing, semantic colors, and spacing according to established design principles. It helps developers create properly layered interfaces with correct visual hierarchy and opacity usage.

Documentation

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-300 solid (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

Quick Install

/plugin add https://github.com/spences10/devhub-crm/tree/main/styling-patterns

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

GitHub 仓库

spences10/devhub-crm
Path: .claude/skills/styling-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

langchain

Meta

LangChain is a framework for building LLM applications using agents, chains, and RAG pipelines. It supports multiple LLM providers, offers 500+ integrations, and includes features like tool calling and memory management. Use it for rapid prototyping and deploying production systems like chatbots, autonomous agents, and question-answering services.

View skill