From fecb85592322bdf35bc5b24494ead65a845a83e2 Mon Sep 17 00:00:00 2001 From: Zhongwei Li Date: Sat, 29 Nov 2025 17:58:59 +0800 Subject: [PATCH] Initial commit --- .claude-plugin/plugin.json | 15 ++ README.md | 3 + commands/style-bullet-points.md | 105 +++++++++ commands/style-genui.md | 346 +++++++++++++++++++++++++++++ commands/style-html-structured.md | 77 +++++++ commands/style-markdown-focused.md | 66 ++++++ commands/style-table-based.md | 43 ++++ commands/style-ultra-concise.md | 21 ++ commands/style-yaml-structured.md | 57 +++++ hooks/hooks.json | 14 ++ hooks/load-default-style.sh | 40 ++++ plugin.lock.json | 77 +++++++ 12 files changed, 864 insertions(+) create mode 100644 .claude-plugin/plugin.json create mode 100644 README.md create mode 100644 commands/style-bullet-points.md create mode 100644 commands/style-genui.md create mode 100644 commands/style-html-structured.md create mode 100644 commands/style-markdown-focused.md create mode 100644 commands/style-table-based.md create mode 100644 commands/style-ultra-concise.md create mode 100644 commands/style-yaml-structured.md create mode 100644 hooks/hooks.json create mode 100755 hooks/load-default-style.sh create mode 100644 plugin.lock.json diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json new file mode 100644 index 0000000..7d5ea54 --- /dev/null +++ b/.claude-plugin/plugin.json @@ -0,0 +1,15 @@ +{ + "name": "output-styles", + "description": "Styles de sortie personnalisés pour formater les réponses de Claude (bullet points, markdown, HTML, YAML, etc.)", + "version": "1.0.0", + "author": { + "name": "Aurélien Tournayre", + "email": "aurelien.tournayre@gmail.com" + }, + "commands": [ + "./commands" + ], + "hooks": [ + "./hooks" + ] +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..9a87f19 --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# output-styles + +Styles de sortie personnalisés pour formater les réponses de Claude (bullet points, markdown, HTML, YAML, etc.) diff --git a/commands/style-bullet-points.md b/commands/style-bullet-points.md new file mode 100644 index 0000000..9d2a3c4 --- /dev/null +++ b/commands/style-bullet-points.md @@ -0,0 +1,105 @@ +--- +name: style:bullet-points +description: Hierarchical bullet points for quick scanning +--- + +**À partir de maintenant et pour toutes les réponses suivantes, applique ce style de réponse:** + +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 diff --git a/commands/style-genui.md b/commands/style-genui.md new file mode 100644 index 0000000..9b79548 --- /dev/null +++ b/commands/style-genui.md @@ -0,0 +1,346 @@ +--- +name: style:genui +description: Generative UI with embedded modern styling +--- + +**À partir de maintenant et pour toutes les réponses suivantes, applique ce style de réponse:** + +After every request generate complete, self-contained HTML documents with embedded modern styling and then open it in a browser: + +## Variables +REPORT_PATH: ~/.claude/reports + +## 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 `REPORT_PATH` 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: Dark mode - Dark blue background (#1a3a4a), blue left border. Light mode - Light blue background (#e8f4f8), blue left border + +### Success Section +```html +
+

✅ Success

+

...

+
+``` +Style: Dark mode - Dark green background (#1a3a2a), green left border. Light mode - Light green background (#d4edda), green left border + +### Warning Section +```html +
+

⚠️ Warning

+

...

+
+``` +Style: Dark mode - Dark orange background (#3a2a1a), orange left border. Light mode - Light orange background (#fff3cd), orange left border + +### Error Section +```html +
+

❌ Error

+

...

+
+``` +Style: Dark mode - Dark red background (#3a1a1a), red left border. Light mode - Light red background (#f8d7da), 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 +- **Copy button**: Each code block must have a copy-to-clipboard button in the top-right corner + +### Code Block Structure +```html +
+ + 
// Your code here
+
+``` + +### Copy Button Styling +```css +.code-container { + position: relative; +} +.copy-btn { + position: absolute; + top: 8px; + right: 8px; + padding: 4px 8px; + background: #3498db; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 12px; + z-index: 10; +} +.copy-btn:hover { + background: #2980b9; +} +.copy-btn.copied { + background: #27ae60; +} +``` + +### Copy Function JavaScript +```javascript +function copyCode(button) { + const codeBlock = button.parentElement.querySelector('pre code'); + const text = codeBlock.textContent; + + navigator.clipboard.writeText(text).then(() => { + const originalText = button.textContent; + button.textContent = '✓ Copied!'; + button.classList.add('copied'); + + setTimeout(() => { + button.textContent = originalText; + button.classList.remove('copied'); + }, 2000); + }).catch(err => { + // Fallback pour les anciens navigateurs + const textarea = document.createElement('textarea'); + textarea.value = text; + textarea.style.position = 'fixed'; + textarea.style.opacity = '0'; + document.body.appendChild(textarea); + textarea.select(); + document.execCommand('copy'); + document.body.removeChild(textarea); + + button.textContent = '✓ Copied!'; + button.classList.add('copied'); + setTimeout(() => { + button.textContent = '📋 Copy'; + button.classList.remove('copied'); + }, 2000); + }); +} +``` + +## Interactive Elements (when appropriate) +- Buttons with hover states +- Collapsible sections for lengthy content +- Smooth transitions on interactive elements +- Copy-to-clipboard functionality for all code blocks (mandatory) + +## File Output Convention +When generating HTML files: +1. Save to `REPORT_PATH` 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 `REPORT_PATH` 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. `REPORT_PATH/cc_genui__YYYYMMDD_HHMMSS.html`. diff --git a/commands/style-html-structured.md b/commands/style-html-structured.md new file mode 100644 index 0000000..1ccd83a --- /dev/null +++ b/commands/style-html-structured.md @@ -0,0 +1,77 @@ +--- +name: style:html-structured +description: Clean semantic HTML with proper structure +--- + +**À partir de maintenant et pour toutes les réponses suivantes, applique ce style de réponse:** + +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 `