Agent skill

UI Page

by sickn33 in sickn33/agentic-awesome-skills

Scaffold a new mobile page/screen using the StyleSeed layout patterns

MITAuto-check passed

Install UI Page

skills CLI

$ npx skills add sickn33/agentic-awesome-skills --skill ui-page -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install sickn33/agentic-awesome-skills ui-page --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/sickn33/agentic-awesome-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/ui-page .claude/skills/ui-page && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "ui-page" agent skill from https://github.com/sickn33/agentic-awesome-skills/tree/main/skills/ui-page into .claude/skills/ui-page/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-page", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/sickn33/agentic-awesome-skills/tree/main/skills/ui-page

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add sickn33/agentic-awesome-skills --skill ui-page -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install sickn33/agentic-awesome-skills ui-page --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/sickn33/agentic-awesome-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/ui-page .agents/skills/ui-page && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "ui-page" agent skill from https://github.com/sickn33/agentic-awesome-skills/tree/main/skills/ui-page into .agents/skills/ui-page/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-page", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add sickn33/agentic-awesome-skills --skill ui-page -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install sickn33/agentic-awesome-skills ui-page --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/sickn33/agentic-awesome-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/ui-page .cursor/skills/ui-page && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "ui-page" agent skill from https://github.com/sickn33/agentic-awesome-skills/tree/main/skills/ui-page into .cursor/skills/ui-page/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-page", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/sickn33/agentic-awesome-skills.git --path skills/ui-page

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add sickn33/agentic-awesome-skills --skill ui-page -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install sickn33/agentic-awesome-skills ui-page --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/sickn33/agentic-awesome-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/ui-page .gemini/skills/ui-page && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "ui-page" agent skill from https://github.com/sickn33/agentic-awesome-skills/tree/main/skills/ui-page into .gemini/skills/ui-page/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-page", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install sickn33/agentic-awesome-skills ui-page

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add sickn33/agentic-awesome-skills --skill ui-page -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/sickn33/agentic-awesome-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/ui-page .github/skills/ui-page && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "ui-page" agent skill from https://github.com/sickn33/agentic-awesome-skills/tree/main/skills/ui-page into .github/skills/ui-page/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-page", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add sickn33/agentic-awesome-skills --skill ui-page -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install sickn33/agentic-awesome-skills ui-page --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/sickn33/agentic-awesome-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/ui-page .opencode/skills/ui-page && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "ui-page" agent skill from https://github.com/sickn33/agentic-awesome-skills/tree/main/skills/ui-page into .opencode/skills/ui-page/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ui-page", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: ui-page
GitHub stars: 47k
Used in: 1 other repo
Token cost: ~826 tokens
SKILL.md length: 295 words
Files: 1
Skills in repo: 1,493
Repo updated: Oct 9, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Scaffold a new mobile page/screen using the StyleSeed layout patterns

Works in 7 steps: Read the design system reference → Page structure template → Layout rules → …
SKILL.md covers When to Use, When NOT to use, Instructions and Limitations
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

UI Page is an agent skill from sickn33/agentic-awesome-skills. Scaffold a new mobile page/screen using the StyleSeed layout patterns

Its SKILL.md is about 830 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

The repository describes itself as: AAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,400+ agentic skills. Includes… The licence is MIT.

Example prompts

“/ui-page”

Workflow steps

7 steps, taken from the first numbered list in SKILL.md.

Read the design system reference
Page structure template
Layout rules
Use semantic tokens for all colors — never hardcode hex values.
Compose the page from existing components (ui/ and patterns/) wherever possible.
Safe area: include env(safe-area-inset-*) padding for modern devices.
Post-generation verification (MANDATORY)

What it can do on your machine

Read from SKILL.md and the folder at commit 680176d. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

UI Page loads about 826 tokens when it runs. Until then it costs about 19 tokens; SKILL.md has 295 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~19
When it runs · the whole SKILL.md, loaded when a task matches: ~826

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from sickn33/agentic-awesome-skills at commit 680176d, republished under its MIT licence (© sickn33). 295 words, ~826 tokens.

Download SKILL.mdSave it as .claude/skills/ui-page/SKILL.md (or your agent's skills folder).

name: ui-page
description: Scaffold a new mobile page/screen using the StyleSeed layout patterns
risk: critical
source: https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-page
source_repo: bitjaru/styleseed
source_type: community
date_added: 2026-07-01
license: MIT
license_source: https://github.com/bitjaru/styleseed/blob/main/LICENSE

Mobile Page Scaffolder

When to Use

Use this skill when you need scaffold a new mobile page/screen using the StyleSeed layout patterns.

When NOT to use

For a single composed pattern within an existing page → use /ss-pattern
For desktop-only screens — this skill is mobile-first
For multi-page navigation structure → use /ss-flow first
For tweaking an existing page — edit the file directly

Create a new page: $0 Description: $ARGUMENTS

Instructions

Read the design system reference:
- CLAUDE.md for file structure and conventions
- components/patterns/page-shell.tsx for page layout
- components/patterns/top-bar.tsx for header pattern
- components/patterns/bottom-nav.tsx for navigation
Page structure template:

tsx

import { PageShell, PageContent } from "@/components/patterns/page-shell"
import { TopBar, TopBarAction } from "@/components/patterns/top-bar"
import { BottomNav } from "@/components/patterns/bottom-nav"

export default function PageName() {
  return (
    <PageShell>
      <TopBar
        logo={/* logo or page title */}
        subtitle={/* optional subtitle */}
        actions={/* optional action buttons */}
      />
      <PageContent>
        {/* Page sections with space-y-6 */}
      </PageContent>
      <BottomNav items={[/* nav items */]} activeIndex={0} />
    </PageShell>
  )
}

Layout rules:
- Container: max-w-[430px] (mobile viewport)
- Page background: bg-background
- Section horizontal padding: px-6
- Section vertical spacing: space-y-6
- Bottom padding for nav: pb-24
- Cards: bg-card rounded-2xl p-6 shadow-[var(--shadow-card)]
Use semantic tokens for all colors — never hardcode hex values.
Compose the page from existing components (ui/ and patterns/) wherever possible.
Safe area: include env(safe-area-inset-*) padding for modern devices.
Post-generation verification (MANDATORY): After creating the page, verify against the Golden Rules:
- All content is inside cards (no bare background content)
- Only --brand color used for accents (no other accent colors)
- No hardcoded hex values (all semantic tokens)
- Section types alternate (no two identical types in a row)
- Numbers have 2:1 ratio with units
- Spacing uses 6px multiples (p-1.5, p-3, p-6)
- mx-6 for single cards, px-6 for grids/carousels
- Touch targets ≥ 44px on all interactive elements If any violation is found, fix it before presenting the page to the user.

Limitations

Use this skill only when the task clearly matches its upstream source and local project context.
Verify commands, generated code, dependencies, credentials, and external service behavior before applying changes.
Do not treat examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.

Files

Just SKILL.md in skills/ui-page of sickn33/agentic-awesome-skills.

Open the folder on GitHubat commit 680176d

Used in 1 other repository

We found 5 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in sickn33/agentic-awesome-skills, which our catalogue first saw on October 7, 2026.

lingxling/awesome-skills-cnantigravity-awesome-skills/skills/ui-page antigravity-awesome-skills/plugins/agentic-awesome-skills/skills/ui-page+1 more

Compare with similar skills

UI Page next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

UI Page compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
UI Page this skillsickn33/agentic-awesome-skills	47k	1 repos	~826	Automated safety check: Pass	MIT	today
Scaffoldingdotnet/efcore	15k	—	~321	Automated safety check: Pass	MIT	today
Scaffold Elementremotion-dev/remotion	63k	—	~202	Automated safety check: Pass	Custom licence	today
Tabler Page Layoutstabler/tabler	42k	—	~1.5k	Automated safety check: Pass	MIT	today
Scout Create Scaffoldelastic/kibana	21k	—	~1.6k	Automated safety check: Pass	Custom licence	today
Bio Crispr Screens Screen QcFreedomIntelligence/OpenClaw-Medical-Skills	3.1k	—	~2.1k	Automated safety check: Pass	None	2 mo ago

Similar skills

Scaffolding
dotnet/efcore
Official
Implementation details for EF Core scaffolding (reverse engineering).
15k GitHub stars~321 tokensUpdated today
DatabasesAuto-check passed
Scaffold Element
remotion-dev/remotion
Official
Scaffold a new Remotion Element for development in the docs Remotion Studio.
63k GitHub stars~202 tokensUpdated today
Media & CreativeAuto-check passed
Tabler Page Layouts
tabler/tabler
Picks and configures the right layout for a Tabler preview page and covers changing or adding layouts in shared/layouts, including DefaultLayout props and the page-header slot.
42k GitHub stars~1.5k tokensUpdated today
Frontend & DesignAuto-check passed
Scout Create Scaffold
elastic/kibana
Official
Generate or repair a Scout test scaffold for a Kibana plugin/package (test/scout/{api,ui} Playwright configs, fixtures, example specs).
21k GitHub stars~1.6k tokensUpdated today
Testing & QAAuto-check passed
Bio Crispr Screens Screen Qc
FreedomIntelligence/OpenClaw-Medical-Skills
Quality control for pooled CRISPR screens. An agent skill from FreedomIntelligence/OpenClaw-Medical-Skills.
3.1k GitHub stars~2.1k tokensUpdated 2 mo ago
Research & ScienceAuto-check passed
SaaS Scaffolder
alirezarezvani/claude-skills
Generates complete, production-ready SaaS project boilerplate including authentication, database schemas, billing integration, API routes, and a working dashboard using Next.js 14+ App Router…
28k GitHub starsUsed in 1 repo~2.6k tokens
DatabasesAuto-check passed

Questions about UI Page

What does UI Page do?

Scaffold a new mobile page/screen using the StyleSeed layout patterns. UI Page is an agent skill from sickn33/agentic-awesome-skills.

How do I install UI Page in Claude Code?

Run `npx skills add sickn33/agentic-awesome-skills --skill ui-page -a claude-code`. Or copy the skill folder (skills/ui-page in sickn33/agentic-awesome-skills) into .claude/skills/ui-page in your project. Claude Code loads it when a task matches its description.

How do I install UI Page in Codex?

Run `npx skills add sickn33/agentic-awesome-skills --skill ui-page -a codex`. Or copy the skill folder (skills/ui-page in sickn33/agentic-awesome-skills) into .agents/skills/ui-page in your project. Codex loads it when a task matches its description.

Can I use UI Page in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add sickn33/agentic-awesome-skills --skill ui-page -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ui-page, .gemini/skills/ui-page, .github/skills/ui-page and .opencode/skills/ui-page in your project.

What does UI Page need to run?

SKILL.md names no scripts, command-line tools or credentials: UI Page is instructions for the agent only.

Does UI Page access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is UI Page safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does UI Page use?

UI Page is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does UI Page use?

About 826 tokens (SKILL.md is roughly 3.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to UI Page?

Skills that share tags, products or a category with UI Page: Scaffolding (dotnet/efcore, 15k stars), Scaffold Element (remotion-dev/remotion, 63k stars), Tabler Page Layouts (tabler/tabler, 42k stars) and Scout Create Scaffold (elastic/kibana, 21k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains UI Page?

sickn33 (a GitHub user) maintains it in sickn33/agentic-awesome-skills, which has 47,379 GitHub stars. The repository holds 1,493 skills in this directory. The repository was last updated on October 9, 2026.

Source: sickn33/agentic-awesome-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

UI Page

Install UI Page

Facts

At a glance

What it does

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Mobile Page Scaffolder

When to Use

When NOT to use

Instructions

Limitations

Files

Used in 1 other repository

Compare with similar skills

Similar skills

Scaffolding

Scaffold Element

Tabler Page Layouts

Scout Create Scaffold

Bio Crispr Screens Screen Qc

SaaS Scaffolder

More from sickn33/agentic-awesome-skills

Liuguang Banlan UI

User Thoughts Memory

Using LWC Memory and Graphs

Find Complementary Founders

Whatsapp Cloud API

Cline Pilot

Questions about UI Page