본문으로 건너뛰기
cccskills
무료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(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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:

  1. Hero or top summary
  2. KPI or key actions
  3. detail cards or supporting modules
  4. 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:

  1. The page scaffold
  2. The chosen section structure
  3. Reused components and any newly required components
  4. 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.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

skillmds/skillmd2492026년 10월 14일 업데이트

adp

무료

Redpanda's Agentic Data Plane: governance infrastructure for building, running, and governing AI agents and MCP servers, plus a proxying AI Gateway for LLM providers, operated via `rpk ai` and the ADP API. Use when creating or managing AI agents (managed or self-managed) via `rpk ai agent` or `AgentRegistryService`; configuring MCP servers (remote or managed catalog, code mode, auth); setting up LLM providers or querying models via `rpk ai llm`/`rpk ai model` or the AI Gateway proxy; or configuring budgets, guardrails, or Cedar access-control policies through the governance APIs. Also covers reading agent transcripts and spending insights, and wiring OAuth clients or providers to the aigw Authorization Server. For the separate rpk cloud mcp control-plane MCP server, see `/redpanda:rpk-cloud`.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

skillmds/skillmd2492026년 10월 14일 업데이트

ads

무료

Operate professional paid advertising across Google, Meta, YouTube, LinkedIn, TikTok, Microsoft, Apple, Amazon, Reddit, Pinterest, Snapchat, and X. Use for account intake, source-grounded audits, strategy, budget and measurement planning, creative production, experiments, reporting, monitoring, and explicitly approved campaign changes. Also trigger on PPC, paid social, retail media, attribution, tracking, landing pages, cross-platform conversion totals, negative keywords or search terms, beta-feature scoring, stale platform claims, API-token or credential setup, campaign deletion, and safe Claude Ads installation or uninstall.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

skillmds/skillmd2492026년 10월 14일 업데이트

ads-apple

무료

Audit Apple Ads measurement, AdServices and AdAttributionKit, campaign and keyword structure, Search Match, App Store placements, custom product pages, bidding, budgets, MMP reconciliation, and policy. Use for Apple Ads, Apple Search Ads, App Store ads, Search Match, custom product pages, AdServices, or Apple app-install campaigns.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

skillmds/skillmd2492026년 10월 14일 업데이트

ads-competitor

무료

Research competitor paid-ad presence, messaging, creative, formats, landing pages, keyword and auction signals, transparent ad libraries, and strategic gaps across supported platforms. Use for competitor ads, ad libraries, ad spy, competitive PPC analysis, competitor creative, Google Ads Transparency, Meta Ad Library, or paid-media competitor research.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

skillmds/skillmd2492026년 10월 14일 업데이트

ads-dna

무료

Extract a public-safe brand and offer profile for paid advertising from an authorized website and operator input. Triggers on: brand DNA, brand profile, brand identity, brand style, brand colors, brand voice, visual identity, style guide, website brand analysis.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

skillmds/skillmd2492026년 10월 14일 업데이트

skillmds의 스킬 모두 보기

이 스킬의 문제 신고