一键在 Manus 中运行任何 Skill

web-platform-standards

星标1

分支0

更新时间2026年6月25日 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.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

aarshps

aarshps/hora-core

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

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

同仓库更多 Skills

同仓库

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