メニュー
Set up favicon and PWA manifest for website projects. Creates favicon.ico, apple-touch-icon, and site.webmanifest. Use at project end before release. Triggers on "favicon", "PWA", "manifest", "app icon".
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Build pages by installing shadcnblocks sections and implementing i18n. Use for each page after branding is defined. Takes page route and list of sections to install. Installs sections in order, creates page file, extracts text to de.json/en.json, and adds useTranslations.
Add smooth scrolling for same-page anchor links only. Uses JavaScript to handle
Add cinematic lerp-based smooth scrolling for all scroll inputs (mouse wheel, trackpad, touch). Creates butter-smooth momentum scrolling like premium agency websites. Works alongside existing smooth-scroll anchor links.
Define brand styling for website projects. Updates globals.css with CSS color variables (oklch format), typography (h1-h6, p, a, blockquote), and container styles. Use at the start of a project after sitemap is created. Requires primary, secondary, and accent colors plus font choice.
Add elegant page transition overlay using 3 staggered color layers. Overlay covers screen during navigation and reveals once new page is loaded. Use during /init or standalone.
Configure footer navigation links for SEO completeness. Sets up all pages (Homepage, Services, About, Contact, Impressum, Datenschutz) in organized groups. Dynamically finds footer*.tsx component. Updates i18n with all footer keys.
| name | favicon-pwa |
| description | Set up favicon and PWA manifest for website projects. Creates favicon.ico, apple-touch-icon, and site.webmanifest. Use at project end before release. Triggers on "favicon", "PWA", "manifest", "app icon". |
Create favicon set and PWA manifest for professional web presence.
| File | Size | Location |
|---|---|---|
| favicon.ico | 16x16, 32x32, 48x48 | app/favicon.ico |
| apple-touch-icon.png | 180x180 | public/apple-touch-icon.png |
| icon-192.png | 192x192 | public/icon-192.png |
| icon-512.png | 512x512 | public/icon-512.png |
Create at public/site.webmanifest:
{
"name": "[Business Name]",
"short_name": "[Short Name]",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "[primary color from globals.css]",
"background_color": "[background color from globals.css]",
"display": "standalone",
"start_url": "/"
}
Add to app/layout.tsx metadata:
export const metadata: Metadata = {
icons: {
icon: '/favicon.ico',
apple: '/apple-touch-icon.png',
},
manifest: '/site.webmanifest',
}