メニュー
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>
