feat: Add feature development skill guidelines and a new feature creation workflow.

Author: mor-dunv

.agent/skills/feature_development/SKILL.md

@@ -0,0 +1,45 @@
+---
+name: Feature Development
+description: Guidelines and best practices for creating new features in the application.
+---
+
+# Feature Development Skill
+
+This skill outlines the standards and practices for adding new features to the application.
+
+## Core Principles (Senior Engineer Standards)
+1.  **Clean Code**:
+    -   **DRY (Don't Repeat Yourself)**: Extract usage patterns into reusable hooks or components.
+    -   **SOLID**: Components should have a single responsibility.
+    -   **Meaningful Naming**: Variables and functions should clearly describe their intent (e.g., `isModalOpen` vs `open`).
+2.  **Component Structure**:
+    -   **Small & Focused**: Break down large views into smaller sub-components.
+    -   **Colocation**: Keep related styles, tests, and types close to the component.
+3.  **Modern React**:
+    -   Use Functional Components and Hooks.
+    -   Avoid `useEffect` for derived state; use `useMemo` or simple derivation during render.
+
+## Feature Structure
+When creating a new feature, follow this directory structure:
+
+```
+src/features/<FeatureName>/
+├── index.js          # Public API export
+├── <FeatureName>.jsx # Main Feature Component
+├── components/       # Sub-components specific to this feature
+└── hooks/            # Custom hooks specific to this feature
+```
+
+## Routing
+-   All new page-level features must be registered in the main router (typically `src/App.jsx` or a dedicated `routes` file).
+-   Use lazy loading for page components to optimize bundle size:
+    ```javascript
+    const NewFeature = lazy(() => import('./features/NewFeature'));
+    ```
+
+## Implementation Checklist
+-   [ ] Create feature directory.
+-   [ ] Implement main component.
+-   [ ] Add sub-components as needed.
+-   [ ] Register route.
+-   [ ] Verify responsiveness and styling (Tailwind CSS).

.agent/workflows/create_feature.md

@@ -0,0 +1,32 @@
+---
+description: Create a new feature with component structure and routing
+---
+
+# Create New Feature Workflow
+
+This workflow guides the creation of a new feature, ensuring all necessary files and configurations are in place.
+
+## Steps
+
+1.  **Create Directory Structure**
+    -   Create the directory `src/features/<FeatureName>`
+    -   Create subdirectories `components` and `hooks` if anticipated, otherwise keep flat for simple features.
+
+2.  **Create Main Component**
+    -   Create `src/features/<FeatureName>/<FeatureName>.jsx`.
+    -   Apply standard boilerplate (imports, component definition, export).
+    -   Implement initial UI or placeholder.
+
+3.  **Register Route**
+    -   Open `src/App.jsx` (or main router file).
+    -   Import the new component (consider `React.lazy`).
+    -   Add a `<Route>` entry for the new feature.
+    -   *Example*: `<Route path="/<feature-path>" element={<FeatureName />} />`
+
+4.  **Add Navigation (Optional)**
+    -   If the feature should be accessible from the main menu, add a link to `src/layouts/Header.jsx` (or Sidebar).
+
+5.  **Verify**
+    -   Run the dev server.
+    -   Navigate to the new route.
+    -   Check for console errors.