@abarcenas/ai-workflow-template 1.1.0

package/.github/instructions/html-to-css-guide.instructions.md

@@ -0,0 +1,104 @@
+---
+description: "Color usage guidelines and styling rules for HTML elements to ensure accessible, professional designs."
+applyTo: "**/*.html, **/*.css, **/*.js"
+---
+
+# HTML CSS Style Color Guide
+
+Follow these guidelines when updating or creating HTML/CSS styles for browser rendering. Color names
+represent the full spectrum of their respective hue ranges (e.g., "blue" includes navy, sky blue, etc.).
+
+## Color Definitions
+
+- **Hot Colors**: Oranges, reds, and yellows
+- **Cool Colors**: Blues, greens, and purples
+- **Neutral Colors**: Grays and grayscale variations
+- **Binary Colors**: Black and white
+- **60-30-10 Rule**
+  - **Primary Color**: Use 60% of the time (_cool or light color_)
+  - **Secondary Color**: Use 30% of the time (_cool or light color_)
+  - **Accent**: Use 10% of the time (_complementary hot color_)
+
+## Color Usage Guidelines
+
+Balance the colors used by applying the **60-30-10 rule** to graphic design elements like backgrounds,
+buttons, cards, etc...
+
+### Background Colors
+
+**Never Use:**
+
+- Purple or magenta
+- Red, orange, or yellow
+- Pink
+- Any hot color
+
+**Recommended:**
+
+- White or off-white
+- Light cool colors (e.g., light blues, light greens)
+- Subtle neutral tones
+- Light gradients with minimal color shift
+
+### Text Colors
+
+**Never Use:**
+
+- Yellow (poor contrast and readability)
+- Pink
+- Pure white or light text on light backgrounds
+- Pure black or dark text on dark backgrounds
+
+**Recommended:**
+
+- Dark neutral colors (e.g., #1f2328, #24292f)
+- Near-black variations (#000000 to #333333)
+  - Ensure background is a light color
+- Dark grays (#4d4d4d, #6c757d)
+- High-contrast combinations for accessibility
+- Near-white variations (#ffffff to #f0f2f3)
+  - Ensure background is a dark color
+
+### Colors to Avoid
+
+Unless explicitly required by design specifications or user request, avoid:
+
+- Bright purples and magentas
+- Bright pinks and neon colors
+- Highly saturated hot colors
+- Colors with low contrast ratios (fails WCAG accessibility standards)
+
+### Colors to Use Sparingly
+
+**Hot Colors** (red, orange, yellow):
+
+- Reserve for critical alerts, warnings, or error messages
+- Use only when conveying urgency or importance
+- Limit to small accent areas rather than large sections
+- Consider alternatives like icons or bold text before using hot colors
+
+## Gradients
+
+Apply gradients with subtle color transitions to maintain professional aesthetics.
+
+### Best Practices
+
+- Keep color shifts minimal (e.g., #E6F2FF to #F5F7FA)
+- Use gradients within the same color family
+- Avoid combining hot and cool colors in a single gradient
+- Prefer linear gradients over radial for backgrounds
+
+### Appropriate Use Cases
+
+- Background containers and sections
+- Button hover states and interactive elements
+- Drop shadows and depth effects
+- Header and navigation bars
+- Card components and panels
+
+## Additional Resources
+
+- [Color Tool](https://civicactions.github.io/uswds-color-tool/)
+- [Government or Professional Color Standards](https://designsystem.digital.gov/design-tokens/color/overview/)
+- [UI Color Palette Best Practices](https://www.interaction-design.org/literature/article/ui-color-palette)
+- [Color Combination Resource](https://www.figma.com/resource-library/color-combinations/)

package/.github/instructions/instructions.instructions.md

@@ -0,0 +1,264 @@
+---
+description: "Guidelines for creating high-quality custom instruction files for GitHub Copilot"
+applyTo: "**/*.instructions.md"
+---
+
+# Custom Instructions File Guidelines
+
+Instructions for creating effective and maintainable custom instruction files that guide GitHub Copilot in generating domain-specific code and following project conventions.
+
+## Project Context
+
+- Target audience: Developers and GitHub Copilot working with domain-specific code
+- File format: Markdown with YAML frontmatter
+- File naming convention: lowercase with hyphens (e.g., `react-best-practices.instructions.md`)
+- Location: `.github/instructions/` directory
+- Purpose: Provide context-aware guidance for code generation, review, and documentation
+
+## Required Frontmatter
+
+Every instruction file must include YAML frontmatter with the following fields:
+
+```yaml
+---
+description: "Brief description of the instruction purpose and scope"
+applyTo: "glob pattern for target files (e.g., **/*.ts, **/*.py)"
+---
+```
+
+### Frontmatter Guidelines
+
+- **description**: Single-quoted string, 1-500 characters, clearly stating the purpose
+- **applyTo**: Glob pattern(s) specifying which files these instructions apply to
+  - Single pattern: `'**/*.ts'`
+  - Multiple patterns: `'**/*.ts, **/*.tsx, **/*.js'`
+  - Specific files: `'src/**/*.py'`
+  - All files: `'**'`
+
+## File Structure
+
+A well-structured instruction file should include the following sections:
+
+### 1. Title and Overview
+
+- Clear, descriptive title using `#` heading
+- Brief introduction explaining the purpose and scope
+- Optional: Project context section with key technologies and versions
+
+### 2. Core Sections
+
+Organize content into logical sections based on the domain:
+
+- **General Instructions**: High-level guidelines and principles
+- **Best Practices**: Recommended patterns and approaches
+- **Code Standards**: Naming conventions, formatting, style rules
+- **Architecture/Structure**: Project organization and design patterns
+- **Common Patterns**: Frequently used implementations
+- **Security**: Security considerations (if applicable)
+- **Performance**: Optimization guidelines (if applicable)
+- **Testing**: Testing standards and approaches (if applicable)
+
+### 3. Examples and Code Snippets
+
+Provide concrete examples with clear labels:
+
+```markdown
+### Good Example
+
+\`\`\`language
+// Recommended approach
+code example here
+\`\`\`
+
+### Bad Example
+
+\`\`\`language
+// Avoid this pattern
+code example here
+\`\`\`
+```
+
+### 4. Validation and Verification (Optional but Recommended)
+
+- Build commands to verify code
+- Linting and formatting tools
+- Testing requirements
+- Verification steps
+
+## Content Guidelines
+
+### Writing Style
+
+- Use clear, concise language
+- Write in imperative mood ("Use", "Implement", "Avoid")
+- Be specific and actionable
+- Avoid ambiguous terms like "should", "might", "possibly"
+- Use bullet points and lists for readability
+- Keep sections focused and scannable
+
+### Best Practices
+
+- **Be Specific**: Provide concrete examples rather than abstract concepts
+- **Show Why**: Explain the reasoning behind recommendations when it adds value
+- **Use Tables**: For comparing options, listing rules, or showing patterns
+- **Include Examples**: Real code snippets are more effective than descriptions
+- **Stay Current**: Reference current versions and best practices
+- **Link Resources**: Include official documentation and authoritative sources
+
+### Common Patterns to Include
+
+1. **Naming Conventions**: How to name variables, functions, classes, files
+2. **Code Organization**: File structure, module organization, import order
+3. **Error Handling**: Preferred error handling patterns
+4. **Dependencies**: How to manage and document dependencies
+5. **Comments and Documentation**: When and how to document code
+6. **Version Information**: Target language/framework versions
+
+## Patterns to Follow
+
+### Bullet Points and Lists
+
+```markdown
+## Security Best Practices
+
+- Always validate user input before processing
+- Use parameterized queries to prevent SQL injection
+- Store secrets in environment variables, never in code
+- Implement proper authentication and authorization
+- Enable HTTPS for all production endpoints
+```
+
+### Tables for Structured Information
+
+```markdown
+## Common Issues
+
+| Issue            | Solution            | Example                       |
+| ---------------- | ------------------- | ----------------------------- |
+| Magic numbers    | Use named constants | `const MAX_RETRIES = 3`       |
+| Deep nesting     | Extract functions   | Refactor nested if statements |
+| Hardcoded values | Use configuration   | Store API URLs in config      |
+```
+
+### Code Comparison
+
+```markdown
+### Good Example - Using TypeScript interfaces
+
+\`\`\`typescript
+interface User {
+id: string;
+name: string;
+email: string;
+}
+
+function getUser(id: string): User {
+// Implementation
+}
+\`\`\`
+
+### Bad Example - Using any type
+
+\`\`\`typescript
+function getUser(id: any): any {
+// Loses type safety
+}
+\`\`\`
+```
+
+### Conditional Guidance
+
+```markdown
+## Framework Selection
+
+- **For small projects**: Use Minimal API approach
+- **For large projects**: Use controller-based architecture with clear separation
+- **For microservices**: Consider domain-driven design patterns
+```
+
+## Patterns to Avoid
+
+- **Overly verbose explanations**: Keep it concise and scannable
+- **Outdated information**: Always reference current versions and practices
+- **Ambiguous guidelines**: Be specific about what to do or avoid
+- **Missing examples**: Abstract rules without concrete code examples
+- **Contradictory advice**: Ensure consistency throughout the file
+- **Copy-paste from documentation**: Add value by distilling and contextualizing
+
+## Testing Your Instructions
+
+Before finalizing instruction files:
+
+1. **Test with Copilot**: Try the instructions with actual prompts in VS Code
+2. **Verify Examples**: Ensure code examples are correct and run without errors
+3. **Check Glob Patterns**: Confirm `applyTo` patterns match intended files
+
+## Example Structure
+
+Here's a minimal example structure for a new instruction file:
+
+```markdown
+---
+description: "Brief description of purpose"
+applyTo: "**/*.ext"
+---
+
+# Technology Name Development
+
+Brief introduction and context.
+
+## General Instructions
+
+- High-level guideline 1
+- High-level guideline 2
+
+## Best Practices
+
+- Specific practice 1
+- Specific practice 2
+
+## Code Standards
+
+### Naming Conventions
+
+- Rule 1
+- Rule 2
+
+### File Organization
+
+- Structure 1
+- Structure 2
+
+## Common Patterns
+
+### Pattern 1
+
+Description and example
+
+\`\`\`language
+code example
+\`\`\`
+
+### Pattern 2
+
+Description and example
+
+## Validation
+
+- Build command: `command to verify`
+- Linting: `command to lint`
+- Testing: `command to test`
+```
+
+## Maintenance
+
+- Review instructions when dependencies or frameworks are updated
+- Update examples to reflect current best practices
+- Remove outdated patterns or deprecated features
+- Add new patterns as they emerge in the community
+- Keep glob patterns accurate as project structure evolves
+
+## Additional Resources
+
+- [Custom Instructions Documentation](https://code.visualstudio.com/docs/copilot/customization/custom-instructions)
+- [Awesome Copilot Instructions](https://github.com/github/awesome-copilot/tree/main/instructions)

package/.github/instructions/markdown.instructions.md

@@ -0,0 +1,51 @@
+---
+description: "Documentation and content creation standards"
+applyTo: "**/*.md"
+---
+
+## Markdown Content Rules
+
+The following markdown content rules are enforced in the validators:
+
+1. **Headings**: Use appropriate heading levels (H2, H3, etc.) to structure your content. Do not use an H1 heading, as this will be generated based on the title.
+2. **Lists**: Use bullet points or numbered lists for lists. Ensure proper indentation and spacing.
+3. **Code Blocks**: Use fenced code blocks for code snippets. Specify the language for syntax highlighting.
+4. **Links**: Use proper markdown syntax for links. Ensure that links are valid and accessible.
+5. **Images**: Use proper markdown syntax for images. Include alt text for accessibility.
+6. **Tables**: Use markdown tables for tabular data. Ensure proper formatting and alignment.
+7. **Line Length**: Limit line length to 400 characters for readability.
+8. **Whitespace**: Use appropriate whitespace to separate sections and improve readability.
+9. **Front Matter**: Include YAML front matter at the beginning of the file with required metadata fields.
+
+## Formatting and Structure
+
+Follow these guidelines for formatting and structuring your markdown content:
+
+- **Headings**: Use `##` for H2 and `###` for H3. Ensure that headings are used in a hierarchical manner. Recommend restructuring if content includes H4, and more strongly recommend for H5.
+- **Lists**: Use `-` for bullet points and `1.` for numbered lists. Indent nested lists with two spaces.
+- **Code Blocks**: Use triple backticks (`) to create fenced code blocks. Specify the language after the opening backticks for syntax highlighting (e.g., `csharp).
+- **Links**: Use `[link text](URL)` for links. Ensure that the link text is descriptive and the URL is valid.
+- **Images**: Use `![alt text](image URL)` for images. Include a brief description of the image in the alt text.
+- **Tables**: Use `|` to create tables. Ensure that columns are properly aligned and headers are included.
+- **Line Length**: Break lines at 80 characters to improve readability. Use soft line breaks for long paragraphs.
+- **Whitespace**: Use blank lines to separate sections and improve readability. Avoid excessive whitespace.
+
+## Validation Requirements
+
+Ensure compliance with the following validation requirements:
+
+- **Front Matter**: Include the following fields in the YAML front matter:
+  - `post_title`: The title of the post.
+  - `author1`: The primary author of the post.
+  - `post_slug`: The URL slug for the post.
+  - `microsoft_alias`: The Microsoft alias of the author.
+  - `featured_image`: The URL of the featured image.
+  - `categories`: The categories for the post. These categories must be from the list in /categories.txt.
+  - `tags`: The tags for the post.
+  - `ai_note`: Indicate if AI was used in the creation of the post.
+  - `summary`: A brief summary of the post. Recommend a summary based on the content when possible.
+  - `post_date`: The publication date of the post.
+
+- **Content Rules**: Ensure that the content follows the markdown content rules specified above.
+- **Formatting**: Ensure that the content is properly formatted and structured according to the guidelines.
+- **Validation**: Run the validation tools to check for compliance with the rules and guidelines.