ai-spec-driven-development-template-rails

Orquestra a criação ou atualização do protótipo visual (telas/wireframes) de uma feature a partir do PRD existente. Gera um único arquivo `ai-sdd/prd-[slug]/design.md` por feature. Paper-first: tenta usar o Paper Desktop (via MCP) chamando design-in-paper, que registra cada tela com seu Paper artboard ID. Fallback agnóstico: se o Paper não estiver disponível ou o usuário preferir outra ferramenta (Figma, Sketch, screenshots, descrição textual), registra as telas com referências externas no mesmo design.md. Detecta automaticamente criação (sem design.md) vs edição (design.md existe). Use quando o usuário pedir "criar o design", "criar protótipo", "wireframe da feature", "atualizar design", "/cria-design [feature-slug]". Posição no pipeline: após cria-prd, antes de cria-techspec. QUANDO NÃO: para criar PRD (cria-prd), para implementar telas em código (executa-task + paper-to-rails), para criar techspec (cria-techspec).

Converte PRD e Tech Spec em uma lista detalhada e sequencial de tarefas de implementação. Cada tarefa é um entregável funcional e incremental com sua própria suíte de testes. Gera tasks.md (resumo) e arquivos de tarefas individuais com subtarefas, critérios de sucesso e testes. Use quando o usuário solicitar criar tarefas, decompor trabalho ou planejar implementação a partir de PRD e Tech Spec existentes. Não use para criação de PRD, criação de tech spec ou implementação real de código.

Cria Especificações Técnicas a partir de um PRD existente, traduzindo requisitos de produto em decisões arquiteturais e orientação de implementação. Realiza análise profunda do projeto, pesquisa técnica, pesquisa regras de negócio e esclarecimento com o usuário. Use quando o usuário solicitar criar uma spec técnica, definir arquitetura ou planejar implementação de uma funcionalidade com PRD existente. Não use para criação de PRD, detalhamento de tarefas ou implementação direta de código.

Cria ou atualiza wireframes e designs de UI no Paper (paper.design) a partir de um PRD existente. Gera artboards estruturados e Rails-ready (flex layouts, tokens do design system, conteúdo real) para revisão humana antes da techspec. REQUER: Paper Desktop app rodando + MCP Paper configurado no editor. Use quando o usuário pedir "crie o design no Paper", "wireframe no Paper", "gere os artboards", "monte a UI no Paper a partir do PRD". QUANDO NÃO: Use sem Paper disponível. Para converter design em código Rails (ver paper-to-rails). Para criar o PRD (ver cria-prd). PRÉ-REQUISITO NO PIPELINE AI-SDD: após cria-prd, antes de cria-techspec.

Implementa tarefas de funcionalidades lendo o contexto do PRD/TechSpec, analisando dependências, executando a implementação com testes e verificações de qualidade. Marca as tarefas como concluídas em tasks.md e aciona revisão ao finalizar. Use quando o usuário solicitar implementar uma tarefa, executar uma tarefa ou começar a trabalhar em um número de tarefa específico. Não use para criar tarefas, rodar QA, revisão de código ou correção de bugs avulsos.

Converte designs do Paper (paper.design) em código Rails idiomático: views ERB, partials, helpers, layouts e i18n. Lê o design via Paper MCP (get_jsx, get_computed_styles, get_screenshot) e produz código Rails seguindo os padrões do projeto (Tailwind CSS v4, Hotwire, Stimulus). REQUER: Paper Desktop app rodando + MCP Paper configurado no editor. Use quando o usuário pedir "implemente o design do Paper", "converta esse artboard em Rails", "gere o código a partir do Paper". Pode ser invocada diretamente ou pela skill executa-task quando a task tem referências de artboards Paper em seu arquivo de task ou em design.md. QUANDO NÃO: Use sem Paper disponível. Para criar designs no Paper (ver design-in-paper).

Implementa animações CSS e micro-interações para projetos Rails com Turbo. Garante que transições e animações funcionem corretamente com Turbo Drive (sem quebrar na navegação), Turbo Frames e Turbo Morph. Use quando precisar adicionar animações, transições de página, skeleton loaders, estados de loading, hover effects ou micro-interações em views Rails. Palavras-chave: "adicionar animação", "transição", "loading", "skeleton", "hover effect", "micro-interação", "fade", "slide", "animação suave". QUANDO NÃO: Para interatividade complexa com JS (ver stimulus-patterns) ou atualizações reativas do servidor (ver turbo-patterns).

Cria componentes de UI reutilizáveis e Rails-idiomáticos: partials ERB, helpers de classe, layouts aninhados e slots com content_for/yield. Use quando precisar criar, extrair ou organizar componentes de interface em um projeto Rails — botões, cards, navbars, sidebars, modais, formulários, empty states e afins. Palavras-chave: "crie um componente", "partial reutilizável", "botão", "card", "navbar", "sidebar", "modal", "formulário", "layout". QUANDO NÃO: Para animações (ver rails-animations), design tokens (ver tailwind-design-system) ou interatividade JS (ver stimulus-patterns).

Cria interfaces visuais premium, lindas e funcionais para projetos Rails 8. Orquestra o fluxo completo: design system → layout → componentes → interatividade. Use quando o usuário pedir para criar, redesenhar ou melhorar a UI de qualquer página, feature ou layout em um projeto Rails com Tailwind + Hotwire. Palavras-chave: "crie uma UI", "faça um design", "visual premium", "melhore o layout", "crie a tela de", "quero uma interface bonita". QUANDO NÃO: Para lógica de backend, migrações, models ou controllers sem UI.

Cria e mantém o design system com Tailwind CSS v4 para projetos Rails. Estabelece tokens de design (cores, tipografia, espaçamento, sombras) via CSS Variables no application.css. Use quando precisar definir ou atualizar a identidade visual do projeto, escolher uma paleta, configurar fontes ou criar um sistema de design consistente. Palavras-chave: "paleta de cores", "tipografia", "design tokens", "tema", "identidade visual", "configurar Tailwind", "criar design system". QUANDO NÃO: Para componentes específicos (ver rails-components) ou animações (ver rails-animations).

Referência completa do MCP Paper (paper.design). Documenta todas as 20 tools disponíveis, seus parâmetros, valores de retorno, padrões de uso, workflows compostos, troubleshooting e boas práticas. Use esta skill sempre que precisar interagir com o Paper Desktop via MCP — leitura de designs, criação de artboards, manipulação de nós, export de JSX/CSS/imagens. REQUER: Paper Desktop app rodando localmente (inicia o MCP server automaticamente). Use quando: qualquer interação com o Paper MCP for necessária. QUANDO NÃO: para lógica pura de Rails sem Paper (ver outras skills). RELAÇÃO: esta skill é referenciada por design-in-paper e paper-to-rails.

Cria Documentos de Requisitos de Produto (PRDs) a partir de solicitações de funcionalidades seguindo um fluxo estruturado de esclarecimento, planejamento e redação. Gera um PRD padronizado usando template, focado no O QUE e PORQUÊ. Use quando o usuário solicitar criar um PRD, definir requisitos ou documentar uma nova funcionalidade. Não use para especificações técnicas, detalhamento de tarefas ou planejamento de implementação.

Cria o documento product_map.md descrevendo os principais fluxos do sistema do ponto de vista do usuário. Mapeia jornadas completas (começo → meio → fim) organizadas por tipo de usuário. Use após definir a visão do produto (vision.md). Não use para planejamento técnico, implementação ou definição de requisitos detalhados.

Cria o documento roadmap.md organizando a ordem de implementação das funcionalidades em fases incrementais com base no product_map e na vision. Define prioridades, dependências e critérios de priorização. Use após criar o product_map. Não use para descrever fluxos de usuário, requisitos detalhados ou especificações técnicas.

Cria o documento de visão do produto (vision.md) a partir de uma ideia ou problema. Define propósito, público-alvo e proposta de valor do sistema. Use no início de um projeto ou quando houver necessidade de redefinir a direção do produto. Não use para definir funcionalidades detalhadas ou requisitos técnicos.

Realiza revisão de código de uma funcionalidade completa (PRD), verificando todas as tarefas, aderência à Tech Spec, qualidade de código e testes. Publica comentários inline nas linhas problemáticas e um parecer final resumido diretamente no Pull Request via GitHub MCP. Use quando o usuário fornecer um número de PR para revisão. Não use para testes de QA, correção de bugs ou implementação de tarefas.