The /nice-formatting command enables you to format automation step outputs in clean, readable HTML format. Perfect for:

• Creating human-readable reports
• Formatting data for presentations
• Generating clean output displays
• Improving readability of results
• Professional documentation formatting

​

Basic Usage

Use the command when you need nicely formatted output:

/nice-formatting present the sales data in a clean, readable format

/nice-formatting format the API response data for the report

/nice-formatting create a nicely formatted summary of the results

​

Key Features

​

HTML Output

• Clean HTML formatting
• Professional appearance
• Easy-to-read layouts
• Structured presentation
• Responsive design

​

Data Presentation

• Tabular data formatting
• List organization
• Hierarchical structures
• Visual separation
• Clear typography

​

User Experience

• Improved readability
• Professional appearance
• Consistent styling
• Accessible formatting
• Mobile-friendly display

​

When to Use

​

Explicit Requests

Use nice formatting when the user specifically requests:

• “nice formatting”
• “nice format”
• “clean output”
• “readable format”
• “formatted display”

​

Appropriate Scenarios

• Final reports and summaries
• Data presentations
• Client-facing outputs
• Documentation generation
• Dashboard displays

​

Formatting Guidelines

​

Clean and Simple

• Use clear, readable fonts
• Maintain consistent spacing
• Apply logical hierarchy
• Ensure proper contrast
• Keep layouts uncluttered

​

Structured Layout

• Organize information logically
• Use headings and subheadings
• Group related content
• Implement visual separation
• Maintain consistent alignment

​

Professional Appearance

• Apply subtle styling
• Use appropriate colors
• Maintain brand consistency
• Ensure accessibility
• Optimize for readability

​

HTML Structure Examples

​

Basic Data Table

<div style="font-family: Arial, sans-serif; margin: 20px;">
  <h2 style="color: #333; border-bottom: 2px solid #007acc; padding-bottom: 10px;">
    Sales Report
  </h2>
  <table style="width: 100%; border-collapse: collapse; margin: 20px 0;">
    <thead>
      <tr style="background-color: #f5f5f5;">
        <th style="padding: 12px; text-align: left; border: 1px solid #ddd;">Product</th>
        <th style="padding: 12px; text-align: right; border: 1px solid #ddd;">Sales</th>
        <th style="padding: 12px; text-align: right; border: 1px solid #ddd;">Revenue</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="padding: 12px; border: 1px solid #ddd;">Product A</td>
        <td style="padding: 12px; text-align: right; border: 1px solid #ddd;">150</td>
        <td style="padding: 12px; text-align: right; border: 1px solid #ddd;">$15,000</td>
      </tr>
    </tbody>
  </table>
</div>

​

Summary Cards

<div style="font-family: Arial, sans-serif; margin: 20px;">
  <h2 style="color: #333; margin-bottom: 20px;">Project Summary</h2>
  <div style="display: flex; gap: 20px; flex-wrap: wrap;">
    <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; border-left: 4px solid #28a745;">
      <h3 style="margin: 0 0 10px 0; color: #28a745;">Completed Tasks</h3>
      <p style="margin: 0; font-size: 24px; font-weight: bold;">24</p>
    </div>
    <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; border-left: 4px solid #ffc107;">
      <h3 style="margin: 0 0 10px 0; color: #ffc107;">In Progress</h3>
      <p style="margin: 0; font-size: 24px; font-weight: bold;">8</p>
    </div>
  </div>
</div>

​

Hierarchical List

<div style="font-family: Arial, sans-serif; margin: 20px;">
  <h2 style="color: #333; border-bottom: 2px solid #007acc; padding-bottom: 10px;">
    Department Structure
  </h2>
  <ul style="list-style-type: none; padding: 0;">
    <li style="margin: 10px 0; padding: 10px; background: #f8f9fa; border-radius: 5px;">
      <strong style="color: #007acc;">Engineering</strong>
      <ul style="margin: 10px 0 0 20px; list-style-type: disc;">
        <li style="margin: 5px 0;">Frontend Team</li>
        <li style="margin: 5px 0;">Backend Team</li>
        <li style="margin: 5px 0;">DevOps Team</li>
      </ul>
    </li>
  </ul>
</div>

​

Styling Best Practices

​

Typography

• Use web-safe fonts (Arial, sans-serif)
• Maintain readable font sizes (14px+)
• Apply appropriate line height (1.4-1.6)
• Use font weights for emphasis
• Ensure sufficient contrast

​

Colors

• Use professional color palette
• Maintain brand consistency
• Ensure accessibility compliance
• Apply colors meaningfully
• Avoid overwhelming combinations

​

Layout

• Implement responsive design
• Use appropriate spacing
• Maintain visual hierarchy
• Ensure mobile compatibility
• Optimize for different screen sizes

​

Common Formatting Patterns

​

Data Tables

• Clear headers with background colors
• Alternating row colors for readability
• Right-align numeric data
• Proper padding and borders
• Responsive table design

​

Status Indicators

• Color-coded status badges
• Clear iconography
• Consistent styling
• Meaningful color choices
• Accessible alternatives

​

Progress Displays

• Visual progress bars
• Percentage indicators
• Status descriptions
• Clear completion states
• Time-based information

​

Accessibility Considerations

​

Screen Readers

• Use semantic HTML elements
• Provide alternative text
• Implement proper heading structure
• Include table headers
• Ensure logical reading order

​

Visual Accessibility

• Maintain sufficient color contrast
• Avoid color-only information
• Use readable font sizes
• Provide focus indicators
• Support keyboard navigation

​

Performance Optimization

​

Efficient CSS

• Use inline styles for email compatibility
• Minimize CSS complexity
• Optimize for fast rendering
• Reduce file sizes
• Cache styling when possible

​

Mobile Optimization

• Implement responsive design
• Use flexible layouts
• Optimize touch interactions
• Ensure readable text sizes
• Test on various devices

​

Integration Tips

​

Email Compatibility

• Use inline CSS styles
• Test across email clients
• Avoid complex layouts
• Use table-based designs
• Ensure fallback options

​

Web Display

• Implement responsive design
• Use modern CSS features
• Optimize for performance
• Ensure cross-browser compatibility
• Test on multiple devices

​

Common Use Cases

​

Report Generation

/nice-formatting create a professional quarterly report with charts and tables

​

Dashboard Displays

/nice-formatting format the KPI data for executive dashboard

​

Client Presentations

/nice-formatting prepare the project status for client review

​

Documentation

/nice-formatting create formatted documentation for the API endpoints

​

Tips

• Only use nice formatting when explicitly requested by users
• Keep styling clean and simple for maximum readability
• Use consistent color schemes and typography throughout
• Ensure accessibility compliance with proper contrast ratios
• Test formatted output across different devices and browsers
• Maintain professional appearance suitable for business contexts