Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
c5c5269
docs: add Beyond 33 extended concepts section
leonardomso Jan 6, 2026
ac89391
feat: add fact-check and seo-review skills for content quality
leonardomso Jan 6, 2026
1b3ce7b
docs(hoisting): fix external links and add internal linking for SEO
leonardomso Jan 6, 2026
031c49f
docs(temporal-dead-zone): add comprehensive TDZ concept page with tests
leonardomso Jan 6, 2026
86578b6
feat: add test-writer, resource-curator, and concept-workflow skills
leonardomso Jan 6, 2026
79560aa
docs: add strict-mode and property-descriptors concept pages with tests
leonardomso Jan 6, 2026
1e4f5d4
feat(seo-review): add Technical SEO checklist with 3 new checks
leonardomso Jan 6, 2026
468a23e
docs(getters-setters): add comprehensive concept page with tests
leonardomso Jan 6, 2026
0be8bab
docs(type-nuances): add JavaScript type nuances concept page with tests
leonardomso Jan 6, 2026
ac87841
docs(object-methods): add comprehensive Object methods concept page w…
leonardomso Jan 6, 2026
e50d4d4
docs(proxy-reflect): add comprehensive Proxy and Reflect concept page…
leonardomso Jan 6, 2026
20a1610
docs(weakmap-weakset): add comprehensive concept page with tests
leonardomso Jan 6, 2026
0de6b23
docs(memory-management): add comprehensive memory management concept …
leonardomso Jan 6, 2026
595855e
docs(garbage-collection): add comprehensive concept page with tests
leonardomso Jan 6, 2026
9bc3432
docs(memoization): add comprehensive concept page with tests
leonardomso Jan 6, 2026
12003ac
docs(debouncing-throttling): add comprehensive concept page with tests
leonardomso Jan 6, 2026
ad89a9a
docs(tagged-template-literals): add comprehensive concept page with t…
leonardomso Jan 6, 2026
54a1fdb
docs(computed-property-names): add comprehensive concept page with tests
leonardomso Jan 6, 2026
e205f2b
docs(localstorage-sessionstorage): add comprehensive concept page wit…
leonardomso Jan 6, 2026
eddd973
docs(indexeddb): add comprehensive concept page with tests
leonardomso Jan 6, 2026
0b77277
docs(indexeddb): add comprehensive concept page with tests
leonardomso Jan 6, 2026
1d906e2
docs(event-delegation): add comprehensive concept page with tests
leonardomso Jan 6, 2026
84e177d
docs(event-bubbling-capturing): add comprehensive concept page with t…
leonardomso Jan 6, 2026
74dc72b
docs(custom-events): add comprehensive concept page with tests
leonardomso Jan 6, 2026
e4a44c2
docs(intersection-observer): add comprehensive concept page with tests
leonardomso Jan 6, 2026
5f1076b
docs(resize-observer): add comprehensive concept page with tests
leonardomso Jan 6, 2026
ae100b1
docs(performance-observer): add comprehensive concept page with tests
leonardomso Jan 6, 2026
3c900b6
docs(blob-file-api): add comprehensive concept page with tests
leonardomso Jan 6, 2026
6c6cf30
docs(json-deep-dive): add comprehensive concept page with tests
leonardomso Jan 6, 2026
c790c82
docs(requestanimationframe): add comprehensive concept page with tests
leonardomso Jan 6, 2026
8c47e1e
docs(typed-arrays): add comprehensive concept page with tests
leonardomso Jan 6, 2026
1b08687
test(hoisting): add comprehensive tests for hoisting concept
leonardomso Jan 6, 2026
b19278f
feat(beyond-33): add navigation structure and getting started overview
leonardomso Jan 6, 2026
355cfed
Merge pull request #644 from leonardomso/feat/beyond-33
leonardomso Jan 7, 2026
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
185 changes: 180 additions & 5 deletions .claude/CLAUDE.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,22 @@ The project was recognized by GitHub as one of the **top open source projects of
```
33-js-concepts/
├── .claude/ # Claude configuration
│ └── CLAUDE.md # Project context and guidelines
│ ├── CLAUDE.md # Project context and guidelines
│ └── skills/ # Custom skills for content creation
│ ├── write-concept/ # Skill for writing concept documentation
│ ├── fact-check/ # Skill for verifying technical accuracy
│ ├── seo-review/ # Skill for SEO audits
│ ├── test-writer/ # Skill for generating Vitest tests
│ ├── resource-curator/ # Skill for curating external resources
│ └── concept-workflow/ # Skill for end-to-end concept creation
├── .opencode/ # OpenCode configuration
│ └── skill/ # Custom skills for content creation
│ └── write-concept/ # Skill for writing concept documentation
│ └── skill/ # Custom skills (mirrored from .claude/skills)
│ ├── write-concept/ # Skill for writing concept documentation
│ ├── fact-check/ # Skill for verifying technical accuracy
│ ├── seo-review/ # Skill for SEO audits
│ ├── test-writer/ # Skill for generating Vitest tests
│ ├── resource-curator/ # Skill for curating external resources
│ └── concept-workflow/ # Skill for end-to-end concept creation
├── docs/ # Mintlify documentation site
│ ├── docs.json # Mintlify configuration
│ ├── index.mdx # Homepage
Expand All @@ -46,7 +58,7 @@ The project was recognized by GitHub as one of the **top open source projects of
├── CODE_OF_CONDUCT.md # Community standards
├── LICENSE # MIT License
├── package.json # Project metadata
├── opencode.json # OpenCode AI assistant configuration
├── opencode.jsonc # OpenCode AI assistant configuration
└── github-image.png # Project banner image
```

Expand Down Expand Up @@ -398,7 +410,170 @@ Use the `/write-concept` skill when writing or improving concept documentation p

The skill includes detailed guidance on title optimization (50-60 chars), meta descriptions (150-160 chars), keyword placement, and featured snippet optimization.

**Location:** `.opencode/skill/write-concept/SKILL.md`
**Location:** `.claude/skills/write-concept/SKILL.md`

### fact-check Skill

Use the `/fact-check` skill when verifying the technical accuracy of concept documentation. This skill provides comprehensive methodology for:

- **Code Verification**: Verify all code examples produce stated outputs, run project tests
- **MDN/Spec Compliance**: Check claims against official MDN documentation and ECMAScript specification
- **External Resource Checks**: Verify all links work and descriptions accurately represent content
- **Misconception Detection**: Common JavaScript misconceptions to watch for (type coercion, async behavior, etc.)
- **Test Integration**: Instructions for running `npm test` to verify code examples
- **Report Template**: Structured format for documenting findings with severity levels

**When to invoke:**
- Before publishing a new concept page
- After significant edits to existing pages
- When reviewing community contributions
- Periodic accuracy audits of existing content

**What gets checked:**
- Every code example for correct output
- All MDN links for validity (not 404)
- API descriptions match current MDN documentation
- External resources (articles, videos) are accessible and accurate
- Technical claims are correct and properly nuanced
- No common JavaScript misconceptions stated as fact

**Location:** `.claude/skills/fact-check/SKILL.md`

### seo-review Skill

Use the `/seo-review` skill when auditing concept pages for search engine optimization. This skill provides a focused audit checklist:

- **27-Point Scoring System**: Systematic audit across 6 categories
- **Title & Meta Optimization**: Character counts, keyword placement, compelling hooks
- **Keyword Strategy**: Pre-built keyword clusters for all JavaScript concepts
- **Featured Snippet Optimization**: Patterns for winning position zero in search results
- **Internal Linking**: Audit of concept interconnections and anchor text quality
- **Report Template**: Structured SEO audit report with prioritized fixes

**When to invoke:**
- Before publishing a new concept page
- When optimizing underperforming pages
- Periodic content audits
- After major content updates

**Scoring Categories (30 points total):**
- Title Tag (4 points)
- Meta Description (4 points)
- Keyword Placement (5 points)
- Content Structure (6 points)
- Featured Snippets (4 points)
- Internal Linking (4 points)
- Technical SEO (3 points) — Single H1, keyword in slug, no orphan pages

**Score Interpretation:**
- 90-100% (27-30): Ready to publish
- 75-89% (23-26): Minor optimizations needed
- 55-74% (17-22): Several improvements needed
- Below 55% (<17): Significant work required

**Location:** `.claude/skills/seo-review/SKILL.md`

### test-writer Skill

Use the `/test-writer` skill when generating Vitest tests for code examples in concept documentation. This skill provides comprehensive methodology for:

- **Code Extraction**: Identify and categorize all code examples (testable, DOM, error, conceptual)
- **Test Patterns**: 16 patterns for converting different types of code examples to tests
- **DOM Testing**: Separate file structure with jsdom environment for browser-specific code
- **Source References**: Line number references linking tests to documentation
- **Project Conventions**: File naming, describe block organization, assertion patterns
- **Report Template**: Test coverage report documenting what was tested and skipped

**When to invoke:**
- After writing a new concept page
- When adding new code examples to existing pages
- When updating existing code examples
- To verify documentation accuracy through automated tests

**Test Categories:**
- Basic value assertions (`console.log` → `expect`)
- Error testing (`toThrow` patterns)
- Async testing (Promises, async/await)
- DOM testing (jsdom environment, events)
- Floating point (toBeCloseTo)
- Object/Array comparisons (toEqual)

**File Structure:**
```
tests/{category}/{concept-name}/{concept-name}.test.js
tests/{category}/{concept-name}/{concept-name}.dom.test.js (if DOM examples)
```

**Location:** `.claude/skills/test-writer/SKILL.md`

### resource-curator Skill

Use the `/resource-curator` skill when finding, evaluating, or maintaining external resources (articles, videos, courses) for concept pages. This skill provides:

- **Audit Process**: Check existing links for accessibility, accuracy, and relevance
- **Trusted Sources**: Prioritized lists of reputable article, video, and course sources
- **Quality Criteria**: Must-have, should-have, and red flag checklists
- **Description Writing**: Formula and examples for specific, valuable descriptions
- **Publication Guidelines**: Date thresholds for different topic categories
- **Report Template**: Audit report for documenting broken, outdated, and missing resources

**When to invoke:**
- Adding resources to a new concept page
- Refreshing resources on existing pages
- Auditing for broken or outdated links
- Reviewing community-contributed resources
- Periodic link maintenance

**Resource Targets:**
- Reference: 2-4 MDN links
- Articles: 4-6 quality articles
- Videos: 3-4 quality videos
- Courses: 1-3 (optional)

**Trusted Sources Include:**
- Articles: javascript.info, MDN Guides, freeCodeCamp, 2ality, CSS-Tricks, dev.to
- Videos: Fireship, Web Dev Simplified, Fun Fun Function, Traversy Media, JSConf
- Courses: javascript.info, Piccalilli, freeCodeCamp, Frontend Masters

**Location:** `.claude/skills/resource-curator/SKILL.md`

### concept-workflow Skill

Use the `/concept-workflow` skill for end-to-end creation of a complete concept page. This orchestrator skill coordinates all five specialized skills in optimal order:

```
Phase 1: resource-curator → Find quality external resources
Phase 2: write-concept → Write the documentation page
Phase 3: test-writer → Generate tests for code examples
Phase 4: fact-check → Verify technical accuracy
Phase 5: seo-review → Optimize for search visibility
```

**When to invoke:**
- Creating a brand new concept page from scratch
- Completely rewriting an existing concept page
- When you want the full end-to-end workflow with all quality checks

**What it orchestrates:**
- Resource curation (2-4 MDN refs, 4-6 articles, 3-4 videos)
- Complete concept page writing (1,500+ words)
- Comprehensive test generation for all code examples
- Technical accuracy verification with test execution
- SEO audit targeting 90%+ score (24+/27)

**Deliverables:**
- `/docs/concepts/{concept-name}.mdx` — Complete documentation page
- `/tests/{category}/{concept-name}/{concept-name}.test.js` — Test file
- Updated `docs.json` navigation (if new concept)
- Fact-check report
- SEO audit report (score 24+/27)

**Estimated Time:** 2-5 hours depending on concept complexity

**Example prompt:**
> "Create a complete concept page for 'hoisting' using the concept-workflow skill"

**Location:** `.claude/skills/concept-workflow/SKILL.md`

## Maintainer

Expand Down
Loading