How do I install the Apps Organiclever Www Developing Content skill?

Run npx skillmds@latest add wahidyankf/apps-organiclever-www-developing-content-2 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 Apps Organiclever Www Developing Content safe to use?

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

Which AI agents work with Apps Organiclever Www Developing Content?

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 Apps Organiclever Www Developing Content free to use?

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

Who published Apps Organiclever Www Developing Content?

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

Apps Organiclever Www Developing Content by wahidyankf

Name: Apps Organiclever Www Developing Content
Author: wahidyankf

Apps Organiclever Www Developing Content

Guide for developing organiclever-www, the OrganicLever life journal at www.organiclever.com. Covers feature-context architecture, PGlite local-first storage, Effect TS, XState, Next.js 16 App Router, and Vercel deployment. Essential for development tasks on organiclever-www.

wahidyankf Updated Sep 21, 2026

File contents

organiclever-www Development Skill

Purpose

Guidance for developing and managing organiclever-www — the OrganicLever life journal at www.organiclever.com, a Next.js 16 local-first productivity tracker using PGlite for in-browser storage, organized into feature contexts. Use when developing features, working with PGlite/Effect TS, or configuring Vercel deployment.

Core Concepts and Directory Structure

Next.js 16 App Router app using feature contexts, PGlite local-first storage, Effect TS, and XState. See Core Concepts and Directory Structure for the tech stack and full layout.

Feature-context Architecture

Every feature lives inside one feature context under src/contexts/<bc>/ with strict domain/application/infrastructure/presentation layer rules (ESLint boundaries, error severity). See Feature-context Architecture for layer rules, the feature-adding workflow, and XState placement.

Design System

Uses the OrganicLever warm OKLCH design system — tokens from @open-sharia-enterprise/web-ui-token, components from @open-sharia-enterprise/web-ui. See Design System for token import chain, fonts, dark mode, key tokens, and component usage.

Component Architecture and Next.js App Router Conventions

Components live inside the feature context that owns them, not a global src/components/; src/app/ holds only thin routing wrappers. See Component Architecture and Next.js App Router Conventions for Server vs Client rules and the route structure.

Vercel Deployment

Production branch prod-organiclever-www deploys to www.organiclever.com via Vercel auto-build after force-push from main. See Vercel Deployment for config, process, and why force-push is safe here.

Comparison with Other Apps and Development Commands

Differs from ayokoding-web and ose-web mainly in its feature-context architecture and PGlite storage. See Comparison with Other Apps and Development Commands for the comparison table and Nx/Docker Compose dev workflows.

Common Patterns

See Common Patterns for the pattern for adding a feature to an existing feature context and for using web-ui components.

Content Validation Checklist and Common Mistakes

See Content Validation Checklist and Common Mistakes for the pre-commit checklist and common mistakes (business logic in page files, cross-context imports, missing "use client", direct commits to the prod branch).

Reference Documentation

Project Configuration:

apps/organiclever-www/project.json - Nx project config
apps/organiclever-www/next.config.mjs - Next.js config
apps/organiclever-www/vercel.json - Vercel deployment config

Infrastructure:

infra/dev/organiclever-www/README.md - Docker Compose setup for frontend
infra/dev/organiclever-www/docker-compose.yml - Service definition
infra/dev/organiclever-www/Dockerfile.web.dev - Frontend container image

Related Skills:

repo-practicing-trunk-based-development - Git workflow and branch strategy
swe-programming-typescript - TypeScript coding standards

Related Agents:

apps-organiclever-app-web-deployer - Deploys organiclever-www to production
swe-typescript-dev - TypeScript/Next.js development
swe-e2e-dev - E2E testing with Playwright

This Skill packages essential organiclever-www development knowledge for building and deploying the OrganicLever landing and promotional website at www.organiclever.com.

---name: apps-organiclever-www-developing-content-2description: Guide for developing organiclever-www, the OrganicLever life journal at www.organiclever.com. Covers feature-context architecture, PGlite local-first storage, Effect TS, XState, Next.js 16 App Router, and Vercel deployment. Essential for development tasks on organiclever-www.---# organiclever-www Development Skill## PurposeGuidance for developing and managing **organiclever-www** — the OrganicLever life journal at www.organiclever.com, a Next.js 16 local-first productivity tracker using PGlite for in-browser storage, organized into feature contexts. Use when developing features, working with PGlite/Effect TS, or configuring Vercel deployment.## Core Concepts and Directory StructureNext.js 16 App Router app using feature contexts, PGlite local-first storage, Effect TS, and XState. See [Core Concepts and Directory Structure](./reference/core-concepts-and-directory-structure.md) for the tech stack and full layout.## Feature-context ArchitectureEvery feature lives inside one feature context under `src/contexts/<bc>/` with strict `domain`/`application`/`infrastructure`/`presentation` layer rules (ESLint `boundaries`, error severity). See [Feature-context Architecture](./reference/bounded-context-architecture.md) for layer rules, the feature-adding workflow, and XState placement.## Design SystemUses the OrganicLever warm OKLCH design system — tokens from `@open-sharia-enterprise/web-ui-token`, components from `@open-sharia-enterprise/web-ui`. See [Design System](./reference/design-system.md) for token import chain, fonts, dark mode, key tokens, and component usage.## Component Architecture and Next.js App Router ConventionsComponents live inside the feature context that owns them, not a global `src/components/`; `src/app/` holds only thin routing wrappers. See [Component Architecture and Next.js App Router Conventions](./reference/component-architecture-and-routing.md) for Server vs Client rules and the route structure.## Vercel DeploymentProduction branch `prod-organiclever-www` deploys to www.organiclever.com via Vercel auto-build after force-push from `main`. See [Vercel Deployment](./reference/vercel-deployment.md) for config, process, and why force-push is safe here.## Comparison with Other Apps and Development CommandsDiffers from ayokoding-web and ose-web mainly in its feature-context architecture and PGlite storage. See [Comparison with Other Apps and Development Commands](./reference/comparison-and-development-commands.md) for the comparison table and Nx/Docker Compose dev workflows.## Common PatternsSee [Common Patterns](./reference/common-patterns.md) for the pattern for adding a feature to an existing feature context and for using web-ui components.## Content Validation Checklist and Common MistakesSee [Content Validation Checklist and Common Mistakes](./reference/validation-checklist-and-common-mistakes.md) for the pre-commit checklist and common mistakes (business logic in page files, cross-context imports, missing `"use client"`, direct commits to the prod branch).## Reference Documentation**Project Configuration**:- [apps/organiclever-www/project.json](../../../apps/organiclever-www/project.json) - Nx project config- [apps/organiclever-www/next.config.mjs](../../../apps/organiclever-www/next.config.mjs) - Next.js config- [apps/organiclever-www/vercel.json](../../../apps/organiclever-www/vercel.json) - Vercel deployment config**Infrastructure**:- [infra/dev/organiclever-www/README.md](../../../infra/dev/organiclever-www/README.md) - Docker Compose setup for frontend- [infra/dev/organiclever-www/docker-compose.yml](../../../infra/dev/organiclever-www/docker-compose.yml) - Service definition- [infra/dev/organiclever-www/Dockerfile.web.dev](../../../infra/dev/organiclever-www/Dockerfile.web.dev) - Frontend container image**Related Skills**:- `repo-practicing-trunk-based-development` - Git workflow and branch strategy- `swe-programming-typescript` - TypeScript coding standards**Related Agents**:- `apps-organiclever-app-web-deployer` - Deploys organiclever-www to production- `swe-typescript-dev` - TypeScript/Next.js development- `swe-e2e-dev` - E2E testing with Playwright---This Skill packages essential organiclever-www development knowledge for building and deploying the OrganicLever landing and promotional website at www.organiclever.com.

Frequently asked questions