Shape UI screens into low-fidelity plans with ASCII layouts and state matrices.
npx skills add https://github.com/Nweremizu/ekklesia --skill shape-nweremizu
Please help me install this Agent Skill. Skill: shape Source: https://github.com/Nweremizu/ekklesia/tree/main/.junie/skills/shape Command: npx skills add https://github.com/Nweremizu/ekklesia --skill shape-nweremizu
This Skill prevents teams from jumping straight into polished UI code before the product shape is clear, reducing generic layouts, missing states, and ambiguous requirements.
Ask me to shape the target screen so I can produce the content inventory, ASCII desktop and mobile layouts, state list, and open questions before any code is written.
High-intent search queries and answers about installing and using this skill.
To plan a UI layout before coding, generate a low-fidelity screen plan that includes prioritized content lists, ASCII desktop and mobile layouts, and a state matrix to clarify the product shape.
Wireframing an ambiguous brief requires defining the primary action, inventorying content by priority, and mapping loading and empty states to surface unresolved decisions before implementation.
Map UI states by creating a state matrix that explicitly calls out loading, empty, error, and other important conditions while surfacing open questions to resolve before coding begins.
Yes, you can produce markdown-first artifacts featuring both ASCII desktop and mobile layouts to visualize layout regions and structure content before any visual design work starts.
No design software is needed to create a low-fidelity screen plan because the output is a markdown-first artifact with ASCII layouts, requiring only a text editor to define content and states.
Creating a content inventory before building a UI ensures the screen structure reflects what must be seen first, reducing generic layouts and ambiguous requirements during product discovery.
GlourTransform raw ideas into structured plans through guided dialogue.
seb1nGenerate text-based wireframes with component inventories and responsive specifications.
KyaniteLabsStandardize loading, empty, and error states for frontend data regions.
SebKayImplement website UIs from mockups with utility-first CSS.
