mirror of
https://github.com/luongnv89/claude-howto.git
synced 2026-06-05 22:36:34 +02:00
i18n(uk): add resources/, scripts/, docs/, prompts/ translations
- Translate resources/ (README, QUICK-START, DESIGN-SYSTEM) - Translate scripts/README.md (EPUB builder docs) - Copy docs/ and prompts/ as-is (internal planning + functional prompts) - Copy claude_concepts_guide.md (base for in-place translation) Ref: luongnv89/claude-howto#63
This commit is contained in:
Evgenij I
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,153 @@
|
||||
# Roadmap: claude-howto 2026–2027
|
||||
|
||||
> April 2026 – March 2027 · Dual-Layer Knowledge Base | Full plan: `TASKS-20260401.md`
|
||||
|
||||
---
|
||||
|
||||
## Vision
|
||||
|
||||
Transform claude-howto from a static tutorial repo into a **living, dual-audience knowledge system**:
|
||||
|
||||
- **For humans** — interactive, scenario-based learning with progressive difficulty, decision trees, and named patterns that experts bookmark
|
||||
- **For AI agents** — structured metadata index that agents query before performing Claude Code tasks, making this repo infrastructure, not just content
|
||||
|
||||
No competitor targets AI agents as a primary audience. This is the moat.
|
||||
|
||||
---
|
||||
|
||||
## The 7 Pillars
|
||||
|
||||
| # | Pillar | What it delivers |
|
||||
|---|--------|-----------------|
|
||||
| P1 | Fun Layer | Scenario intros + "Try It Now" blocks in every module |
|
||||
| P2 | AI Agent Index | Generated `agent-manifest.json` + `AGENT-INDEX.md` + lookup skill |
|
||||
| P3a | Expert Reference (in-module) | Decision trees + named patterns per module |
|
||||
| P3b | Expert Reference (cross-module) | `RECIPES.md` — compound multi-feature workflows |
|
||||
| P4 | Newcomer Onboarding | `quickstart.sh` + `QUICKSTART.md` + difficulty badges |
|
||||
| P5 | Community Showcase | `COMMUNITY-PROJECTS.md` — curated user projects |
|
||||
| P6 | Content Quality | Expand weakest modules; project `CLAUDE.md` |
|
||||
| P7 | Living Curriculum | `WHATS-NEW.md` + version badges + weekly staleness CI action |
|
||||
|
||||
---
|
||||
|
||||
## Timeline at a Glance
|
||||
|
||||
```
|
||||
Apr 2026 May–Jun 2026 Jul–Aug 2026 Sep 2026 Oct–Nov 2026 Dec 2026–Mar 2027
|
||||
| | | | | |
|
||||
[M1] [M2] [M3] [M4] [M5] [M6]
|
||||
Infrastructure 6/10 modules 10/10 Agent layer Version audit Self-sustaining
|
||||
+ hooks/checks complete complete + recipes complete system
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Milestones
|
||||
|
||||
### M1 — Infrastructure Live · End of April 2026
|
||||
|
||||
**What ships:**
|
||||
- `scripts/quickstart.sh` — one-command setup for new users (idempotent)
|
||||
- `QUICKSTART.md` — First 15 Minutes visual guide
|
||||
- Difficulty badges + "What you'll build" previews on all 10 modules
|
||||
- `WHATS-NEW.md` + version badges on all modules
|
||||
- `.github/workflows/staleness-check.yml` — weekly Monday issue if module unverified 30+ days
|
||||
- Root `CLAUDE.md` — project's own configuration as a best-practice example
|
||||
- `scripts/build-agent-index.py` — generator that reads all 10 modules → outputs `agent-manifest.json` + `AGENT-INDEX.md`
|
||||
- **06-hooks** — full deep pass: 5 complete hook scripts, decision tree, Try It Now, patterns
|
||||
- **08-checkpoints** — full deep pass: 311 → 800+ lines, 3 workflow templates, decision tree, patterns
|
||||
|
||||
**Why start here:** Infrastructure benefits every future phase. Hooks and checkpoints are the weakest modules and most likely to lose new visitors.
|
||||
|
||||
---
|
||||
|
||||
### M2 — 6/10 Modules Complete · End of June 2026
|
||||
|
||||
**What ships (one deep pass per module):**
|
||||
- **01-slash-commands** — scenario intro, decision tree, Try It Now, named patterns
|
||||
- **02-memory** — scenario intro, decision tree, Try It Now, named patterns
|
||||
- **03-skills** — scenario intro, decision tree, Try It Now, named patterns
|
||||
- **10-cli** — scenario intro, decision tree, Try It Now, named patterns
|
||||
- CI step: validate `agent-manifest.json` schema on every push
|
||||
|
||||
Each module pass = run the generator to confirm valid manifest output.
|
||||
|
||||
---
|
||||
|
||||
### M3 — All 10 Modules Complete · End of August 2026
|
||||
|
||||
**What ships:**
|
||||
- **04-subagents** — full deep pass (incl. "The Multi-Agent Review Pattern")
|
||||
- **05-mcp** — full deep pass
|
||||
- **07-plugins** — full deep pass
|
||||
- **09-advanced-features** — full deep pass
|
||||
|
||||
Every module now has: scenario intro, 2+ Try It Now blocks, Mermaid decision tree, 2+ named patterns.
|
||||
|
||||
---
|
||||
|
||||
### M4 — Agent Layer Live · End of September 2026
|
||||
|
||||
**What ships:**
|
||||
- Final `agent-manifest.json` covering 100% of modules (generated from completed content)
|
||||
- `AGENT-INDEX.md` linked from `README.md`
|
||||
- `skills/claude-howto-lookup/SKILL.md` — lightweight agent skill that queries the manifest
|
||||
- `RECIPES.md` — 5+ compound workflows (schema: name, modules-used, problem, solution, expected outcome)
|
||||
- `COMMUNITY-PROJECTS.md` — static curated list with PR-based submission format
|
||||
|
||||
**Why September:** The agent index is only meaningful once all 10 modules are content-complete.
|
||||
|
||||
---
|
||||
|
||||
### M5 — Version Audit Complete · End of November 2026
|
||||
|
||||
**What ships:**
|
||||
- Full version audit: all 10 modules verified against current CC version
|
||||
- Updated `cc_version_verified` frontmatter + version badges everywhere
|
||||
- `RECIPES.md` expanded to 8+ recipes based on observed community patterns
|
||||
- Pinned GitHub Discussion: "Share your Claude Code workflows" — signal collection for agent usage
|
||||
|
||||
---
|
||||
|
||||
### M6 — Self-Sustaining System · End of March 2027
|
||||
|
||||
**What ships / runs continuously:**
|
||||
- `/docs-sync-claude-code` skill runs after every CC release → `WHATS-NEW.md` updated
|
||||
- Agent manifest CI regression: 100% module coverage enforced
|
||||
- `RECIPES.md` at 10+ recipes
|
||||
- `COMMUNITY-PROJECTS.md` growing organically
|
||||
- Agent usage signal evaluated → if validated, promote the lookup skill (marketing, asm registry)
|
||||
|
||||
---
|
||||
|
||||
## Deliverables Summary
|
||||
|
||||
| Deliverable | Type | Phase |
|
||||
|-------------|------|-------|
|
||||
| `scripts/quickstart.sh` | Script | P1 |
|
||||
| `QUICKSTART.md` | Doc | P1 |
|
||||
| Root `CLAUDE.md` | Config | P1 |
|
||||
| `WHATS-NEW.md` | Doc | P1 |
|
||||
| `.github/workflows/staleness-check.yml` | CI | P1 |
|
||||
| `scripts/build-agent-index.py` | Script | P1 |
|
||||
| 10 module deep passes (scenario + Try It Now + decision tree + patterns) | Content | P1–P3 |
|
||||
| `agent-manifest.json` (generated) | Data | P4 |
|
||||
| `AGENT-INDEX.md` (generated) | Doc | P4 |
|
||||
| `skills/claude-howto-lookup/SKILL.md` | Skill | P4 |
|
||||
| `RECIPES.md` (5 → 8 → 10+ recipes) | Doc | P4–P6 |
|
||||
| `COMMUNITY-PROJECTS.md` | Doc | P4 |
|
||||
|
||||
---
|
||||
|
||||
## What Is NOT in Scope
|
||||
|
||||
Deferred to `TODOS.md` — do not let these creep in:
|
||||
|
||||
- Skill marketplace or installable registry
|
||||
- Custom website or dashboard
|
||||
- Completion tracking (cc-progress)
|
||||
- Community tutorial CI validation
|
||||
- Auto-generated CONTRIBUTORS.md
|
||||
- Multi-language translations
|
||||
- Quiz/assessment infrastructure
|
||||
- Community voting on projects
|
||||
@@ -0,0 +1,291 @@
|
||||
# Tasks: Dual-Layer Knowledge Base — claude-howto
|
||||
|
||||
> Created: 2026-04-01
|
||||
|
||||
---
|
||||
|
||||
## Milestones
|
||||
|
||||
| # | Milestone | Target | Description |
|
||||
|---|-----------|--------|-------------|
|
||||
| M1 | Infrastructure Live | End of April 2026 | quickstart.sh, CLAUDE.md, staleness action, agent index generator live; 2 weakest modules upgraded |
|
||||
| M2 | 6/10 Modules Complete | End of June 2026 | Slash commands, memory, skills, CLI modules fully upgraded; generator producing valid manifest |
|
||||
| M3 | All 10 Modules Complete | End of August 2026 | Every module has scenario intro, Try It Now blocks, decision tree, named patterns |
|
||||
| M4 | Agent Layer Live | End of September 2026 | agent-manifest.json + AGENT-INDEX.md generated; lookup skill in repo; RECIPES.md + COMMUNITY-PROJECTS.md live |
|
||||
| M5 | Version Audit Complete | End of November 2026 | All 10 modules verified against current CC version; RECIPES.md at 8+ recipes |
|
||||
| M6 | Self-Sustaining System | End of March 2027 | Agent manifest covers 100% modules (CI-validated); RECIPES.md at 10+; community page growing organically |
|
||||
|
||||
---
|
||||
|
||||
## Phase 1 — Infrastructure & Weak Modules (April 2026)
|
||||
|
||||
**Target milestone: M1**
|
||||
|
||||
### Pillar 4: Newcomer Onboarding
|
||||
|
||||
- [ ] **T-001** — Write `scripts/quickstart.sh`
|
||||
- Detects `~/.claude/` directory (creates with user confirmation if missing)
|
||||
- Copies first slash command + CLAUDE.md + skill to user's setup
|
||||
- Appends agent-discovery line to CLAUDE.md linking to AGENT-INDEX.md
|
||||
- Idempotent: skips existing files with a warning, never overwrites
|
||||
- Prints next steps on completion
|
||||
|
||||
- [ ] **T-002** — Create `QUICKSTART.md` (First 15 Minutes visual guide)
|
||||
- Annotated terminal steps as code blocks (avoid PNG screenshots where possible; prefer ASCII or Mermaid)
|
||||
- Document which commands produce each visual so they can be re-captured
|
||||
|
||||
- [ ] **T-003** — Add difficulty badges to all 10 module READMEs
|
||||
- Format: `> 🟢 **Beginner** | ⏱ 30 minutes` at top of each module README
|
||||
- Add "What you'll build" bullet preview below the badge
|
||||
|
||||
### Pillar 7: Living Curriculum
|
||||
|
||||
- [ ] **T-004** — Create `WHATS-NEW.md`
|
||||
- Format: `## CC vX.X — DATE` with bullet items per feature change
|
||||
- Add at least one entry for current CC version
|
||||
|
||||
- [ ] **T-005** — Add version badges to all 10 module READMEs
|
||||
- Format: `> ✅ Verified against Claude Code **vX.X.X** · Last verified: YYYY-MM-DD`
|
||||
- Add `cc_version_verified` to each module's frontmatter
|
||||
|
||||
- [ ] **T-006** — Create `.github/workflows/staleness-check.yml`
|
||||
- Schedule: weekly Monday 09:00 UTC
|
||||
- Reads each module's `last_verified` date from frontmatter (use `yq` or 10-line Python script)
|
||||
- Creates a GitHub Issue for any module not verified in 30+ days
|
||||
- Skips if open issue with same title already exists
|
||||
|
||||
### Pillar 6: Content Quality (CLAUDE.md)
|
||||
|
||||
- [ ] **T-007** — Create root `CLAUDE.md` for the project
|
||||
- Demonstrates best practices as the project's own configuration
|
||||
- Documents contributing conventions, module structure, and maintenance workflow
|
||||
|
||||
### Pillar 2: AI Agent Index (Generator)
|
||||
|
||||
- [ ] **T-008** — Write `scripts/build-agent-index.py`
|
||||
- Reads all 10 module README files
|
||||
- Extracts: headings (→ topics), code blocks (→ examples with language tags), tables (→ reference data)
|
||||
- Outputs `agent-manifest.json` with schema defined in CEO plan
|
||||
- Outputs `AGENT-INDEX.md` (human-readable summary)
|
||||
- Validates references point to actual files
|
||||
|
||||
### Module 08-checkpoints: Full Deep Pass (311 → 800+ lines)
|
||||
|
||||
- [ ] **T-009** — Rewrite module intro with real-world scenario
|
||||
- Example: "Your refactor just broke 3 things. Here's how checkpoints save you..."
|
||||
|
||||
- [ ] **T-010** — Add checkpoint strategy decision tree (Mermaid flowchart)
|
||||
- "I want to do X" → follow arrows → land on checkpoint pattern
|
||||
|
||||
- [ ] **T-011** — Add 3 workflow templates
|
||||
- Safe refactoring workflow
|
||||
- A/B testing with checkpoints
|
||||
- Disaster recovery workflow
|
||||
|
||||
- [ ] **T-012** — Add integration with planning mode section
|
||||
|
||||
- [ ] **T-013** — Add Mermaid diagram for checkpoint lifecycle
|
||||
|
||||
- [ ] **T-014** — Add 2+ "Try It Now" blocks with verifiable commands
|
||||
- Each: context sentence, command to run, expected output description
|
||||
|
||||
- [ ] **T-015** — Add "Patterns & Recipes" section with 2+ named patterns
|
||||
- Each pattern: problem, solution code, when to use, when NOT to use
|
||||
|
||||
### Module 06-hooks: Full Deep Pass
|
||||
|
||||
- [ ] **T-016** — Rewrite module intro with real-world scenario
|
||||
- Example: "Your CI caught a lint error after 20 minutes. Hooks catch it in 2 seconds..."
|
||||
|
||||
- [ ] **T-017** — Add hooks decision tree (Mermaid flowchart)
|
||||
- "I want to trigger X when Y happens" → follow arrows → land on hook type
|
||||
|
||||
- [ ] **T-018** — Add 5 complete hook examples with full scripts (~80 lines each)
|
||||
1. Auto-format on write (prettier/black)
|
||||
2. Security scan on commit (trufflehog/bandit)
|
||||
3. Test runner on file change
|
||||
4. Notification on session end
|
||||
5. Prompt validation (block dangerous patterns)
|
||||
|
||||
- [ ] **T-019** — Add 2+ "Try It Now" blocks with verifiable commands
|
||||
|
||||
- [ ] **T-020** — Add "Patterns & Recipes" section with 2+ named patterns
|
||||
|
||||
**M1 Checkpoint: infrastructure live, 2 weakest modules fully upgraded**
|
||||
|
||||
---
|
||||
|
||||
## Phase 2 — Deep Pass: Strong Modules Batch 1 (May–June 2026)
|
||||
|
||||
**Target milestone: M2**
|
||||
|
||||
### Module 01-slash-commands: Full Deep Pass
|
||||
|
||||
- [ ] **T-021** — Rewrite intro with scenario ("Your teammate just pushed 47 files...")
|
||||
- [ ] **T-022** — Add decision tree (Mermaid)
|
||||
- [ ] **T-023** — Add 2+ "Try It Now" blocks
|
||||
- [ ] **T-024** — Add "Patterns & Recipes" section with 2+ named patterns
|
||||
|
||||
### Module 02-memory: Full Deep Pass
|
||||
|
||||
- [ ] **T-025** — Rewrite intro with real-world scenario
|
||||
- [ ] **T-026** — Add decision tree (Mermaid)
|
||||
- [ ] **T-027** — Add 2+ "Try It Now" blocks
|
||||
- [ ] **T-028** — Add "Patterns & Recipes" section with 2+ named patterns
|
||||
|
||||
### Module 03-skills: Full Deep Pass
|
||||
|
||||
- [ ] **T-029** — Rewrite intro with real-world scenario
|
||||
- [ ] **T-030** — Add decision tree (Mermaid)
|
||||
- [ ] **T-031** — Add 2+ "Try It Now" blocks
|
||||
- [ ] **T-032** — Add "Patterns & Recipes" section with 2+ named patterns
|
||||
|
||||
### Module 10-cli: Full Deep Pass
|
||||
|
||||
- [ ] **T-033** — Rewrite intro with real-world scenario
|
||||
- [ ] **T-034** — Add decision tree (Mermaid)
|
||||
- [ ] **T-035** — Add 2+ "Try It Now" blocks
|
||||
- [ ] **T-036** — Add "Patterns & Recipes" section with 2+ named patterns
|
||||
|
||||
### Generator Validation
|
||||
|
||||
- [ ] **T-037** — Run `scripts/build-agent-index.py` after each module upgrade; confirm valid manifest output
|
||||
- [ ] **T-038** — Add CI step: validate agent-manifest.json schema on every push
|
||||
|
||||
**M2 Checkpoint: 6/10 modules complete, generator producing valid manifest**
|
||||
|
||||
---
|
||||
|
||||
## Phase 3 — Deep Pass: Strong Modules Batch 2 (July–August 2026)
|
||||
|
||||
**Target milestone: M3**
|
||||
|
||||
### Module 04-subagents: Full Deep Pass
|
||||
|
||||
- [ ] **T-039** — Rewrite intro with real-world scenario
|
||||
- [ ] **T-040** — Add decision tree (Mermaid)
|
||||
- [ ] **T-041** — Add 2+ "Try It Now" blocks
|
||||
- [ ] **T-042** — Add "Patterns & Recipes" section (e.g., "The Multi-Agent Review Pattern")
|
||||
|
||||
### Module 05-mcp: Full Deep Pass
|
||||
|
||||
- [ ] **T-043** — Rewrite intro with real-world scenario
|
||||
- [ ] **T-044** — Add decision tree (Mermaid)
|
||||
- [ ] **T-045** — Add 2+ "Try It Now" blocks
|
||||
- [ ] **T-046** — Add "Patterns & Recipes" section with 2+ named patterns
|
||||
|
||||
### Module 07-plugins: Full Deep Pass
|
||||
|
||||
- [ ] **T-047** — Rewrite intro with real-world scenario
|
||||
- [ ] **T-048** — Add decision tree (Mermaid)
|
||||
- [ ] **T-049** — Add 2+ "Try It Now" blocks
|
||||
- [ ] **T-050** — Add "Patterns & Recipes" section with 2+ named patterns
|
||||
|
||||
### Module 09-advanced-features: Full Deep Pass
|
||||
|
||||
- [ ] **T-051** — Rewrite intro with real-world scenario
|
||||
- [ ] **T-052** — Add decision tree (Mermaid)
|
||||
- [ ] **T-053** — Add 2+ "Try It Now" blocks
|
||||
- [ ] **T-054** — Add "Patterns & Recipes" section with 2+ named patterns
|
||||
|
||||
**M3 Checkpoint: all 10 modules complete and consistent**
|
||||
|
||||
---
|
||||
|
||||
## Phase 4 — Agent Layer & Cross-Module (September 2026)
|
||||
|
||||
**Target milestone: M4**
|
||||
|
||||
### Pillar 2: Finalize AI Agent Index
|
||||
|
||||
- [ ] **T-055** — Run `scripts/build-agent-index.py` against all 10 completed modules
|
||||
- Produce final `agent-manifest.json` with 100% module coverage
|
||||
- Produce `AGENT-INDEX.md` and link from README.md
|
||||
|
||||
- [ ] **T-056** — Create `skills/claude-howto-lookup/SKILL.md`
|
||||
- Reads `agent-manifest.json` to find relevant modules
|
||||
- Uses `Read` to load the section
|
||||
- Installation: `cp -r claude-howto/skills/claude-howto-lookup ~/.claude/skills/`
|
||||
|
||||
- [ ] **T-057** — Mention lookup skill in quickstart.sh and QUICKSTART.md as optional feature
|
||||
|
||||
### Pillar 3b: Cross-Module RECIPES.md
|
||||
|
||||
- [ ] **T-058** — Create `RECIPES.md` with 5+ compound workflows
|
||||
- Schema per recipe: name, modules-used, problem, solution code block, expected outcome
|
||||
- Example: skill + hook + subagent = automated review pipeline
|
||||
- Ensure HTML anchors on all major headings for deep-linking
|
||||
|
||||
### Pillar 5: Community Showcase
|
||||
|
||||
- [ ] **T-059** — Create `COMMUNITY-PROJECTS.md`
|
||||
- Static Markdown page with submission format: name, description, link, features used
|
||||
- Template entry included
|
||||
- PR-based submission instructions
|
||||
|
||||
**M4 Checkpoint: agent index live, recipes live, community page live**
|
||||
|
||||
---
|
||||
|
||||
## Phase 5 — Version Audit & Recipe Expansion (October–November 2026)
|
||||
|
||||
**Target milestone: M5**
|
||||
|
||||
- [ ] **T-060** — Run full version audit: verify all 10 modules against current CC version
|
||||
- Update `cc_version_verified` frontmatter in each module
|
||||
- Update version badges
|
||||
|
||||
- [ ] **T-061** — Expand `RECIPES.md` to 8+ recipes based on observed community patterns
|
||||
|
||||
- [ ] **T-062** — Iterate agent manifest schema if new patterns emerge from completed modules
|
||||
|
||||
- [ ] **T-063** — Open pinned GitHub Discussion: "Share your Claude Code workflows"
|
||||
- Collect signal on real agent usage to inform future recipe expansion
|
||||
|
||||
**M5 Checkpoint: all modules verified current, recipes growing**
|
||||
|
||||
---
|
||||
|
||||
## Phase 6 — Compound & Sustain (December 2026 – March 2027)
|
||||
|
||||
**Target milestone: M6**
|
||||
|
||||
- [ ] **T-064** — Run `/docs-sync-claude-code` skill after every CC release; update `WHATS-NEW.md`
|
||||
|
||||
- [ ] **T-065** — Ensure agent manifest covers 100% of modules (CI regression test)
|
||||
|
||||
- [ ] **T-066** — Grow `RECIPES.md` to 10+ recipes
|
||||
|
||||
- [ ] **T-067** — Monitor `COMMUNITY-PROJECTS.md` for organic growth; curate new entries
|
||||
|
||||
- [ ] **T-068** — Evaluate agent usage signal from GitHub Discussions; if validated, invest in promoting the lookup skill (marketing, asm registry)
|
||||
|
||||
**M6 Checkpoint: the system is self-sustaining**
|
||||
|
||||
---
|
||||
|
||||
## Deferred (TODOS.md)
|
||||
|
||||
These items are out of scope for this plan. Record here to avoid scope creep:
|
||||
|
||||
- Skill marketplace / installable registry
|
||||
- Custom website or dashboard
|
||||
- Completion tracking infrastructure (cc-progress)
|
||||
- Community tutorial template with CI validation
|
||||
- Auto-generated CONTRIBUTORS.md
|
||||
- Multi-language translations
|
||||
- Quiz/assessment infrastructure upgrades
|
||||
- Community voting/review mechanism for COMMUNITY-PROJECTS.md
|
||||
|
||||
---
|
||||
|
||||
## Task Summary by Phase
|
||||
|
||||
| Phase | Tasks | Period | Modules Touched |
|
||||
|-------|-------|--------|-----------------|
|
||||
| 1 — Infrastructure & Weak Modules | T-001 to T-020 | April 2026 | 06-hooks, 08-checkpoints + infra |
|
||||
| 2 — Batch 1 Deep Pass | T-021 to T-038 | May–June 2026 | 01, 02, 03, 10 |
|
||||
| 3 — Batch 2 Deep Pass | T-039 to T-054 | July–August 2026 | 04, 05, 07, 09 |
|
||||
| 4 — Agent Layer & Cross-Module | T-055 to T-059 | September 2026 | All (manifest) + new files |
|
||||
| 5 — Version Audit & Recipes | T-060 to T-063 | October–November 2026 | All (audit) |
|
||||
| 6 — Sustain | T-064 to T-068 | December 2026–March 2027 | Ongoing |
|
||||
@@ -0,0 +1,350 @@
|
||||
You are an expert Motion Designer and Senior React Engineer specializing in **Remotion**. Your goal is to take a product description and turn it into a high-energy, professionally animated video using React code.
|
||||
|
||||
**START BY EXPLORING AUTONOMOUSLY:** Immediately begin exploring the codebase to gather product information. Only ask the user questions if critical information is missing or unclear after your exploration.
|
||||
|
||||
Follow a 7-phase workflow, making smart decisions at each step based on the information you gather.
|
||||
|
||||
---
|
||||
|
||||
# 🔄 AUTOMATED WORKFLOW
|
||||
|
||||
**KEY PRINCIPLES:**
|
||||
|
||||
- **Explore First:** Always begin by automatically exploring the codebase to gather product information. Do NOT start with questions about the product.
|
||||
- **Ask Before Planning:** After exploration, present findings and ask user for video preferences (size, style, duration, customizations) BEFORE creating the plan.
|
||||
- **Product URL First:** When a product URL is found or provided, it serves as the PRIMARY source of truth. Information from the product page takes precedence over codebase findings.
|
||||
- **Value Over Tech:** Focus on value propositions, customer benefits, and features (what users gain) rather than technical specifications or implementation details.
|
||||
- **Customer-Centric:** Emphasize how the product solves problems, improves lives, or delivers benefits to users.
|
||||
- **Autonomous Execution:** After user confirms preferences, proceed autonomously through planning and implementation without further approval requests.
|
||||
|
||||
## 📋 Phase 1: Autonomous Resource Discovery
|
||||
|
||||
**OBJECTIVE:** Automatically explore the codebase and gather all available product information without asking the user.
|
||||
|
||||
**ACTIONS:**
|
||||
|
||||
1. **Automatically explore the codebase first:**
|
||||
- Search for `README.md` for product description and value proposition
|
||||
- Check `package.json` for product name, description, homepage URL
|
||||
- Look for brand assets in `/assets`, `/public`, `/static`, `/images` directories
|
||||
- Extract color schemes from CSS/Tailwind config files
|
||||
- Find any existing marketing copy or documentation
|
||||
- Look for any product URLs in config files, environment variables, or documentation
|
||||
|
||||
2. **If product URL found, fetch it immediately:**
|
||||
- Use WebFetch to extract information from the product page
|
||||
- Product page information takes precedence over codebase findings
|
||||
- Extract all value propositions, features, and branding
|
||||
|
||||
3. **Synthesize all gathered information:**
|
||||
- Product name and description
|
||||
- Value proposition
|
||||
- Key features and benefits
|
||||
- Brand colors and style
|
||||
- Target audience (inferred from tone)
|
||||
- Any existing assets or media
|
||||
|
||||
4. **Apply smart defaults for missing information:**
|
||||
- **Video Format:** Landscape 1920x1080 (YouTube/web optimized)
|
||||
- **Duration:** 30 seconds (ideal for most platforms)
|
||||
- **Style:** Modern, clean, professional (based on brand)
|
||||
- **Brand Colors:** Use extracted colors or complementary modern palette
|
||||
|
||||
5. **Only ask user IF (after exploration):**
|
||||
- Cannot determine product name or find any product information
|
||||
- Cannot find or access product URL
|
||||
- Critical ambiguity exists (e.g., B2B vs B2C drastically changes messaging)
|
||||
- Conflicting information needs clarification
|
||||
|
||||
**IMPORTANT:** Complete this entire exploration silently and autonomously. Do NOT ask "What I need to get started" or list requirements. Only interrupt the user if truly necessary.
|
||||
|
||||
**OUTPUT:** Proceed immediately to Phase 2 with all gathered information.
|
||||
|
||||
---
|
||||
|
||||
## 🔍 Phase 2: Information Analysis & Deep Dive
|
||||
|
||||
**OBJECTIVE:** Analyze gathered information and extract key insights for video creation.
|
||||
|
||||
**ACTIONS:**
|
||||
|
||||
1. **Review all information collected in Phase 1:**
|
||||
- Product page content (if URL was found and fetched)
|
||||
- Codebase findings (README, package.json, assets, etc.)
|
||||
- Any brand guidelines or marketing materials
|
||||
|
||||
2. **Extract and prioritize (FOCUS ON VALUE, NOT TECH):**
|
||||
- **Value Proposition** (primary focus) - The main benefit to customers
|
||||
- **Customer Benefits** (what users gain) - How it improves their lives
|
||||
- **Key Features** (described as benefits, not technical specs)
|
||||
- **Unique Selling Points** - What makes it different/better
|
||||
- **Use Cases** - Real-world applications
|
||||
- **Brand identity** (colors, fonts, style, tone)
|
||||
- **Target audience insights** (who this is for)
|
||||
- **Emotional appeal** and messaging (why people care)
|
||||
|
||||
3. **Silently fill gaps with intelligent inferences:**
|
||||
- If value prop is not explicit, infer from features and target audience
|
||||
- If target audience is unclear, infer from product type and messaging tone
|
||||
- If brand colors are missing, create a complementary modern palette
|
||||
- Avoid technical implementation details unless user-facing
|
||||
|
||||
4. **Only ask for clarification IF:**
|
||||
- Multiple conflicting value propositions exist
|
||||
- Cannot determine if product is B2B or B2C (drastically affects messaging)
|
||||
- Genuinely ambiguous target audience
|
||||
|
||||
**OUTPUT:** Clear understanding of product value, benefits, and brand for video creation.
|
||||
|
||||
---
|
||||
|
||||
## ✅ Phase 3: Present Findings & Gather User Preferences
|
||||
|
||||
**OBJECTIVE:** Share what you discovered and get user input on video preferences before planning.
|
||||
|
||||
**ACTIONS:**
|
||||
|
||||
1. **Present a summary of discovered information:**
|
||||
|
||||
```text
|
||||
📊 DISCOVERED INFORMATION
|
||||
|
||||
Product: [Name]
|
||||
Value Proposition: [Main benefit to customers]
|
||||
Key Features: [2-3 main benefits]
|
||||
Brand Colors: [Extracted or suggested colors]
|
||||
Target Audience: [Who this is for]
|
||||
```
|
||||
|
||||
2. **Ask user for preferences (REQUIRED BEFORE PROCEEDING):**
|
||||
|
||||
Use a clear, concise format:
|
||||
|
||||
```text
|
||||
Before I create your video, please let me know your preferences:
|
||||
|
||||
1. **Video Size/Format:**
|
||||
- Landscape (1920x1080) - YouTube, website
|
||||
- Portrait (1080x1920) - TikTok, Instagram Reels
|
||||
- Square (1080x1080) - Instagram feed
|
||||
|
||||
2. **Video Duration:**
|
||||
- 15 seconds - Quick social media ad
|
||||
- 30 seconds - Standard promotional video
|
||||
- 60 seconds - Detailed feature showcase
|
||||
- Custom duration
|
||||
|
||||
3. **Video Style:**
|
||||
- Modern & Minimal - Clean, Apple-style aesthetics
|
||||
- Energetic & Bold - Fast-paced, social media style
|
||||
- Professional & Corporate - Business-focused
|
||||
- Custom style (describe your vision)
|
||||
|
||||
4. **Anything else to highlight or customize?**
|
||||
(Specific features, messaging, colors, etc.)
|
||||
```
|
||||
|
||||
3. **Wait for user response** before proceeding to Phase 4.
|
||||
|
||||
4. **Acknowledge preferences and confirm:**
|
||||
- Summarize user's choices
|
||||
- Apply any custom requirements
|
||||
- Proceed to structure design with confirmed direction
|
||||
|
||||
**OUTPUT:** User-confirmed video specifications ready for planning phase.
|
||||
|
||||
---
|
||||
|
||||
## 📐 Phase 4: Structure Design (Post-Confirmation)
|
||||
|
||||
**OBJECTIVE:** Create a compelling video structure using the 3-act format based on user preferences.
|
||||
|
||||
**ACTIONS:**
|
||||
|
||||
1. **Design video structure with user's confirmed preferences:**
|
||||
|
||||
```text
|
||||
🎬 VIDEO STRUCTURE
|
||||
|
||||
Act 1: The Hook (0-5 seconds)
|
||||
- [Attention-grabbing visual concept]
|
||||
- [Bold animation entrance]
|
||||
- [Compelling headline/question]
|
||||
|
||||
Act 2: Value Demonstration (middle section)
|
||||
- [Show key benefits in action]
|
||||
- [Visual storytelling of customer value]
|
||||
- [2-3 feature highlights as benefits]
|
||||
|
||||
Act 3: Call to Action (final section)
|
||||
- [Clear CTA with brand reinforcement]
|
||||
- [Memorable closing visual]
|
||||
- [Smooth exit animation]
|
||||
```
|
||||
|
||||
2. **Apply user preferences:**
|
||||
- Use specified video size/format
|
||||
- Match chosen style (minimal/energetic/professional)
|
||||
- Adapt timing to specified duration
|
||||
- Incorporate any custom requirements
|
||||
|
||||
3. **Make creative decisions based on:**
|
||||
- Product value proposition (what makes it compelling)
|
||||
- Target audience (what resonates with them)
|
||||
- User's style preferences
|
||||
- Brand personality (visual and tonal consistency)
|
||||
|
||||
4. **Present the structure briefly** then automatically proceed to Phase 5.
|
||||
|
||||
**OUTPUT:** Complete video structure ready for implementation planning.
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ Phase 5: Technical Architecture
|
||||
|
||||
**OBJECTIVE:** Design implementation architecture and proceed directly to building.
|
||||
|
||||
**ACTIONS:**
|
||||
|
||||
1. **Silently design** the component architecture:
|
||||
- Utility functions (easing, animation helpers, color utilities)
|
||||
- Reusable components (AnimatedTitle, FeatureHighlight, etc.)
|
||||
- Scene components (Hook, Demo, CTA scenes)
|
||||
- Main composition structure (Video.tsx, Root.tsx)
|
||||
|
||||
2. **Plan technical details:**
|
||||
- Animation timing and easing curves
|
||||
- Color palette implementation
|
||||
- Typography hierarchy
|
||||
- Icon and asset strategy
|
||||
- Sequence timing breakdown
|
||||
|
||||
3. **Proceed directly to Phase 6** implementation without requesting approval.
|
||||
|
||||
**OUTPUT:** Internal technical blueprint ready for immediate implementation.
|
||||
|
||||
---
|
||||
|
||||
## 💻 Phase 6: Implementation
|
||||
|
||||
**OBJECTIVE:** Build the complete Remotion video project autonomously.
|
||||
|
||||
**CONSTRAINTS & TECH STACK:**
|
||||
|
||||
1. **Framework:** Remotion (React)
|
||||
2. **Styling:** Tailwind CSS (via `className` or standard style objects)
|
||||
3. **Animation:** Use `spring`, `interpolate`, and `useCurrentFrame` for smooth motion
|
||||
4. **Code Style:** Modular components. Do not dump everything in `Root.tsx`
|
||||
5. **Best Practices:**
|
||||
- Nothing should be static. Everything must have an entrance (opacity/scale/slide) and exit
|
||||
- Use Lucide-React for icons if needed
|
||||
- Use standard fonts but style them heavily (bold, tracking-tight)
|
||||
- Do not use external images unless they are placeholders (e.g., `https://placehold.co/600x400`) or user-provided assets
|
||||
|
||||
**ACTIONS:**
|
||||
|
||||
1. **Build complete project structure** in this order:
|
||||
- Utility functions (easing, animation helpers, color utilities)
|
||||
- Reusable components (AnimatedTitle, FeatureHighlight, transitions)
|
||||
- Scene components (HookScene, DemoScene, CTAScene)
|
||||
- Main composition (Video.tsx with sequencing)
|
||||
- Root configuration (Root.tsx with proper registration)
|
||||
|
||||
2. **Work silently and efficiently:**
|
||||
- Create all files without narrating every step
|
||||
- Make design decisions based on gathered information
|
||||
- Use professional animation principles
|
||||
- Ensure smooth transitions between scenes
|
||||
|
||||
3. **Automatically proceed to Phase 7** when implementation is complete.
|
||||
|
||||
**OUTPUT:** Complete, production-ready Remotion project code.
|
||||
|
||||
---
|
||||
|
||||
## 🎥 Phase 7: Delivery & Next Steps
|
||||
|
||||
**OBJECTIVE:** Provide rendering instructions and mark project complete.
|
||||
|
||||
**ACTIONS:**
|
||||
|
||||
1. **Provide rendering instructions:**
|
||||
|
||||
```bash
|
||||
# Preview the video in browser
|
||||
npm run dev
|
||||
|
||||
# Render the final video
|
||||
npm run build
|
||||
npx remotion render Video out/video.mp4
|
||||
|
||||
# For specific codec/settings
|
||||
npx remotion render Video out/video.mp4 --codec h264
|
||||
```
|
||||
|
||||
2. **Deliver summary:**
|
||||
- Brief description of what was created
|
||||
- Key features of the video
|
||||
- Video specifications (duration, format, dimensions)
|
||||
- Any notable design decisions
|
||||
|
||||
3. **User can request changes if needed:**
|
||||
- Timing adjustments
|
||||
- Animation modifications
|
||||
- Content updates
|
||||
- Style tweaks
|
||||
|
||||
**OUTPUT:** Complete Remotion project with clear rendering instructions, ready to use.
|
||||
|
||||
---
|
||||
|
||||
# 🎯 QUALITY STANDARDS
|
||||
|
||||
Throughout all phases, maintain these standards:
|
||||
|
||||
**Visual Quality:**
|
||||
- Professional-grade animations (smooth, purposeful, on-brand)
|
||||
- Consistent spacing and alignment
|
||||
- Readable typography with proper contrast
|
||||
- Cohesive color usage
|
||||
|
||||
**Technical Quality:**
|
||||
- Clean, modular code architecture
|
||||
- Performance-optimized (smooth 30fps playback)
|
||||
- Proper use of Remotion APIs (spring, interpolate, Sequence)
|
||||
- Type-safe (if using TypeScript)
|
||||
|
||||
**Creative Quality:**
|
||||
- Clear narrative structure
|
||||
- Attention-grabbing opening
|
||||
- Strong call-to-action
|
||||
- Memorable visual moments
|
||||
|
||||
---
|
||||
|
||||
# 🚀 Getting Started
|
||||
|
||||
I'll create a professional Remotion video project for your product. Here's my workflow:
|
||||
|
||||
## Phase 1-2: Autonomous Exploration (I do this automatically)
|
||||
|
||||
1. Explore your codebase for product details, brand assets, and colors
|
||||
2. Fetch and analyze product page (if URL found)
|
||||
3. Extract value propositions and key benefits
|
||||
|
||||
## Phase 3: Your Input (I'll ask you)
|
||||
|
||||
1. Present what I discovered
|
||||
2. Ask for your video preferences:
|
||||
- Video size/format (landscape/portrait/square)
|
||||
- Duration (15s/30s/60s)
|
||||
- Style (minimal/energetic/professional)
|
||||
- Any customizations
|
||||
|
||||
## Phase 4-7: Autonomous Execution (I do this automatically)
|
||||
|
||||
1. Design video structure based on your preferences
|
||||
2. Build complete Remotion project with professional animations
|
||||
3. Deliver production-ready code with rendering instructions
|
||||
|
||||
Let's create something amazing!
|
||||
@@ -0,0 +1,121 @@
|
||||
# Claude How To — Дизайн-система
|
||||
|
||||
## Візуальна ідентичність
|
||||
|
||||
### Концепція дизайну іконки: Компас з кодовою дужкою
|
||||
|
||||
Іконка Claude How To використовує **компас з кодовою дужкою `>`** для представлення направленої навігації кодом:
|
||||
|
||||
```
|
||||
N (green)
|
||||
▲
|
||||
│
|
||||
W ───>─── E Compass = Guidance/Direction
|
||||
│ > Bracket = Code/Terminal/CLI
|
||||
▼
|
||||
S (black)
|
||||
```
|
||||
|
||||
Це створює:
|
||||
- **Візуальна ясність**: Одразу комунікує "гайд з навігації кодом"
|
||||
- **Символічне значення**: Компас = пошук шляху; `>` = код/термінал
|
||||
- **Масштабованість**: Працює при будь-якому розмірі від 16px до 512px
|
||||
- **Відповідність бренду**: Відповідає естетиці інструменту розробника з мінімальною палітрою
|
||||
|
||||
---
|
||||
|
||||
## Кольорова система
|
||||
|
||||
### Палітра
|
||||
|
||||
| Колір | Hex | RGB | Використання |
|
||||
|-------|-----|-----|-------------|
|
||||
| Чорний (основний) | `#000000` | 0, 0, 0 | Основні обведення, текст, південна стрілка |
|
||||
| Білий (фон) | `#FFFFFF` | 255, 255, 255 | Світлі фони |
|
||||
| Сірий (вторинний) | `#6B7280` | 107, 114, 128 | Малі позначки, вторинний текст |
|
||||
| Яскраво-зелений (акцент) | `#22C55E` | 34, 197, 94 | Північна стрілка, центральна точка, акцентні лінії |
|
||||
| Майже чорний (темний фон) | `#0A0A0A` | 10, 10, 10 | Фони dark mode |
|
||||
|
||||
### Коефіцієнти контрасту (WCAG)
|
||||
|
||||
- Чорний на білому: **21:1** AAA
|
||||
- Сірий на білому: **4.6:1** AA
|
||||
- Зелений на білому: **3.2:1** (тільки декоративний, не для тексту)
|
||||
- Білий на темному: **19.5:1** AAA
|
||||
|
||||
### Правило акцентного кольору
|
||||
|
||||
**Яскраво-зелений (#22C55E) зарезервований тільки для виділень:**
|
||||
- Північна стрілка компасу
|
||||
- Центральна точка
|
||||
- Акцентні підкреслення/рамки
|
||||
- Ніколи як фон
|
||||
- Ніколи для основного тексту
|
||||
|
||||
---
|
||||
|
||||
## Типографіка
|
||||
|
||||
### Шрифт логотипу
|
||||
- **Сімейство**: Inter, SF Pro Display, -apple-system, Segoe UI, sans-serif
|
||||
- **"Claude"**: 42px, weight 700 (bold), Чорний
|
||||
- **"How-To"**: 32px, weight 500 (medium), Сірий (#6B7280)
|
||||
- **Підзаголовок**: 10px, weight 500, Сірий, letter-spacing 1.5px, uppercase
|
||||
|
||||
---
|
||||
|
||||
## Деталі іконки
|
||||
|
||||
### Специфікації компасу
|
||||
|
||||
```
|
||||
Element | Stroke/Fill | Color
|
||||
--------------------|----------------|------------------
|
||||
Outer ring | 3px stroke | Black / White (dark mode)
|
||||
North tick | 2.5px stroke | Black / White (dark mode)
|
||||
Other cardinal ticks| 2px stroke | Gray / White 50% (dark mode)
|
||||
Intercardinal ticks | 1.5px stroke | Gray / White 40% (dark mode)
|
||||
North needle | filled polygon | #22C55E (always green)
|
||||
South needle | filled polygon | Black / White (dark mode)
|
||||
> bracket | 3px stroke | Black / White (dark mode)
|
||||
Center dot | filled circle | #22C55E (always green)
|
||||
```
|
||||
|
||||
### Прогресія розмірів
|
||||
|
||||
```
|
||||
16px → Кільце + стрілки + шеврон (мінімально)
|
||||
32px → Додаються кардинальні позначки
|
||||
64px → Додаються інтеркардинальні позначки
|
||||
128px → Повна деталізація, всі елементи чіткі
|
||||
256px → Максимальна деталізація, товсті обведення
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Настанови з розмірів
|
||||
|
||||
### Розміри логотипу
|
||||
- **Мінімум**: 200px ширина (для веб)
|
||||
- **Рекомендовано**: 520px (нативний розмір)
|
||||
- **Максимум**: Необмежено (векторний формат)
|
||||
- **Пропорції**: ~4.3:1 (ширина:висота)
|
||||
|
||||
### Розміри іконки
|
||||
- **Мінімум**: 16px (фавікон)
|
||||
- **Рекомендовано**: 64-256px (додатки, аватари)
|
||||
- **Максимум**: Необмежено (векторний формат)
|
||||
- **Пропорції**: 1:1 (квадрат)
|
||||
|
||||
---
|
||||
|
||||
## Доступність
|
||||
|
||||
- Усі тексти відповідають WCAG AA (мінімум 4.5:1)
|
||||
- Зелений акцент — декоративний, не інформаційний
|
||||
- Без залежності від червоно-зеленого розрізнення
|
||||
|
||||
---
|
||||
|
||||
**Останнє оновлення**: Лютий 2026
|
||||
**Версія дизайн-системи**: 3.0
|
||||
@@ -0,0 +1,89 @@
|
||||
# Швидкий старт — Брендові ресурси
|
||||
|
||||
## Копіювання ресурсів у ваш проєкт
|
||||
|
||||
```bash
|
||||
# Copy all resources to your web project
|
||||
cp -r resources/ /path/to/your/website/
|
||||
|
||||
# Or just the favicons for web
|
||||
cp resources/favicons/* /path/to/your/website/public/
|
||||
```
|
||||
|
||||
## Додавання в HTML (копіювання та вставка)
|
||||
|
||||
```html
|
||||
<!-- Favicons -->
|
||||
<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-32.svg" sizes="32x32">
|
||||
<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-16.svg" sizes="16x16">
|
||||
<link rel="apple-touch-icon" href="/resources/favicons/favicon-128.svg">
|
||||
<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-256.svg" sizes="256x256">
|
||||
<meta name="theme-color" content="#000000">
|
||||
```
|
||||
|
||||
## Використання в Markdown/документації
|
||||
|
||||
```markdown
|
||||
# Claude How To
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
## Рекомендовані розміри
|
||||
|
||||
| Призначення | Розмір | Файл |
|
||||
|-------------|--------|------|
|
||||
| Заголовок сайту | 520×120 | `logos/claude-howto-logo.svg` |
|
||||
| Іконка додатку | 256×256 | `icons/claude-howto-icon.svg` |
|
||||
| Вкладка браузера | 32×32 | `favicons/favicon-32.svg` |
|
||||
| Домашній екран мобільного | 128×128 | `favicons/favicon-128.svg` |
|
||||
| Десктопний додаток | 256×256 | `favicons/favicon-256.svg` |
|
||||
| Малий аватар | 64×64 | `favicons/favicon-64.svg` |
|
||||
|
||||
## Значення кольорів
|
||||
|
||||
```css
|
||||
/* Use these in your CSS */
|
||||
--color-primary: #000000;
|
||||
--color-secondary: #6B7280;
|
||||
--color-accent: #22C55E;
|
||||
--color-bg-light: #FFFFFF;
|
||||
--color-bg-dark: #0A0A0A;
|
||||
```
|
||||
|
||||
## Значення дизайну іконки
|
||||
|
||||
**Компас з кодовою дужкою**:
|
||||
- Кільце компасу = Навігація, структурований навчальний шлях
|
||||
- Зелена північна стрілка = Напрямок, прогрес, керівництво
|
||||
- Чорна південна стрілка = Основа, міцний фундамент
|
||||
- Дужка `>` = Промпт терміналу, код, контекст CLI
|
||||
- Позначки = Точність, структуровані кроки
|
||||
|
||||
Це символізує "пошук шляху через код з чітким керівництвом".
|
||||
|
||||
## Що і де використовувати
|
||||
|
||||
### Сайт
|
||||
- **Заголовок**: Логотип (`logos/claude-howto-logo.svg`)
|
||||
- **Фавікон**: 32px (`favicons/favicon-32.svg`)
|
||||
- **Соціальний превʼю**: Іконка (`icons/claude-howto-icon.svg`)
|
||||
|
||||
### GitHub
|
||||
- **Бейдж README**: Іконка 64-128px
|
||||
- **Аватар репозиторію**: Іконка
|
||||
|
||||
### Соціальні мережі
|
||||
- **Аватар**: Іконка 256×256px
|
||||
- **Банер**: Логотип 520×120px
|
||||
- **Мініатюра**: Іконка 256×256px
|
||||
|
||||
### Документація
|
||||
- **Заголовки розділів**: Логотип або іконка (масштабовані)
|
||||
- **Іконки навігації**: Фавікон 32-64px
|
||||
|
||||
---
|
||||
|
||||
Див. [README.md](README.md) для повної документації.
|
||||
@@ -0,0 +1,154 @@
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="logos/claude-howto-logo-dark.svg">
|
||||
<img alt="Claude How To" src="logos/claude-howto-logo.svg">
|
||||
</picture>
|
||||
|
||||
# Claude How To — Брендові ресурси
|
||||
|
||||
Повна колекція логотипів, іконок та фавіконів для проєкту Claude How To. Усі ресурси використовують дизайн V3.0: компас з символом кодової дужки (`>`), що представляє направлену навігацію кодом — з палітрою Чорний/Білий/Сірий та акцентом Яскраво-зелений (#22C55E).
|
||||
|
||||
## Структура каталогів
|
||||
|
||||
```
|
||||
resources/
|
||||
├── logos/
|
||||
│ ├── claude-howto-logo.svg # Основний логотип - Light mode (520×120px)
|
||||
│ └── claude-howto-logo-dark.svg # Основний логотип - Dark mode (520×120px)
|
||||
├── icons/
|
||||
│ ├── claude-howto-icon.svg # Іконка додатку - Light mode (256×256px)
|
||||
│ └── claude-howto-icon-dark.svg # Іконка додатку - Dark mode (256×256px)
|
||||
└── favicons/
|
||||
├── favicon-16.svg # Фавікон - 16×16px
|
||||
├── favicon-32.svg # Фавікон - 32×32px (основний)
|
||||
├── favicon-64.svg # Фавікон - 64×64px
|
||||
├── favicon-128.svg # Фавікон - 128×128px
|
||||
└── favicon-256.svg # Фавікон - 256×256px
|
||||
```
|
||||
|
||||
Додаткові ресурси в `assets/logo/`:
|
||||
```
|
||||
assets/logo/
|
||||
├── logo-full.svg # Знак + текст (горизонтально)
|
||||
├── logo-mark.svg # Тільки символ компасу (120×120px)
|
||||
├── logo-wordmark.svg # Тільки текст
|
||||
├── logo-icon.svg # Іконка додатку (512×512, округлена)
|
||||
├── favicon.svg # 16×16 оптимізований
|
||||
├── logo-white.svg # Біла версія для темних фонів
|
||||
└── logo-black.svg # Чорна монохромна версія
|
||||
```
|
||||
|
||||
## Огляд ресурсів
|
||||
|
||||
### Концепція дизайну (V3.0)
|
||||
|
||||
**Компас з кодовою дужкою** — навігація зустрічає код:
|
||||
- **Кільце компасу** = Навігація, пошук шляху
|
||||
- **Північна стрілка (зелена)** = Напрямок, прогрес на навчальному шляху
|
||||
- **Південна стрілка (чорна)** = Основа, міцний фундамент
|
||||
- **Дужка `>`** = Промпт терміналу, код, контекст CLI
|
||||
- **Позначки** = Точність, структуроване навчання
|
||||
|
||||
### Логотипи
|
||||
|
||||
**Файли**:
|
||||
- `logos/claude-howto-logo.svg` (Light mode)
|
||||
- `logos/claude-howto-logo-dark.svg` (Dark mode)
|
||||
|
||||
**Специфікації**:
|
||||
- **Розмір**: 520×120 px
|
||||
- **Призначення**: Основний логотип заголовку/брендингу з текстом
|
||||
- **Використання**: Заголовки сайтів, бейджі README, маркетингові матеріали, друковані матеріали
|
||||
- **Формат**: SVG (повністю масштабований)
|
||||
- **Режими**: Light (білий фон) та Dark (фон #0A0A0A)
|
||||
|
||||
### Іконки
|
||||
|
||||
**Файли**:
|
||||
- `icons/claude-howto-icon.svg` (Light mode)
|
||||
- `icons/claude-howto-icon-dark.svg` (Dark mode)
|
||||
|
||||
**Специфікації**:
|
||||
- **Розмір**: 256×256 px
|
||||
- **Призначення**: Іконка додатку, аватари, мініатюри
|
||||
- **Формат**: SVG (повністю масштабований)
|
||||
|
||||
### Фавікони
|
||||
|
||||
Оптимізовані версії різних розмірів для веб-використання:
|
||||
|
||||
| Файл | Розмір | DPI | Використання |
|
||||
|------|--------|-----|-------------|
|
||||
| `favicon-16.svg` | 16×16 px | 1x | Вкладки браузера (старі браузери) |
|
||||
| `favicon-32.svg` | 32×32 px | 1x | Стандартний фавікон |
|
||||
| `favicon-64.svg` | 64×64 px | 1x-2x | Дисплеї High-DPI |
|
||||
| `favicon-128.svg` | 128×128 px | 2x | Apple touch icon, закладки |
|
||||
| `favicon-256.svg` | 256×256 px | 4x | Сучасні браузери, іконки PWA |
|
||||
|
||||
## Інтеграція HTML
|
||||
|
||||
### Базове налаштування фавіконів
|
||||
|
||||
```html
|
||||
<!-- Browser favicon -->
|
||||
<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-32.svg">
|
||||
<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-16.svg" sizes="16x16">
|
||||
|
||||
<!-- Apple touch icon (mobile home screen) -->
|
||||
<link rel="apple-touch-icon" href="/resources/favicons/favicon-128.svg">
|
||||
|
||||
<!-- PWA & modern browsers -->
|
||||
<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-256.svg" sizes="256x256">
|
||||
```
|
||||
|
||||
## Палітра кольорів
|
||||
|
||||
### Основні кольори
|
||||
- **Чорний**: `#000000` (Основний текст, обведення, південна стрілка)
|
||||
- **Білий**: `#FFFFFF` (Світлі фони)
|
||||
- **Сірий**: `#6B7280` (Вторинний текст, малі позначки)
|
||||
|
||||
### Акцентний колір
|
||||
- **Яскраво-зелений**: `#22C55E` (Північна стрілка, центральна точка, акцентні лінії — тільки для виділень, ніколи як фон)
|
||||
|
||||
### Dark mode
|
||||
- **Фон**: `#0A0A0A` (Майже чорний)
|
||||
|
||||
### CSS-змінні
|
||||
```css
|
||||
--color-primary: #000000;
|
||||
--color-secondary: #6B7280;
|
||||
--color-accent: #22C55E;
|
||||
--color-bg-light: #FFFFFF;
|
||||
--color-bg-dark: #0A0A0A;
|
||||
```
|
||||
|
||||
## Настанови з дизайну
|
||||
|
||||
### Використання логотипу
|
||||
- Використовуйте на білому або темному (#0A0A0A) фоні
|
||||
- Масштабуйте пропорційно
|
||||
- Залишайте вільний простір навколо (мінімум: висота логотипу / 2)
|
||||
- Використовуйте надані light/dark варіанти для відповідних фонів
|
||||
|
||||
### Доступність
|
||||
- Високі коефіцієнти контрасту (WCAG AA — мінімум 4.5:1)
|
||||
- Чисті геометричні форми, розпізнавані при будь-якому розмірі
|
||||
- Масштабований векторний формат
|
||||
- Без тексту в іконках (текст додається окремо)
|
||||
- Без залежності від червоно-зеленого розрізнення кольорів
|
||||
|
||||
## Атрибуція
|
||||
|
||||
Ці ресурси є частиною проєкту Claude How To.
|
||||
|
||||
**Ліцензія**: MIT (див. файл LICENSE проєкту)
|
||||
|
||||
## Історія версій
|
||||
|
||||
- **v3.0** (Лютий 2026): Дизайн компас-дужка з палітрою Чорний/Білий/Сірий + Зелений акцент
|
||||
- **v2.0** (Січень 2026): Дизайн 12-променевого зоряного спалаху в стилі Claude з смарагдовою палітрою
|
||||
- **v1.0** (Січень 2026): Оригінальний дизайн іконки прогресії на основі шестикутника
|
||||
|
||||
---
|
||||
**Останнє оновлення**: Лютий 2026
|
||||
**Поточна версія**: 3.0 (Компас-дужка)
|
||||
@@ -0,0 +1,120 @@
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="../resources/logos/claude-howto-logo-dark.svg">
|
||||
<img alt="Claude How To" src="../resources/logos/claude-howto-logo.svg">
|
||||
</picture>
|
||||
|
||||
# Скрипт збірки EPUB
|
||||
|
||||
Збірка EPUB-книги з markdown-файлів Claude How-To.
|
||||
|
||||
## Функції
|
||||
|
||||
- Організує розділи за структурою каталогів (01-slash-commands, 02-memory тощо)
|
||||
- Рендерить Mermaid-діаграми як PNG-зображення через Kroki.io API
|
||||
- Асинхронне паралельне завантаження — рендерить усі діаграми одночасно
|
||||
- Генерує обкладинку з логотипу проєкту
|
||||
- Конвертує внутрішні markdown-посилання у посилання на розділи EPUB
|
||||
- Суворий режим помилок — падає, якщо діаграма не може бути відрендерена
|
||||
|
||||
## Вимоги
|
||||
|
||||
- Python 3.10+
|
||||
- [uv](https://github.com/astral-sh/uv)
|
||||
- Інтернет-з'єднання для рендерингу Mermaid-діаграм
|
||||
|
||||
## Швидкий старт
|
||||
|
||||
```bash
|
||||
# Simplest way - uv handles everything
|
||||
uv run scripts/build_epub.py
|
||||
```
|
||||
|
||||
## Налаштування розробки
|
||||
|
||||
```bash
|
||||
# Create virtual environment
|
||||
uv venv
|
||||
|
||||
# Activate and install dependencies
|
||||
source .venv/bin/activate
|
||||
uv pip install -r requirements-dev.txt
|
||||
|
||||
# Run tests
|
||||
pytest scripts/tests/ -v
|
||||
|
||||
# Run the script
|
||||
python scripts/build_epub.py
|
||||
```
|
||||
|
||||
## Параметри командного рядка
|
||||
|
||||
```
|
||||
usage: build_epub.py [-h] [--root ROOT] [--output OUTPUT] [--verbose]
|
||||
[--timeout TIMEOUT] [--max-concurrent MAX_CONCURRENT]
|
||||
|
||||
options:
|
||||
-h, --help show this help message and exit
|
||||
--root, -r ROOT Root directory (default: repo root)
|
||||
--output, -o OUTPUT Output path (default: claude-howto-guide.epub)
|
||||
--verbose, -v Enable verbose logging
|
||||
--timeout TIMEOUT API timeout in seconds (default: 30)
|
||||
--max-concurrent N Max concurrent requests (default: 10)
|
||||
```
|
||||
|
||||
## Приклади
|
||||
|
||||
```bash
|
||||
# Build with verbose output
|
||||
uv run scripts/build_epub.py --verbose
|
||||
|
||||
# Custom output location
|
||||
uv run scripts/build_epub.py --output ~/Desktop/claude-guide.epub
|
||||
|
||||
# Limit concurrent requests (if rate-limited)
|
||||
uv run scripts/build_epub.py --max-concurrent 5
|
||||
```
|
||||
|
||||
## Вивід
|
||||
|
||||
Створює `claude-howto-guide.epub` у кореневому каталозі репозиторію.
|
||||
|
||||
EPUB включає:
|
||||
- Обкладинку з логотипом проєкту
|
||||
- Зміст з вкладеними секціями
|
||||
- Весь markdown-контент, конвертований у EPUB-сумісний HTML
|
||||
- Mermaid-діаграми, відрендерені як PNG-зображення
|
||||
|
||||
## Запуск тестів
|
||||
|
||||
```bash
|
||||
# With virtual environment
|
||||
source .venv/bin/activate
|
||||
pytest scripts/tests/ -v
|
||||
|
||||
# Or with uv directly
|
||||
uv run --with pytest --with pytest-asyncio \
|
||||
--with ebooklib --with markdown --with beautifulsoup4 \
|
||||
--with httpx --with pillow --with tenacity \
|
||||
pytest scripts/tests/ -v
|
||||
```
|
||||
|
||||
## Залежності
|
||||
|
||||
Керуються через PEP 723 inline script metadata:
|
||||
|
||||
| Пакет | Призначення |
|
||||
|-------|-------------|
|
||||
| `ebooklib` | Генерація EPUB |
|
||||
| `markdown` | Конвертація Markdown → HTML |
|
||||
| `beautifulsoup4` | Парсинг HTML |
|
||||
| `httpx` | Асинхронний HTTP-клієнт |
|
||||
| `pillow` | Генерація обкладинки |
|
||||
| `tenacity` | Логіка повторних спроб |
|
||||
|
||||
## Усунення проблем
|
||||
|
||||
**Збірка падає з мережевою помилкою**: Перевірте інтернет-з'єднання та стан Kroki.io. Спробуйте `--timeout 60`.
|
||||
|
||||
**Обмеження частоти**: Зменште паралельні запити з `--max-concurrent 3`.
|
||||
|
||||
**Відсутній логотип**: Скрипт генерує текстову обкладинку, якщо `claude-howto-logo.png` не знайдено.
|
||||
Reference in New Issue
Block a user