vibe-building-skills

In the author's own words, from each skill's SKILL.md — showing the first 30 of 40 files.

• brand-asset

  Produces branded visual identity elements — logo concepts, icon sets, seamless patterns, brand illustrations, and textures — as generation-ready prompt specs, and generates them via FAL.ai fal-ai/nano-banana-pro when the automation is configured. Use when the user says 'design a logo', 'I need icons', 'brand pattern / texture', 'brand illustrations', 'visual identity elements', or 'make my brand…

  skills/creative/brand-asset/SKILL.md on GitHub (opens in a new tab)

• creative-strategist

  Establishes a brand's visual direction and compresses it into a Creative Direction Brief with a paste-ready 'style block' that every downstream image prompt reuses, so all generated assets look like they came from one brand. Use when the user says 'define my brand style', 'I want a consistent look', 'what should my visuals look like', 'help me pick an aesthetic / mood / color palette', 'my genera…

  skills/creative/creative-strategist/SKILL.md on GitHub (opens in a new tab)

• image-generation

  Turns any request for an AI-generated image into precise, generation-ready prompt specs and — when the FAL.ai automation is configured — the generated files themselves, using the single model fal-ai/nano-banana-pro. Use whenever the user asks to 'generate an image', 'make a picture of X', 'create a thumbnail / hero image / illustration / infographic', 'write me a prompt for this image', or any vi…

  skills/creative/image-generation/SKILL.md on GitHub (opens in a new tab)

• orchestrator

  Dispatcher for the creative suite: diagnoses a multi-asset creative request with a few questions, then routes it through the right sequence of creative skills, naming the artifact each step passes to the next, and wires in the FAL.ai automation (single model fal-ai/nano-banana-pro via docs/creative_cli.py) when available. Use when the user asks for several creative deliverables at once or an outc…

  skills/creative/orchestrator/SKILL.md on GitHub (opens in a new tab)

• original-design

  Facilitates an interactive session that turns a product or subject into an original, internally consistent visual design language for any artifact — infographics, video storyboards, websites, or mobile app UI/UX. Use when the user wants an original design language, identity, or art direction, or when a design feels generic, derivative, 'AI-default,' or inconsistent and needs one unifying idea. Tr…

  skills/creative/original-design/SKILL.md on GitHub (opens in a new tab)

• product-photography

  Produces professional AI product photography — clean e-commerce shots, lifestyle scenes, hero images, macro detail shots, and flat lays — as generation-ready prompt specs, and generates the files via FAL.ai fal-ai/nano-banana-pro when the automation is configured. Use when the user says 'product photos', 'shots of my product', 'images for my store / listing / landing page', 'hero image for my pro…

  skills/creative/product-photography/SKILL.md on GitHub (opens in a new tab)

• product-video

  Plan an animated product video end-to-end: pick the video type, define the animation style and pacing, write a beat-by-beat shot list, and produce ready-to-run keyframe prompts. Use whenever the user wants a product video, product animation, launch video, promo or ad video, animated product reveal, 360 spin, feature showcase, or 'a short video for my product' — even if they only say 'I need a vid…

  skills/creative/product-video/SKILL.md on GitHub (opens in a new tab)

• remotion-script-writer

  Write a complete, render-ready Remotion video script as structured JSON: analyze the user's codebase or product, break the video into timed scenes, specify every visual element, animation, transition, and voiceover line, and list required assets and Remotion packages. Use whenever the user wants a Remotion video, a programmatic/code-rendered video, a product demo video of their app, an animated c…

  skills/creative/remotion-script-writer/SKILL.md on GitHub (opens in a new tab)

• social-graphics

  Produce platform-correct social media graphics: pick the right dimensions and layout per platform, write the headline/body/CTA copy, build the generation prompt, and generate the image via the repo's FAL.ai pipeline. Use whenever the user wants a social post visual, Instagram post/story/carousel, LinkedIn graphic, Twitter/X image, TikTok thumbnail, Pinterest pin, launch announcement graphic, or '…

  skills/creative/social-graphics/SKILL.md on GitHub (opens in a new tab)

• talking-head

  Plan presenter-led and UGC-style videos: choose the presenter archetype, define styling, setting, lighting, and framing, write the hook/body/CTA script skeleton, and produce keyframe prompts for the repo's FAL.ai pipeline. Use whenever the user wants a talking-head video, presenter video, UGC ad, testimonial, founder video, explainer with a person on camera, spokesperson content, or 'someone talk…

  skills/creative/talking-head/SKILL.md on GitHub (opens in a new tab)

• accessibility-excellence

  Audit a frontend against WCAG and fix what fails: semantic HTML, keyboard navigation, focus management, screen-reader support (ARIA), color contrast, forms, and media alternatives. Use when the user asks 'is this accessible', 'make this WCAG/AA compliant', 'add keyboard navigation', 'fix screen reader support', 'a11y audit', 'we got an accessibility complaint/legal notice', or whenever building/r…

  skills/frontend-design/accessibility-excellence/SKILL.md on GitHub (opens in a new tab)

• color-system

  Build or repair a color system: full brand and neutral ramps, semantic color tokens, contrast-verified pairings, dark mode, and status colors — delivered as a tokens file (CSS variables / Tailwind theme) with every text pairing's contrast ratio computed. Use when the user says 'the colors look off', 'colors clash', 'add dark mode', 'is this accessible', 'pick a palette', 'too many blues in the co…

  skills/frontend-design/color-system/SKILL.md on GitHub (opens in a new tab)

• component-architecture

  Audit and refactor a frontend codebase's component structure, or design a component library from scratch, using atomic design, composition, and disciplined prop interfaces. Use when the user says 'my components are a mess', 'this component is 800 lines', 'refactor my components', 'build a component library', 'how should I structure my components', 'too much prop drilling', 'we keep rebuilding the…

  skills/frontend-design/component-architecture/SKILL.md on GitHub (opens in a new tab)

• design-engineer-mindset

  Translate a design (Figma mockup, spec, screenshot, or verbal description) into code with pixel- and motion-level fidelity, using the browser's rendering pipeline as a constraint: exact spacing/timing via tokens, GPU-safe animations, no layout thrashing, 60fps interactions. Use when the user says 'implement this design', 'make it match the mockup', 'it doesn't look like the Figma', 'the animation…

  skills/frontend-design/design-engineer-mindset/SKILL.md on GitHub (opens in a new tab)

• design-foundation

  Create or extract a design-token foundation — colors, typography, spacing, radii, shadows — as a real tokens file (CSS variables and/or Tailwind theme) plus a migration map from current hardcoded values. Use when the user says 'set up a design system', 'our styles are inconsistent', 'we have 50 shades of the same blue', 'add design tokens', 'formalize our design', 'make new features match', or wh…

  skills/frontend-design/design-foundation/SKILL.md on GitHub (opens in a new tab)

• error-handling-recovery

  Audit and implement an app's error UX end-to-end: rewrite error messages, place them correctly, add recovery actions, and build error states for validation, network, permission, system, and 404 failures. Use when the user says 'improve my error handling', 'my error messages suck', 'users get stuck when something fails', 'add form validation errors', 'handle offline/network errors', 'design a 404…

  skills/frontend-design/error-handling-recovery/SKILL.md on GitHub (opens in a new tab)

• frontend-orchestrator

  Diagnose a codebase's frontend design maturity and route the work through the right sequence of frontend-design skills. Use when the user makes a broad or vague design request — 'make this look better', 'polish the UI', 'this feels like an MVP', 'our frontend is a mess', 'where do I start with design', 'make it feel professional', 'plan a design system' — or when a request spans multiple design c…

  skills/frontend-design/frontend-orchestrator/SKILL.md on GitHub (opens in a new tab)

• interaction-physics

  Design and implement the motion layer of a UI — microinteractions, transitions, hover/press feedback, and animation timing/easing — as working CSS/JS plus a written animation spec. Use when the user says 'the app feels janky', 'animations feel off', 'make it feel smoother/snappier', 'add a transition', 'the modal just pops in', 'buttons feel dead', 'add some polish/delight', or when interactions…

  skills/frontend-design/interaction-physics/SKILL.md on GitHub (opens in a new tab)

• layout-system

  Fix or build responsive layout: page shells, grids, card layouts, sidebars, breakpoint strategy, container queries. Use when the user says 'this breaks on mobile', 'the layout is messy', 'things don't line up', 'our spacing is inconsistent between sections', 'make this responsive', 'center this properly', or asks for a dashboard/page/grid layout. Inspects existing CSS for layout smells (fixed wid…

  skills/frontend-design/layout-system/SKILL.md on GitHub (opens in a new tab)

• loading-states

  Audit an app's async surfaces and implement the right loading, progress, and empty states — skeleton screens, spinners, progress bars, first-use/no-results/error-empty views — chosen by expected latency and layout knowledge. Use when the user says 'add loading states', 'the page just goes blank while fetching', 'add a skeleton screen', 'users think it's frozen', 'spinner or skeleton?', 'design th…

  skills/frontend-design/loading-states/SKILL.md on GitHub (opens in a new tab)

• performance-optimization

  Diagnose and fix how slow a frontend feels and measures: optimistic UI for mutations, latency masking (skeletons, blur-up, preloading, staggering), request batching/deduplication, and Core Web Vitals (LCP/INP/CLS) remediation. Use when the user says 'the app feels slow', 'clicks feel laggy', 'improve performance', 'my Lighthouse score is bad', 'fix my Core Web Vitals / LCP / CLS', 'make saves fee…

  skills/frontend-design/performance-optimization/SKILL.md on GitHub (opens in a new tab)

• typography-system

  Build or repair a typography system: a modular type scale, font choices and loading, hierarchy, line-height/line-length, and fluid sizing — delivered as tokens (Tailwind fontSize config or CSS variables) applied to real components. Use when the user says 'the text looks off', 'fonts are inconsistent', 'headings don't stand out', 'pick fonts for me', 'it's hard to read', 'too many font sizes', or…

  skills/frontend-design/typography-system/SKILL.md on GitHub (opens in a new tab)

• visual-hierarchy-refactoring

  Refactor cluttered or flat interfaces so users instantly see what matters, using size, weight, contrast, and whitespace — not more color. Use when the user says 'it looks cluttered', 'everything competes for attention', 'it looks amateur/flat', 'users can't find the button', 'make this scannable', 'this screen is overwhelming', or shares a screen where nothing stands out. Audits the actual compon…

  skills/frontend-design/visual-hierarchy-refactoring/SKILL.md on GitHub (opens in a new tab)

• brand-voice

  Define a brand's voice and produce a working voice guide: a personality archetype, settings on eight voice dimensions, do/don't rules, word choices, a tone matrix by context, and before/after rewrites of the user's real content. Use when the user says 'define my brand voice', 'what should our tone be', 'make this sound like us', 'our content sounds generic/inconsistent', 'write tone-of-voice or b…

  skills/marketing/brand-voice/SKILL.md on GitHub (opens in a new tab)

• content-atomizer

  Turn one piece of long-form content (blog post, video/podcast transcript, guide, talk) into a ready-to-post multi-platform content pack: LinkedIn posts, X/Twitter thread, newsletter item, short-video scripts, carousel outlines, quote pulls, and more — each natively adapted, not copy-pasted. Use when the user says 'repurpose this post', 'turn this into social content', 'atomize this', 'get more mi…

  skills/marketing/content-atomizer/SKILL.md on GitHub (opens in a new tab)

• direct-response-copy

  Write copy engineered to drive one specific action — landing pages, sales pages, opt-in pages, ads, promotional emails — using an eight-part direct-response architecture (hook, problem, mechanism, solution, proof, objections, CTA, urgency). Use when the user says 'write my landing page / sales page / ad', 'this page isn't converting', 'rewrite my homepage copy', 'write copy for my lead magnet pag…

  skills/marketing/direct-response-copy/SKILL.md on GitHub (opens in a new tab)

• email-sequences

  Write a complete automated email sequence, every email fully drafted: welcome sequence for new subscribers, ongoing nurture rotation, conversion sequence for an offer, or launch sequence for something new. Use when the user says 'write my welcome emails', 'set up a drip campaign', 'I'm launching X and need emails', 'nurture my list', 'write a sales email sequence', or connects a lead magnet to fo…

  skills/marketing/email-sequences/SKILL.md on GitHub (opens in a new tab)

• keyword-research

  Build a prioritized keyword cluster map using the 6 Circles Method — keywords at the intersection of positioning alignment, customer language, competitor blind spots, workable search volume, real expertise, and business intent. Use when the user asks 'what keywords should I target', 'what should I write about', 'find SEO opportunities', 'plan my content strategy', 'what does my audience search fo…

  skills/marketing/keyword-research/SKILL.md on GitHub (opens in a new tab)

• lead-magnet

  Design a lead magnet — the free offer that trades real value for an email address — by picking the right problem slice, hook, and format, validating it, and drafting the asset. Use when the user says 'grow my email list', 'I need a lead magnet / freebie / opt-in', 'create a free download', 'how do I capture leads', 'nobody signs up', or when a funnel needs an entry offer before the paid ask. Prod…

  skills/marketing/lead-magnet/SKILL.md on GitHub (opens in a new tab)

• newsletter

  Write a ready-to-send newsletter issue (and, when starting from zero, the recurring format and cadence to commit to): subject line options, preview text, body in one of six proven formats, and a single engagement CTA. Use when the user says 'write my newsletter', 'this week's issue', 'I want to start a newsletter', 'what should I send my list', 'help me email my subscribers regularly', or shares…

  skills/marketing/newsletter/SKILL.md on GitHub (opens in a new tab)

No skill matches that filter.

Similar skills

• khazix-skillsby KKKKhazix 数字生命卡兹克开源的 AI Skills 合集 | Agent Skills: leader（帮你定义目标）, neat-freak 洁癖, hv-analysis, khazix-writer & more — Claude Code, Codex & 40+ agents 21.4k stars · 6 skills
• agent-skills-platformby FrancyJGLisboa Build tested agent skills and govern their lifecycle through a user-defined marketplace: evidence, discovery, updates, rollback, quarantine… 2.4k stars · 6 skills
• reaby morluto Reverse engineer anything with agents, from app behavior down to native binaries. 270k stars · 1 skill
• taste-skillby Leonxlnx Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages 97.3k stars · 13 skills
• archifyby tt-a1i Turn any idea, plan, or codebase into a beautiful interactive diagram. An agent skill for Claude Code, Codex, and more. 84.1k stars · 2 skills
• Kamiby tw93 👩 🚒 Good content deserves good paper. Layout rules and templates that let AI agents export PDF, PNG and editable PowerPoint. 12k stars · 1 skill