官方 Feature-Sliced Design（FSD）v2.1 技能，用於將該方法論應用於前端專案。
此技能為官方 Feature-Sliced Design (FSD) v2.1 的實作指南，專門協助開發者將 FSD 方法論應用於前端專案。它提供關於如何使用 FSD 層次（如 entities, features, widgets 等）組織專案結構、決定程式碼歸屬、放置靜態資源（圖片、圖示、字型、PDF）、將密切相關的切片分組、定義公開 API 及導入邊界、解決跨導入或評估 @x 模式、判斷是否應建立或移除實體、評估是否需要 entities 層、決定邏輯應保持局部或抽取、從 FSD v2.0 或非 FSD 程式碼庫遷移、以及將 FSD 整合至 Next.js（App Router 與 Pages Router）、Nuxt、Vite、Astro 等框架的完整指引。同時也涵蓋在 FSD 中實作常見模式（如認證、API 處理、Redux 與 TanStack Query (React Query)）的最佳實踐。此技能支援 Claude Code、Cursor 與 Codex 等平台，透過結構化的 SKILL.md 文件提供詳細規則與範例。
npx skills add https://github.com/feature-sliced/skills/tree/main/skills/feature-sliced-designInstalled? Explore more 影像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →
官方 Feature-Sliced Design (FSD) v2.1 技能，用於將該方法論應用於前端專案。當任務涉及使用 FSD 層次組織專案結構、決定程式碼歸屬、放置靜態資源（圖片、圖示、字型、PDF）、將密切相關的切片分組、定義公開 API 及導入邊界、解決跨導入或評估 @x 模式、判斷是否應建立或移除實體、評估是否需要 entities 層、決定邏輯應保持局部或抽取、從 FSD v2.0 或非 FSD 程式碼庫遷移、將 FSD 與框架（Next.js App Router 與 Pages Router、Nuxt、Vite、Astro）整合，或在 FSD 中實作常見模式（如認證、API 處理、Redux 與 TanStack Query (React Query)）時使用。
Generate spectrograms and feature-panel visualizations from audio with the songsee CLI.
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.
Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
Add documentation for a new AI provider — usage docs, env vars, Docker config, image resources.
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.
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.