ReddRadar
Agent skill
styling-patterns
DaisyUI v5 design system. Use for backgrounds, borders, text sizes, opacity, semantic colors, and spacing.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/styling-patterns
SKILL.md
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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?