ui-page

Generates mobile-first page scaffolds with Toss layout and shell components.

Updated Apr 22, 2026

Search Tags:#ui #mobile-first #design-patterns #component-reuse #toss #page-scaffold #styleseed

Ready to run

npx skills add https://github.com/anonymouswhite07/Portfolio-v1 --skill ui-page

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-page
Source: https://github.com/anonymouswhite07/Portfolio-v1/tree/main/.agents/skills/ui-page
Command: npx skills add https://github.com/anonymouswhite07/Portfolio-v1 --skill ui-page

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Helps designers and developers bootstrap consistent mobile-first pages by leveraging StyleSeed Toss patterns, ensuring a unified shell, rhythm, and navigation across apps.

Core Features & Use Cases

Automated page scaffolding that adheres to Toss layout rules (shell, top bar, bottom navigation, card rhythm)
Reuse of existing ui/ and patterns/ components to maintain consistency
Use cases include creating new product screens, onboarding flows, or feature pages that require a cohesive starting point

Quick Start

Create a new Toss-enabled page scaffold by specifying the route and ensuring the shell components are wired

Frequently Asked Questions about ui-page

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I scaffold a mobile-first page that matches Toss design patterns?▼

To scaffold a mobile-first page that matches Toss design patterns, you specify the route name, hero placement, and KPI inputs. The tool then generates a page scaffold conforming to the Toss seed layout, reusing existing shell and navigation components.

What is the best way to ensure consistent spacing and safe-area insets across new Toss-based app screens?▼

Consistent spacing and safe-area insets across Toss-based app screens are ensured by validating responsive behavior during the page scaffolding process. The generated layout automatically enforces the Toss seed rhythm, shell structure, and component spacing rules.

Can I reuse existing ui/ and patterns/ components when creating a new product screen?▼

Yes, you can reuse existing ui/ and patterns/ components when creating a new product screen. The scaffolding process integrates these pre-existing blocks directly into the layout to maintain visual consistency and navigation rhythm across product flows.

Does ui-page work with existing StyleSeed Toss shells for onboarding flows?▼

Yes, ui-page works with existing StyleSeed Toss shells for onboarding flows. It leverages the established shell, top bar, and bottom navigation components to generate a cohesive starting point for new feature pages.

What inputs do I need to provide to generate a Toss seed layout scaffold?▼

To generate a Toss seed layout scaffold, you need to provide inputs for route naming, hero placement, and KPI placement. These parameters ensure the resulting page scaffold aligns with the required shell and responsive layout rules.