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

• 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>

card

.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