← Voltar para o catálogo
Design user flows and navigation structure following proven UX patterns
Ver no GitHub ↗
Licença: MIT
Como adicionar
/plugin marketplace add bitjaru/styleseed
O comando exato pode variar conforme o repositório. Confira o README no GitHub.
Para o autor da skill
Cole no README do seu repo
Mostra que sua skill está catalogada na Skillteca, gera backlink e tráfego rastreável.
[](https://www.skillteca.com.br/skills/ss-flow)
Cria interfaces frontend distintas e de nível de produção com alta qualidade de design, gerando código criativo e polido e design de UI que evita a estética genérica de IA. Use para construir componentes web, páginas e aplicações, ou para estilizar/embelezar UIs web.
Design e Frontend
#ai
#css
por anthropics
Guia para criar servidores MCP (Model Context Protocol) de alta qualidade que permitem que LLMs interajam com serviços externos por meio de ferramentas bem projetadas. Use ao construir servidores MCP para integrar APIs ou serviços externos, seja em Python (FastMCP) ou Node/TypeScript (MCP SDK).
Design e Frontend
#api
#llm
por anthropics
Kit de ferramentas para interagir e testar aplicações web locais usando Playwright. Suporta a verificação de funcionalidades de frontend, depuração de comportamento da UI, captura de screenshots do navegador e visualização de logs do navegador.
Design e Frontend
#test
por anthropics
Conjunto de ferramentas para criar artefatos HTML elaborados e multi-componentes para claude.ai, utilizando tecnologias web frontend modernas (React, Tailwind CSS, shadcn/ui). Use para artefatos complexos que exigem gerenciamento de estado, roteamento ou componentes shadcn/ui, não para artefatos HTML/JSX simples de arquivo único.
Design e Frontend
#ai
#css
por anthropics
Alerta por categoria
1 email curto, só com as skills novas de Design e Frontend. 4 minutos de leitura, sem spam, cancela com 1 clique.
Você confirma o email no primeiro envio. Sem spam. Cancela com 1 clique.
Ler descrição completaRecolher descrição
UX Flow Designer
When NOT to use
- For implementing a single page → use
/ss-page after the flow is settled - For copy on each step → use
/ss-copy after the structure is settled - For information architecture of an entire product — narrow scope to one flow first
- For high-fidelity mockups — this produces a flow map, not pixel-perfect designs
Design a user flow: $0 Description: $ARGUMENTS
Instructions
- Read the design system reference:
CLAUDE.md for component inventoryDESIGN-LANGUAGE.md for layout patterns (sections 13-14, 19-20)components/patterns/ for available building blocks
- Apply these UX principles:
Information Architecture
- Progressive Disclosure: Show only what's needed at each step. Hide complexity behind logical drill-downs.
- Miller's Law: Chunk information into groups of 5-9 items maximum.
- Hick's Law: Minimize choices per screen. Fewer options = faster decisions.
Navigation Patterns
- Hub & Spoke: Dashboard → detail pages → back to dashboard (default for mobile apps)
- Linear Flow: Step 1 → Step 2 → Step 3 (for forms, onboarding, checkout)
- Tab Navigation: 3-5 top-level sections via BottomNav
Screen Flow Rules
- Every flow must have a clear entry point and clear exit point
- Maximum 3 taps to reach any key feature from the home screen
- Back navigation must always be available (except root screens)
- Error states must provide recovery paths (retry, go back, contact support)
- Loading states must use skeleton screens (never spinners in cards)
Page Composition (from DESIGN-LANGUAGE.md)
- Follow the Information Pyramid: Hero → KPI Grid → Details → Lists
- Each screen should answer ONE primary question
- Above the fold: the most important metric or action
- Use the 4 section types: Full Card (A), Grid (B), Carousel (C), Hero (D)
- Output format:
- Flow diagram in ASCII showing screen connections
- Screen inventory listing each screen's purpose and key components
- Edge cases (empty states, errors, loading) for each screen
- Scaffolded pages using
PageShell, TopBar, BottomNav patterns
- Generate the actual page files using
/ss-page conventions.
Compartilhar
X
LinkedIn
