How do I install the Codex Web Architecture skill?

Run npx skillmds@latest add welitonevoc/codex-web-architecture in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Codex Web Architecture safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Codex Web Architecture?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Codex Web Architecture free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Codex Web Architecture?

welitonevoc (@welitonevoc) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Codex Web Architecture by welitonevoc

Name: Codex Web Architecture
Rating: 4.2 (5 reviews)
Author: welitonevoc

Codex Web Architecture

Architecture, State Management, and Build patterns for the Biblia Codex React+Capacitor App. Use this when developing new UI components, configuring the build process, managing global state, or writing storage logic. Triggers on Codex, Tailwind 4, Capacitor build, IDB, React 19.

welitonevoc 7858c6a 2.6 KB Updated Sep 8, 2026 1 repo stars

File contents

Biblia Codex - Web/Mobile Architecture

This skill defines the structural patterns, technology stack, and best practices exclusively for the Biblia Codex application (React + Capacitor hybrid).

🛠 Tech Stack

Frontend Core: React 19 (hooks and Context API), TypeScript.
Build Tool: Vite + tsx (for dev server/API).
Styling: Tailwind CSS 4, framer-motion (animations), lucide-react (icons), clsx + tailwind-merge for class utility.
Offline Database & Storage: sql.js (for SQLite modules) and idb (for IndexedDB native app caching).
Mobile Wrapping: Capacitor 6 (Core, Android, Filesystem plugins).

🏗 Architectural Rules

1. State Management (No Redux)

Do NOT introduce external complex state managers like Redux or Zustand unless explicitly requested.
DO use React Context (AppContext.tsx) combined with Hooks (useContext, useReducer, useState) for global states.

2. Styling Patterns (Tailwind 4 + UI Libraries)

Utilize the clsx and tailwind-merge utility for dynamic class names: className={twMerge(clsx("base", dynamicCondition && "active"))}
Component designs must follow the Codex application's unified premium aesthetic (clean contrasts, dark mode support in Tailwind).
For animations, strictly rely on framer-motion properties (initial, animate, exit).

3. File Execution & Scripts

Always prefer Vite native plugins for React (@vitejs/plugin-react).
Android builds rely on: npm run cap:sync and npx cap run android. When adding a new Capacitor plugin, do not forget to document the required Android XML changes (Manifest permissions).

4. Background Processing (SQLite & IDB)

Blobs & WASM: Ensure sql.js initializes with the correct WASM path (usually handled in the public directory).
Heavy database processes like searching through the entire Bible must not block the main JS thread. While idb operations are natively asynchronous, sql.js queries on large module datasets may require splitting work or utilizing WebWorkers/requestAnimationFrame if performance becomes a bottleneck.

🤝 Agent Interaction

mobile-developer / frontend-specialist: Rely on this skill file instead of traditional Android Kotlin documents when modifying the core app UX/UI.

---name: codex-web-architecturedescription: Architecture, State Management, and Build patterns for the Biblia Codex React+Capacitor App. Use this when developing new UI components, configuring the build process, managing global state, or writing storage logic. Triggers on Codex, Tailwind 4, Capacitor build, IDB, React 19.---# Biblia Codex - Web/Mobile Architecture This skill defines the structural patterns, technology stack, and best practices exclusively for the **Biblia Codex** application (React + Capacitor hybrid).## 🛠 Tech Stack1. **Frontend Core:** React 19 (hooks and Context API), TypeScript.2. **Build Tool:** Vite + `tsx` (for dev server/API).3. **Styling:** Tailwind CSS 4, `framer-motion` (animations), `lucide-react` (icons), `clsx` + `tailwind-merge` for class utility.4. **Offline Database & Storage:** `sql.js` (for SQLite modules) and `idb` (for IndexedDB native app caching).5. **Mobile Wrapping:** Capacitor 6 (Core, Android, Filesystem plugins).## 🏗 Architectural Rules### 1. State Management (No Redux)- **Do NOT** introduce external complex state managers like Redux or Zustand unless explicitly requested.- **DO** use React Context (`AppContext.tsx`) combined with Hooks (`useContext`, `useReducer`, `useState`) for global states.### 2. Styling Patterns (Tailwind 4 + UI Libraries)- Utilize the `clsx` and `tailwind-merge` utility for dynamic class names: `className={twMerge(clsx("base", dynamicCondition && "active"))}`- Component designs must follow the Codex application's unified premium aesthetic (clean contrasts, dark mode support in Tailwind).- For animations, strictly rely on `framer-motion` properties (`initial`, `animate`, `exit`).### 3. File Execution & Scripts- Always prefer Vite native plugins for React (`@vitejs/plugin-react`).- Android builds rely on: `npm run cap:sync` and `npx cap run android`. When adding a new Capacitor plugin, do not forget to document the required Android XML changes (Manifest permissions).### 4. Background Processing (SQLite & IDB)- **Blobs & WASM:** Ensure `sql.js` initializes with the correct WASM path (usually handled in the public directory).- Heavy database processes like searching through the entire Bible must not block the main JS thread. While `idb` operations are natively asynchronous, `sql.js` queries on large module datasets may require splitting work or utilizing WebWorkers/`requestAnimationFrame` if performance becomes a bottleneck.## 🤝 Agent Interaction- **mobile-developer / frontend-specialist:** Rely on this skill file instead of traditional Android Kotlin documents when modifying the core app UX/UI.

Frequently asked questions