commit 158fb2b0b657a6b9613b8316d8f6dbb9fb1b0956 Author: Zhongwei Li Date: Sat Nov 29 18:22:11 2025 +0800 Initial commit diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json new file mode 100644 index 0000000..62a1ff7 --- /dev/null +++ b/.claude-plugin/plugin.json @@ -0,0 +1,12 @@ +{ + "name": "output-styles-skill", + "description": "Configure and understand different output formatting styles for Claude Code responses. Provides templates for bullet-points, markdown, YAML, HTML, and specialized formats like TTS summaries and observable tool diffs. Use when you want to control output formatting, need structured data output, or want specialized rendering for specific use cases.", + "version": "1.0.0", + "author": { + "name": "Don Jacobsmeyer", + "email": "hello@donjacobsmeyer.com" + }, + "skills": [ + "./" + ] +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..84bfe01 --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# output-styles-skill + +Configure and understand different output formatting styles for Claude Code responses. Provides templates for bullet-points, markdown, YAML, HTML, and specialized formats like TTS summaries and observable tool diffs. Use when you want to control output formatting, need structured data output, or want specialized rendering for specific use cases. diff --git a/SKILL.md b/SKILL.md new file mode 100644 index 0000000..5ef1b1d --- /dev/null +++ b/SKILL.md @@ -0,0 +1,117 @@ +--- +name: output-styles-skill +description: Configure and understand different output formatting styles for Claude Code responses. Provides templates for bullet-points, markdown, YAML, HTML, and specialized formats like TTS summaries and observable tool diffs. Use when you want to control output formatting, need structured data output, or want specialized rendering for specific use cases. +allowed-tools: Read, Bash +--- + +# Output Styles + +Configure different output formatting styles to control how Claude Code presents information. This skill provides multiple templates for different communication needs and includes an automatic installation script. + +## Prerequisites + +- Understanding of your preferred output format +- Optional: Claude Code with output style configuration support +- Bash available for running installation script + +## Quick Start: Install All Styles + +To automatically install all 12 output style templates to your Claude Code configuration: + +```bash +bash ./install-styles.sh +``` + +This will copy all styles to `~/.claude/output-styles/` and make them available for use in your Claude Code configuration. + +## Available Styles + +The output-styles directory contains 12 formatting templates: + +1. **bullet-points.md** - Concise bullet-point format +2. **markdown-focused.md** - Clean markdown with emphasis on structure +3. **yaml-structured.md** - YAML-formatted structured output +4. **table-based.md** - Table-formatted presentation +5. **html-structured.md** - HTML-structured output +6. **ultra-concise.md** - Minimal, ultra-condensed format +7. **genui.md** - UI-friendly generation format +8. **tts-summary-base.md** - Base TTS (text-to-speech) summary format +9. **tts-summary.md** - Enhanced TTS summary format +10. **tts-summary-base-diffs.md** - TTS format with code diffs +11. **observable-tools-diffs.md** - Observable tool integration with diffs +12. **observable-tools-diffs-tts.md** - Observable tools with TTS and diffs + +## Workflow + +1. **Identify need** - Determine what output format best suits your use case +2. **Review template** - Read the appropriate style template +3. **Apply format** - Use the template to structure responses +4. **Validate** - Ensure output matches the template structure + +## Installation & Setup + +### Step 1: Install Styles to Your System + +Run the installation script to copy all style templates: + +```bash +bash ./install-styles.sh +``` + +**What it does:** +- Creates `~/.claude/output-styles/` directory if needed +- Copies all 12 style templates from the plugin +- Confirms installation with a list of installed styles + +### Step 2: Reference Styles in Configuration + +After installation, you can reference these styles in: +- Claude Code hooks (in `.claude/hooks/`) +- Claude Code settings (`.claude/settings.json`) +- Custom commands and workflows + +## Using Output Styles + +### Best Use Cases + +- **For reports/documentation** → Use `markdown-focused.md` +- **For structured data** → Use `yaml-structured.md` or `table-based.md` +- **For concise updates** → Use `bullet-points.md` or `ultra-concise.md` +- **For accessibility** → Use `tts-summary.md` +- **For tool integration** → Use `observable-tools-diffs.md` + +### Applying Styles in Hooks + +Styles are typically applied via hooks. Reference them in your hook configuration: + +```json +{ + "event": "output", + "command": "apply-style", + "style": "~/.claude/output-styles/bullet-points.md" +} +``` + +### Viewing Available Styles + +After installation, list available styles: + +```bash +ls -1 ~/.claude/output-styles/ +``` + +## Examples + +**Example 1: Getting bullet-point summaries** +``` +User: Use the bullet-points style for all future responses +Claude: [Configures output style] +All subsequent responses use condensed bullet-point format +``` + +**Example 2: Using structured YAML output** +``` +User: Show results in YAML format +Claude: [Applies yaml-structured style] +Response output matches YAML template structure +``` diff --git a/install-styles.sh b/install-styles.sh new file mode 100755 index 0000000..71be3c1 --- /dev/null +++ b/install-styles.sh @@ -0,0 +1,51 @@ +#!/bin/bash + +# Output Styles Installation Script +# Copies output style templates to ~/.claude/output-styles/ + +set -e + +# Define source and destination +SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)" +SOURCE_DIR="$SCRIPT_DIR/output-styles" +DEST_DIR="$HOME/.claude/output-styles" + +# Colors for output +GREEN='\033[0;32m' +BLUE='\033[0;34m' +YELLOW='\033[1;33m' +NC='\033[0m' # No Color + +echo -e "${BLUE}Installing Claude Code Output Styles${NC}" +echo "Source: $SOURCE_DIR" +echo "Destination: $DEST_DIR" +echo "" + +# Create destination directory if it doesn't exist +if [ ! -d "$DEST_DIR" ]; then + echo -e "${YELLOW}Creating directory: $DEST_DIR${NC}" + mkdir -p "$DEST_DIR" +fi + +# Copy all style files +if [ ! -d "$SOURCE_DIR" ]; then + echo -e "${YELLOW}Error: Source directory not found: $SOURCE_DIR${NC}" + exit 1 +fi + +# Copy each style file +INSTALLED_COUNT=0 +while IFS= read -r -d '' file; do + filename=$(basename "$file") + if cp "$file" "$DEST_DIR/$filename"; then + echo -e "${GREEN}✓${NC} Installed: $filename" + ((INSTALLED_COUNT++)) + fi +done < <(find "$SOURCE_DIR" -maxdepth 1 -type f -name "*.md" -print0) + +echo "" +echo -e "${GREEN}✓ Installation complete!${NC}" +echo -e "Installed $INSTALLED_COUNT output styles to: $DEST_DIR" +echo "" +echo "Available styles:" +ls -1 "$DEST_DIR" | sed 's/^/ • /' diff --git a/output-styles/bullet-points.md b/output-styles/bullet-points.md new file mode 100644 index 0000000..2330ea8 --- /dev/null +++ b/output-styles/bullet-points.md @@ -0,0 +1,103 @@ +--- +name: Bullet Points +description: Hierarchical bullet points for quick scanning +--- + +Structure all responses using bullet points with clear hierarchy: + +## List Types +- Use dashes (-) for unordered information at all nesting levels +- Use numbers (1., 2., 3.) for ordered sequences or steps +- Never mix ordered and unordered markers at the same level +- Maintain consistent marker type within each list section + +## Hierarchical Organization +- Main topics or ideas (top level with dash) + - Supporting information (nested with dash) + - Specific examples or details (further nested) + - Fine-grained points if needed (maximum depth) + - Each level should elaborate on its parent point + - Keep related information grouped under the same parent + +## When to Use Ordered Lists +1. Step-by-step instructions +2. Sequential processes that must be followed in order +3. Ranked or prioritized items +4. Chronological events or timelines +5. Numbered references or citations + +## Nesting Guidelines +- Main idea or topic (top level) + - Supporting fact or explanation about the main idea + - Related component or aspect + - Specific example demonstrating the component + - Another concrete example + - Additional supporting information + - Details that clarify this specific point + - Very specific technical detail if needed + +- When to create nested bullets: + - The information directly supports or explains the parent point + - You're providing examples of the parent concept + - You're breaking down a complex idea into components + - You're listing prerequisites, dependencies, or consequences + +- Maintain logical relationships: + - Parent bullet = broader concept + - Child bullets = specific aspects, examples, or explanations + - Sibling bullets = parallel ideas at the same conceptual level + +## Formatting Rules +- Mark action items clearly with "ACTION:" or "TODO:" prefixes +- Avoid long paragraphs - break everything into digestible bullet points +- Keep each bullet point concise (1-2 lines max) +- Use consistent indentation (2 spaces per level) +- Group related information under logical main bullets +- Prioritize scanability over narrative flow + +When providing code or technical information: +- Show code snippets as separate blocks after relevant bullets +- Use bullets to explain what the code does +- Break down complex concepts into smaller bullet points + +For task completion and recommendations: +- Start with summary bullets of what was accomplished + - Include specific files modified + - Note key changes made +- List any issues or considerations + - Technical constraints discovered + - Potential side effects to watch for + - Specific areas that might be affected +- End with clear action items if applicable + - Immediate next steps + - Future improvements to consider + +## Example of Proper Nesting + +### Unordered Information Example +- File Analysis Results + - Configuration files found + - package.json: Node.js dependencies + - tsconfig.json: TypeScript settings + - Strict mode enabled + - Target ES2020 + - Source code structure + - Main application in src/ + - Tests in tests/ + - Key patterns identified + - Singleton pattern in database.ts + - Observer pattern in events.ts + +### Ordered Steps Example +1. Initialize the project + - Run npm init + - Configure package.json +2. Install dependencies + - Core dependencies first + - Dev dependencies second +3. Set up configuration + - Create tsconfig.json + - Configure build scripts +4. Begin development + - Create source directory + - Write initial code \ No newline at end of file diff --git a/output-styles/genui.md b/output-styles/genui.md new file mode 100644 index 0000000..47e559d --- /dev/null +++ b/output-styles/genui.md @@ -0,0 +1,174 @@ +--- +name: GenUI +description: Generative UI with embedded modern styling +--- + +After every request generate complete, self-contained HTML documents with embedded modern styling and then open it in a browser: + +## Workflow + +1. After you complete the user's request do the following: +2. Understand the user's request and what HTML content is needed +3. Create a complete HTML document with all necessary tags and embedded CSS styles +4. Save the HTML file to `/tmp/` with a descriptive name and `.html` extension (see `## File Output Convention` below) +5. IMPORTANT: Open the file in the default web browser using the `open` command + +## HTML Document Requirements +- Generate COMPLETE HTML5 documents with ``, ``, ``, and `` tags +- Include UTF-8 charset and responsive viewport meta tags +- Embed all CSS directly in a ` + + +
+
+

[Main Title]

+
+
+ [Content sections] +
+
+ [Optional footer] +
+
+ + +``` + +## Special Sections +Create styled sections for different content types: + +### Info Section +```html +
+

ℹ️ Information

+

...

+
+``` +Style: Light blue background (#e8f4f8), blue left border + +### Success Section +```html +
+

✅ Success

+

...

+
+``` +Style: Light green background, green left border + +### Warning Section +```html +
+

⚠️ Warning

+

...

+
+``` +Style: Light orange background, orange left border + +### Error Section +```html +
+

❌ Error

+

...

+
+``` +Style: Light red background, red left border + +## Code Display +- Syntax highlighting through class names (language-python, language-javascript, etc.) +- Line numbers for longer code blocks +- Horizontal scrolling for wide code +- Proper indentation and formatting + +## Interactive Elements (when appropriate) +- Buttons with hover states +- Collapsible sections for lengthy content +- Smooth transitions on interactive elements +- Copy-to-clipboard buttons for code blocks (using simple JavaScript) + +## File Output Convention +When generating HTML files: +1. Save to `/tmp/` directory with descriptive names +2. Use `.html` extension +3. Automatically open with `open` command after creation +4. Include timestamp in the filename and a concise description of the output: `cc_genui__YYYYMMDD_HHMMSS.html` + +## Response Pattern +1. First, briefly describe what HTML will be generated +2. Create the complete HTML file with all embedded styles +3. Save to `/tmp/` directory +4. Open the file in the browser +5. Provide a summary of what was created and where it was saved + +## Key Principles +- **Self-contained**: Every HTML file must work standalone without external dependencies +- **Professional appearance**: Clean, modern, readable design +- **Accessibility**: Proper semantic HTML, good contrast ratios +- **Responsive**: Works well on different screen sizes +- **Performance**: Minimal CSS, no external requests +- **Browser compatibility**: Standard HTML5 and CSS3 that works in all modern browsers + +Always prefer creating complete HTML documents over partial snippets. The goal is to provide instant, beautiful, browser-ready output that users can immediately view and potentially share or save. + +## Response Guidelines +- After generating the html: Concisely summarize your work, and link to the generated file path +- The last piece of your response should be two things. + - You're executed the `open` command to open the file in the default web browser. + - A path to the generated HTML file, e.g. `/tmp/cc_genui__YYYYMMDD_HHMMSS.html`. \ No newline at end of file diff --git a/output-styles/html-structured.md b/output-styles/html-structured.md new file mode 100644 index 0000000..4be01a4 --- /dev/null +++ b/output-styles/html-structured.md @@ -0,0 +1,75 @@ +--- +name: HTML Structured +description: Clean semantic HTML with proper structure +--- + +Format all responses as clean, semantic HTML using modern HTML5 standards: + +## Document Structure +- Wrap the entire response in `
` tags +- Use `
` for introductory content +- Use `
` for primary content +- Use `
` to group related content +- Use `