skills.rest
call1800messiah
call1800messiahCOMMUNITY
Explore all skills by this author →
GitHub

architect

Plan UI/UX flows and navigation with Mermaid diagrams.

Updated May 23, 2020
Search Tags:#planning#architecture#interfaces#mermaid#diagrams#uiux#bom
One-click install
npx skills add https://github.com/call1800messiah/The-Eighth --skill architect-call1800messiah
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architect
Source: https://github.com/call1800messiah/The-Eighth/tree/main/.claude/skills/architect
Command: npx skills add https://github.com/call1800messiah/The-Eighth --skill architect-call1800messiah

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Plan and design UI/UX flows and navigation with Mermaid diagrams to communicate architecture clearly and align teams on user journeys.

Core Features & Use Cases

  • Mermaid-based journey mappings for user flows and navigation
  • BOM-like planning for materials, dependencies, and components
  • Interface design contracts (GraphQL, services, and components) to guide implementation

Quick Start

Provide a complete UI/UX architecture plan and Mermaid diagrams for the new feature.

Frequently Asked Questions about architect

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

FAQPage Schema
How do I create UI/UX flow diagrams for product planning?▼

You create UI/UX flow diagrams by mapping user journeys and navigation paths into Mermaid diagrams, which structures visual documentation for product teams and ensures clear communication of interface designs.

What is the best way to document interface contracts for web and mobile apps?▼

The best way to document interface contracts is by defining GraphQL services and component agreements within Mermaid diagrams, which establishes traceable design decisions and structured documentation for implementation.

Can I plan dependencies and components using a BOM for software features?▼

Yes, you can plan dependencies and components using a BOM-like structure, which catalogs materials and services needed for feature planning and outputs structured architecture documentation for your team.

Does Mermaid work for mapping user journeys across product teams?▼

Mermaid works for mapping user journeys by generating diagram-driven communication that aligns product teams, allowing you to visually document navigation flows and traceable design decisions for new features.

How do I structure architecture plans for new features?▼

You structure architecture plans by combining Mermaid-based journey mappings with interface design contracts and BOM planning, which delivers a complete UI/UX architecture plan with traceable design decisions.

When do I need diagram-driven communication for UI/UX navigation?▼

You need diagram-driven communication when aligning teams on user journeys and interface contracts, as Mermaid diagrams provide structured documentation that makes complex web and mobile app navigation flows traceable and clear.

Related Skills

Explore More Software Engineering Skills→
yunusgungoryunusgungor

app-planner

Plan new macOS applications and audit existing projects with comprehensive documentation.

Community
Intermediate
k-negishik-negishi
1

functional-design

Convert PRDs into functional design documents with Mermaid diagrams and data models.

Community
Advanced
angryracoonangryracoon

mobile-platform-offline-validate

Review Lightning Web Components for mobile offline priming blockers.

Community
Intermediate
LamseyahEliasLamseyahElias

architecture-diagram

Generate standalone HTML architecture diagrams with inline SVG.

Community
Intermediate