{
  "markdown": "# FSD Architect - Claude Code Skill\n\n> Feature-Sliced Design architecture guardian for React, Next.js, Remix, and React Router projects.\n\n[![Claude Code](https://img.shields.io/badge/Claude_Code-compatible-green)](https://claude.com/claude-code)\n\n## What it does\n\n**FSD Architect** enforces [Feature-Sliced Design](https://feature-sliced.design) methodology in your frontend codebase. It activates automatically when you create or modify frontend files and ensures:\n\n- **Layer hierarchy** - App → Pages → Widgets → Features → Entities → Shared\n- **Import direction** - Modules only import from layers strictly below\n- **Public API enforcement** - Every slice exports through `index.ts`\n- **Segment conventions** - `ui/`, `model/`, `api/`, `lib/`, `config/`\n- **Framework integration** - Thin route wrappers for React Router 7, Next.js App Router, Remix\n- **Naming conventions** - kebab-case directories, PascalCase components, explicit named exports\n\n## Installation\n\n### As a Claude Code plugin\n\n```bash\nclaude plugin add github:marzun9620/fsd-skill\n```\n\n### Manual installation (project-level)\n\n```bash\nmkdir -p .claude/skills/fsd-architect\ncurl -o .claude/skills/fsd-architect/SKILL.md \\\n  https://raw.githubusercontent.com/marzun9620/fsd-skill/master/skills/fsd-architect/SKILL.md\n```\n\n### Manual installation (global)\n\n```bash\nmkdir -p ~/.claude/skills/fsd-architect\ncurl -o ~/.claude/skills/fsd-architect/SKILL.md \\\n  https://raw.githubusercontent.com/marzun9620/fsd-skill/master/skills/fsd-architect/SKILL.md\n```\n\n## Usage\n\n### Automatic\n\nThe skill activates automatically when you ask Claude to create components, restructure code, or work on frontend files. Claude will validate against FSD rules.\n\n### Manual\n\n```\n/fsd-architect UserProfileCard\n```\n\nPass a component or slice name as an argument to get FSD-compliant scaffolding.\n\n## Example\n\nAsk Claude:\n\n```\nCreate a new \"notifications\" feature with a NotificationList component and a useNotifications hook\n```\n\nClaude will create:\n\n```\nsrc/features/notifications/\n├── index.ts              # Public API\n├── ui/\n│   └── NotificationList.tsx\n└── model/\n    └── useNotifications.ts\n```\n\nWith proper imports only from `@/entities/` and `@/shared/`, and a clean `index.ts`:\n\n```ts\nexport { NotificationList } from \"./ui/NotificationList\";\nexport { useNotifications } from \"./model/useNotifications\";\n```\n\n## Compatibility\n\n| Framework              | Support                    |\n| ---------------------- | -------------------------- |\n| React + React Router 7 | Full (thin route wrappers) |\n| Next.js App Router     | Full (page re-exports)     |\n| Next.js Pages Router   | Full (page re-exports)     |\n| Remix                  | Full (thin route wrappers) |\n| Vite + React           | Full                       |\n| Astro                  | Partial (pages layer)      |\n\n## FSD Layers at a Glance\n\n```\nApp        → Routing, providers, global styles (no slices)\nPages      → Full screens, route compositions\nWidgets    → Large reusable UI blocks\nFeatures   → User interactions (forms, actions)\nEntities   → Business concepts (user, product, order)\nShared     → UI kit, API client, utils, i18n (no slices)\n```\n\n**The Golden Rule:** Import only **downward**. Never up, never sideways.\n\n## Contributing\n\nPRs welcome! If you use FSD with a framework not covered, please open an issue or PR.\n\n## License\n\nMIT\n",
  "bytes": 3362,
  "sha": "e25aeae48e3a691ee601ff3214908cf26f84e2a9ef2bb6155a6e47ca4402acb2",
  "repo_slug": "marzun9620/fsd-skill",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/plg_marzun9620_fsd_skill_fsd_architect_skill_5ec97232/readme"
}