원클릭으로 Manus에서 모든 스킬 실행

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 저장소 열기 Creator 저장소 보기

다운로드

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