Spaces:

danielrosehill
/

Claude-Agent-Picker-Idea

Running

danielrosehill Claude commited on 15 days ago

Commit

0d5160e

1 Parent(s): c3c7ae8

Add Claude Agent Picker Pattern documentation with fun design

- Created dark theme with gradient backgrounds and animations
- Added floating emoji badges and smooth image transitions
- Included all vital images (6 images total with Git LFS)
- Added complete markdown documentation
- Copied Anthropic subagent reference doc
- Implemented responsive design with Inter and JetBrains Mono fonts

🤖 Generated with Claude Code
https://claude.com/claude-code

Co-Authored-By: Claude <[email protected]>

Files changed (12) hide show

.gitattributes +3 -0
README.md +30 -4
index.html +63 -18
source/README.md +149 -0
source/anthropic-doc.md +386 -0
source/images/1.jpg +3 -0
source/images/2.jpg +3 -0
source/images/3.jpg +3 -0
source/images/4.png +3 -0
source/images/5.png +3 -0
source/images/6.png +3 -0
style.css +314 -18

.gitattributes CHANGED Viewed

@@ -33,3 +33,6 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text

 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text

README.md CHANGED Viewed

@@ -1,11 +1,37 @@
 ---
-title: Claude Agent Picker Idea
-emoji: 📚
 colorFrom: indigo
 colorTo: purple
 sdk: static
 pinned: false
-short_description: Sketch for a multiagent creation utility
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Claude Agent Picker Pattern
+emoji: 🎯
 colorFrom: indigo
 colorTo: purple
 sdk: static
 pinned: false
+short_description: A creative pattern for managing multi-agent systems in Claude Code
 ---
+# Claude Agent "Picker" Pattern
+A late-night idea for intelligently assembling multi-agent crews for Claude Code projects while managing context window constraints.
+## What's This About?
+This space presents a conceptual pattern for solving a common problem in AI agent orchestration: **context flooding**. When you have too many agents or MCP tools, the orchestration layer gets overwhelmed trying to parse through all the definitions.
+## The Concept
+The "Agent Picker" pattern proposes:
+1. **Agent Farm**: A centralized library of reusable subagent configurations
+2. **HTPG (Harsh Team Picker Guy)**: An intelligent pre-kickoff agent that:
+   - Evaluates project requirements
+   - Selects optimal agent crews with minimal overlap
+   - Manages context window limits
+   - Adapts agent configs for specific projects
+## View the Full Documentation
+Click the space above to view the complete write-up with diagrams and detailed explanations!
+---
+**Author**: [Daniel Rosehill](https://danielrosehill.com)
+**Date**: October 31, 2025

index.html CHANGED Viewed

@@ -1,19 +1,64 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Claude Agent Picker Pattern 🎯</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="hero-gradient"></div>
+    <div class="container">
+        <div class="header-badge-container">
+            <span class="emoji-badge">🎯</span>
+            <span class="emoji-badge">🤖</span>
+            <span class="emoji-badge">🧠</span>
+        </div>
+        <div id="content"></div>
+        <footer class="footer">
+            <p>💡 A late-night idea by <a href="https://danielrosehill.com" target="_blank">Daniel Rosehill</a></p>
+            <p class="footer-date">October 31, 2025</p>
+        </footer>
+    </div>
+    <script>
+        // Fetch and render the markdown
+        fetch('source/README.md')
+            .then(response => response.text())
+            .then(text => {
+                // Configure marked
+                marked.setOptions({
+                    breaks: true,
+                    gfm: true
+                });
+                // Convert markdown to HTML
+                const html = marked.parse(text);
+                // Update image paths to point to source/images/
+                const updatedHtml = html.replace(/src="images\//g, 'src="source/images/');
+                document.getElementById('content').innerHTML = updatedHtml;
+                // Add some animation to images after loading
+                setTimeout(() => {
+                    document.querySelectorAll('img').forEach((img, index) => {
+                        img.style.opacity = '0';
+                        img.style.transform = 'translateY(20px)';
+                        setTimeout(() => {
+                            img.style.transition = 'all 0.6s ease-out';
+                            img.style.opacity = '1';
+                            img.style.transform = 'translateY(0)';
+                        }, index * 100);
+                    });
+                }, 100);
+            })
+            .catch(error => {
+                console.error('Error loading markdown:', error);
+                document.getElementById('content').innerHTML = '<p class="error">Error loading content. Please try again.</p>';
+            });
+    </script>
+</body>
 </html>

source/README.md ADDED Viewed

	@@ -0,0 +1,149 @@

+# Claude Agent "Picker" Pattern (Claude Code)
+![Concept](https://img.shields.io/badge/Type-Concept-blue)
+![Notes](https://img.shields.io/badge/Status-Notes-yellow)
+![Idea](https://img.shields.io/badge/Stage-Idea-purple)
+![Claude Code](https://img.shields.io/badge/Tool-Claude_Code-orange)
+ ![alt text](images/3.jpg)
+Oct / 31 / 2025
+## The Problem
+Agents have to be used judiciously.
+Just like MCP tools.
+Too many cooks in the kitchen (and all that).
+The actual problem in technical terms: context flooding:
+- The more agents, the more descriptions the orchestration agent (plain Claude) has to parse through to figure out which subagent to delegate a task to.
+- The more MCP tool definitions Claude has to read... the same thing.
+![alt text](images/2.jpg)
+A thought:
+If AI tooling progresses faster than context widows grow, this problem can be expected to get more acute and its consequences to be more widely felt.
+Once upon a time, LLMs were envisioned as tools for handling (simple) text. Nowadays, our somewhat fantastical ambition has evolved to that LLMs can maintain good inference while simultaneously dealing with:
+- Lots of text (code)
+- Tool definitions (MCP)
+- Agent maps
+Etc.
+## Why Both With Subagents At All?
+Some are strenously against multiagent systems.
+But this quote from the Anthropic docs illustrates why it's worth persevering with working with subagents in spite of this limit:
+"Each subagent operates in its own context, preventing pollution of the main conversation and keeping it focused on high-level objectives."
+Which is a very big deal when context pollution can flatten out otherwise great inference.
+For creating performant agentic systems, using emerging tooling judiciously has become almost as vital an enterprise as knowing what tooling to use.
+Thus, a late night idea for a workaround pattern (even if imperfect, flawed, etc):
+---
+# The Idea
+![alt text](images/1.jpg)
+I call it the agent picker because the first thought I had when writing this was the high school ritual of picking teammates for a game of soccer (was that just my school? It seems awfully callous!).
+It offers a hacky workaround because:
+- If you add a whole bunch of system level agents ... you get the problem above
+- If you add them at the project level ... the CLI starts warning about the context problem
+At the time of writing, the inner mechanics of agent delegation are opaque.
+---
+# The Model
+## Agent Farm
+![alt text](images/4.png)
+Or more accurately the "subagent farm" but that sounds even odder.
+You may go through creative bursts in which you think ... "that would be an amazing subagent." It may have application across multiple Claude workspaces.
+This agent may be useful on a personal project and equally helpful on a work project with collaborators. It doesn't matter. What matters is the *idea* and config behind the agent and how it leverages AI to help achieve a project.
+For simplicity, let's sketch the filetree as:
+`~/subagents`
+## The Harsh Team Picker Guy (HTPG)
+![alt text](images/5.png)
+Our next task:
+We want an agent whose purpose is to intelligently assemble a multi-agent crew for a workspace.
+Note to self (and anyone reading this): this is very unlikely an original idea. But hey, who knows.
+Either way, here's my twist on it:
+- Claude Code knows its own context window and the parameters of how much context it can fit in the "other stuff" that goes on top of user prompts (namely, agent definitions and MCP tools).
+Downstream, this agent could select both. In this implementation (V1) let's just stick to subagent crew formation.
+So Harsh Team Picker Guy (HTPG) is a friendly pre-kickoff agent.
+In real world terms, I imagine HTPG as the project lead when you offload some project to an outsourced company. The project lead listens, takes notes, and assigns internal resources to your job. HTPG does thusly.
+HTPG has to have some firepower, though. So I envision him working like this, in sequence:
+### Task 1: Crew shortlisting / selection
+- Evaluate the project spec the user is proposing
+- Draw up a shortlist of subagents to form a "crew" with minimal task overlap and maximal "synergy"
+### Task 2: Truncate crew to fit context limit (user-set)
+- Calculate the approximate cumulative context window that the desired-for crew would impose
+- If beyond the defined limit, make some substitutions until we can get a crew together that fits within that limit.
+![alt text](images/6.png)
+*Graphic: Selected subagents are truncated for context optimisation before (almost) being dispatched into a repo*
+Potential "tactics" for substitution:
+- Remove least important subagents
+- Truncate descriptions / shorten system prompts of constituent agents
+### Task 3: Variable-based agent config adaption
+Finally - tweak the (stock) configs: this could be variable substitution to give our cookie cutter subagents a bit of context about the project. But mostly we expect and hope that this will happen through Claude's excellent built-in orchestration.
+### Task 4 (Wrap): Copy adapted crew to target directory (project workspace)
+This completes the flow.
+---
+The flow (describing the intended scripting in natural language):
+- Crew gets copied to a temp directory
+- Crew gets edited slightly for the task at hand by variable insertion
+- Crew gets copied into the project directory at `./claude/agents`
+- CLAUDE.md gets created there. CLAUDE.md contains a brief overview of the crew.
+- User gets a success message and is informed that their repo has been created with a nice team of subagents (that won't overrun context)
+- User can create as many stock agents as they wish and know that they will be kept safe in a library and assembled when needed for projects
+## Reference
+For more details on how subagents work in Claude Code, see the [Anthropic subagent documentation](./anthropic-doc.md) (captured at time of writing).

source/anthropic-doc.md ADDED Viewed

	@@ -0,0 +1,386 @@

+Source: https://docs.claude.com/en/docs/claude-code/sub-agents
+31/Oct/2025
+# Subagents
+> Create and use specialized AI subagents in Claude Code for task-specific workflows and improved context management.
+Custom subagents in Claude Code are specialized AI assistants that can be invoked to handle specific types of tasks. They enable more efficient problem-solving by providing task-specific configurations with customized system prompts, tools and a separate context window.
+## What are subagents?
+Subagents are pre-configured AI personalities that Claude Code can delegate tasks to. Each subagent:
+* Has a specific purpose and expertise area
+* Uses its own context window separate from the main conversation
+* Can be configured with specific tools it's allowed to use
+* Includes a custom system prompt that guides its behavior
+When Claude Code encounters a task that matches a subagent's expertise, it can delegate that task to the specialized subagent, which works independently and returns results.
+## Key benefits
+<CardGroup cols={2}>
+  <Card title="Context preservation" icon="layer-group">
+    Each subagent operates in its own context, preventing pollution of the main conversation and keeping it focused on high-level objectives.
+  </Card>
+  <Card title="Specialized expertise" icon="brain">
+    Subagents can be fine-tuned with detailed instructions for specific domains, leading to higher success rates on designated tasks.
+  </Card>
+  <Card title="Reusability" icon="rotate">
+    Once created, subagents can be used across different projects and shared with your team for consistent workflows.
+  </Card>
+  <Card title="Flexible permissions" icon="shield-check">
+    Each subagent can have different tool access levels, allowing you to limit powerful tools to specific subagent types.
+  </Card>
+</CardGroup>
+## Quick start
+To create your first subagent:
+<Steps>
+  <Step title="Open the subagents interface">
+    Run the following command:
+    ```
+    /agents
+    ```
+  </Step>
+  <Step title="Select 'Create New Agent'">
+    Choose whether to create a project-level or user-level subagent
+  </Step>
+  <Step title="Define the subagent">
+    * **Recommended**: Generate with Claude first, then customize to make it yours
+    * Describe your subagent in detail and when it should be used
+    * Select the tools you want to grant access to (or leave blank to inherit all tools)
+    * The interface shows all available tools, making selection easy
+    * If you're generating with Claude, you can also edit the system prompt in your own editor by pressing `e`
+  </Step>
+  <Step title="Save and use">
+    Your subagent is now available! Claude will use it automatically when appropriate, or you can invoke it explicitly:
+    ```
+    > Use the code-reviewer subagent to check my recent changes
+    ```
+  </Step>
+</Steps>
+## Subagent configuration
+### File locations
+Subagents are stored as Markdown files with YAML frontmatter in two possible locations:
+| Type                  | Location            | Scope                         | Priority |
+| :-------------------- | :------------------ | :---------------------------- | :------- |
+| **Project subagents** | `.claude/agents/`   | Available in current project  | Highest  |
+| **User subagents**    | `~/.claude/agents/` | Available across all projects | Lower    |
+When subagent names conflict, project-level subagents take precedence over user-level subagents.
+### Plugin agents
+[Plugins](/en/docs/claude-code/plugins) can provide custom subagents that integrate seamlessly with Claude Code. Plugin agents work identically to user-defined agents and appear in the `/agents` interface.
+**Plugin agent locations**: Plugins include agents in their `agents/` directory (or custom paths specified in the plugin manifest).
+**Using plugin agents**:
+* Plugin agents appear in `/agents` alongside your custom agents
+* Can be invoked explicitly: "Use the code-reviewer agent from the security-plugin"
+* Can be invoked automatically by Claude when appropriate
+* Can be managed (viewed, inspected) through `/agents` interface
+See the [plugin components reference](/en/docs/claude-code/plugins-reference#agents) for details on creating plugin agents.
+### CLI-based configuration
+You can also define subagents dynamically using the `--agents` CLI flag, which accepts a JSON object:
+```bash  theme={null}
+claude --agents '{
+  "code-reviewer": {
+    "description": "Expert code reviewer. Use proactively after code changes.",
+    "prompt": "You are a senior code reviewer. Focus on code quality, security, and best practices.",
+    "tools": ["Read", "Grep", "Glob", "Bash"],
+    "model": "sonnet"
+  }
+}'
+```
+**Priority**: CLI-defined subagents have lower priority than project-level subagents but higher priority than user-level subagents.
+**Use case**: This approach is useful for:
+* Quick testing of subagent configurations
+* Session-specific subagents that don't need to be saved
+* Automation scripts that need custom subagents
+* Sharing subagent definitions in documentation or scripts
+For detailed information about the JSON format and all available options, see the [CLI reference documentation](/en/docs/claude-code/cli-reference#agents-flag-format).
+### File format
+Each subagent is defined in a Markdown file with this structure:
+```markdown  theme={null}
+---
+name: your-sub-agent-name
+description: Description of when this subagent should be invoked
+tools: tool1, tool2, tool3  # Optional - inherits all tools if omitted
+model: sonnet  # Optional - specify model alias or 'inherit'
+---
+Your subagent's system prompt goes here. This can be multiple paragraphs
+and should clearly define the subagent's role, capabilities, and approach
+to solving problems.
+Include specific instructions, best practices, and any constraints
+the subagent should follow.
+```
+#### Configuration fields
+| Field         | Required | Description                                                                                                                                                                                                                      |
+| :------------ | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `name`        | Yes      | Unique identifier using lowercase letters and hyphens                                                                                                                                                                            |
+| `description` | Yes      | Natural language description of the subagent's purpose                                                                                                                                                                           |
+| `tools`       | No       | Comma-separated list of specific tools. If omitted, inherits all tools from the main thread                                                                                                                                      |
+| `model`       | No       | Model to use for this subagent. Can be a model alias (`sonnet`, `opus`, `haiku`) or `'inherit'` to use the main conversation's model. If omitted, defaults to the [configured subagent model](/en/docs/claude-code/model-config) |
+### Model selection
+The `model` field allows you to control which [AI model](/en/docs/claude-code/model-config) the subagent uses:
+* **Model alias**: Use one of the available aliases: `sonnet`, `opus`, or `haiku`
+* **`'inherit'`**: Use the same model as the main conversation (useful for consistency)
+* **Omitted**: If not specified, uses the default model configured for subagents (`sonnet`)
+<Note>
+  Using `'inherit'` is particularly useful when you want your subagents to adapt to the model choice of the main conversation, ensuring consistent capabilities and response style throughout your session.
+</Note>
+### Available tools
+Subagents can be granted access to any of Claude Code's internal tools. See the [tools documentation](/en/docs/claude-code/settings#tools-available-to-claude) for a complete list of available tools.
+<Tip>
+  **Recommended:** Use the `/agents` command to modify tool access - it provides an interactive interface that lists all available tools, including any connected MCP server tools, making it easier to select the ones you need.
+</Tip>
+You have two options for configuring tools:
+* **Omit the `tools` field** to inherit all tools from the main thread (default), including MCP tools
+* **Specify individual tools** as a comma-separated list for more granular control (can be edited manually or via `/agents`)
+**MCP Tools**: Subagents can access MCP tools from configured MCP servers. When the `tools` field is omitted, subagents inherit all MCP tools available to the main thread.
+## Managing subagents
+### Using the /agents command (Recommended)
+The `/agents` command provides a comprehensive interface for subagent management:
+```
+/agents
+```
+This opens an interactive menu where you can:
+* View all available subagents (built-in, user, and project)
+* Create new subagents with guided setup
+* Edit existing custom subagents, including their tool access
+* Delete custom subagents
+* See which subagents are active when duplicates exist
+* **Easily manage tool permissions** with a complete list of available tools
+### Direct file management
+You can also manage subagents by working directly with their files:
+```bash  theme={null}
+# Create a project subagent
+mkdir -p .claude/agents
+echo '---
+name: test-runner
+description: Use proactively to run tests and fix failures
+---
+You are a test automation expert. When you see code changes, proactively run the appropriate tests. If tests fail, analyze the failures and fix them while preserving the original test intent.' > .claude/agents/test-runner.md
+# Create a user subagent
+mkdir -p ~/.claude/agents
+# ... create subagent file
+```
+## Using subagents effectively
+### Automatic delegation
+Claude Code proactively delegates tasks based on:
+* The task description in your request
+* The `description` field in subagent configurations
+* Current context and available tools
+<Tip>
+  To encourage more proactive subagent use, include phrases like "use PROACTIVELY" or "MUST BE USED" in your `description` field.
+</Tip>
+### Explicit invocation
+Request a specific subagent by mentioning it in your command:
+```
+> Use the test-runner subagent to fix failing tests
+> Have the code-reviewer subagent look at my recent changes
+> Ask the debugger subagent to investigate this error
+```
+## Example subagents
+### Code reviewer
+```markdown  theme={null}
+---
+name: code-reviewer
+description: Expert code review specialist. Proactively reviews code for quality, security, and maintainability. Use immediately after writing or modifying code.
+tools: Read, Grep, Glob, Bash
+model: inherit
+---
+You are a senior code reviewer ensuring high standards of code quality and security.
+When invoked:
+1. Run git diff to see recent changes
+2. Focus on modified files
+3. Begin review immediately
+Review checklist:
+- Code is simple and readable
+- Functions and variables are well-named
+- No duplicated code
+- Proper error handling
+- No exposed secrets or API keys
+- Input validation implemented
+- Good test coverage
+- Performance considerations addressed
+Provide feedback organized by priority:
+- Critical issues (must fix)
+- Warnings (should fix)
+- Suggestions (consider improving)
+Include specific examples of how to fix issues.
+```
+### Debugger
+```markdown  theme={null}
+---
+name: debugger
+description: Debugging specialist for errors, test failures, and unexpected behavior. Use proactively when encountering any issues.
+tools: Read, Edit, Bash, Grep, Glob
+---
+You are an expert debugger specializing in root cause analysis.
+When invoked:
+1. Capture error message and stack trace
+2. Identify reproduction steps
+3. Isolate the failure location
+4. Implement minimal fix
+5. Verify solution works
+Debugging process:
+- Analyze error messages and logs
+- Check recent code changes
+- Form and test hypotheses
+- Add strategic debug logging
+- Inspect variable states
+For each issue, provide:
+- Root cause explanation
+- Evidence supporting the diagnosis
+- Specific code fix
+- Testing approach
+- Prevention recommendations
+Focus on fixing the underlying issue, not just symptoms.
+```
+### Data scientist
+```markdown  theme={null}
+---
+name: data-scientist
+description: Data analysis expert for SQL queries, BigQuery operations, and data insights. Use proactively for data analysis tasks and queries.
+tools: Bash, Read, Write
+model: sonnet
+---
+You are a data scientist specializing in SQL and BigQuery analysis.
+When invoked:
+1. Understand the data analysis requirement
+2. Write efficient SQL queries
+3. Use BigQuery command line tools (bq) when appropriate
+4. Analyze and summarize results
+5. Present findings clearly
+Key practices:
+- Write optimized SQL queries with proper filters
+- Use appropriate aggregations and joins
+- Include comments explaining complex logic
+- Format results for readability
+- Provide data-driven recommendations
+For each analysis:
+- Explain the query approach
+- Document any assumptions
+- Highlight key findings
+- Suggest next steps based on data
+Always ensure queries are efficient and cost-effective.
+```
+## Best practices
+* **Start with Claude-generated agents**: We highly recommend generating your initial subagent with Claude and then iterating on it to make it personally yours. This approach gives you the best results - a solid foundation that you can customize to your specific needs.
+* **Design focused subagents**: Create subagents with single, clear responsibilities rather than trying to make one subagent do everything. This improves performance and makes subagents more predictable.
+* **Write detailed prompts**: Include specific instructions, examples, and constraints in your system prompts. The more guidance you provide, the better the subagent will perform.
+* **Limit tool access**: Only grant tools that are necessary for the subagent's purpose. This improves security and helps the subagent focus on relevant actions.
+* **Version control**: Check project subagents into version control so your team can benefit from and improve them collaboratively.
+## Advanced usage
+### Chaining subagents
+For complex workflows, you can chain multiple subagents:
+```
+> First use the code-analyzer subagent to find performance issues, then use the optimizer subagent to fix them
+```
+### Dynamic subagent selection
+Claude Code intelligently selects subagents based on context. Make your `description` fields specific and action-oriented for best results.
+## Performance considerations
+* **Context efficiency**: Agents help preserve main context, enabling longer overall sessions
+* **Latency**: Subagents start off with a clean slate each time they are invoked and may add latency as they gather context that they require to do their job effectively.
+## Related documentation

source/images/1.jpg ADDED Viewed

Git LFS Details

SHA256: 745aa827682da004dd5cf762c557906dd723ccc0b7ce153ab1915bb91ec453b1
Pointer size: 131 Bytes
Size of remote file: 326 kB

source/images/2.jpg ADDED Viewed

Git LFS Details

SHA256: 582d46c4309fee1767ac86d09355b4725d22b31db23c85721c418aa31336f017
Pointer size: 131 Bytes
Size of remote file: 190 kB

source/images/3.jpg ADDED Viewed

Git LFS Details

SHA256: e0f5d5114d4090168710490e21bcd3370e94785fa0f63e0c049d9801239c1bc7
Pointer size: 131 Bytes
Size of remote file: 116 kB

source/images/4.png ADDED Viewed

Git LFS Details

SHA256: dbb4dbb53509e1e34b0dd055e889cdb0a624ca80e95e7c0f77e08f791f4323a2
Pointer size: 132 Bytes
Size of remote file: 1.25 MB

source/images/5.png ADDED Viewed

Git LFS Details

SHA256: 213ffbb56c577ab75e34861b2472ee6f37260e25eb7cb57af4cb3b12f2c09253
Pointer size: 132 Bytes
Size of remote file: 1.26 MB

source/images/6.png ADDED Viewed

Git LFS Details

SHA256: 24a9c70e88d6cc4ec1aa10542be1da40175551809123bac085d4cd91938ce904
Pointer size: 132 Bytes
Size of remote file: 1.03 MB

style.css CHANGED Viewed

@@ -1,28 +1,324 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+:root {
+    --primary: #6366f1;
+    --primary-dark: #4f46e5;
+    --secondary: #8b5cf6;
+    --accent: #ec4899;
+    --bg-dark: #0f172a;
+    --bg-card: #1e293b;
+    --bg-card-hover: #334155;
+    --text-primary: #f1f5f9;
+    --text-secondary: #cbd5e1;
+    --text-muted: #94a3b8;
+    --border: #334155;
+    --code-bg: #1e293b;
+}
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
 body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    background: var(--bg-dark);
+    color: var(--text-primary);
+    line-height: 1.7;
+    position: relative;
+    overflow-x: hidden;
+}
+.hero-gradient {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 400px;
+    background: linear-gradient(135deg,
+        rgba(99, 102, 241, 0.15) 0%,
+        rgba(139, 92, 246, 0.15) 50%,
+        rgba(236, 72, 153, 0.15) 100%);
+    filter: blur(60px);
+    z-index: -1;
+    pointer-events: none;
+}
+.container {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 3rem 2rem;
+    position: relative;
+    z-index: 1;
+}
+.header-badge-container {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    margin-bottom: 2rem;
+}
+.emoji-badge {
+    font-size: 2.5rem;
+    animation: float 3s ease-in-out infinite;
+    display: inline-block;
+}
+.emoji-badge:nth-child(2) {
+    animation-delay: 0.5s;
+}
+.emoji-badge:nth-child(3) {
+    animation-delay: 1s;
+}
+@keyframes float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+}
+/* Markdown Content Styling */
+#content h1 {
+    font-size: 2.75rem;
+    font-weight: 800;
+    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 50%, var(--accent) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: 1.5rem;
+    line-height: 1.2;
 }
+#content h2 {
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-top: 3rem;
+    margin-bottom: 1.5rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 2px solid var(--border);
+    position: relative;
 }
+#content h2::before {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    left: 0;
+    width: 60px;
+    height: 2px;
+    background: linear-gradient(90deg, var(--primary), var(--secondary));
+}
+#content h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+}
+#content p {
+    color: var(--text-secondary);
+    margin-bottom: 1.25rem;
+    font-size: 1.05rem;
+}
+#content strong {
+    color: var(--text-primary);
+    font-weight: 600;
+}
+#content em {
+    color: var(--text-secondary);
+    font-style: italic;
+}
+/* Badge Styling */
+#content img[alt*="shield"] {
+    display: inline-block;
+    margin: 0 0.25rem;
+}
+/* Images */
+#content img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 12px;
+    margin: 2rem 0;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--border);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+#content img:hover {
+    transform: translateY(-4px) scale(1.01);
+    box-shadow: 0 20px 60px rgba(99, 102, 241, 0.3);
+}
+/* Lists */
+#content ul, #content ol {
+    margin-left: 1.5rem;
+    margin-bottom: 1.5rem;
+    color: var(--text-secondary);
+}
+#content li {
+    margin-bottom: 0.75rem;
+    padding-left: 0.5rem;
+}
+#content ul li::marker {
+    color: var(--primary);
+}
+/* Code blocks */
+#content code {
+    background: var(--code-bg);
+    padding: 0.2rem 0.5rem;
+    border-radius: 4px;
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.9rem;
+    color: var(--accent);
+    border: 1px solid var(--border);
+}
+#content pre {
+    background: var(--code-bg);
+    padding: 1.5rem;
+    border-radius: 8px;
+    overflow-x: auto;
+    margin: 1.5rem 0;
+    border: 1px solid var(--border);
+}
+#content pre code {
+    background: none;
+    padding: 0;
+    border: none;
+    color: var(--text-secondary);
+}
+/* Blockquotes */
+#content blockquote {
+    border-left: 4px solid var(--primary);
+    background: var(--bg-card);
+    padding: 1.5rem;
+    margin: 2rem 0;
+    border-radius: 0 8px 8px 0;
+    font-style: italic;
+    color: var(--text-secondary);
+}
+#content blockquote p {
+    margin-bottom: 0;
+}
+/* Links */
+#content a {
+    color: var(--primary);
+    text-decoration: none;
+    border-bottom: 1px solid transparent;
+    transition: all 0.2s ease;
+}
+#content a:hover {
+    color: var(--secondary);
+    border-bottom-color: var(--secondary);
+}
+/* Horizontal Rules */
+#content hr {
+    border: none;
+    height: 2px;
+    background: linear-gradient(90deg,
+        transparent 0%,
+        var(--border) 50%,
+        transparent 100%);
+    margin: 3rem 0;
+}
+/* Special callout boxes for important sections */
+#content p:has(img[alt*="shield"]) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-bottom: 2rem;
+}
+/* Footer */
+.footer {
+    margin-top: 5rem;
+    padding-top: 2rem;
+    border-top: 1px solid var(--border);
+    text-align: center;
+}
+.footer p {
+    color: var(--text-muted);
+    font-size: 0.95rem;
+    margin-bottom: 0.5rem;
+}
+.footer a {
+    color: var(--primary);
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+.footer a:hover {
+    color: var(--secondary);
+}
+.footer-date {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.85rem;
+    color: var(--text-muted);
+}
+/* Error state */
+.error {
+    background: var(--bg-card);
+    padding: 2rem;
+    border-radius: 8px;
+    text-align: center;
+    color: var(--accent);
+}
+/* Responsive Design */
+@media (max-width: 768px) {
+    .container {
+        padding: 2rem 1.5rem;
+    }
+    #content h1 {
+        font-size: 2rem;
+    }
+    #content h2 {
+        font-size: 1.5rem;
+    }
+    #content h3 {
+        font-size: 1.25rem;
+    }
+    .emoji-badge {
+        font-size: 2rem;
+    }
+    #content img {
+        margin: 1.5rem 0;
+    }
 }
+/* Smooth scrolling */
+html {
+    scroll-behavior: smooth;
 }
+/* Selection styling */
+::selection {
+    background: var(--primary);
+    color: white;
 }