skills.rest
Sheon-S
Sheon-SCOMMUNITY
Explore all skills by this author →
GitHub

gsd-ui-phase

Plan layout and information hierarchy for Ignition SDK frontend tasks.

Updated Apr 9, 2026
Search Tags:#planning#ui#layout#frontend#shadcn#design-guidance#ignition-sdk
One-click install
npx skills add https://github.com/Sheon-S/ignition-sdk-agent-kit --skill gsd-ui-phase-sheon-s
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsd-ui-phase
Source: https://github.com/Sheon-S/ignition-sdk-agent-kit/tree/main/.agents/skills/gsd-ui-phase
Command: npx skills add https://github.com/Sheon-S/ignition-sdk-agent-kit --skill gsd-ui-phase-sheon-s

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI planning, information hierarchy, layout consistency, spacing rhythm, and shadcn-first page composition guidance for complex frontend work in Ignition SDK modules. Use when tasks add or significantly change pages, panels, settings screens, tables, dialogs, multi-section forms, or other non-trivial UI, especially when layout direction should be decided before implementation or when Stitch MCP may be consulted for layout ideation.

Core Features & Use Cases

  • Lock layout and information hierarchy before implementation.
  • Keep UI consistency across the module.
  • Keep external design ideation constrained to layout-only input.

Quick Start

Plan the layout and UI hierarchy before starting any frontend task.

Frequently Asked Questions about gsd-ui-phase

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

FAQPage Schema
How do I plan UI layout and information hierarchy before coding frontend modules?▼

Plan UI layout by defining information hierarchy and spacing rhythm before implementation. This ensures frontend tasks like pages, panels, and multi-section forms maintain visual consistency and structural alignment across modules prior to writing code.

When do I need to plan layout and spacing rhythm for frontend tasks?▼

Planning layout and spacing rhythm is needed when adding or significantly changing non-trivial UI elements such as settings screens, tables, dialogs, or multi-section forms, ensuring layout direction is decided before implementation begins.

How do I keep UI consistency across complex panels and settings screens?▼

Keep UI consistency across panels and settings screens by locking layout decisions and information hierarchy early. This pre-implementation planning enforces a unified spacing rhythm and structural composition across all module interfaces.

Does this UI planning approach work with shadcn-first page composition?▼

Yes, this UI planning approach works with shadcn-first page composition by ensuring pre-implementation decisions align with shadcn composition principles, maintaining consistent spacing rhythm and layout structure across complex frontend module interfaces.

Can I use this layout planning to constrain external design ideation with Stitch MCP?▼

Yes, you can use this layout planning to constrain external design ideation with Stitch MCP. It keeps external ideation limited to layout-only input, ensuring generated concepts align with your established information hierarchy and spacing rhythm.

What is the best way to structure multi-section forms and tables before implementation?▼

The best way to structure multi-section forms and tables is to define their information hierarchy and layout direction beforehand. This planning phase establishes spacing rhythm and composition rules, preventing structural inconsistencies during implementation.

Related Skills

Explore More Design & Creative Skills→
ydnikolaevydnikolaev
8

idea-interview

Extract project information through structured stakeholder interviews into a discovery brief.

Community
Advanced
samcannassamcannas

arrange

Define and enforce spacing systems and visual hierarchy in UI layouts.

Community
Intermediate
Bloodrey41Bloodrey41

arrange

Adjust page layout, spacing, and visual rhythm in interface grids.

Community
Intermediate
Ayub-KhanAyub-Khan

ui-ux-design

Define scalable UI/UX design systems with tokens for Figma handoff.

Community
Intermediate