CommunityImagemgithub.com

feature-sliced/feature-sliced-design

Habilidade oficial do Feature-Sliced Design (FSD) v2.1 para aplicar a metodologia em projetos frontend.

O que é feature-sliced-design?

Esta habilidade implementa a metodologia Feature-Sliced Design (FSD) v2.1, fornecendo aos agentes de IA um conhecimento profundo sobre organização de projetos frontend baseada em camadas, fatias e segmentos. Ela é útil para qualquer tarefa que envolva estruturar o código de frontend de forma modular e escalável, como decidir onde colocar arquivos de ativos estáticos (imagens, ícones, fontes, PDFs), agrupar fatias relacionadas, definir APIs públicas e limites de importação, resolver problemas de imports circulares ou avaliar o padrão @x, decidir quando criar ou remover uma entidade, ou mesmo se a camada de entidades é necessária. A habilidade suporta uma vasta gama de plataformas e frameworks modernos, incluindo Next.js (App Router e Pages Router), Nuxt, Vite, Astro, e integra padrões comuns como autenticação, manipulação de API, Redux e TanStack Query (React Query). Ela também auxilia em migrações de código herdado para FSD v2.1, seja de versões anteriores ou de bases de código não-FSD, garantindo que o agente forneça orientações precisas sobre arquitetura de frontend.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/feature-sliced/skills/tree/main/skills/feature-sliced-design

Installed? Explore more Imagem skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

O que feature-sliced-design faz?

Habilidade oficial do Feature-Sliced Design (FSD) v2.1 para aplicar a metodologia em projetos frontend. Use quando a tarefa envolver organizar a estrutura do projeto com camadas FSD, decidir onde o código pertence, posicionar ativos estáticos (imagens, ícones, fontes, PDFs), agrupar fatias intimamente relacionadas, definir APIs públicas e limites de importação, resolver imports cruzados ou avaliar o padrão @x, decidir se deve criar ou remover uma entidade, avaliar se a camada de entidades é necessária, decidir se a lógica deve permanecer local ou ser extraída, migrar do FSD v2.0 ou de uma base de código não-FSD, integrar o FSD com frameworks (Next.js App Router e Pages Router, Nuxt, Vite, Astro) ou implementar padrões comuns como autenticação, manipulação de API, Redux e TanStack Query (React Query) dentro do FSD.

Habilidades Relacionadas

steipete/songsee

Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.

community

affaan-m/frontend-design

Create distinctive, production-grade frontend interfaces with high design quality. Use when the user asks to build web components, pages, or applications and the visual direction matters as much as the code quality.

community

mattpocock/improve-codebase-architecture

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

community

lobehub/add-provider-doc

Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.

community

addyosmani/browser-testing-with-devtools

Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.

community

bytedance/chart-visualization

This skill should be used when the user wants to visualize data. It intelligently selects the most suitable chart type from 26 available options, extracts parameters based on detailed specifications, and generates a chart image using a JavaScript script.

community
← More Imagem skills