官方 Feature-Sliced Design (FSD) v2.1 技能，用于将方法论应用于前端项目。适用于涉及组织 FSD 层项目结构、决定代码归属、放置静态资源、分组紧密相关的切片、定义公共 API 和导入边界、解决交叉导入或评估 @x 模式、决定创建或移除实体、评估是否需要实体层、决定逻辑保留本地还是提取、从 FSD v2.0 或非 FSD 代码库迁移、将 FSD 与框架（Next.js App Router 和 Pages Router、Nuxt、Vite、Astro）集成，或在 FSD 中实现常见模式（如认证、API 处理、Redux 和 TanStack Query）的任务。
这是一个官方 Feature-Sliced Design (FSD) v2.1 技能，专为前端项目应用 FSD 方法论而设计。它旨在帮助开发者和 AI 代理在项目结构中正确使用 FSD 分层架构，包括决定代码放置位置、组织静态资源、定义切片和公共 API、管理导入边界以及解决交叉导入问题。该技能支持多种场景，例如从 FSD v2.0 或非 FSD 代码库迁移、与 Next.js、Nuxt、Vite、Astro 等框架集成，以及实现认证、API 处理、Redux 和 TanStack Query 等常见模式。通过提供清晰的指导，它简化了 FSD 的采用和应用过程，特别适合需要严格模块化和可维护性的前端项目。
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 模式、决定创建或移除实体、评估是否需要实体层、决定逻辑保留本地还是提取、从 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.