Blueprinter
0Blueprinter is designed to create technical diagrams using HTML/CSS, focusing on a precise, objective style. It is ideal for developers and engineers looking to produce high-quality technical specifications and architectural diagrams.
000Updated 2mo ago
Diagram Generation
Quick InstallView Source
$ npx skills add https://github.com/yofine/skills --skill blueprinterOverview
About This Skill
Blueprinter creates technical diagrams and architectural visualizations using HTML/CSS with a precise, flat engineering blueprint aesthetic. It produces high-contrast, data-focused diagrams without decorative elements—no shadows, gradients, or rounded corners—making output suitable for technical specification sheets and system architecture documentation. The skill enforces strict alignment, monospace typography for technical data, and minimal iconography to maintain a professional, objective appearance. Users can generate flowcharts, system diagrams, and architecture layouts that resemble engineering blueprints. Developers and systems architects benefit from reproducible, specification-grade diagram output.
How to Use
Install through the command line with npx.
Use Cases
Create architectural diagrams for software projects.
Generate technical specification sheets automatically.
Visualize system designs in a standardized format.
Tags
Setup & Installation
Quick Install
Terminal
$ npx skills add https://github.com/yofine/skills --skill blueprinterAlternative Install (Git Clone)
git clone https://github.com/yofine/skillsRequirements
- Claude Code or compatible AI agent
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
Customize
Adapt the skill to your specific use case and workflow.
Usage Examples
Prompt Template
Generate a technical diagram in HTML/CSS for [PROJECT_NAME] in the [INDUSTRY] industry. Include [KEY_COMPONENTS] such as [SPECIFIC_ELEMENTS]. Ensure the diagram is modular, responsive, and follows best practices for scalability. Use semantic HTML and CSS variables for theming. [ADDITIONAL_REQUIREMENTS].
Example Output
# System Architecture Diagram for HealthTrack EHR
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HealthTrack EHR - System Architecture</title>
<style>
:root {
--primary-color: #2563eb;
--secondary-color: #10b981;
--accent-color: #f59e0b;
--text-color: #1f2937;
--bg-color: #f9fafb;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: var(--bg-color);
margin: 0;
padding: 2rem;
}
.diagram-container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 8px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
padding: 2rem;
}
.diagram-header {
text-align: center;
margin-bottom: 2rem;
}
.diagram {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
justify-items: center;
}
.component-card {
background: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 1.5rem;
width: 100%;
max-width: 300px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: transform 0.2s;
}
.component-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.component-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
}
.component-icon {
font-size: 1.5rem;
}
.component-title {
font-weight: 600;
color: var(--primary-color);
}
.component-description {
font-size: 0.9rem;
color: #6b7280;
}
.connector-line {
position: absolute;
height: 2px;
background: #9ca3af;
z-index: -1;
}
@media (max-width: 768px) {
.diagram {
grid-template-columns: 1fr;
}
body {
padding: 1rem;
}
}
</style>
</head>
<body>
<div class="diagram-container">
<div class="diagram-header">
<h1>HealthTrack EHR</h1>
<h2>System Architecture</h2>
<p>Electronic Health Record Platform - Version 2.4</p>
</div>
<div class="diagram">
<!-- Patient Portal -->
<div class="component-card">
<div class="component-header">
<div class="component-icon">👥</div>
<div class="component-title">Patient Portal</div>
</div>
<div class="component-description">
React-based web application for patient interactions and health data access
</div>
</div>
<!-- Mobile App -->
<div class="component-card">
<div class="component-header">
<div class="component-icon">📱</div>
<div class="component-title">Mobile App</div>
</div>
<div class="component-description">
Cross-platform application for iOS and Android with offline capabilities
</div>
</div>
<!-- API Gateway -->
<div class="component-card">
<div class="component-header">
<div class="component-icon">🌐</div>
<div class="component-title">API Gateway</div>
</div>
<div class="component-description">
Kong-based gateway handling authentication, rate limiting, and request routing
</div>
</div>
<!-- Authentication Service -->
<div class="component-card">
<div class="component-header">
<div class="component-icon">🔐</div>
<div class="component-title">Auth Service</div>
</div>
<div class="component-description">
OAuth 2.0 compliant service with JWT token management and MFA support
</div>
</div>
<!-- Data Service -->
<div class="component-card">
<div class="component-header">
<div class="component-icon">🗄️</div>
<div class="component-title">Data Service</div>
</div>
<div class="component-description">
GraphQL API for structured health data access with fine-grained permissions
</div>
</div>
<!-- Database -->
<div class="component-card">
<div class="component-header">
<div class="component-icon">🗃️</div>
<div class="component-title">PostgreSQL</div>
</div>
<div class="component-description">
Relational database with row-level security and encrypted PHI storage
</div>
</div>
</div>
</div>
</body>
</html>
```
## Key Features Implemented:
- **Modular Design**: Each component is self-contained with clear responsibilities
- **Responsive Layout**: Adapts to different screen sizes
- **Visual Hierarchy**: Color-coded components by function
- **Interactive Elements**: Hover effects for better UX
- **Semantic HTML**: Accessible and maintainable structure
- **CSS Variables**: Easy theming and customization
## Next Steps:
1. Implement the actual connector lines between components
2. Add tooltips with detailed component specifications
3. Integrate with your documentation system for version tracking
4. Consider adding a legend for the color coding schemeFind the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan