メニュー
Make sure to use this skill whenever working on environment variables, routing between Directing vs Post-Production profiles, handling netlify deployment modes, or modifying global App.tsx configuration!
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | Dual Portfolio Architecture |
| description | Make sure to use this skill whenever working on environment variables, routing between Directing vs Post-Production profiles, handling netlify deployment modes, or modifying global App.tsx configuration! |
This single codebase deploys two separate portfolio websites leveraging identical React components but isolated pipelines and environments.
You must respect the specific aesthetic context based on the current mode:
directedbygabriel.com)
PORTFOLIO_MODE=directing.lemonpost.studio)
PORTFOLIO_MODE=postproduction.The source of data is identical (Airtable), but the gabriel-portfolio-data sync phase splits out two JSON configuration files portfolio-data-[mode].json by pivoting the Portfolio ID configuration row.
When building or deploying the main UI gabriel-portfolio, the React Vite process grabs the VITE_PORTFOLIO_MODE environment variable. The app conditionally fetches the correct config endpoint from jsDelivr, toggling all navigation links, layout logic, and filter rules seamlessly (App.tsx, IndexView.tsx).
Always test your component mutations natively in both environments:
npm run dev:directingnpm run dev:postprodWhen generating or editing components, ensure that you always verify conditional structures. Do not assume all modes have access to Journal endpoints or routing setups!
Make sure to use this skill whenever the user mentions the trivia game, 'Guess the Project', gallery image randomization, or the GameView.tsx component!
Make sure to use this skill whenever the user asks to modify the companion Instagram Studio app, fix the scheduling grid, run the local studio server, or modify anything inside the scripts/instagram-studio directory!
Make sure to use this skill whenever updating global styling, layouts, animations, typography, or adding new tailwind classes to React components! Read this to understand the THEME.ts file.