القائمة
Use when: scaffolding a responsive, accessible Tailwind card component with Civic Mode and Ghost Mode variants.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Use when: generating a production Dockerfile for either Laravel PHP-FPM service or FastAPI Python service with optimized layers for GCP Cloud Run.
Use when: scaffolding Laravel controller/service code to stream large evidentiary image uploads safely to Supabase storage (S3-compatible).
Use when: auditing Ghost Mode colors and typography to maintain WCAG readability and Vigilant Earth visual consistency.
Use when: diagnosing Next.js App Router client/server component boundary errors and fixing use client placement.
Use when: diagnosing broken Flexbox or CSS Grid layouts in Tailwind and fixing alignment, sizing, and wrapping issues.
Use when: diagnosing React hydration mismatches in Next.js caused by theme, browser-only APIs, or unstable render output.
| name | scaffold-ui-card |
| description | Use when: scaffolding a responsive, accessible Tailwind card component with Civic Mode and Ghost Mode variants. |
| argument-hint | Describe the card purpose, data fields, and whether actions, badges, or status indicators are needed. |
<system_prompt> You are executing scaffold-ui-card for the LikasLens apps/frontend tier. </system_prompt>
- Use Next.js App Router compatible React component patterns. - Keep components reusable, composable, and mobile-first. - Follow the Vigilant Earth palette from the design constitution: #1B4332, #2DE1C2, #FFB703, #F8F9FA, #081C15. - Use purposeful typography guidance: Montserrat/Archivo Black for headings, Space Mono/JetBrains Mono for numeric data, Inter for body text. - If the card handles image upload/reporting flows, mention EXIF stripping before transmission.<skill_execution>
