simonpaag/.agents/skills/implement-stitch-design
.agents/skills/implement-stitch-design/SKILL.md
Implement HTML/Tailwind designs generated by Google Stitch into the CPHport Next.js application.
development
Updated Apr 16, 2026
$ install --global
skillsauthnpx skillsauth add simonpaag/cphport .agents/skills/implement-stitch-designInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 16, 2026, 8:40 PM21.7s1 file scanned
SKILL.md
- description:
- Implement HTML/Tailwind designs generated by Google Stitch into the CPHport Next.js application.
Stitch Design Implementation Protocol
This skill provides a strict step-by-step process for integrating raw HTML/Tailwind CSS designs generated by Google's Stitch tool into the CPHport React/Next.js frontend.
CRITICAL RULE: Do NOT attempt to convert the HTML, apply translations (next-intl), and connect backend data (Supabase) all at once. This leads to broken layouts and CSS conflicts. Follow the phased approach below exactly.
Prerequisite: The Stitch Prompt
When generating designs in Stitch, the user or AI should use the following prompt guidelines to ensure compatibility with CPHport:
- Use Tailwind CSS and standard utility classes.
- Use explicit colors:
text-primary(#0091aa),bg-background-light(#f8f6f6), andbg-background-dark(#101a1d). - For transparent/glass elements, use the class
glass-card. - Ensure components are responsive and use semantic HTML.
Phase 1: Raw Component Creation
Instead of overwriting existing complex integrated components, start by creating a "Raw" version.
- Create a new file for the component with a
Rawsuffix (e.g.,src/components/home/HeroRaw.tsx). - Copy the Stitch HTML into the
returnstatement of this functional React component. - Convert all HTML attributes to React syntax (e.g.,
class->className,onclick->onClick, closing standalone tags like<img />and<br />). - DO NOT add
next-intltranslation hooks (useTranslations). Leave the hardcoded text exactly as it is in the Stitch file. - DO NOT add database fetching logic or props.
- Check for conflicting global wrapper classes from Stitch (like
min-h-screen bg-lighton a<body>tag) that shouldn't be inside a component, and remove them.
Phase 2: CSS Token & Layout Verification
Before making the component functional, ensure the basic visual styling works.
- Temporarily render the new
Rawcomponent on the relevant page (e.g., insrc/app/[locale]/page.tsx, swap<Hero />with<HeroRaw />). - Verify that Tailwind variables (
--color-primary,--color-background-light) insrc/app/globals.cssare correctly mapped and not overridden by OS-level dark mode settings. - Wait for User Verification: Ask the user to run the app locally (
npm run dev) and visually inspect theRawcomponent. Do not proceed to Phase 3 until the user confirms the layout looks perfect.
Phase 3: Logic & Internationalization Integration
Once the raw visual layout is approved, integrate it into the real system.
- Translations:
- Extract the hardcoded text strings from the
Rawcomponent. - Update both
messages/da.jsonandmessages/en.jsonwith the new strings, overwriting old keys if replacing an existing design. - Introduce
const t = useTranslations('Namespace');to the component and replace text with{t('key')}.
- Extract the hardcoded text strings from the
- Data Binding:
- Introduce necessary TypeScript interfaces for props (e.g.,
interface Article { title: string; ... }). - Replace hardcoded placeholder content (like loops of news cards) with dynamic
.map()functions driven by props.
- Introduce necessary TypeScript interfaces for props (e.g.,
- Finalization:
- Rename
HeroRaw.tsxtoHero.tsx(or update the original target layout file with the new code). - Clean up any unused files.
- Run a final build check (
next buildornpm run dev) to ensure no Turbopack or syntax errors exist.
- Rename
Related Skills
simonpaag/.agents/skills/verify-deployment
testing
VerifiedTrustedCommunity
How to systematically verify changes after a live deployment
SKILL.mdUpdated Apr 16, 2026
simonpaag/enforce-seo-standards
testing
VerifiedTrustedCommunity
Check list and standards for search-engine optimizing every new page and entity on CPHport.com.
SKILL.mdUpdated Apr 16, 2026
simonpaag/enforce-design-strategy
documentation
VerifiedTrustedCommunity
Standard guidelines and design system details for CPHport.com, combining Maritime and Industrial aesthetics.
SKILL.mdUpdated Apr 16, 2026
simonpaag/create-template-page
documentation
VerifiedTrustedCommunity
Guide for creating a new standardized page or content entry based on predefined templates (e.g., tourism, businesses, cruise ships).
SKILL.mdUpdated Apr 16, 2026