Initial scaffold: Researcher Endorsement frontend

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

.github/skills/README.md

@@ -0,0 +1,90 @@
+# GitHub Copilot Agent Skills
+
+This directory contains project-specific skills for GitHub Copilot agents. Skills help Copilot perform specialized tasks in a consistent, repeatable way.
+
+## About Agent Skills
+
+Agent Skills are folders containing instructions, scripts, and resources that Copilot can load when relevant to improve its performance. They work with:
+- Copilot coding agent
+- GitHub Copilot CLI
+- Visual Studio Code agent mode
+
+## Directory Structure
+
+Each skill should be in its own subdirectory with the following structure:
+
+```
+.github/skills/
+├── skill-name/
+│   ├── SKILL.md          # Required: Skill instructions with YAML frontmatter
+│   ├── scripts/          # Optional: Helper scripts
+│   └── examples/         # Optional: Example files or templates
+└── another-skill/
+    └── SKILL.md
+```
+
+## Creating a New Skill
+
+1. **Create a directory** for your skill with a lowercase, hyphenated name:
+   ```
+   .github/skills/your-skill-name/
+   ```
+
+2. **Create a `SKILL.md` file** with:
+   - **YAML frontmatter** containing:
+     - `name` (required): Unique identifier (lowercase, hyphenated)
+     - `description` (required): When and why to use this skill
+     - `license` (optional): Skill license information
+   - **Markdown body** with detailed instructions, examples, and guidelines
+
+3. **Add resources** (optional):
+   - Scripts, templates, or other files Copilot might need
+   - Store them in the same skill directory
+
+## SKILL.md Template
+
+```markdown
+---
+name: skill-name
+description: Brief description of what this skill does and when to use it
+license: MIT
+---
+
+# Skill Name
+
+Detailed instructions for Copilot to follow when using this skill.
+
+## When to Use
+
+Describe the scenarios where this skill should be applied.
+
+## Instructions
+
+1. Step-by-step guidance
+2. Include specific commands or tools to use
+3. Provide examples and best practices
+```
+
+## Example Skills
+
+Check the `example-skill/` directory for a complete skill template.
+
+## How Copilot Uses Skills
+
+When you interact with Copilot:
+1. Copilot analyzes your prompt and context
+2. It decides which skills are relevant based on skill descriptions
+3. It loads the relevant `SKILL.md` files into its context
+4. It follows the instructions and uses any included resources
+
+## Skills vs Custom Instructions
+
+- **Skills**: Detailed, task-specific instructions loaded when relevant (e.g., debugging workflows, testing patterns)
+- **Custom Instructions**: Simple, always-active guidelines for your repository (e.g., coding standards, conventions)
+
+## Resources
+
+- [Agent Skills Documentation](https://docs.github.com/en/copilot/concepts/agents/about-agent-skills)
+- [Agent Skills Standard](https://github.com/agentskills/agentskills)
+- [Example Skills Repository](https://github.com/anthropics/skills)
+- [Awesome Copilot Collection](https://github.com/github/awesome-copilot)

.github/skills/action-dispatcher/SKILL.md

@@ -0,0 +1,32 @@
+---
+name: action-dispatcher
+description: "Implements store actions for social behaviors (toggleEndorsement, toggleLike, requestEndorsement) and keeps logic testable."
+license: MIT
+triggers:
+  - "generate toggleEndorsement"
+  - "create store actions"
+  - "add social handlers"
+---
+
+# Action Dispatcher
+
+When to use this skill
+
+- Use when adding or changing business logic inside Zustand stores or when moving UI logic into testable actions.
+- Triggered by prompts about endorsement toggles, likes, and user profile updates.
+
+Instructions
+
+1. First Step: Implement pure functions for actions where possible (e.g., `addEndorsement(state, payload) => newState`).
+
+2. Second Step: Hook these functions into the store actions so they can be unit-tested separately from UI.
+
+3. Third Step: Add unit tests for each action and ensure edge cases (duplicate endorsements, idempotency) are handled.
+
+Examples
+
+- `toggleLike(paperId, userId)` checks current likes and adds/removes the user id.
+
+Notes
+
+- Keep action functions deterministic and avoid direct DOM or side-effect operations inside them; delegate I/O to services.

.github/skills/alias-guardian/SKILL.md

@@ -0,0 +1,38 @@
+---
+name: alias-guardian
+description: "Refactors relative imports into tsconfig/Vite aliases (e.g., `@/components`) to keep imports consistent and resilient to file moves."
+license: MIT
+triggers:
+  - "refactor imports to @/"
+  - "apply tsconfig aliases"
+  - "clean relative imports"
+---
+
+# Alias Guardian
+
+When to use this skill
+
+- Run after adding `tsconfig` path aliases or when many long relative imports exist.
+- Triggered by prompts to convert `../../..` style imports to `@/` aliases.
+
+Instructions
+
+1. First Step: Ensure `tsconfig.json` has `paths` configured (`"@/*": ["src/*"]`) and `vite.config.ts` supports the aliases (via `vite-tsconfig-paths` or manual `resolve.alias`).
+
+2. Second Step: Use an AST-based tool (e.g., `jscodeshift`, `ts-morph`) or a controlled regex to find and replace relative import paths. Prefer AST to avoid accidental matches.
+
+3. Third Step: Update affected files' imports to the alias form and run TypeScript to verify no resolution errors.
+
+Examples
+
+- Before: `import PaperCard from '../../components/molecules/PaperCard'`
+- After: `import PaperCard from '@/components/molecules/PaperCard'`
+
+Additional Resources
+
+- ts-morph: https://github.com/dsherret/ts-morph
+- jscodeshift: https://github.com/facebook/jscodeshift
+
+Notes
+
+- Always run tests and TypeScript type-check after mass refactors; commit in a dedicated branch and use Git to move files safely.

.github/skills/atom-smith/SKILL.md

@@ -0,0 +1,40 @@
+---
+name: atom-smith
+description: "Generates base UI Atoms (Button, Input, Badge, Avatar) with strict TypeScript props and Tailwind-ready class patterns."
+license: MIT
+triggers:
+  - "create atom Button"
+  - "generate EndorsementBadge"
+  - "scaffold atoms"
+---
+
+# Atom Smith
+
+When to use this skill
+
+- When adding or standardizing small UI building blocks used across the app.
+- Triggered by requests to scaffold typed atoms with accessible defaults.
+
+Instructions
+
+1. First Step: Create `src/components/atoms/<AtomName>.tsx` with a minimal, accessible markup and a typed props interface.
+
+2. Second Step: Add `index.ts` to the atoms folder to export the atom and document common props in JSDoc or comments.
+
+3. Third Step: Provide example stories (if Storybook exists) or a test that confirms basic render and accessibility attributes.
+
+Examples
+
+- Button atom snippet:
+
+```tsx
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & { variant?: 'primary' | 'ghost' }
+export const Button: React.FC<ButtonProps> = ({ children, className, variant = 'primary', ...rest }) => (
+  <button className={`px-3 py-1 rounded ${variant === 'primary' ? 'bg-blue-600 text-white' : 'bg-transparent' } ${className ?? ''}`} {...rest}>{children}</button>
+)
+```
+
+Notes
+
+- Ensure atoms are accessible by default (proper role, aria-labels when appropriate, keyboard focus).
+- Keep atoms small; styling via Tailwind utility classes is recommended for consistency.

.github/skills/atomic-scaffolder/SKILL.md

@@ -0,0 +1,44 @@
+---
+name: atomic-scaffolder
+description: "Generates the Atomic Design directory structure (atoms, molecules, organisms, templates, pages) and adds index barrels for clean exports."
+license: MIT
+triggers:
+  - "scaffold atomic"
+  - "generate atoms molecules organisms"
+  - "create components structure"
+---
+
+# Atomic Scaffolder
+
+When to use this skill
+
+- Use when starting the UI layer or when reorganizing components into Atomic Design.
+- Triggered by prompts that request a structured components tree or sample atoms/molecules.
+
+Instructions
+
+1. First Step: Create `src/components/{atoms,molecules,organisms,templates,pages}` directories and ensure `src/components/index.ts` exists as a barrel.
+
+2. Second Step: Add `index.ts` in each folder that re-exports components to simplify imports (e.g., `export * from './atoms/Button'`).
+
+3. Third Step: Optionally scaffold a small set of example atoms (Button, Input, Badge) and a molecule (PaperCard) to demonstrate wiring and naming conventions.
+
+Examples
+
+- Generated tree:
+  src/components/
+    atoms/
+      Button.tsx
+      index.ts
+    molecules/
+      PaperCard.tsx
+      index.ts
+
+Additional Resources
+
+- Atomic Design: https://bradfrost.com/blog/post/atomic-web-design/
+
+Notes
+
+- Keep atoms minimal and focused; molecules compose atoms; organisms compose molecules.
+- Use TypeScript interfaces for component props and default Tailwind utility patterns.

.github/skills/bug-hunter/SKILL.md

@@ -0,0 +1,32 @@
+---
+name: bug-hunter
+description: "Analyzes console stack traces and source files to suggest likely root causes and pinpoint lines to inspect."
+license: MIT
+triggers:
+  - "analyze stack trace"
+  - "find undefined error"
+  - "debug crash"
+---
+
+# Bug Hunter
+
+When to use this skill
+
+- Use when an uncaught exception or runtime error appears in the dev console or during test runs.
+- Triggered by pasting stack traces or describing symptoms such as `undefined` is not a function.
+
+Instructions
+
+1. First Step: Parse the supplied stack trace, map frames to repository files and commit contexts, and verify file paths exist in `src/`.
+
+2. Second Step: Open the suspected file and locate the referenced line; inspect common causes (null/undefined deref, incorrect prop shape, async timing issues).
+
+3. Third Step: Suggest a minimal repro or test and provide a small patch or code comment describing the likely fix.
+
+Examples
+
+- Given: `TypeError: Cannot read property 'map' of undefined at PaperFeed.tsx:42` -> check `papers` prop initialization and defensive checks.
+
+Notes
+
+- Recommend adding guard clauses and unit tests reproducing the failure; avoid speculative fixes without repro.

.github/skills/build-run-script/SKILL.md

@@ -0,0 +1,36 @@
+---
+name: build-run-script
+description: "Ensures `package.json` scripts for dev, build, preview, lint, test, and format are present and validates environment variable usage before running."
+license: MIT
+triggers:
+  - "add npm scripts"
+  - "validate env vars"
+  - "run dev build"
+---
+
+# Build & Run Script
+
+When to use this skill
+
+- Use when bootstrapping the project's `package.json` scripts or when validating build-time env variables.
+- Triggered by requests to add/update `dev`, `build`, `preview`, or helper scripts.
+
+Instructions
+
+1. First Step: Ensure `package.json` contains scripts:
+  - `dev`: `vite`
+  - `build`: `vite build`
+  - `preview`: `vite preview --port 4173`
+  - `lint`, `test`, `format` helpers as needed.
+
+2. Second Step: Add a script `start:ci` if CI needs to build and run a static server (e.g., `serve -s dist`).
+
+3. Third Step: Validate that required `VITE_` variables are documented and, optionally, verified at runtime with a small pre-flight check.
+
+Examples
+
+- `npm run dev` to start local dev server; `npm run build && npm run preview` to test production output locally.
+
+Notes
+
+- Encourage `cross-env` or platform-neutral approaches when setting env vars in scripts.

.github/skills/custom-hook-crafter/SKILL.md

@@ -0,0 +1,32 @@
+---
+name: custom-hook-crafter
+description: "Extracts reusable hooks (e.g., useArXivFetch, useLocalStorage) to isolate side effects from presentation."
+license: MIT
+triggers:
+  - "create useArXivFetch"
+  - "extract hook"
+  - "make custom hook"
+---
+
+# Custom Hook Crafter
+
+When to use this skill
+
+- Use when component logic involves side effects or needs to be shared across components.
+- Triggered by requests to move data fetching, pagination, caching, or subscriptions into hooks.
+
+Instructions
+
+1. First Step: Identify repeated data-fetching or local-state patterns and define hook API (inputs, outputs, error handling).
+
+2. Second Step: Implement the hook under `src/hooks/` using `useEffect`, `useRef` for abort controllers, and caching strategies as needed.
+
+3. Third Step: Add unit tests and examples showing usage in components; document returned values and loading/error semantics.
+
+Examples
+
+- `useArXivFetch(query, options)` returns `{ data, loading, error, refetch }` and uses an internal cache keyed by query.
+
+Notes
+
+- Prefer small, focused hooks and keep them composable (e.g., `usePagination` + `useArXivFetch`).

.github/skills/docker-provisioner/SKILL.md

@@ -0,0 +1,31 @@
+---
+name: docker-provisioner
+description: "Generates a multi-stage Dockerfile for production builds of the Vite + React app and provides guidance for Docker Compose/CI."
+license: MIT
+triggers:
+  - "generate dockerfile"
+  - "dockerize frontend"
+---
+
+# Docker Provisioner
+
+When to use this skill
+
+- Use when packaging the frontend for production or preparing a devcontainer/Codespaces image.
+- Triggered by commands to create or update a `Dockerfile` and `docker-compose.yml` for static serving.
+
+Instructions
+
+1. First Step: Generate a multi-stage `Dockerfile` that builds the app in a Node builder stage and serves the `dist` via `nginx` or a minimal static server.
+
+2. Second Step: Optionally create `docker-compose.yml` for local runs and include build args to pass environment variables.
+
+3. Third Step: Add CI steps to build and optionally push Docker images to GHCR or Docker Hub with secrets managed in the repository settings.
+
+Examples
+
+- Multi-stage Dockerfile snippet provided and notes about caching `node_modules` layers.
+
+Notes
+
+- Document how to set `VITE_` prefixed env vars at build time and how to use `npm run preview` for local tests.

.github/skills/documentation-autowriter/SKILL.md

@@ -0,0 +1,32 @@
+---
+name: documentation-autowriter
+description: "Generates and keeps README.md and ARCHITECTURE.md in sync with components, stores, and agents so judges can quickly evaluate the project."
+license: MIT
+triggers:
+  - "update docs"
+  - "generate architecture"
+  - "sync README"
+---
+
+# Documentation Autowriter
+
+When to use this skill
+
+- Use whenever you add new components, agents, or stores and want docs updated for reviewers.
+- Triggered by prompts like "update README" or "generate architecture overview".
+
+Instructions
+
+1. First Step: Scan `src/components/` and `src/stores/` to build a component map and store summary.
+
+2. Second Step: Render `README.md` with development steps, demo instructions (how to use Copilot CLI agents), and a brief feature summary.
+
+3. Third Step: Produce `ARCHITECTURE.md` documenting Atomic Design layout, store relationships, and agent/skill list for the judges.
+
+Examples
+
+- README includes: setup, run, test, demo CLI steps (`gh copilot ask "Find endorsers for my paper"`).
+
+Notes
+
+- Keep automated docs human-editable and include pointers to extend the output (how to add a new component/module).

.github/skills/example-skill/SKILL.md

@@ -0,0 +1,60 @@
+---
+name: example-skill
+description: Example skill template demonstrating the structure and format of a GitHub Copilot agent skill. Use this as a reference when creating new skills.
+license: MIT
+---
+
+# Example Skill Template
+
+This is an example skill that demonstrates the proper structure for creating GitHub Copilot agent skills.
+
+## When to use this skill
+
+Describe when Copilot should use this skill. Be specific about:
+- The types of tasks this skill addresses
+- Keywords or phrases that should trigger this skill
+- Context in which this skill is most helpful
+
+## Instructions
+
+Provide clear, step-by-step instructions for Copilot to follow:
+
+1. **First Step**: Describe the first action to take
+   - Include any specific tools or commands to use
+   - Mention any prerequisites or checks to perform
+
+2. **Second Step**: Describe the next action
+   - Provide examples where helpful
+   - Include error handling guidance
+
+3. **Third Step**: Continue with additional steps
+   - Be as detailed as necessary
+   - Include best practices and common pitfalls to avoid
+
+## Examples
+
+### Example 1: Basic Usage
+
+```
+Provide code examples or command examples that demonstrate
+how to use this skill effectively.
+```
+
+### Example 2: Advanced Usage
+
+```
+Include more complex examples if needed to illustrate
+advanced scenarios or edge cases.
+```
+
+## Additional Resources
+
+- Reference any relevant documentation
+- Link to related tools or scripts in this skill directory
+- Mention any dependencies or requirements
+
+## Notes
+
+- Include any important warnings or considerations
+- Document known limitations
+- Add troubleshooting tips if applicable

.github/skills/linter-policeman/SKILL.md

@@ -0,0 +1,32 @@
+---
+name: linter-policeman
+description: "Runs ESLint and Prettier, fixes trivial issues, and produces a report of remaining linting errors."
+license: MIT
+triggers:
+  - "run lint"
+  - "fix formatting"
+  - "enforce eslint"
+---
+
+# Linter Policeman
+
+When to use this skill
+
+- Use before committing or when tests show linting/style failures.
+- Triggered by prompts to run or autofix style issues across the repo.
+
+Instructions
+
+1. First Step: Ensure `eslint` and `prettier` are installed and `package.json` contains `lint` and `format` scripts.
+
+2. Second Step: Run `npm run lint -- --fix` and `npm run format` and report files changed plus any remaining errors that require manual attention.
+
+3. Third Step: Suggest rule tweaks or suppression only when justified; avoid disabling rules globally.
+
+Examples
+
+- `npm run lint` -> list of files with errors; `npm run lint -- --fix` to autocorrect.
+
+Notes
+
+- Encourage using pre-commit hooks (Husky + lint-staged) so formatting occurs automatically.

.github/skills/mock-data-generator/SKILL.md

@@ -0,0 +1,32 @@
+---
+name: mock-data-generator
+description: "Generates robust mock datasets for papers, users, and endorsements so the frontend can function without a backend."
+license: MIT
+triggers:
+  - "generate mock data"
+  - "create mock papers"
+  - "seed mockData"
+---
+
+# Mock Data Generator
+
+When to use this skill
+
+- Use early in development to simulate arXiv papers, users, and endorsement relations for UI and store integration.
+- Triggered by requests to create JSON or TypeScript fixtures under `src/data/mockData.ts`.
+
+Instructions
+
+1. First Step: Produce realistic paper fixtures (title, authors, categories, abstract, submittedAt) and user fixtures (id, name, affiliation, expertiseAreas).
+
+2. Second Step: Optionally seed persisted store on first load if no data exists, using the mock dataset to populate `usePaperStore` or similar.
+
+3. Third Step: Provide utility functions to filter and paginate mock data to emulate real API behavior.
+
+Examples
+
+- `src/data/mockData.ts` exports `{ papers, users, endorsements }` and helper `seedMockData()`.
+
+Notes
+
+- Keep the dataset representative (vary categories, dates) so components (sorting, filtering) can be tested effectively.

.github/skills/module-encapsulator/SKILL.md

@@ -0,0 +1,36 @@
+---
+name: module-encapsulator
+description: "Groups related components, hooks, and types into feature-based modules (e.g., `modules/endorsements`) to improve encapsulation and reuse."
+license: MIT
+triggers:
+  - "group into module"
+  - "modularize feature"
+  - "create feature module"
+---
+
+# Module Encapsulator
+
+When to use this skill
+
+- Use when several components, hooks, and types belong to a single feature and should be colocated.
+- Triggered by requests to organize code by feature boundary rather than only by technical layer.
+
+Instructions
+
+1. First Step: Propose a module layout (e.g., `src/modules/endorsements/{components,hooks,types,services}`) and create an `index.ts` to re-export public APIs.
+
+2. Second Step: Move or copy existing files into the module, update imports to use the module boundary (e.g., `@/modules/endorsements`).
+
+3. Third Step: Add tests and README.md inside the module describing its public surface and example usage.
+
+Examples
+
+- Module index: `export * from './components/EndorseButton'; export * from './hooks/useEndorsements';`
+
+Additional Resources
+
+- Feature folder discussion: https://redux.js.org/style-guide/style-guide#structure
+
+Notes
+
+- Maintain clear public/private API: only `index.ts` exports become public; internal helpers remain in the module scope.

.github/skills/molecular-assembler/SKILL.md

@@ -0,0 +1,31 @@
+---
+name: molecular-assembler
+description: "Composes Atoms into Molecules (e.g., SearchField = Input + IconButton) and minimizes prop-drilling by exposing concise props."
+license: MIT
+triggers:
+  - "assemble SearchField"
+  - "create molecule from atoms"
+---
+
+# Molecular Assembler
+
+When to use this skill
+
+- Use when combining atoms into reusable UI patterns that encapsulate small behavior and layout.
+- Triggered by requests to create a composite component that uses two or more atoms.
+
+Instructions
+
+1. First Step: Identify the atoms to compose and define a minimal props surface for the molecule (avoid exposing internal atom implementation details).
+
+2. Second Step: Implement the molecule in `src/components/molecules/` with clear prop destructuring and forwarding of refs where appropriate.
+
+3. Third Step: Add unit tests to verify rendering and interactions and an example usage in a page or story.
+
+Examples
+
+- SearchField: uses `Input` and `IconButton`, exposes `value`, `onChange`, and `onSearch` props.
+
+Notes
+
+- Molecules should be easy to reuse in multiple organisms; prefer composition over conditional internals.

.github/skills/organism-architect/SKILL.md

@@ -0,0 +1,32 @@
+---
+name: organism-architect
+description: "Builds Organisms like PaperFeed or UserProfileCard by wiring Molecules, handling layout and local UI logic."
+license: MIT
+triggers:
+  - "create PaperFeed"
+  - "assemble organism"
+  - "build UserProfileCard"
+---
+
+# Organism Architect
+
+When to use this skill
+
+- Use when creating page sections that aggregate molecules and small stateful interactions.
+- Triggered by prompts to scaffold feed components, lists, or composite UI patterns.
+
+Instructions
+
+1. First Step: Design the organism's responsibilities (data fetching vs. purely presentational) and choose which molecules it composes.
+
+2. Second Step: Implement the organism under `src/components/organisms/`, use hooks for data and local UI state, and expose minimal props for customization.
+
+3. Third Step: Add skeletons or loading states (spinners/skeleton cards) and tests verifying interactions and accessibility.
+
+Examples
+
+- PaperFeed: fetches a list of papers via `useArXivFetch`, renders `PaperCard` molecules, supports infinite scroll or pagination.
+
+Notes
+
+- Keep organisms at the page level; avoid adding global app logic here—use stores or modules for cross-cutting concerns.

.github/skills/refactor-specialist/SKILL.md

@@ -0,0 +1,31 @@
+---
+name: refactor-specialist
+description: "Detects duplicated code in organisms and suggests moving repeated logic into shared molecules or utility functions."
+license: MIT
+triggers:
+  - "find duplicate code"
+  - "refactor repeated logic"
+---
+
+# Refactor Specialist
+
+When to use this skill
+
+- Use when multiple organisms contain the same rendering logic or state transformation.
+- Triggered by requests to reduce duplication and improve maintainability.
+
+Instructions
+
+1. First Step: Scan the codebase for duplicated JSX blocks or near-identical functions using `grep`, `ripgrep`, or AST comparison.
+
+2. Second Step: Propose a refactor plan: extract a Molecule, a utility function in `src/utils`, or move a hook into `src/hooks`.
+
+3. Third Step: Provide a code diff or patch demonstrating the extraction and update imports across affected files.
+
+Examples
+
+- Extracting a `UserAvatarWithMeta` molecule used in two different organisms.
+
+Notes
+
+- Prefer small, incremental refactors and keep tests passing after each change.

.github/skills/service-interceptor/SKILL.md

@@ -0,0 +1,32 @@
+---
+name: service-interceptor
+description: "Creates API service wrappers that simulate network calls with artificial delays and error rates for robust UI testing (no backend required)."
+license: MIT
+triggers:
+  - "create api service"
+  - "mock fetch calls"
+  - "simulate network delay"
+---
+
+# Service Interceptor
+
+When to use this skill
+
+- Use when UI needs to consume an API-like interface while the backend is absent.
+- Triggered by prompts to mock axios/fetch behavior or to add latency/failure simulation.
+
+Instructions
+
+1. First Step: Implement `src/services/api.ts` exporting functions (`getPapers`, `getPaperById`, `searchPapers`) that return Promises and optionally use `setTimeout` to simulate delay.
+
+2. Second Step: Make the delay configurable; expose a `setMockDelay(ms)` helper and an optional `errorRate` flag for testing error states.
+
+3. Third Step: Use mockData fixtures as response payloads and ensure the services return the same shape as a future real API.
+
+Examples
+
+- `await api.getPapers({ page: 1, pageSize: 10 }) // resolves after 300ms with { items, total }`
+
+Notes
+
+- Document how to switch to a real API endpoint later by replacing the service implementation or toggling an environment variable.

.github/skills/template-weaver/SKILL.md

@@ -0,0 +1,32 @@
+---
+name: template-weaver
+description: "Creates layout templates (e.g., DashboardLayout, AuthLayout) that act as skeletons where organisms are placed. Uses children/slots pattern."
+license: MIT
+triggers:
+  - "create DashboardLayout"
+  - "make template layout"
+---
+
+# Template Weaver
+
+When to use this skill
+
+- Use when you need consistent page scaffolding (headers, sidebars, footers) across pages.
+- Triggered by requests to standardize page layouts or to create reusable layout wrappers.
+
+Instructions
+
+1. First Step: Define required regions (header, nav, main, aside, footer) and how children will be injected (React `children` or named slots via props).
+
+2. Second Step: Implement layouts in `src/components/templates/` and ensure they accept a `children` prop and optional slot props (e.g., `sidebar`).
+
+3. Third Step: Use templates in pages under `src/pages/` and provide examples of composition.
+
+Examples
+
+- DashboardLayout:
+  `<DashboardLayout sidebar={<ProfileCard/>}><PaperFeed/></DashboardLayout>`
+
+Notes
+
+- Templates should not contain heavy business logic; keep them focused on layout and accessibility (skip links, landmark roles).

.github/skills/typescript-type-factory/SKILL.md

@@ -0,0 +1,34 @@
+---
+name: typescript-type-factory
+description: "Creates and centralizes TypeScript types (Paper, User, Endorsement) under `src/types` to keep store and UI consistent."
+license: MIT
+triggers:
+  - "generate Paper type"
+  - "create types index"
+  - "centralize interfaces"
+---
+
+# TypeScript Type-Factory
+
+When to use this skill
+
+- Use when adding new domain models or when types diverge between UI and store.
+- Triggered by requests to generate types, add optional fields, or migrate type shapes.
+
+Instructions
+
+1. First Step: Create `src/types/index.ts` and define exported interfaces/types: `Paper`, `User`, `Endorsement`, `ApiResponse`.
+
+2. Second Step: Ensure stores, components, and services import types from `@/types` to avoid duplication.
+
+3. Third Step: Add comments and sample fixtures that match `mockData` for easy testing.
+
+Examples
+
+```ts
+export type Paper = { id: string; title: string; authors: string[]; categories: string[]; abstract?: string }
+```
+
+Notes
+
+- Keep versioning/migrations in mind if types are persisted to localStorage; consider a simple `schemaVersion` field.

.github/skills/vite-orchestrator/SKILL.md

@@ -0,0 +1,41 @@
+---
+name: vite-orchestrator
+description: "Scaffolds Vite + React + TypeScript configuration with tsconfig aliases, Tailwind support, and recommended scripts."
+license: MIT
+triggers:
+  - "setup vite"
+  - "generate vite.config.ts"
+  - "create tsconfig alias"
+---
+
+# Vite Orchestrator
+
+When to use this skill
+
+- Use when initializing the frontend or when a repo lacks a Vite + TS config.
+- Triggered by prompts mentioning Vite, vite.config, tsconfig paths, or Tailwind wiring.
+
+Instructions
+
+1. First Step: Verify project root and package.json exist. If not present, suggest `npm create vite@latest -- --template react-ts`.
+
+2. Second Step: Create/update `tsconfig.json` with `baseUrl` and `paths` (`@/*` → `src/*`). Provide a `tsconfig.json` snippet and ensure the TypeScript server is restarted.
+
+3. Third Step: Create `vite.config.ts` using `@vitejs/plugin-react` and `vite-tsconfig-paths` and configure CSS handling (PostCSS/Tailwind if requested).
+
+4. Fourth Step: Add recommended npm scripts to `package.json` (`dev`, `build`, `preview`, `lint`, `test`, `format`) and list required dependencies to install.
+
+Examples
+
+- "generate vite.config.ts with tsconfig aliases"
+- Commands: `npm i -D vite @vitejs/plugin-react vite-tsconfig-paths` and `npm i -D tailwindcss postcss autoprefixer` (if Tailwind enabled)
+
+Additional Resources
+
+- Vite: https://vitejs.dev
+- vite-tsconfig-paths: https://github.com/aleclarson/vite-tsconfig-paths
+
+Notes
+
+- Recommend using `vite-tsconfig-paths` to avoid duplicating aliases in Vite config.
+- If running in CI, show how to set `VITE_` env vars during build.

.github/skills/zustand-store-manager/SKILL.md

@@ -0,0 +1,33 @@
+---
+name: zustand-store-manager
+description: "Generates typed Zustand stores (usePaperStore, useAuthStore) with devtools and persist middleware for localStorage."
+license: MIT
+triggers:
+  - "create zustand store"
+  - "generate usePaperStore"
+  - "persist zustand"
+---
+
+# Zustand Store Manager
+
+When to use this skill
+
+- Use when centralizing client state (papers, endorsements, likes, user profile) without a backend.
+- Triggered by requests to scaffold or update stores, add persistence, or wire devtools.
+
+Instructions
+
+1. First Step: Create typed store files under `src/stores/` (e.g., `usePaperStore.ts`) using `create` from `zustand` and `persist`/`devtools` middleware.
+
+2. Second Step: Expose actions and selectors that the UI will consume (`addEndorsement`, `toggleLike`, `fetchPapers` placeholder).
+
+3. Third Step: Document how to access state in components and how to reset/seed state for tests.
+
+Examples
+
+- `usePaperStore` exposes `papers`, `loading`, `addEndorsement(paperId, endorser)` and `reset()`.
+
+Notes
+
+- Include clear type definitions for the store payloads to keep UI and store in sync.
+- Recommend `zustand/middleware` persist name (`arxiv-social-storage`) and a migration strategy when types change.