Initial commit
This commit is contained in:
15
.claude-plugin/plugin.json
Normal file
15
.claude-plugin/plugin.json
Normal file
@@ -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"
|
||||||
|
]
|
||||||
|
}
|
||||||
3
README.md
Normal file
3
README.md
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
# output-styles
|
||||||
|
|
||||||
|
Styles de sortie personnalisés pour formater les réponses de Claude (bullet points, markdown, HTML, YAML, etc.)
|
||||||
105
commands/style-bullet-points.md
Normal file
105
commands/style-bullet-points.md
Normal file
@@ -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
|
||||||
346
commands/style-genui.md
Normal file
346
commands/style-genui.md
Normal file
@@ -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 `<!DOCTYPE html>`, `<html>`, `<head>`, and `<body>` tags
|
||||||
|
- Include UTF-8 charset and responsive viewport meta tags
|
||||||
|
- Embed all CSS directly in a `<style>` tag within `<head>`
|
||||||
|
- Create self-contained pages that work without external dependencies
|
||||||
|
- Use semantic HTML5 elements for proper document structure
|
||||||
|
- IMPORTANT: If links to external resources referenced, ensure they are accessible and relevant (footer)
|
||||||
|
- IMPORTANT: If files are referenced, created a dedicated section for them (footer)
|
||||||
|
|
||||||
|
## Visual Theme and Styling
|
||||||
|
Apply this consistent modern theme to all generated HTML:
|
||||||
|
|
||||||
|
### Color Palette
|
||||||
|
Dark mode (default):
|
||||||
|
- Primary blue: `#3498db` (for accents, links, borders)
|
||||||
|
- Light text: `#e8e8e8` (for main text)
|
||||||
|
- Medium light: `#b8b8b8` (for subheadings)
|
||||||
|
- Dark background: `#1a1a1a` (for main background)
|
||||||
|
- Code background: `#2d2d2d` (for code blocks)
|
||||||
|
- Info blue: `#1a3a4a` (for info sections)
|
||||||
|
- Success green: `#1a3a2a` (for success messages)
|
||||||
|
- Warning orange: `#3a2a1a` (for warnings)
|
||||||
|
- Error red: `#3a1a1a` (for errors)
|
||||||
|
|
||||||
|
Light mode:
|
||||||
|
- Primary blue: `#3498db` (for accents, links, borders)
|
||||||
|
- Dark blue: `#2c3e50` (for main headings)
|
||||||
|
- Medium gray: `#34495e` (for subheadings)
|
||||||
|
- Light gray: `#f5f5f5` (for code backgrounds)
|
||||||
|
- Info blue: `#e8f4f8` (for info sections)
|
||||||
|
- Success green: `#d4edda` (for success messages)
|
||||||
|
- Warning orange: `#fff3cd` (for warnings)
|
||||||
|
- Error red: `#f8d7da` (for errors)
|
||||||
|
|
||||||
|
### Typography
|
||||||
|
```css
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #e8e8e8;
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
}
|
||||||
|
body.light-mode {
|
||||||
|
color: #333;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
code {
|
||||||
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Layout
|
||||||
|
- Max width: 900px centered with auto margins
|
||||||
|
- Body padding: 20px
|
||||||
|
- Main content container: white background with subtle shadow
|
||||||
|
- Border radius: 8px for containers, 4px for code blocks
|
||||||
|
|
||||||
|
### Component Styling
|
||||||
|
- **Headers**: Border-bottom accent on h2, proper spacing hierarchy
|
||||||
|
- **Code blocks**: Dark background (#2d2d2d) with left border accent (#3498db) - light mode: (#f8f9fa) with (#007acc)
|
||||||
|
- **Inline code**: Dark background (#404040) with padding and border-radius - light mode: (#f5f5f5)
|
||||||
|
- **Info/Warning/Error sections**: Colored left border with tinted background (dark mode colors by default)
|
||||||
|
- **Tables**: Clean borders, alternating row colors, proper padding
|
||||||
|
- **Lists**: Adequate spacing between items
|
||||||
|
- **Mode toggle**: Button in top-right corner to switch between dark/light modes
|
||||||
|
|
||||||
|
## Document Structure Template
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>[Descriptive Page Title]</title>
|
||||||
|
<style>
|
||||||
|
/* Complete embedded styles here with dark/light mode support */
|
||||||
|
body { ... }
|
||||||
|
body.light-mode { ... }
|
||||||
|
article { ... }
|
||||||
|
/* All component styles with mode variants */
|
||||||
|
.theme-toggle {
|
||||||
|
position: fixed;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border: 1px solid #3498db;
|
||||||
|
background: transparent;
|
||||||
|
color: #3498db;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
/* Code container and copy button styles */
|
||||||
|
.code-container {
|
||||||
|
position: relative;
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
.copy-btn:hover {
|
||||||
|
background: #2980b9;
|
||||||
|
}
|
||||||
|
.copy-btn.copied {
|
||||||
|
background: #27ae60;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<button class="theme-toggle" onclick="toggleTheme()">🌞 Light</button>
|
||||||
|
<article>
|
||||||
|
<header>
|
||||||
|
<h1>[Main Title]</h1>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
[Content sections]
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
[Optional footer]
|
||||||
|
</footer>
|
||||||
|
</article>
|
||||||
|
<script>
|
||||||
|
function toggleTheme() {
|
||||||
|
document.body.classList.toggle('light-mode');
|
||||||
|
const btn = document.querySelector('.theme-toggle');
|
||||||
|
btn.textContent = document.body.classList.contains('light-mode') ? '🌙 Dark' : '🌞 Light';
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Special Sections
|
||||||
|
Create styled sections for different content types:
|
||||||
|
|
||||||
|
### Info Section
|
||||||
|
```html
|
||||||
|
<section class="info-section">
|
||||||
|
<h3>ℹ️ Information</h3>
|
||||||
|
<p>...</p>
|
||||||
|
</section>
|
||||||
|
```
|
||||||
|
Style: Dark mode - Dark blue background (#1a3a4a), blue left border. Light mode - Light blue background (#e8f4f8), blue left border
|
||||||
|
|
||||||
|
### Success Section
|
||||||
|
```html
|
||||||
|
<section class="success-section">
|
||||||
|
<h3>✅ Success</h3>
|
||||||
|
<p>...</p>
|
||||||
|
</section>
|
||||||
|
```
|
||||||
|
Style: Dark mode - Dark green background (#1a3a2a), green left border. Light mode - Light green background (#d4edda), green left border
|
||||||
|
|
||||||
|
### Warning Section
|
||||||
|
```html
|
||||||
|
<section class="warning-section">
|
||||||
|
<h3>⚠️ Warning</h3>
|
||||||
|
<p>...</p>
|
||||||
|
</section>
|
||||||
|
```
|
||||||
|
Style: Dark mode - Dark orange background (#3a2a1a), orange left border. Light mode - Light orange background (#fff3cd), orange left border
|
||||||
|
|
||||||
|
### Error Section
|
||||||
|
```html
|
||||||
|
<section class="error-section">
|
||||||
|
<h3>❌ Error</h3>
|
||||||
|
<p>...</p>
|
||||||
|
</section>
|
||||||
|
```
|
||||||
|
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
|
||||||
|
<div class="code-container">
|
||||||
|
<button class="copy-btn" onclick="copyCode(this)">📋 Copy</button>
|
||||||
|
<pre><code class="language-javascript">// Your code here</code></pre>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 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_<concise description>_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_<concise description>_YYYYMMDD_HHMMSS.html`.
|
||||||
77
commands/style-html-structured.md
Normal file
77
commands/style-html-structured.md
Normal file
@@ -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 `<article>` tags
|
||||||
|
- Use `<header>` for introductory content
|
||||||
|
- Use `<main>` for primary content
|
||||||
|
- Use `<section>` to group related content
|
||||||
|
- Use `<aside>` for supplementary information
|
||||||
|
- Use `<nav>` for navigation elements when relevant
|
||||||
|
|
||||||
|
## Headings and Text
|
||||||
|
- Use `<h2>` for main sections
|
||||||
|
- Use `<h3>` for subsections
|
||||||
|
- Use `<h4>` and below for further nesting as needed
|
||||||
|
- Use `<strong>` for emphasis and important text
|
||||||
|
- Use `<em>` for italics and stress emphasis
|
||||||
|
- Use `<p>` for paragraphs
|
||||||
|
|
||||||
|
## Code Formatting
|
||||||
|
- Format code blocks with `<pre><code class="language-{lang}">` structure
|
||||||
|
- Use appropriate language identifiers (javascript, python, html, css, etc.)
|
||||||
|
- For inline code, use `<code>` tags
|
||||||
|
- Add `data-file` attributes to code blocks when referencing specific files
|
||||||
|
- Add `data-line` attributes when referencing specific line numbers
|
||||||
|
|
||||||
|
## Lists and Tables
|
||||||
|
- Use `<ul>` for unordered lists, `<ol>` for ordered lists
|
||||||
|
- Always use `<li>` for list items
|
||||||
|
- Structure tables with `<table>`, `<thead>`, `<tbody>`, `<tr>`, `<th>`, `<td>`
|
||||||
|
- Add `scope` attributes to table headers for accessibility
|
||||||
|
- Use `<caption>` for table descriptions when helpful
|
||||||
|
|
||||||
|
## Data Attributes
|
||||||
|
- Add `data-file="filename"` to elements referencing files
|
||||||
|
- Add `data-line="number"` when referencing specific lines
|
||||||
|
- Add `data-type="info|warning|error|success"` for status messages
|
||||||
|
- Add `data-action="create|edit|delete"` for file operations
|
||||||
|
|
||||||
|
## Inline Styles (Minimal)
|
||||||
|
Include basic inline styles for readability:
|
||||||
|
- `style="font-family: monospace; background: #f5f5f5; padding: 2px 4px;"` for inline code
|
||||||
|
- `style="margin: 1em 0; padding: 1em; background: #f8f9fa; border-left: 3px solid #007acc;"` for code blocks
|
||||||
|
- `style="margin: 1em 0;"` for sections
|
||||||
|
|
||||||
|
## Example Structure
|
||||||
|
```html
|
||||||
|
<article>
|
||||||
|
<header>
|
||||||
|
<h2>Task Completion Summary</h2>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section data-type="success">
|
||||||
|
<h3>Files Modified</h3>
|
||||||
|
<ul>
|
||||||
|
<li data-file="example.js" data-action="edit">Updated function logic</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h3>Code Changes</h3>
|
||||||
|
<pre><code class="language-javascript" data-file="example.js" data-line="15-20">
|
||||||
|
function example() {
|
||||||
|
return "Hello World";
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</article>
|
||||||
|
```
|
||||||
|
|
||||||
|
Keep HTML clean, readable, and semantically meaningful. Avoid unnecessary nesting and maintain consistent indentation.
|
||||||
66
commands/style-markdown-focused.md
Normal file
66
commands/style-markdown-focused.md
Normal file
@@ -0,0 +1,66 @@
|
|||||||
|
---
|
||||||
|
name: style:markdown-focused
|
||||||
|
description: Full markdown features for maximum readability
|
||||||
|
---
|
||||||
|
|
||||||
|
**À partir de maintenant et pour toutes les réponses suivantes, applique ce style de réponse:**
|
||||||
|
|
||||||
|
## Response Format Guidelines
|
||||||
|
|
||||||
|
Structure responses using comprehensive markdown for optimal readability and information architecture. Apply these principles consistently:
|
||||||
|
|
||||||
|
### Document Structure
|
||||||
|
- Use **headers** (##, ###, ####) to create clear hierarchy
|
||||||
|
- Separate major sections with `---` horizontal rules
|
||||||
|
- Lead with overview, follow with details
|
||||||
|
|
||||||
|
### Content-Specific Formatting
|
||||||
|
|
||||||
|
**Code and Technical Elements:**
|
||||||
|
- `inline code` for commands, file names, function names, variables
|
||||||
|
- Code blocks with language identifiers:
|
||||||
|
```javascript
|
||||||
|
// Example code block
|
||||||
|
```
|
||||||
|
- File paths as `inline code`: `/path/to/file.js`
|
||||||
|
|
||||||
|
**Emphasis and Terminology:**
|
||||||
|
- **Bold** for important concepts, warnings, key points
|
||||||
|
- *Italics* for technical terms, names, emphasis
|
||||||
|
- > Blockquotes for important notes, tips, warnings, or key insights
|
||||||
|
|
||||||
|
**Structured Information:**
|
||||||
|
- Tables for comparisons, options, configurations, or any tabular data
|
||||||
|
- Numbered lists for sequential steps or processes
|
||||||
|
- Bulleted lists for related items or features
|
||||||
|
- Task lists for actionable items:
|
||||||
|
- [ ] Incomplete task
|
||||||
|
- [x] Completed task
|
||||||
|
|
||||||
|
**Visual Organization:**
|
||||||
|
- Use appropriate whitespace and line breaks
|
||||||
|
- Group related information together
|
||||||
|
- Create scannable content with consistent formatting
|
||||||
|
|
||||||
|
### Information Architecture Principles
|
||||||
|
|
||||||
|
**Choose the RIGHT markdown feature:**
|
||||||
|
- Tables: comparing multiple items, showing options, structured data
|
||||||
|
- Code blocks: any code, configurations, command sequences
|
||||||
|
- Blockquotes: callouts, warnings, important context
|
||||||
|
- Task lists: actionable items requiring completion
|
||||||
|
- Headers: logical document sections and hierarchy
|
||||||
|
- Horizontal rules: major topic transitions
|
||||||
|
|
||||||
|
**Optimize for readability:**
|
||||||
|
- Make information easy to scan and locate
|
||||||
|
- Use visual hierarchy to guide attention
|
||||||
|
- Balance comprehensive detail with clear organization
|
||||||
|
- Consider both terminal and web rendering
|
||||||
|
|
||||||
|
### Links and References
|
||||||
|
Format links properly: [descriptive text](url) when referencing external resources or documentation.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Goal:** Transform information into the most readable, navigable format possible using markdown's full feature set strategically.
|
||||||
43
commands/style-table-based.md
Normal file
43
commands/style-table-based.md
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
---
|
||||||
|
name: style:table-based
|
||||||
|
description: Markdown tables for better organization and scanning
|
||||||
|
---
|
||||||
|
|
||||||
|
**À partir de maintenant et pour toutes les réponses suivantes, applique ce style de réponse:**
|
||||||
|
|
||||||
|
Structure your responses using markdown tables wherever appropriate to improve clarity and organization. Key guidelines:
|
||||||
|
|
||||||
|
## Table Usage Patterns
|
||||||
|
|
||||||
|
| Pattern | When to Use | Example |
|
||||||
|
|---------|-------------|---------|
|
||||||
|
| **Comparison Tables** | When contrasting options, tools, or approaches | Features vs benefits, tool comparisons |
|
||||||
|
| **Step Tables** | For multi-step processes with details | Step number, action, description, notes |
|
||||||
|
| **Information Tables** | To organize related data points | Configuration options, parameters, results |
|
||||||
|
| **Analysis Tables** | When breaking down findings or issues | Issue, severity, solution, priority |
|
||||||
|
|
||||||
|
## Table Formatting Standards
|
||||||
|
|
||||||
|
- Use clear, descriptive headers
|
||||||
|
- Keep cell content concise but informative
|
||||||
|
- Include relevant details in additional columns (e.g., notes, links, status)
|
||||||
|
- Use formatting within cells when helpful (bold for emphasis, code for technical terms)
|
||||||
|
- Align content logically (left for text, center for status, right for numbers)
|
||||||
|
|
||||||
|
## Response Structure
|
||||||
|
|
||||||
|
| Section | Format | Purpose |
|
||||||
|
|---------|--------|---------|
|
||||||
|
| **Summary** | Brief paragraph + summary table | Quick overview of key points |
|
||||||
|
| **Details** | Structured tables by category | Organized information presentation |
|
||||||
|
| **Actions** | Step table with priorities | Clear next steps with context |
|
||||||
|
|
||||||
|
## Code and Technical Content
|
||||||
|
|
||||||
|
When presenting code-related information, use tables to organize:
|
||||||
|
- File changes (file, action, description)
|
||||||
|
- Configuration options (parameter, value, description)
|
||||||
|
- Test results (test, status, notes)
|
||||||
|
- Dependencies (package, version, purpose)
|
||||||
|
|
||||||
|
Always prioritize readability and scannability. Use tables to reduce cognitive load and make information easier to digest at a glance.
|
||||||
21
commands/style-ultra-concise.md
Normal file
21
commands/style-ultra-concise.md
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
---
|
||||||
|
name: style:ultra-concise
|
||||||
|
description: Minimal words maximum speed direct actions
|
||||||
|
---
|
||||||
|
|
||||||
|
**À partir de maintenant et pour toutes les réponses suivantes, applique ce style de réponse:**
|
||||||
|
|
||||||
|
Use absolute minimum words. No explanations unless critical. Direct actions only.
|
||||||
|
|
||||||
|
- No greetings, pleasantries, or filler
|
||||||
|
- Code/commands first, brief status after
|
||||||
|
- Skip obvious steps
|
||||||
|
- Use fragments over sentences
|
||||||
|
- Single-line summaries only
|
||||||
|
- Assume high technical expertise
|
||||||
|
- Only explain if prevents errors
|
||||||
|
- Tool outputs without commentary
|
||||||
|
- Immediate next action if relevant
|
||||||
|
- We are not in a conversation
|
||||||
|
- We DO NOT like WASTING TIME
|
||||||
|
- IMPORTANT: We're here to FOCUS, BUILD, and SHIP
|
||||||
57
commands/style-yaml-structured.md
Normal file
57
commands/style-yaml-structured.md
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
---
|
||||||
|
name: style:yaml-structured
|
||||||
|
description: Structured YAML with hierarchical key value pairs
|
||||||
|
---
|
||||||
|
|
||||||
|
**À partir de maintenant et pour toutes les réponses suivantes, applique ce style de réponse:**
|
||||||
|
|
||||||
|
Structure all responses in valid YAML format with the following guidelines:
|
||||||
|
|
||||||
|
# Response Organization
|
||||||
|
- Use clear hierarchical structure with proper indentation (2 spaces)
|
||||||
|
- Organize content into logical sections using YAML objects
|
||||||
|
- Include descriptive comments using # for context and explanations
|
||||||
|
- Use key-value pairs for structured information
|
||||||
|
- Employ YAML lists with hyphens (-) for enumerated items
|
||||||
|
- Follow YAML syntax conventions strictly
|
||||||
|
|
||||||
|
# Output Structure
|
||||||
|
Format responses like configuration files with sections such as:
|
||||||
|
- `task`: Brief description of what was accomplished
|
||||||
|
- `details`: Structured breakdown of implementation
|
||||||
|
- `files`: List of files modified/created with descriptions
|
||||||
|
- `commands`: Any commands that should be run
|
||||||
|
- `status`: Current state or completion status
|
||||||
|
- `next_steps`: Recommended follow-up actions (if applicable)
|
||||||
|
- `notes`: Additional context or important considerations
|
||||||
|
|
||||||
|
# Example Format
|
||||||
|
```yaml
|
||||||
|
task: "File modification completed"
|
||||||
|
status: "success"
|
||||||
|
details:
|
||||||
|
action: "updated configuration"
|
||||||
|
target: "/path/to/file"
|
||||||
|
changes: 3
|
||||||
|
files:
|
||||||
|
- path: "/absolute/path/to/file.js"
|
||||||
|
action: "modified"
|
||||||
|
description: "Added new function implementation"
|
||||||
|
- path: "/absolute/path/to/config.json"
|
||||||
|
action: "updated"
|
||||||
|
description: "Changed timeout settings"
|
||||||
|
commands:
|
||||||
|
- "npm test"
|
||||||
|
- "npm run lint"
|
||||||
|
notes:
|
||||||
|
- "All changes follow existing code patterns"
|
||||||
|
- "No breaking changes introduced"
|
||||||
|
```
|
||||||
|
|
||||||
|
# Key Principles
|
||||||
|
- Maintain parseable YAML syntax at all times
|
||||||
|
- Use consistent indentation and structure
|
||||||
|
- Include relevant file paths as absolute paths
|
||||||
|
- Add explanatory comments where helpful
|
||||||
|
- Keep nesting logical and not overly deep
|
||||||
|
- Use appropriate YAML data types (strings, numbers, booleans, lists, objects)
|
||||||
14
hooks/hooks.json
Normal file
14
hooks/hooks.json
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"hooks": {
|
||||||
|
"SessionStart": [
|
||||||
|
{
|
||||||
|
"hooks": [
|
||||||
|
{
|
||||||
|
"type": "command",
|
||||||
|
"command": "${CLAUDE_PLUGIN_ROOT}/hooks/load-default-style.sh"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
40
hooks/load-default-style.sh
Executable file
40
hooks/load-default-style.sh
Executable file
@@ -0,0 +1,40 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
|
||||||
|
# Style par défaut : Ultra Concise
|
||||||
|
DEFAULT_STYLE="ultra-concise"
|
||||||
|
|
||||||
|
# Contenu du style Ultra Concise
|
||||||
|
STYLE_INSTRUCTIONS="**Style de réponse actif : Ultra Concise**
|
||||||
|
|
||||||
|
Pour toutes les réponses suivantes, applique ce style :
|
||||||
|
|
||||||
|
Use absolute minimum words. No explanations unless critical. Direct actions only.
|
||||||
|
|
||||||
|
- No greetings, pleasantries, or filler
|
||||||
|
- Code/commands first, brief status after
|
||||||
|
- Skip obvious steps
|
||||||
|
- Use fragments over sentences
|
||||||
|
- Single-line summaries only
|
||||||
|
- Assume high technical expertise
|
||||||
|
- Only explain if prevents errors
|
||||||
|
- Tool outputs without commentary
|
||||||
|
- Immediate next action if relevant
|
||||||
|
- We are not in a conversation
|
||||||
|
- We DO NOT like WASTING TIME
|
||||||
|
- IMPORTANT: We're here to FOCUS, BUILD, and SHIP
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
💡 Styles disponibles : /style:bullet-points, /style:ultra-concise, /style:markdown-focused, /style:table-based, /style:yaml-structured, /style:html-structured, /style:genui"
|
||||||
|
|
||||||
|
# Retourner le contexte en JSON
|
||||||
|
cat <<EOF
|
||||||
|
{
|
||||||
|
"hookSpecificOutput": {
|
||||||
|
"hookEventName": "SessionStart",
|
||||||
|
"additionalContext": $(echo "$STYLE_INSTRUCTIONS" | jq -Rs .)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
EOF
|
||||||
|
|
||||||
|
exit 0
|
||||||
77
plugin.lock.json
Normal file
77
plugin.lock.json
Normal file
@@ -0,0 +1,77 @@
|
|||||||
|
{
|
||||||
|
"$schema": "internal://schemas/plugin.lock.v1.json",
|
||||||
|
"pluginId": "gh:atournayre/claude-marketplace:output-styles",
|
||||||
|
"normalized": {
|
||||||
|
"repo": null,
|
||||||
|
"ref": "refs/tags/v20251128.0",
|
||||||
|
"commit": "760540c247c4ed3cef6c869aa0188fbb95f96d4a",
|
||||||
|
"treeHash": "58710958049a8ddbc47085575b70a8602ec9ffa56f6b2c8955dd6b8c60215905",
|
||||||
|
"generatedAt": "2025-11-28T10:14:00.859184Z",
|
||||||
|
"toolVersion": "publish_plugins.py@0.2.0"
|
||||||
|
},
|
||||||
|
"origin": {
|
||||||
|
"remote": "git@github.com:zhongweili/42plugin-data.git",
|
||||||
|
"branch": "master",
|
||||||
|
"commit": "aa1497ed0949fd50e99e70d6324a29c5b34f9390",
|
||||||
|
"repoRoot": "/Users/zhongweili/projects/openmind/42plugin-data"
|
||||||
|
},
|
||||||
|
"manifest": {
|
||||||
|
"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"
|
||||||
|
},
|
||||||
|
"content": {
|
||||||
|
"files": [
|
||||||
|
{
|
||||||
|
"path": "README.md",
|
||||||
|
"sha256": "7e7c27c80dcb7fd555b75b6010c22a6db4d509bdc5af1b49b0f6f635b4dd9ebe"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "hooks/load-default-style.sh",
|
||||||
|
"sha256": "28b8072915a7f2fd00ae16e717ac9f9ba34a9f6c3eec84babb7779027ad99163"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "hooks/hooks.json",
|
||||||
|
"sha256": "2c762a03bf44b1b02bbdc8d42dc1eae99f3f39e957729af2e441dc866aeaea45"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": ".claude-plugin/plugin.json",
|
||||||
|
"sha256": "df6a74ed451d4e6075fa5ade72ccedabd1c21c5716340cda1d7b96b7507b8d78"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "commands/style-html-structured.md",
|
||||||
|
"sha256": "e2de12b1b75770e8dc99d3671a76a3c73bec80ba8806530bd29a9eba190cb72f"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "commands/style-bullet-points.md",
|
||||||
|
"sha256": "ede263662310cd26c75a93b0d5bbb8f5e13ea3352ae85b64f71b036b14b78084"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "commands/style-ultra-concise.md",
|
||||||
|
"sha256": "d07c9d3bf8ab6a5c2488d2ff86636d007c4c91ef4453001c6a562ff316b8c414"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "commands/style-table-based.md",
|
||||||
|
"sha256": "467dee90daee71f414146446e67d6ca944cb2f7ed2e5a512800145ae85ad141a"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "commands/style-yaml-structured.md",
|
||||||
|
"sha256": "7c9479402d3aa1f9bbe824174c77ad3edd8c3de361906b577ace20e1d2751df2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "commands/style-markdown-focused.md",
|
||||||
|
"sha256": "864ab2d96bb5e3d044462b9e228a50e007f76f54cb7aba7e21563ad06b0daf3d"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "commands/style-genui.md",
|
||||||
|
"sha256": "2dfe539e06a7dcbad75fa8b9de32be34be359f61e5d24b0689a00e54cf3d20f6"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"dirSha256": "58710958049a8ddbc47085575b70a8602ec9ffa56f6b2c8955dd6b8c60215905"
|
||||||
|
},
|
||||||
|
"security": {
|
||||||
|
"scannedAt": null,
|
||||||
|
"scannerVersion": null,
|
||||||
|
"flags": []
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user