Entry point: /faion-net — invoke this skill for automatic routing to the appropriate domain.
JavaScript Developer Skill
JavaScript and TypeScript development covering React, Node.js, Next.js, and modern JS ecosystem.
Purpose
Handles all JavaScript/TypeScript development including React frontends, Node.js backends, Next.js full-stack apps, and modern JS tooling.
Context Discovery
Auto-Investigation
Detect JS/TS stack from project files:
| Signal |
How to Check |
What It Tells Us |
package.json |
Read("package.json") |
Dependencies, scripts, type |
| React |
Grep("react", "package.json") |
React framework used |
| Next.js |
Grep("next", "package.json") |
Next.js framework |
| Express |
Grep("express", "package.json") |
Express backend |
| Fastify |
Grep("fastify", "package.json") |
Fastify backend |
| TypeScript |
Glob("**/tsconfig.json") |
TypeScript enabled |
| Bun |
Glob("**/bun.lockb") |
Bun runtime |
| ESLint config |
Glob("**/.eslintrc*") |
Linting setup |
| Jest/Vitest |
Grep("jest|vitest", "package.json") |
Test framework |
Read existing patterns:
- Check src/ structure for architecture
- Read existing components for patterns
- Check tsconfig.json for strictness level
Discovery Questions
Q1: Project Type
question: "What type of JS/TS project is this?"
header: "Type"
multiSelect: false
options:
- label: "React frontend (SPA)"
description: "Client-side React application"
- label: "Next.js full-stack"
description: "Server components, API routes, SSR"
- label: "Node.js backend"
description: "Express, Fastify, or plain Node"
- label: "Library/package"
description: "Reusable npm package"
Routing:
- "React" → react-*, component architecture
- "Next.js" → nextjs-app-router, server components
- "Node.js" → nodejs-express or nodejs-fastify
- "Library" → TypeScript strict, build config
Q2: TypeScript Strictness
question: "What TypeScript strictness level?"
header: "TypeScript"
multiSelect: false
options:
- label: "Strict mode (recommended)"
description: "Full type safety, no any"
- label: "Standard"
description: "Basic type checking"
- label: "JavaScript only"
description: "No TypeScript"
- label: "Match existing config"
description: "Follow tsconfig.json"
Q3: State Management (if React)
question: "How do you manage state?"
header: "State"
multiSelect: false
options:
- label: "React hooks (useState, useContext)"
description: "Built-in React state"
- label: "Zustand"
description: "Lightweight global state"
- label: "Redux/RTK"
description: "Full Redux toolkit"
- label: "Server state (React Query/SWR)"
description: "Remote data fetching"
- label: "Not sure / recommend"
description: "I'll suggest based on needs"
When to Use
- React applications (hooks, components, state)
- Node.js backends (Express, Fastify)
- Next.js full-stack applications
- TypeScript strict mode and patterns
- Modern JavaScript (ES2024+)
- Bun runtime
Methodologies
| Category |
Methodology |
File |
| React |
|
|
| Component architecture |
React component patterns, composition |
react-component-architecture.md |
| React hooks |
useState, useEffect, custom hooks |
react-hooks.md |
| React patterns |
Modern React patterns, best practices |
react-patterns.md |
| React decomposition |
Breaking down React apps |
decomposition-react.md |
| Next.js |
|
|
| Next.js App Router |
App router, server components, routing |
nextjs-app-router.md |
| Node.js |
|
|
| Node.js Express |
Express.js patterns, middleware |
nodejs-express.md |
| Node.js Fastify |
Fastify framework, plugins, hooks |
nodejs-fastify.md |
| Node.js patterns |
Async patterns, error handling |
nodejs-patterns.md |
| Node.js service layer |
Service layer architecture |
nodejs-service-layer-architecture.md |
| Node.js service implementation |
Service layer implementation |
nodejs-service-layer-implementation.md |
| TypeScript |
|
|
| TypeScript patterns |
TS best practices, generics |
typescript-patterns.md |
| TypeScript strict mode |
Strict configuration, type safety |
typescript-strict-mode.md |
| TypeScript React 2026 |
TS 5.x + React 19 + Next.js 15 |
typescript-react-2026.md |
| JavaScript |
|
|
| JavaScript basics |
ES6+, async/await, modules |
javascript.md |
| JavaScript modern |
ES2024+ features, modern patterns |
javascript-modern.md |
| JavaScript testing |
Jest, Vitest patterns |
javascript-testing.md |
| Runtime |
|
|
| Bun runtime |
Bun.js patterns, performance |
bun-runtime.md |
| Bun simple |
Quick Bun reference |
bun-runtime-simple.md |
Tools
- Frameworks: React 19, Next.js 15, Express, Fastify
- Runtime: Node.js 20+, Bun 1.x
- Testing: Jest, Vitest, React Testing Library
- Bundlers: Vite, Turbopack, webpack
- Package managers: pnpm, npm, yarn, bun
Related Sub-Skills
| Sub-skill |
Relationship |
| faion-frontend-developer |
UI components, styling |
| faion-api-developer |
API design and integration |
| faion-testing-developer |
Testing strategies |
| faion-devtools-developer |
Build tools, monorepos |
Integration
Invoked by parent skill faion-software-developer when working with JavaScript/TypeScript code.
faion-javascript-developer v1.0 | 18 methodologies
1---2name: faion-javascript-developer3description: JavaScript/TypeScript: React, Node.js, Next.js, modern JS patterns.4---5> **Entry point:** `/faion-net` — invoke this skill for automatic routing to the appropriate domain.
6
7# JavaScript Developer Skill
8
9JavaScript and TypeScript development covering React, Node.js, Next.js, and modern JS ecosystem.
10
11## Purpose
12
13Handles all JavaScript/TypeScript development including React frontends, Node.js backends, Next.js full-stack apps, and modern JS tooling.
14
15---
16
17## Context Discovery
18
19### Auto-Investigation
20
21Detect JS/TS stack from project files:
22
23| Signal | How to Check | What It Tells Us |
24|--------|--------------|------------------|
25| `package.json` | `Read("package.json")` | Dependencies, scripts, type |
26| React | `Grep("react", "package.json")` | React framework used |
27| Next.js | `Grep("next", "package.json")` | Next.js framework |
28| Express | `Grep("express", "package.json")` | Express backend |
29| Fastify | `Grep("fastify", "package.json")` | Fastify backend |
30| TypeScript | `Glob("**/tsconfig.json")` | TypeScript enabled |
31| Bun | `Glob("**/bun.lockb")` | Bun runtime |
32| ESLint config | `Glob("**/.eslintrc*")` | Linting setup |
33| Jest/Vitest | `Grep("jest\|vitest", "package.json")` | Test framework |
34
35**Read existing patterns:**
36- Check src/ structure for architecture
37- Read existing components for patterns
38- Check tsconfig.json for strictness level
39
40### Discovery Questions
41
42#### Q1: Project Type
43
44```yaml
45question: "What type of JS/TS project is this?"
46header: "Type"
47multiSelect: false
48options:
49 - label: "React frontend (SPA)"
50 description: "Client-side React application"
51 - label: "Next.js full-stack"
52 description: "Server components, API routes, SSR"
53 - label: "Node.js backend"
54 description: "Express, Fastify, or plain Node"
55 - label: "Library/package"
56 description: "Reusable npm package"
57```
58
59**Routing:**
60- "React" → react-*, component architecture
61- "Next.js" → nextjs-app-router, server components
62- "Node.js" → nodejs-express or nodejs-fastify
63- "Library" → TypeScript strict, build config
64
65#### Q2: TypeScript Strictness
66
67```yaml
68question: "What TypeScript strictness level?"
69header: "TypeScript"
70multiSelect: false
71options:
72 - label: "Strict mode (recommended)"
73 description: "Full type safety, no any"
74 - label: "Standard"
75 description: "Basic type checking"
76 - label: "JavaScript only"
77 description: "No TypeScript"
78 - label: "Match existing config"
79 description: "Follow tsconfig.json"
80```
81
82#### Q3: State Management (if React)
83
84```yaml
85question: "How do you manage state?"
86header: "State"
87multiSelect: false
88options:
89 - label: "React hooks (useState, useContext)"
90 description: "Built-in React state"
91 - label: "Zustand"
92 description: "Lightweight global state"
93 - label: "Redux/RTK"
94 description: "Full Redux toolkit"
95 - label: "Server state (React Query/SWR)"
96 description: "Remote data fetching"
97 - label: "Not sure / recommend"
98 description: "I'll suggest based on needs"
99```
100
101---
102
103## When to Use
104
105- React applications (hooks, components, state)
106- Node.js backends (Express, Fastify)
107- Next.js full-stack applications
108- TypeScript strict mode and patterns
109- Modern JavaScript (ES2024+)
110- Bun runtime
111
112## Methodologies
113
114| Category | Methodology | File |
115|----------|-------------|------|
116| **React** |
117| Component architecture | React component patterns, composition | react-component-architecture.md |
118| React hooks | useState, useEffect, custom hooks | react-hooks.md |
119| React patterns | Modern React patterns, best practices | react-patterns.md |
120| React decomposition | Breaking down React apps | decomposition-react.md |
121| **Next.js** |
122| Next.js App Router | App router, server components, routing | nextjs-app-router.md |
123| **Node.js** |
124| Node.js Express | Express.js patterns, middleware | nodejs-express.md |
125| Node.js Fastify | Fastify framework, plugins, hooks | nodejs-fastify.md |
126| Node.js patterns | Async patterns, error handling | nodejs-patterns.md |
127| Node.js service layer | Service layer architecture | nodejs-service-layer-architecture.md |
128| Node.js service implementation | Service layer implementation | nodejs-service-layer-implementation.md |
129| **TypeScript** |
130| TypeScript patterns | TS best practices, generics | typescript-patterns.md |
131| TypeScript strict mode | Strict configuration, type safety | typescript-strict-mode.md |
132| TypeScript React 2026 | TS 5.x + React 19 + Next.js 15 | typescript-react-2026.md |
133| **JavaScript** |
134| JavaScript basics | ES6+, async/await, modules | javascript.md |
135| JavaScript modern | ES2024+ features, modern patterns | javascript-modern.md |
136| JavaScript testing | Jest, Vitest patterns | javascript-testing.md |
137| **Runtime** |
138| Bun runtime | Bun.js patterns, performance | bun-runtime.md |
139| Bun simple | Quick Bun reference | bun-runtime-simple.md |
140
141## Tools
142
143- **Frameworks:** React 19, Next.js 15, Express, Fastify
144- **Runtime:** Node.js 20+, Bun 1.x
145- **Testing:** Jest, Vitest, React Testing Library
146- **Bundlers:** Vite, Turbopack, webpack
147- **Package managers:** pnpm, npm, yarn, bun
148
149## Related Sub-Skills
150
151| Sub-skill | Relationship |
152|-----------|--------------|
153| faion-frontend-developer | UI components, styling |
154| faion-api-developer | API design and integration |
155| faion-testing-developer | Testing strategies |
156| faion-devtools-developer | Build tools, monorepos |
157
158## Integration
159
160Invoked by parent skill `faion-software-developer` when working with JavaScript/TypeScript code.
161
162---
163
164*faion-javascript-developer v1.0 | 18 methodologies*
majiayu000