Run any Skill in Manus with one click

web-platform-standards

Stars1

Forks0

UpdatedJune 25, 2026 at 15:05

Standard operating guidelines for Hora web projects (Next.js, Tailwind v4, TypeScript), covering layout responsive flow, glassmorphism, dynamic theme variables, and parity validations.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

aarshps

aarshps/hora-core

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

name	web-platform-standards
description	Standard operating guidelines for Hora web projects (Next.js, Tailwind v4, TypeScript), covering layout responsive flow, glassmorphism, dynamic theme variables, and parity validations.

Web Platform Standards

Every Hora web project (Next.js App Router, Tailwind CSS v4, TypeScript) must satisfy the following guidelines to guarantee a premium, responsive, and platform-aligned user experience.

1. Responsive & Fluid Layouts

Mobile-first Design: Design target is a clean, premium mobile application. Maximum content width is capped at max-w-md (or centered container on wider screens) to maintain app-like density.
Header & Navigation: Headers must scroll with content, but primary navigation controls/actions (e.g. Floating Action Buttons or navigation bars) must be pinned or structured naturally within the fluid frame.
Glassmorphism & Surface radiuses: Use the standard CSS variables (--radius-large, --radius-pill) for cards, item groups, and buttons to keep in step with the Android/iOS layouts.

2. Theming & Color Palette

M3 Palette Seeding: Seeds the Material 3 tonal palette from the app's brand icon color using the Material Color Utilities (SchemeTonalSpot). Do not use browser-level dynamic wallpaper colors.
Dark Mode Support: All interactive elements must support light and dark mode toggles cleanly. Always bind theme attributes on the :root element (data-theme="light" or data-theme="dark").
Native Color Schemes: Set color-scheme property in CSS so native browser controls (pickers, scrollbars, dialogs) render using the correct light/dark theme color.

3. Parity & Validation Rules

Golden Parity Testing: Every web project must consume the shared golden-vectors.json vectors to assert correctness of:
- Recurrence unit arithmetic (clamping at month boundaries).
- Indian-influenced currency formatting and suffix abbreviations (compactFormat).
Persistence Mirroring: Mirror all transaction writes to the authoritative nested subcollection AND the flat mirror payments collection for performant read lookups (exactly like Android and iOS clients).

More from this repository

same repository

hora-launcher-icon

aarshps/hora-core

Generate ALL Hora-family app icons AND brand-mark wide cards (Android launcher + notification, iOS, web, Play feature graphic, web OG/social image, GitHub repo social preview) from the shared Baloo Chettan 2 wordmark engine in hora-core. Use when creating or refining any Hora app's icons or brand marks, on any surface.

2026-07-041

hora-repo-map

aarshps/hora-core

Use for a fast map of hora-core to decide where shared-across-the-family work belongs (brand, conventions, agent skills) versus an individual app's repo.

2026-07-041

hora-play-store

aarshps/hora-core

Publish and manage a "Hora"-family Android app on Google Play — store listing, the App Signing SHA that makes Google Sign-In work for testers, the store icon, and track promotion. Use for Play Console / closed-testing tasks, "testers can't sign in", or store-icon work.

2026-07-041

splash-and-home-standards

aarshps/hora-core

The Hora-family splash screen and Home screen anatomy — identical structure across Android, iOS, and web for every family app (reference — Varisankya/Pathivu). Settings has its own skill (settings-page-standards).

2026-07-021

shared-android-source

aarshps/hora-core

Consume the Hora-family shared Android source (ChipHelper, ThemeHelper, AnimationHelper, design tokens) from hora-core/shared/android via sync_shared_android.sh — don't reimplement or hand-edit the generated copies.

2026-06-251

hora-agent-scope

aarshps/hora-core

Defines which repos each Hora app agent is permitted to read and write. NON-NEGOTIABLE — set by the repo owner; applies to every agent in every session.

2026-06-251

name	web-platform-standards
description	Standard operating guidelines for Hora web projects (Next.js, Tailwind v4, TypeScript), covering layout responsive flow, glassmorphism, dynamic theme variables, and parity validations.

Web Platform Standards

Every Hora web project (Next.js App Router, Tailwind CSS v4, TypeScript) must satisfy the following guidelines to guarantee a premium, responsive, and platform-aligned user experience.

1. Responsive & Fluid Layouts

Mobile-first Design: Design target is a clean, premium mobile application. Maximum content width is capped at max-w-md (or centered container on wider screens) to maintain app-like density.
Header & Navigation: Headers must scroll with content, but primary navigation controls/actions (e.g. Floating Action Buttons or navigation bars) must be pinned or structured naturally within the fluid frame.
Glassmorphism & Surface radiuses: Use the standard CSS variables (--radius-large, --radius-pill) for cards, item groups, and buttons to keep in step with the Android/iOS layouts.

2. Theming & Color Palette

M3 Palette Seeding: Seeds the Material 3 tonal palette from the app's brand icon color using the Material Color Utilities (SchemeTonalSpot). Do not use browser-level dynamic wallpaper colors.
Dark Mode Support: All interactive elements must support light and dark mode toggles cleanly. Always bind theme attributes on the :root element (data-theme="light" or data-theme="dark").
Native Color Schemes: Set color-scheme property in CSS so native browser controls (pickers, scrollbars, dialogs) render using the correct light/dark theme color.

3. Parity & Validation Rules

Golden Parity Testing: Every web project must consume the shared golden-vectors.json vectors to assert correctness of:
- Recurrence unit arithmetic (clamping at month boundaries).
- Indian-influenced currency formatting and suffix abbreviations (compactFormat).
Persistence Mirroring: Mirror all transaction writes to the authoritative nested subcollection AND the flat mirror payments collection for performant read lookups (exactly like Android and iOS clients).