القائمة
Add or update portless configuration for local HTTPS development in this monorepo. Use when setting up new apps/services or changing routing for staff, public, api, web, or docs.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Implement a new feature or component following the conventions of this monorepo. Use when the user asks to build something new in the staff/public UIs, shared packages, or api. Strongly prefer using Ant Design for UI work and the shared @repo/ui library.
Add a new Ant Design based component or page feature to the staff or public Vite apps, or extend the shared @repo/ui library. Use when the user wants to introduce new UI elements using antd as the primary library.
Scaffold a new Vite + React + TypeScript app in this Turborepo (e.g. a third UI besides staff and public). Use when the user wants to add another frontend that will also connect to the shared api backend.
Create a new reusable UI component or page feature in one of the Vite UIs (staff or public), or extend the shared @repo/ui library. Use when the user wants to add a new button, form, page section, or feature using Ant Design as the primary library.
Guide for building React applications with Apollo Client in the staff and public Vite apps. Use when: (1) setting up or configuring Apollo Client in apps/staff or apps/public, (2) writing GraphQL queries or mutations with hooks (useQuery, useMutation), (3) configuring caching, cache policies, or optimistic UI, (4) managing local state or error handling in the UIs that connect to the shared apps/api backend, (5) troubleshooting Apollo Client errors, performance, or integration with Ant Design components. Always coordinate with the backend schema in apps/api and use the shared @repo/ui + AntdProvider theming. Prefer patterns that work for both staff (internal) and public (customer-facing) experiences.
Guide for writing Apollo Connectors schemas to integrate REST APIs into GraphQL. Use this skill when: (1) connecting REST services to the GraphQL backend in apps/api, (2) using @source and @connect directives, (3) implementing entity resolvers with batching from external APIs. In this monorepo, use to extend the Hono/Apollo API without duplicating logic. The staff/public UIs can then query unified data. Coordinate with graphql-schema, update-graphql, apollo-server. Test via portless https://api.localhost/graphql.
| name | configure-portless |
| description | Add or update portless configuration for local HTTPS development in this monorepo. Use when setting up new apps/services or changing routing for staff, public, api, web, or docs. |
Portless (https://github.com/vercel-labs/portless) provides stable .localhost HTTPS URLs for local development.
portless.json at repo root (defines apps and their inner scripts)package.json scripts (dev and dev:app)apps/staff/vite.config.ts and apps/public/vite.config.ts (port management)apps/api/src/index.ts (respects PORT env)apps/api/src/app.ts (CORS for .localhost domains)apps/*/package.json for the "dev" / "dev:app" patternAdding a new Vite app (like a third UI)
portless.json"dev": "portless", "dev:app": "vite" to its package.jsonvite.config.ts (usually without hard-coded port, let portless inject)Adding a new Next.js app
"dev:app": "next dev --port XXX"Changing backend port behavior
src/index.ts (or equivalent) reads process.env.PORTUpdating CORS
apps/api/src/app.ts to accept new .localhost names or patterns.Portless config changes
portless.json carefully — names become the subdomains (staff.localhost, api.localhost, etc.)pnpm proxy:stop && pnpm proxy or restart your dev processes after changes.dev script as portless so turbo run dev goes through the proxy.dev:app as the "real" command so people can still run PORTLESS=0 pnpm --filter X dev:app for direct access.pnpm dev (or the specific app) and confirm you can reach it at the expected https://name.localhost URL.pnpm proxy:stop / restart if the proxy was already running.