菜单
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',
}