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

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

layout-patterns

Étoiles3

Forks0

Mis à jour21 avril 2026 à 10:45

App shell, sidebar, header, adaptive content width, focus mode, error boundary. Load when creating pages or modifying layout.

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

nghyane

nghyane/VSTEP

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	layout-patterns
description	App shell, sidebar, header, adaptive content width, focus mode, error boundary. Load when creating pages or modifying layout.

Layout Patterns

App shell

src/routes/_app.tsx — sidebar + outlet, auth guard via useEffect
Sidebar: src/components/Sidebar.tsx — 260px fixed, icon alignment via w-8 h-6 container
Header: src/components/Header.tsx — page title + gem/streak/avatar + ProfileDropdown

Content width

Dashboard: full width
Reading/form: max-w-3xl or max-w-2xl
Focus mode: max-w-lg centered

Focus mode

Layout route: src/routes/_focused.tsx — no sidebar, no header
Shared components: FocusBar (progress + close), FocusComplete, FocusEmpty
BackLink type for navigation props
Used for: flashcard SRS, exercises, exams

Plus depuis ce dépôt

même dépôt

ui-design-system

nghyane/VSTEP

Project UI design system — read this before building any page or component. Defines visual style, color tokens, typography, and constraints.

2026-06-013

design-system

nghyane/VSTEP

Design tokens, Tailwind classes, card patterns, spacing, colors, radius, typography, gamification patterns (Duolingo). Load when working on UI, components, styling.

2026-06-013

refactor

nghyane/VSTEP

Phân tích và refactor codebase. Load khi cần review code structure, tìm vấn đề thiết kế, tách component, dọn dead code.

2026-06-013

rfc

nghyane/VSTEP

Tạo, cập nhật, hoặc implement RFC cho frontend-v2. Use when user says 'tạo rfc', 'viết rfc', 'implement rfc', 'update rfc', 'rfc status', or when a cross-cutting UI/UX change needs formal spec before coding.

2026-06-013

tanstack-query

nghyane/VSTEP

TanStack Query patterns, data fetching, cache invalidation, route loaders. Load when working with server state, queries, mutations.

2026-06-013

typescript

nghyane/VSTEP

TypeScript patterns, type conventions, naming, code style. Load when writing complex types, reviewing code style, or refactoring.

2026-06-013

name	layout-patterns
description	App shell, sidebar, header, adaptive content width, focus mode, error boundary. Load when creating pages or modifying layout.

Layout Patterns

App shell

src/routes/_app.tsx — sidebar + outlet, auth guard via useEffect
Sidebar: src/components/Sidebar.tsx — 260px fixed, icon alignment via w-8 h-6 container
Header: src/components/Header.tsx — page title + gem/streak/avatar + ProfileDropdown

Content width

Dashboard: full width
Reading/form: max-w-3xl or max-w-2xl
Focus mode: max-w-lg centered

Focus mode

Layout route: src/routes/_focused.tsx — no sidebar, no header
Shared components: FocusBar (progress + close), FocusComplete, FocusEmpty
BackLink type for navigation props
Used for: flashcard SRS, exercises, exams