CommunityImagegithub.com

feature-sliced/feature-sliced-design

Compétence officielle Feature-Sliced Design (FSD) v2.1 pour appliquer la méthodologie aux projets frontend. À utiliser lorsque la tâche implique l'organisation de la structure du projet avec les couches FSD, la décision de l'emplacement du code, le placement des ressources statiques (images, icônes, polices, PDF), le regroupement de slices étroitement liées, la définition des API publiques et des limites d'importation, la résolution des importations croisées ou l'évaluation du motif @x, la décision de créer ou supprimer une entité, l'évaluation de la nécessité de la couche entities, la décision de garder la logique locale ou de l'extraire, la migration depuis FSD v2.0 ou une base de code non-FSD, l'intégration de FSD avec des frameworks (Next.js App Router et Pages Router, Nuxt, Vite, Astro), ou la mise en œuvre de motifs courants tels que l'authentification, la gestion des API, Redux et TanStack Query (React Query) dans FSD.

Qu'est-ce que feature-sliced-design ?

Cette compétence officielle permet d'appliquer la méthodologie Feature-Sliced Design (FSD) v2.1 à des projets frontend. Elle est particulièrement utile pour organiser la structure du projet avec les couches FSD, décider où placer le code (ressources statiques, slices, entités), définir les API publiques et les limites d'importation strictes, résoudre les importations croisées (motif @x), et évaluer si la couche entities est nécessaire. La compétence prend en charge la migration depuis des bases de code FSD v2.0 ou non-FSD, l'intégration avec des frameworks modernes (Next.js App Router et Pages Router, Nuxt, Vite, Astro), ainsi que des motifs courants comme l'authentification, la gestion des API, Redux et TanStack Query (React Query). En résumé, elle agit comme un guide et un assistant pour les développeurs qui souhaitent adopter ou maintenir une architecture FSD stricte tout en restant flexibles avec l'outillage et les frameworks existants.

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

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

Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Que fait feature-sliced-design ?

Compétence officielle Feature-Sliced Design (FSD) v2.1 pour appliquer la méthodologie aux projets frontend. À utiliser lorsque la tâche implique l'organisation de la structure du projet avec les couches FSD, la décision de l'emplacement du code, le placement des ressources statiques (images, icônes, polices, PDF), le regroupement de slices étroitement liées, la définition des API publiques et des limites d'importation, la résolution des importations croisées ou l'évaluation du motif @x, la décision de créer ou supprimer une entité, l'évaluation de la nécessité de la couche entities, la décision de garder la logique locale ou de l'extraire, la migration depuis FSD v2.0 ou une base de code non-FSD, l'intégration de FSD avec des frameworks (Next.js App Router et Pages Router, Nuxt, Vite, Astro), ou la mise en œuvre de motifs courants tels que l'authentification, la gestion des API, Redux et TanStack Query (React Query) dans FSD.

Skills associés

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