tech-guide-design

Generates dark-themed RTL HTML design systems for Hebrew technical documentation and guides.

Updated Aug 5, 2026
One-click install
npx skills add https://github.com/amirbiron/claude-skills --skill tech-guide-design-amirbiron
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: tech-guide-design
Source: https://github.com/amirbiron/claude-skills/tree/main/skills/tech-guide-design
Command: npx skills add https://github.com/amirbiron/claude-skills --skill tech-guide-design-amirbiron

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Creating consistent, professional-looking technical documentation in Hebrew requires repeatedly hand-crafting CSS for RTL layouts, code blocks, tables, and alert components. This Skill provides a complete, reusable design system so every guide looks polished without redesigning from scratch. ## Core Features & Use Cases - Complete CSS Design System: Predefined color palette, CSS variables, typography hierarchy, and dark-themed styling for headers, sections, and cards. - Ready-Made Components: Code blocks with syntax highlighting colors, tables, alert boxes (info/success/warning/danger), badges, grids, file trees, architecture diagrams, and API endpoint cards. - RTL-First Layout: Built-in dir="rtl" structure with LTR handling for code blocks, plus responsive mobile breakpoints. - Use Case: When writing a Hebrew tutorial on a Python API, use this Skill to produce a styled HTML page with a table of contents, syntax-highlighted code samples, endpoint cards for each route, and warning alerts for common pitfalls. ## Quick Start Create a Hebrew technical guide HTML page about deploying a Flask app using the tech guide design system with code blocks, alerts, and endpoint cards.

Frequently Asked Questions about tech-guide-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a Hebrew RTL technical documentation page?

Set dir="rtl" and lang="he" on the html element, define CSS variables for the color palette in :root, and use the provided section, header, and card styles. Code blocks inside the page keep direction: ltr and text-align: left so code stays readable.

What CSS components are included in this design system?

The system includes headers, section cards, typography hierarchy (H2-H4), inline code and code blocks with syntax highlighting colors, tables, four alert box types, pill badges, grid layouts, file trees, architecture diagrams, tables of contents, and API endpoint cards.

How do I handle code blocks inside RTL Hebrew documents?

Code blocks must always use direction: ltr and text-align: left, even inside an RTL page. The pre element uses a dark background (#0f0f23) with monospace fonts, and syntax highlighting spans apply colors for comments, keywords, strings, functions, and variables.

Does this design system support mobile responsive layouts?

Yes, it includes a mobile breakpoint at max-width: 768px that reduces header font size to 2em, shrinks section padding to 20px, and collapses the two-column grid into a single column.

When should I not use this dark-themed documentation design?

Avoid it for simple plain-text documents without code, interactive forms or web applications, print-optimized documents, and light-themed documentation, since the system is screen-optimized with a dark color scheme.