# Web Modules

> (ePost) Use when integrating a component into a B2B module — adding screens, binding APIs, wiring stores, setting up routes

- Skill: `majiayu000/web-modules` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/web-modules`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/web-modules/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/web-modules

---


# Module Integration Skill

## Purpose

Patterns for integrating components into B2B modules with proper API binding, state management, routing, and design system compliance.

## Reference Files

| File | Purpose |
|------|---------|
| `references/module-scaffold.md` | File creation order for new features |
| `references/api-binding.md` | Component -> Hook -> Action -> Service pattern |
| `references/store-pattern.md` | Redux Toolkit slice creation |
| `references/routing.md` | Next.js App Router module routing |
| `references/consistency-checklist.md` | Design system compliance checklist |

## Integration Workflow

1. Read `module-scaffold.md` — understand file creation order
2. Create types in `_ui-models/`
3. Create service in `_services/`
4. Create actions in `_actions/`
5. Create hooks in `_hooks/`
6. Create store slice in `_stores/`
7. Create components in `_components/`
8. Wire up in `page.tsx`
9. Run `consistency-checklist.md`

## Related Skills

- `web-prototype` — Converting external code
- `domain-b2b` — Module knowledge
- `web-ui-lib` — Component reference
- `web-nextjs` — App Router patterns