Chat Card Skill

Chat Card Skill

This skill provides patterns and guidance for generating HTML cards using DaisyUI components that display inline within chat applications.

Purpose

Generate interactive, visually consistent chat cards for common user interaction patterns including confirmations, selections, and content previews. Cards are optimized for inline display in chat interfaces with compact sizing and clear action flows.

When to Use This Skill

Use this skill when:

• Creating confirmation dialogs or yes/no prompts within chat
• Presenting multiple choice questions to users
• Allowing users to select multiple options from a list
• Displaying drafted content (emails, messages, documents) for review and feedback
• Any scenario requiring interactive UI elements inline with chat messages

Card Pattern Types

1. Affirmative/Negative Response Cards

For binary decisions or confirmations. Include a title, question text, and two action buttons (negative and affirmative).

2. Multiple Choice (Radio) Cards

For single-selection from multiple options. Include a title, optional description, radio button list, and confirmation button.

3. Multiple Select (Checkbox) Cards

For multi-selection from a list. Include a title, optional description, checkbox list, and action button.

4. Content Preview with Feedback Cards

For displaying drafted content with revision options. Include a title, content preview area, feedback textarea, and action buttons.

Implementation Guidelines

Sizing and Layout

• Use compact sizing throughout: btn-xs for buttons, text-xs for body text, text-sm for titles
• Center cards with flex justify-center
• Set maximum width to max-w-sm for readability
• Apply shadow-md to all cards for visual separation
• Use p-4 for card body padding

Color Scheme

• Card backgrounds: bg-base-200 or bg-base-100 with border border-base-300
• Primary actions: btn-primary
• Destructive/negative actions: btn-error
• Secondary actions: btn-ghost
• Content preview areas: bg-base-200 with rounded

Action Button Placement

• Use card-actions justify-end to right-align buttons
• Place primary action on the right
• Place secondary/destructive actions on the left
• Use gap-2 for spacing between buttons

Form Elements

• Radio buttons: radio radio-xs class
• Checkboxes: checkbox checkbox-xs class
• Text areas: textarea textarea-bordered textarea-sm
• Use cursor-pointer on labels for better UX
• Use space-y-1 for vertical spacing in lists

Content Structure

Each card should follow this structure:

1. Outer container: <div class="flex justify-center">
2. Card wrapper: <div class="card bg-base-200 w-full max-w-sm shadow-md">
3. Card body: <div class="card-body p-4">
4. Title: <h2 class="card-title text-sm">
5. Content area (text, form elements, preview)
6. Actions: <div class="card-actions justify-end [mt-2/mt-3] gap-2">

Detailed Reference

For complete examples and detailed pattern documentation, refer to references/card-patterns.md which includes:

• Full HTML examples for each card type
• DaisyUI component reference
• Best practices and accessibility guidelines
• Visual hierarchy and spacing recommendations

Customization

Adapt card patterns based on context:

• Adjust button text to match specific actions
• Modify option lists based on user needs
• Customize preview content structure for different content types
• Add or remove form elements as needed while maintaining visual consistency

Output Format

Generate complete, self-contained HTML snippets that can be directly inserted into a chat application. Ensure all necessary DaisyUI classes are included and properly structured.

CRITICAL: Required Structure and Data Attributes

⚠️ Cards will NOT work if you deviate from these exact patterns ⚠️

Required HTML Structure

Every card MUST follow this exact structure:

<div class="flex justify-center">                               ← Outer wrapper
    <div class="card bg-base-200 w-full max-w-sm shadow-md"    ← MUST have class "card"
         data-card-type="[type]">                               ← MUST have data-card-type
        <div class="card-body p-4">                             ← Card content wrapper
            <!-- Content goes here -->
        </div>
    </div>
</div>

The second <div> MUST have the card class - this is not optional. The JavaScript selector looks for .card[data-card-id].

Required Data Attributes

ALL interactive cards MUST include these data attributes:

1. Card Element (the div with class "card"):

• data-card-type="[type]" - REQUIRED
• Values: "affirmative-negative", "multiple-choice", "multiple-select", or "content-preview"

2. Form Element (for multiple-choice, multiple-select, content-preview):

• data-card-form - REQUIRED wrapper for form-based cards
• Must be: <form data-card-form>...</form>

3. Buttons:

• data-card-action="[action]" - REQUIRED on EVERY button
• Values: "yes", "no", "submit", "skip", "send", "revise", etc.
• Example: <button class="btn btn-primary btn-xs" data-card-action="submit">Confirm</button>

4. Form Inputs:

• name attribute - REQUIRED for all inputs (radio, checkbox, textarea)
• value attribute - REQUIRED for radio buttons and checkboxes
• Example: <input type="radio" name="choice" value="option1" class="radio radio-xs" />

⛔ Common Mistakes That Break Interactivity

1. ❌ Using <div class="card-container"> instead of <div class="card">
2. ❌ Forgetting data-card-type attribute
3. ❌ Forgetting data-card-action on buttons
4. ❌ Forgetting data-card-form on forms
5. ❌ Creating custom HTML structures instead of copying the exact patterns

✅ The Solution

ALWAYS copy the exact HTML from references/card-patterns.md. Do not improvise. Do not create variations. The patterns are tested and guaranteed to work.