CommunityImagengithub.com

feature-sliced/feature-sliced-design

Skill oficial de Feature-Sliced Design (FSD) v2.1 para aplicar la metodología en proyectos frontend. Úsalo cuando la tarea implique organizar la estructura del proyecto con capas FSD, decidir dónde va el código, colocar activos estáticos (imágenes, iconos, fuentes, PDFs), agrupar slices estrechamente relacionados, definir APIs públicas y límites de importación, resolver importaciones cruzadas o evaluar el patrón @x, decidir si crear o eliminar una entidad, evaluar si la capa de entidades es necesaria, decidir si la lógica debe permanecer local o ser extraída, migrar desde FSD v2.0 o desde una base de código no FSD, integrar FSD con frameworks (Next.js App Router y Pages Router, Nuxt, Vite, Astro) o implementar patrones comunes como autenticación, manejo de API, Redux y TanStack Query (React Query) dentro de FSD.

¿Qué es feature-sliced-design?

Este skill proporciona la guía oficial de Feature-Sliced Design (FSD) versión 2.1, una metodología para estructurar proyectos frontend de manera escalable y mantenible. Es útil para desarrolladores que trabajan con frameworks como Next.js, Nuxt, Vite o Astro, y necesitan decidir cómo organizar el código en capas (app, processes, pages, features, entities, shared), colocar activos estáticos, agrupar slices, definir APIs públicas y límites de importación. También resuelve problemas comunes como importaciones cruzadas (patrón @x), migraciones desde versiones anteriores o bases de código sin FSD, y la integración con patrones como autenticación, manejo de API, Redux y TanStack Query. El skill se basa en la documentación oficial de FSD y está diseñado para ser usado con asistentes de IA como Claude Code, Cursor o Codex, siguiendo las reglas de la metodología para mantener la coherencia del proyecto.

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

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

Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

¿Qué hace feature-sliced-design?

Skill oficial de Feature-Sliced Design (FSD) v2.1 para aplicar la metodología en proyectos frontend. Úsalo cuando la tarea implique organizar la estructura del proyecto con capas FSD, decidir dónde va el código, colocar activos estáticos (imágenes, iconos, fuentes, PDFs), agrupar slices estrechamente relacionados, definir APIs públicas y límites de importación, resolver importaciones cruzadas o evaluar el patrón @x, decidir si crear o eliminar una entidad, evaluar si la capa de entidades es necesaria, decidir si la lógica debe permanecer local o ser extraída, migrar desde FSD v2.0 o desde una base de código no FSD, integrar FSD con frameworks (Next.js App Router y Pages Router, Nuxt, Vite, Astro) o implementar patrones comunes como autenticación, manejo de API, Redux y TanStack Query (React Query) dentro de FSD.

Skills relacionados

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 Imagen skills