Exécutez n'importe quel Skill dans Manus
en un clic

Exécutez n'importe quel Skill dans Manus en un clic

web-platform-standards

Étoiles1

Forks0

Mis à jour25 juin 2026 à 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

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Exécuter dans Manus

Source

aarshps

aarshps/hora-core

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Exécuter dans Manus

Métiers associésSOC

Basé sur la classification professionnelle SOC

Développeurs webProfessions informatiques et mathématiques·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).

Plus depuis ce dépôt

même dépôt

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

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).