Skill.md files: teach Claude once, not every chat.

• SKILL.md

---
name: figma-generate-design
description: Build or update screens in Figma from code or description using design system components. Translate app pages into Figma using design tokens.
---

• SKILL.md

---
name: figma-generate-library
description: Build or update a professional-grade design system library in Figma from a codebase. Useful for keeping the Figma source of truth in sync with shipped components.
---

• SKILL.md

---
name: figma-implement-design
description: Translate Figma designs into production-ready code with 1:1 visual fidelity. Useful for handing off Figma frames straight to a frontend agent.
---

• SKILL.md

---
name: figma-use
description: Run Figma Plugin API scripts for canvas writes, inspections, variables, and design-system work. Prerequisite for every other Figma skill in this catalogue.
---

• SKILL.md

---
name: flutter-animating-apps
description: Implement animated effects, transitions, and motion in Flutter apps. Useful for native iOS/Android motion design.
---

• SKILL.md

---
name: frontend-design
description: Create distinctive, production-grade frontend interfaces with strong visual direction, polished typography, considered layout, and working HTML/CSS/JS or framework code. Use for websites, landing pages, dashboards, React components, application screens, and UI beautification.
---

• SKILL.md

---
name: frontend-dev
description: Full-stack frontend with cinematic animations, AI-generated media via MiniMax API, and generative art. Useful for hero pages and showcase sites.
---

• SKILL.md

---
name: frontend-skill
description: Create visually strong landing pages, websites, and app UIs with restrained composition. OpenAI's production frontend playbook.
---

• SKILL.md

---
name: frontend-slides
description: Generate animation-rich HTML presentations with visual style previews. Useful for online keynotes, embedded talks, and interactive briefs.
---

• SKILL.md

---
name: full-page-screenshot
description: Capture full-page screenshots of web pages via Chrome DevTools Protocol with zero dependencies. Useful for portfolios, case studies, and audit reports.
---

• SKILL.md

---
name: gif-sticker-maker
description: Convert photos into animated GIF stickers in Funko Pop / Pop Mart style via the MiniMax API. Useful for personalized chat stickers and avatar packs.
---

• SKILL.md

---
name: gpt-taste
description: Elite UX/UI & Advanced GSAP Motion Engineer. Enforces Python-driven true randomization for layout variance, strict AIDA page structure, wide editorial typography (bans 6-line wraps), gapless bento grids, strict GSAP ScrollTriggers (pinning, stacking, scrubbing), inline micro-images, and massive section spacing.
---

• SKILL.md

---
name: hand-drawn-diagrams
description: Generate hand-drawn Excalidraw diagrams from a prompt — animated SVG, hosted edit link, and PNG export. Works with Claude Code, Codex, Gemini CLI, and any agent supporting standard skill paths.
---

• SKILL.md

---
name: html-ppt-retro-quarterly-review
description: Retro Quarterly Review presentation template in a bold blue + orange editorial
language. Use when users ask for a high-impact quarterly review / roadmap deck
with heavyweight slab headlines, clean cream paper sections, structured grids,
and fast premium motion pacing (3 slides, each hold under 3s in video mode).
---

• SKILL.md

---
name: image-enhancer
description: Improve image and screenshot quality by enhancing resolution, sharpness, and clarity for professional presentations and documentation.
---

• SKILL.md

---
name: image-to-code
description: Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy under-generation, avoid cards-inside-cards-inside-cards UI, and keep the hero clean, spacious, readable, and visible on a small laptop.
---

• SKILL.md

---
name: imagegen-frontend-mobile
description: Elite mobile app image-generation skill for creating premium, app-native screen concepts and flows. Designed for iOS, Android, and cross-platform mobile products. Prioritizes clean hierarchy, comfortably readable text, strong multi-screen consistency, controlled color palettes, non-generic creative direction, textured surfaces, image-led composition, tasteful custom iconography, and clean phone mockup framing. By default, screens should be shown inside a subtle premium iPhone or similar phone mockup with a visible frame, while the main focus stays on the app content itself. This skill generates images only. It does not write code.
---

• SKILL.md

---
name: imagegen-frontend-web
description: Elite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing page with 8 sections produces 8 images. Never compress multiple sections into one image. Enforces composition variety (not always left-text / right-image), background-image freedom, varied CTAs, varied hero scales (giant / mid / mini minimalist), narrative concept spine, second-read moments, and a single consistent palette across all images. Optimized for landing pages, marketing sites, and product comps that developers or coding models can accurately recreate.
---

• SKILL.md

---
name: imagegen
description: Generate and edit images using OpenAI's Image API for project assets — UI mockups, icons, illustrations, social cards, and visual references.
---

• SKILL.md

---
name: imagen
description: Generate images using Google Gemini's image generation API for UI mockups, icons, illustrations, and visual assets.
---

• SKILL.md

---
name: impeccable-design-polish
description: Follow-up design polish skill inspired by Impeccable. Use after a web or HTML artifact exists to audit, critique, polish, animate, harden, and prepare the page for a live/share pass.
---

• SKILL.md

---
name: library-curator
description: Search the OD Library (the global asset registry) and apply matching assets
into the current project mid-task. Use when the user asks to reuse an image
they captured/uploaded earlier, "pull a logo/screenshot from my library", or
to find and drop a stored asset into the page being built.
---

• SKILL.md

---
name: login-flow
description: Mobile login and authentication flow screens
---

• SKILL.md

---
name: marketing-psychology
description: Apply psychological principles and behavioral science to copy and design. Useful for tightening hooks, framing, and pricing presentation.
---