Styling Patterns & Conventions

Document styling patterns and CSS conventions for the DAKIA Wiki Bot.

Updated Aug 23, 2026

Search Tags:#design system #css #styling #bootstrap #component patterns #ui conventions

Ready to run

npx skills add https://github.com/nguyenquy0710/dakia-wiki-bot --skill styling-patterns-conventions

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Styling Patterns & Conventions
Source: https://github.com/nguyenquy0710/dakia-wiki-bot/tree/main/docs/styling
Command: npx skills add https://github.com/nguyenquy0710/dakia-wiki-bot --skill styling-patterns-conventions

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to the styling patterns, CSS conventions, and component styling approaches used within the DAKIA Wiki Bot project, ensuring visual consistency and maintainability.

Core Features & Use Cases

Color System: Quick reference for primary, secondary, and semantic colors.
Styling Approach: Defines the priority order for applying styles (Bootstrap utilities, inline styles, custom CSS).
Component Patterns: Examples for styling cards, buttons, badges, and form elements.
Use Case: A new developer can quickly understand how to apply brand colors, use Bootstrap utilities effectively, and style common UI elements like buttons and cards according to the project's established design system.

Quick Start

Use the Styling Patterns & Conventions skill to understand how to apply the primary brand color to a button.

Frequently Asked Questions about Styling Patterns & Conventions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

What is the best way to apply consistent CSS styling conventions across UI components?▼

CSS styling conventions establish a priority order for applying styles, directing developers to use Bootstrap 5 utilities first, then inline styles, and finally custom CSS for specific component patterns like cards, buttons, and badges.

How do I style a button using a primary brand color with Bootstrap 5 utilities?▼

To style a button with the primary brand color, you apply the predefined Bootstrap 5 utility classes mapped to the design system's color scheme, ensuring visual consistency without writing custom CSS for standard UI elements.

When do I need custom CSS versus Bootstrap utilities for component styling?▼

You need custom CSS versus Bootstrap utilities when styling standard elements like cards, buttons, and forms requires specific overrides beyond the design system's available utility classes, inline styles, and established component patterns.

Does this styling approach include guidelines for responsive design and animations?▼

Yes, the styling approach includes guidelines for responsive design and animations, providing best practices for applying these effects within the component styling framework alongside color systems and Bootstrap utility usage.

How do I apply semantic colors to UI elements like badges and forms?▼

To apply semantic colors to UI elements like badges and forms, you reference the design system's color system documentation to map the appropriate status-based color variables directly to your component patterns.

Can I use inline styles alongside Bootstrap 5 utility classes for UI components?▼

You can use inline styles alongside Bootstrap 5 utility classes for UI components, but the styling conventions dictate a specific priority order, placing Bootstrap utilities first before resorting to inline styles for overrides.