npx skills add smithery/spences10 --skill styling-patterns
spences10/devhub-crm · Archived
styling-patterns
DaisyUI v5 design system. Use for backgrounds, borders, text sizes, opacity, semantic colors, and spacing.
Installation
$
npx skills add spences10/devhub-crm --skill styling-patterns
Stronger alternatives
This repository is archived — consider an actively maintained alternative.
component-testing-patterns
Same source · more installs
spences10/devhub-crm
Vitest browser mode component testing. Use for testing Svelte 5 components with real browsers, …
4 installs
auth-patterns
Same source · more installs
spences10/devhub-crm
Better-auth integration for authentication. Use when implementing login, registration, protecte…
4 installs
reactive-ui-patterns
Same source
spences10/devhub-crm
Remote functions reactive UI patterns. Use for smooth in-place updates, preventing page jumps, …
2 installs
form-patterns
Same source
spences10/devhub-crm
DaisyUI v5 form patterns. Use for inputs, selects, textareas, validation, and form structure wi…
2 installsSimilar popular skills
Related neighbors and high-traction skills in the same topics — useful to compare before installing.
frontend-design
Same topic
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existi…
866.4K installs
agent-browser
Same topic
vercel-labs/agent-browser
Browser automation CLI for AI agents. Use when the user needs to interact with websites, includ…
810.4K installs
vercel-react-best-practices
Same topic
vercel-labs/agent-skills
697.8K installs
web-design-guidelines
Same topic
vercel-labs/agent-skills
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…
617.3K installs
microsoft-foundry
Same topic
microsoft/azure-skills
Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and …
576.5K installs
azure-diagnostics
Same topic
microsoft/azure-skills
Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe …
568.9K installsAlso in this package
Other skills from spences10/devhub-crm.
npx skills add spences10/devhub-crm
More details
Agent compatibility
Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.
Claude Code
Not declared
Cursor
Not declared
Codex
Not declared
GitHub Copilot
Not declared
Windsurf
Not declared
Gemini CLI
Not declared
Cline
Not declared
OpenCode
Not declared
Also listed on
Alternate registries and mirrors of this skill.
Repository health
Stars
6
Default branch
main
Open issues
1
Status
Archived
Package contents
Files included with this skill beyond the listing page.
-
skill md
SKILL.md1,360 B -
docs
README.md438 B -
docs
SUMMARY.md148 B
History
- First seen on skills.sh
- First recorded snapshot · 2 installs
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](references/styling-guide.md) - Complete design
system with all rules and examples