免费在 GitHub 公开

ui-page

Scaffold a new mobile-first page using StyleSeed Toss layout patterns, section rhythm, and existing shell components.

中文简介正在准备中。当前显示原文说明。

skillmds/skillmd

查看安装方法

包含的文件（1）

SKILL.md3.4 KB

SKILL.md（原文）

安装前可以查看交给 AI 代理的指令内容。

UI Page

Overview

Part of StyleSeed, this skill scaffolds a complete page or screen using the Toss seed's mobile-first composition rules. It keeps page structure consistent by building on the existing shell, top bar, bottom navigation, and card rhythm instead of producing disconnected sections.

When to Use

Use when you need a new page in a Toss-seed app
Use when you want a consistent page shell, spacing, and navigation structure
Use when you are adding a new product flow and need a solid starting layout
Use when you want to stay mobile-first even if the project later expands to larger breakpoints

How It Works

Step 1: Inspect the Existing Shell

Read the current page scaffolding patterns first, especially:

page shell
top bar
bottom navigation
representative pages using the same route family

Step 2: Define the Page Purpose

Clarify:

the page name
the primary user question the screen answers
the top one or two actions the user should take

Every screen should have one dominant purpose.

Step 3: Use the Information Pyramid

Lay out the page from highest importance to lowest:

Hero or top summary
KPI or key actions
detail cards or supporting modules
lists, history, or secondary content

Avoid repeating the same section type mechanically from top to bottom.

Step 4: Apply the Toss Layout Rules

Default layout choices:

mobile viewport width around max-w-[430px]
page background on bg-background
horizontal padding around px-6
section rhythm with space-y-6
generous bottom padding if a bottom nav is present
cards using semantic surface tokens, rounded corners, and light shadows

Step 5: Compose Instead of Rebuilding

Use existing ui/ and patterns/ components wherever possible. New pages should primarily orchestrate existing building blocks, not recreate them.

Step 6: Account for Real Device Constraints

handle safe-area insets
avoid horizontal overflow
keep interactive clusters thumb-friendly
ensure long content scrolls cleanly without clipping the bottom navigation

Output

Return:

The page scaffold
The chosen section structure
Reused components and any newly required components
Empty, loading, and error states that the page will need next

Best Practices

Keep the first version structurally correct before adding decoration
Use one strong hero instead of multiple competing highlights
Preserve navigation consistency across sibling screens
Prefer reusable section components when the page will likely repeat

Additional Resources

Limitations

Use this skill only when the task clearly matches the scope described above.
Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

评价

还没有评价。欢迎分享你的使用感受。

无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

同一仓库的技能

academic-pptx

免费

Use this skill whenever the user wants to create or improve a presentation for an academic context — conference papers, seminar talks, thesis defenses, grant briefings, lab meetings, invited lectures, or any presentation where the audience will evaluate reasoning and evidence. Triggers include: 'conference talk', 'seminar slides', 'thesis defense', 'research presentation', 'academic deck', 'academic presentation'. Also triggers when the user asks to 'make slides' in combination with academic content (e.g., 'make slides for my paper on X', 'create a presentation for my dissertation defense', 'build a deck for my grant proposal'). This skill governs CONTENT and STRUCTURE decisions. For the technical work of creating or editing the .pptx file itself, also read the pptx SKILL.md.

中文简介正在准备中。当前显示原文说明。