Design e Frontend

Codex architecture consulting. Use when: designing features, evaluating architecture, getting second opinion on design. Not for: implementation (use codex-implement), code review (use codex-code-review). Output: architecture advice + design recommendations.

Tech spec generation and review. Use when: designing features, writing specs, spec review. Not for: requirements analysis (use req-analyze), implementation (use feature-dev), architecture advice (use codex-architect). Output: numbered tech spec document.

Decomposes vague, high-level project requirements into well-scoped planning units for /deep-plan. Use when starting a new project that needs to be broken into manageable pieces.

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

Hotwire Turbo para Symfony UX oferece velocidade de SPA sem JavaScript, abrangendo navegação de página inteira (Drive), seções parciais (Frames) e atualizações multi-alvo (Streams). É ideal para navegação AJAX, carregamento preguiçoso, edição inline e atualizações em tempo real.

Structured content modeling guidance for schema design, content architecture, content reuse, references versus embedded objects, separation of concerns, and taxonomies across Sanity and other headless CMSes. Use this skill when designing or refactoring content types, deciding field shapes, debating reusable versus nested content, planning omnichannel content models, or reviewing whether a schema i

Sanity development best practices for schema design, GROQ queries, TypeGen, Visual Editing, images, Portable Text, Studio structure, localization, migrations, Sanity Functions, Blueprints, and framework integrations such as Next.js, Nuxt, Astro, Remix, SvelteKit, Angular, Hydrogen, and the App SDK. Use this skill whenever working with Sanity schemas, defineType or defineField, GROQ or defineQuery,

Symfony UX Icons renderiza ícones SVG em templates Twig, suportando mais de 200.000 ícones Iconify, arquivos SVG locais e conjuntos de ícones personalizados. Use para exibir, configurar, importar, criar apelidos e estilizar ícones com CSS.

Symfony UX Map oferece mapas interativos com Leaflet ou Google Maps, cobrindo marcadores, formas, janelas de informação e integração com LiveComponent para funcionalidades reativas. É ideal para exibir mapas, desenhar rotas, lidar com eventos e criar localizadores de lojas.

Render and serialize Portable Text to React, Svelte, Vue, Astro, HTML, Markdown, and plain text. Use when implementing Portable Text rendering in any frontend framework, building custom serializers for non-standard block types, converting Portable Text to HTML strings server-side, converting Portable Text to Markdown, extracting plain text from Portable Text, or troubleshooting rendering issues wi

Content experimentation and A/B testing guidance covering experiment design, hypotheses, metrics, sample size, statistical foundations, CMS-managed variants, and common analysis pitfalls. Use this skill when planning experiments, setting up variants, choosing success metrics, interpreting statistical results, or building experimentation workflows in a CMS or frontend stack.

Symfony UX LiveComponent para UI reativa renderizada no servidor, com componentes que se re-renderizam via AJAX na interação do usuário, sem necessidade de JavaScript. Ideal para busca em tempo real, filtragem, formulários dinâmicos, validação, selects dependentes e outras UIs que se atualizam com a entrada do usuário.