Build an AI Coding Assistant Configurator with AI

I want to build an AI Coding Assistant Configurator. This tool will help developers create personalized setups for their AI coding workflows.

Please create an HTML interface with these sections:
1. **Configuration Profile Setup** - Form for developer details (name, primary language, experience level, preferred frameworks)
2. **Prompt Shortcuts Library** - Grid of coding-specific prompt templates they can customize
3. **Conversation Threading** - System for organizing different coding contexts (debugging, feature development, code review, etc.)
4. **Code Pattern Templates** - Collection of reusable code generation patterns
5. **Export Configuration** - Button to generate a complete configuration file

Use a clean, developer-friendly design with:
- Dark theme (#0a0f1a background, #111827 cards)
- Green accent color (#22c55e) for primary actions
- Tabbed interface for easy navigation
- Form inputs with proper labels
- Preview areas to show generated content

Make it functional with JavaScript for interactivity.

Add a comprehensive prompt shortcuts system to the configurator. Create these coding-specific prompt templates:

**Quick Actions:**
- "Explain this code" - For understanding complex functions
- "Debug this error" - For troubleshooting with error context
- "Optimize performance" - For improving code efficiency
- "Add error handling" - For making code more robust
- "Write tests for" - For generating test cases
- "Document this function" - For creating clear documentation

**Code Generation:**
- "Create API endpoint" - Template for REST API development
- "Build database model" - For ORM/database schema creation
- "Generate form validation" - For input validation logic
- "Create utility function" - For reusable helper functions

**Code Review:**
- "Review for security" - Security-focused code analysis
- "Check best practices" - Language-specific best practice review
- "Suggest improvements" - General code improvement suggestions

Each template should:
1. Have placeholder variables like {LANGUAGE}, {FRAMEWORK}, {CODE_SNIPPET}
2. Include a preview area showing how the prompt will look
3. Allow users to customize and save their own versions
4. Have copy-to-clipboard functionality

Update the JavaScript to make these templates interactive and customizable.

Add a conversation threading system to help organize different coding contexts. Create these features:

**Thread Categories:**
- 🐛 **Debugging** - For troubleshooting specific issues
- ⚡ **Feature Development** - For building new functionality
- 🔍 **Code Review** - For reviewing and improving existing code
- 📚 **Learning** - For understanding new concepts or technologies
- 🏗️ **Architecture** - For system design and planning discussions
- 🚀 **Optimization** - For performance and efficiency improvements

**Threading Features:**
1. **Thread Starter Templates** - Pre-written opening prompts for each category that set proper context
2. **Context Preservation** - Reminder prompts to maintain focus within each thread
3. **Thread Summary Generator** - Templates for summarizing long conversations
4. **Context Switching** - Prompts for cleanly transitioning between different topics

**Thread Management:**
- Create new thread button with category selection
- Thread history with titles and categories
- Export individual threads as markdown
- Search functionality across thread titles

For each thread category, include:
- An opening prompt template that sets context
- Guidelines for maintaining focus
- Suggested follow-up prompts
- A closing summary template

Make it visual with icons, color coding by category, and easy navigation.

Create a comprehensive code generation patterns library with these proven templates:

**Architectural Patterns:**
1. **MVC Component** - "Create a {LANGUAGE} {COMPONENT_TYPE} following MVC pattern with {SPECIFIC_REQUIREMENTS}. Include proper separation of concerns, error handling, and {FRAMEWORK} conventions."

2. **API Endpoint** - "Generate a REST API endpoint in {LANGUAGE} using {FRAMEWORK} that {ACTION_DESCRIPTION}. Include: request validation, error responses, proper HTTP status codes, and {DATABASE} integration."

3. **Database Model** - "Create a {ORM} model for {ENTITY} with these fields: {FIELD_LIST}. Include: relationships, validation rules, indexes for performance, and migration script."

**Functional Patterns:**
4. **Error Handling Wrapper** - "Add comprehensive error handling to this {LANGUAGE} function: {CODE_SNIPPET}. Include: specific exception types, logging, user-friendly messages, and recovery strategies."

5. **Test Suite Generator** - "Generate complete test suite for this {LANGUAGE} {COMPONENT_TYPE}: {CODE_SNIPPET}. Include: unit tests, integration tests, edge cases, mocks, and performance tests."

6. **Utility Function** - "Create a reusable {LANGUAGE} utility function that {FUNCTION_PURPOSE}. Make it: type-safe, well-documented, performant, and include usage examples."

**Quality Patterns:**
7. **Code Documentation** - "Document this {LANGUAGE} code with: inline comments, JSDoc/docstrings, usage examples, parameter descriptions, and return value explanations: {CODE_SNIPPET}"

8. **Performance Optimization** - "Optimize this {LANGUAGE} code for performance: {CODE_SNIPPET}. Focus on: time complexity, memory usage, caching opportunities, and {SPECIFIC_CONSTRAINTS}."

Each pattern should:
- Have clear placeholder variables
- Include quality requirements (error handling, testing, documentation)
- Specify output format expectations
- Include context about coding standards
- Have examples for common languages (JavaScript, Python, Java, etc.)

Add pattern preview functionality and customization options.

Complete the configurator with a comprehensive export system that generates ready-to-use configuration files:

**Export Formats:**
1. **JSON Configuration** - Structured data file with all customized prompts, shortcuts, and patterns
2. **Markdown Prompt Library** - Human-readable documentation with all templates organized by category
3. **VS Code Snippets** - Code snippets file for VS Code integration
4. **README Generator** - Custom README template for the developer's AI workflow

**Export Content Should Include:**
- Developer profile information
- All customized prompt shortcuts with their variables
- Conversation threading templates and categories
- Code generation patterns tailored to their languages/frameworks
- Usage instructions and examples
- Import instructions for different AI tools (Claude, ChatGPT, etc.)

**Export Features:**
1. **Preview Before Export** - Show what the configuration file will contain
2. **Selective Export** - Allow users to choose which sections to include
3. **Multiple Download Options** - Separate files or bundled zip
4. **Import Instructions** - Clear steps for using the exported configuration

**Configuration File Structure:**
```json
{
  "profile": { "name": "", "languages": [], "experience": "" },
  "shortcuts": [ { "name": "", "template": "", "category": "" } ],
  "threads": [ { "category": "", "starter": "", "guidelines": [] } ],
  "patterns": [ { "type": "", "template": "", "languages": [] } ]
}
```

Add a final "Get Started" section with:
- Quick setup instructions
- First steps for using the configuration
- Tips for customizing further

Make the export process smooth with progress indicators and clear success messages.