zhongwei/gh-atournayre-claude-marketplace-output-styles
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Zhongwei Li
2025-11-29 17:58:59 +08:00
commit fecb855923
12 changed files with 864 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
commands/style-bullet-points.md Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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)