skills.rest
anonymouswhite07
anonymouswhite07COMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/anonymouswhite07/Portfolio-v1 --skill ui-page
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
KRISHNA0RKRISHNA0R
25

ui-page

Scaffold mobile-first pages using Toss seed layout patterns and shell components.

Community
Intermediate
hasnaxyzhasnaxyz

react-native

Render JSON UI specs into native React Native mobile interfaces.

Official
Advanced
wlfmnstrwlfmnstr

component-patterns

Design type-safe React component APIs using compound components, render props, and hooks.

Community
Basic
T1nker-1220T1nker-1220

mobile-ui-standards

Enforce mobile-first UI standards with compact spacing and touch-friendly targets.

Community
Basic