nexu-io/open-design
258 skills272k installs21M starsGitHub
Install
npx skills add https://github.com/nexu-io/open-designSkills in this repo
1Ui Ux Pro MaxThe ui-ux-pro-max skill |. ui-ux-pro-max > Curated from @nextlevelbuilder. What it does Catalog-only UI/UX Pro Max entry. The full upstream templates, data, and search workflow are not bundled in Open Design. Current Open Design scope Open Design currently ships this entry as discovery metadata only. If this `SKILL.md` is the only file under `skills/ui-ux-pro-max/`, the upstream UI/UX Pro Max workflow is not available locally. The full upstream workflow expects additional assets such as the searchable `data` CSVs, the `scripts/search.py` helper, reference material, templates, and related upstream skill instructions. Without those files, do not tell Agents should read SKILL.md quick start steps, verify required binaries and environment variables, and follow reference files for exact parameters before calling tools. The workflow includes decision gates, anti-patterns, and cross-links to sibling skills so agents stay aligned with upstream documentation rather than improvising.4.3kinstalls2Frontend Designfrontend-design creates distinctive production-grade interfaces with clear visual direction, polished typography, considered layout, and working HTML, CSS, JS, or framework code. Workflow starts by understanding audience, primary job, domain tone, and technical constraints including existing tokens, components, or DESIGN.md sources. The skill commits to one concrete aesthetic direction and rejects generic AI defaults such as purple-blue gradients, vague glass cards, and interchangeable SaaS layouts. Real interfaces include controls, empty, loading, and error states, tables, filters, navigation, and responsive behavior with honest sample content labels. Production code follows repository conventions, semantic markup, keyboard access, focus states, contrast, and CSS variables for repeated tokens. Open Design integration treats injected design systems as brand contracts, applying typography, color, and anti-ai-slop craft checks before delivery. Self-review verifies mobile and desktop fit, interaction states, and one memorable visual quality.2.9kinstalls3Web Design GuidelinesWeb Design Guidelines is a catalogue entry advertising Vercel engineering team standards for product UI covering layout, typography, color, motion, and accessibility. The Open Design listing helps agents discover the skill during planning with trigger phrases like web design guidelines, Vercel design, product UI standards, and design checklist. The upstream source lives in the vercel-labs skills repository on GitHub under the design-systems category. To run the full upstream workflow with original assets, scripts, and references, install the upstream bundle into the active agent skills directory and invoke by skill name or frontmatter triggers. This local SKILL.md describes what the guideline set covers and how to locate the complete upstream implementation rather than duplicating every rule inline. Developers use it as a routing skill when aligning interface work to Vercel product UI conventions before pulling the full reference package.2.8kinstalls4Design BriefParse a structured design brief into a concrete DESIGN md and optional visual preview Agent follow this workflow exactly The 8 dimensions in this skill are derived from analysis of the 71 design systems bundled with Open Design Every DESIGN md in design systems resolves at minimum color palette accent typography display font layout model and component style We distilled these into 8 orthogonal dimensions that cover the decisions a designer makes before any pixel is placed Mood and density were added because they are the two most common sources of ambiguity in natural language briefs make it clean means different things to different people Dimensions intentionally excluded from the brief level animation timing responsive strategy and accessibility contrast These are enforced at the template level by individual skills e g saas landing handles its own responsive logic though the generated DESIGN md includes sensible breakpoint defaults for downstream consumption The user provides a design brief in one of two formats PLAN DESIGN type saas_landing palette navy_and_white accent coral typography2.3kinstalls5Pptx Html Fidelity AuditAudit a python-pptx export against its source HTML deck, identify layout/content drift (footer overflow, cropped content, missing italic/em, lost styling, off-rhythm spacing), and re-export with strict footer-rail + cursor-flow layout discipline. Use this skill whenever the user has a .pptx that was generated from an HTML slide deck and asks to compare/audit/verify/fix the export - including phras --- name: pptx-html-fidelity-audit description: Audit a python-pptx export against its source HTML deck, identify layout/content drift (footer overflow, cropped content, missing italic/em, lost styling, off-rhythm spacing), and re-export with strict footer-rail + cursor-flow layout discipline. Use this skill whenever the user has a .pptx that was generated from an HTML slide deck and asks to compare/audit/verify/fix the export - including phrases like "compare ppt with html", "fidelity audit", "fix the pptx", "ppt is cut off", "footer overlap", "italic missing in pptx", "re-export the deck", "pptx-html-fidelity-audit", or any case where a python-pptx → HTML round-trip needs verification or repair.2.2kinstalls6Creative Director| The creative-director skill documents workflows and patterns from the repository SKILL.md. --- name: creative-director description: | AI creative director with recursive self-assessment: 20+ methodologies (SIT, TRIZ, Bisociation, SCAMPER, Synectics), 3-axis evaluation calibrated against Cannes/D&AD/HumanKind, 5-phase process from brief to presentation. triggers: - "creative director" - "campaign concept" - "creative critique" - "cannes review" - "scamper" od: mode: design-system category: creative-direction upstream: "https://github.com/smixs/creative-director-skill" --- # creative-director > Curated from @smixs. ## What it does AI creative director with recursive self-assessment: 20+ methodologies (SIT, TRIZ, Bisociation, SCAMPER, Synectics), 3-axis evaluation calibrated against Cannes/D&AD/HumanKind, 5-phase process from brief to presentation. ## Open Design orchestration mode When this skill is invoked inside Open Design, treat it as the design-flow director, not as a single polish checklist. Define what "good-looking" means before changing pixels: audience, product goal, brand posture, style references, information density, typography, palette, motion tone, asset needs, and.2.1kinstalls7ThreejsThe threejs skill | It covers upstream: https://github.com/CloudAI-X/threejs-skills. Key workflows include what it does. Developers invoke threejs when the task matches the triggers and reference files in SKILL.md for grounded, stepwise execution. Reference files and progressive disclosure keep context focused while preserving concrete commands, configuration fields, and validation checks copied from the upstream documentation. Reference files and progressive disclosure keep context focused while preserving concrete commands, configuration fields, and validation checks copied from the upstream documentation. Reference files and progressive disclosure keep context focused while preserving concrete commands, configuration fields, and validation checks copied from the upstream documentation. Reference files and progressive disclosure keep context focused while preserving concrete commands, configuration fields, and validation checks copied from the upstream documentation. Reference files and progressive disclosure keep context focused while preserving concrete commands, configuration fields, and validation checks copied from the upstream documentation.2.1kinstalls8Hatch PetThe hatch-pet skill. Create, repair, validate, preview, and package Codex-compatible animated pet spritesheets from character art, screenshots, generated images, or visual references. Use when a user wants to hatch a Codex pet, create a custom animated pet, or build a built-in pet asset with an 8x9 atlas, transparent unused cells, row-by-row animation prompts, QA contact sheets, preview videos, and pet.json packaging. After > the skill finishes packaging, the resulting (under > ) can be imported into the > floating pet companion via **Settings → Pets → Import Codex sprite**. The > import flow auto-detects the 8×9 / atlas and lets the user pick > which animation row to play (idle, running-right, waving, …). This skill owns pet-specific prompt planning, animation rows, frame extraction, atlas geometry, QA, previews, and packaging. If the user omits a pet name, infer one from the concept or reference filenames; if that is not possible, choose a short appropriate name.2.1kinstalls9Frontend SkillThe frontend-skill skill | It covers upstream: https://github.com/openai/skills. Key workflows include category: design-systems. Developers invoke frontend-skill when the task matches the triggers and reference files in SKILL.md for grounded, stepwise execution. Reference files and progressive disclosure keep context focused while preserving concrete commands, configuration fields, and validation checks copied from the upstream documentation. Reference files and progressive disclosure keep context focused while preserving concrete commands, configuration fields, and validation checks copied from the upstream documentation. Reference files and progressive disclosure keep context focused while preserving concrete commands, configuration fields, and validation checks copied from the upstream documentation. Reference files and progressive disclosure keep context focused while preserving concrete commands, configuration fields, and validation checks copied from the upstream documentation. Reference files and progressive disclosure keep context focused while preserving concrete commands, configuration fields, and validation checks copied from the upstream documentation.2kinstalls10Design ReviewA designer-centric skill that performs comprehensive visual audits on shipped interfaces, identifies design inconsistencies, and applies targeted fixes using atomic commits paired with before/after screenshots. Bridges design systems and code by enabling designers to verify UI quality, spacing, typography, and component consistency before product launch. Integrates upstream from gstack for creative direction workflows. Generates documented proof of improvements for design handoffs and stakeholder review.2kinstalls11Apple HigThe apple-hig skill from Open Design advertises Apple Human Interface Guidelines as fourteen agent skills covering platforms, foundations, components, patterns, inputs, and technologies for iOS, macOS, visionOS, watchOS, and tvOS. Triggers include apple hig, human interface, ios design, macos design, and visionos design phrases. Upstream source is raintree-technology apple-hig-skills in the design-systems category. Catalogue entry enables agent discovery during planning; full upstream assets require installing the bundle into the active agent skills directory. Agents invoke by name apple-hig or trigger phrases after upstream install. Use when designing native Apple platform interfaces, reviewing HIG compliance, or planning cross-platform Apple UX patterns before implementation. Fourteen upstream skills covering Apple HIG platforms and components. Platforms: iOS, macOS, visionOS, watchOS, and tvOS. Triggers: apple hig, human interface, ios design, macos design. Upstream: raintree-technology apple-hig-skills bundle.2kinstalls12DocxThis skill enables agents to create, edit, and analyze Word documents (.docx) with advanced features including tracked changes, inline comments, and rich formatting capabilities. Designed for collaborative workflows, it streamlines the production of design briefs, copy documents, and review-ready deliverables. The skill integrates with agent planning systems through trigger phrases and provides a bridge to Anthropic's upstream skills repository. Developers can invoke the skill by name or use contextual triggers to automate document generation and modification tasks within larger agent-driven workflows.1.9kinstalls13D3 VisualizationThe d3-visualization skill from Open Design teaches agents to build D3 charts and interactive graphics across bar, line, map, force, Sankey, treemap, sunburst, choropleth, scroll, and animation techniques. The catalog entry points to the upstream snow-d3 repository for full assets, scripts, and reference documents that agents clone into a skills directory before execution. Triggers include d3, interactive chart, editorial chart, and specific chart type requests. It targets editorial dashboards, reports, data-rich prototypes, and explanatory graphics rather than static screenshots. Agents discover the skill during planning, install upstream bundles when full workflows are needed, and invoke by name or trigger phrases. Use when users need custom D3 visualizations beyond generic chart libraries.1.9kinstalls14PptxThe pptx skill helps with Read, generate, and adjust PowerPoint slides, layouts, and templates. Useful for executive decks, training material, and product reviews. Key workflows include pptx; What it does; Source; How to use. Documented capabilities cover Upstream: https://github.com/anthropics/skills/tree/main/skills/pptx; Category: `slides`. Agents should invoke it when users ask about pptx or mention triggers defined in the skill frontmatter. Follow the SKILL.md steps, reference files, and output formats rather than improvising outside documented scope. Read, generate, and adjust PowerPoint slides, layouts, and templates. Useful for executive decks, training material, and product reviews. ## Source - Upstream: https://github.com/anthropics/skills/tree/main/skills/pptx - Category: `slides` ## How to use This catalogue entry advertises the skill in Open Design so the agent discovers it during planning. To run the full upstream workflow with its original assets, scripts, and references, install the upstream bundle into your active agent's skills directory: # Inspect the upstream README for exact paths open https://github.com/anthropics/skills/tree/main/skills/pptx Then ask the age.1.9kinstalls15PdfThe pdf skill in Open Design is a catalogue entry pointing agents to Anthropic's official pdf skill for extracting text, creating PDFs, and handling forms. It targets press releases, branded one-pagers, and printable design deliverables. The published SKILL.md explains that Open Design advertises the capability for planning while the full upstream bundle with scripts and references must be installed into the active agent skills directory from the Anthropic skills repository. Triggers include pdf, create pdf, pdf form, branded pdf, and one pager phrases. Agents should inspect the upstream README for exact install paths, then invoke by skill name or trigger phrases. Use when users need PDF generation or parsing workflows and the upstream bundle is available locally.1.9kinstalls16CopywritingThe copywriting skill helps with Write and rewrite marketing copy for landing pages, homepages, and ads. Useful as a copy chief partner during launches. Key workflows include copywriting; What it does; Source; How to use. Documented capabilities cover Upstream: https://github.com/coreyhaines31/marketingskills; Category: `marketing-creative`. Agents should invoke it when users ask about copywriting or mention triggers defined in the skill frontmatter. Follow the SKILL.md steps, reference files, and output formats rather than improvising outside documented scope. Write and rewrite marketing copy for landing pages, homepages, and ads. Useful as a copy chief partner during launches. ## Source - Upstream: https://github.com/coreyhaines31/marketingskills - Category: `marketing-creative` ## How to use This catalogue entry advertises the skill in Open Design so the agent discovers it during planning. To run the full upstream workflow with its original assets, scripts, and references, install the upstream bundle into your active agent's skills directory: # Inspect the upstream README for exact paths open https://github.com/coreyhaines31/marketingskills Then ask the agent to invoke this ski.1.9kinstalls17Design MdThe design-md skill from Open Design advertises Google Labs upstream workflow for creating and managing DESIGN.md files that capture design direction, design tokens, and visual rules in one source of truth. Triggers include design.md, design doc, design tokens doc, and visual rules doc phrases during planning. The catalogue entry helps agents discover the skill; full upstream assets, scripts, and references require installing the google-labs-code skills bundle into the active agent skills directory. Category is design-systems with design-system mode metadata. Agents invoke by name design-md or trigger phrases after upstream install. Use when teams need a committed design language document before feature specs or when consolidating tokens and visual constraints for cross-screen consistency. Creates DESIGN.md for design direction, tokens, and visual rules. Curated from Google Labs upstream design-systems category.1.9kinstalls18Color ExpertThe color-expert skill curates @meodai color science expertise with extensive reference material on OKLCH and OKLAB spaces, palette generation, accessibility and contrast checking, color naming, pigment mixing, and historical color theory. Triggers include color theory, palette generator, color science, OKLCH palette, and contrast check requests. Open-design metadata marks design-system mode. Agents load reference depth for perceptually uniform palettes, WCAG contrast validation, and systematic naming rather than arbitrary hex picks. Use when users need rigorous palette design, accessibility contrast audits, or OKLCH-based color systems. 286K words of color science reference on OKLCH, OKLAB, and theory Palette generation with accessibility and contrast checking Color naming, pigment mixing, and historical color theory coverage Triggers on OKLCH palette, contrast check, and color science requests Curated from @meodai upstream design-system expertise color-expert applies color science for OKLCH palettes, contrast, and systematic color naming Perceptually uniform palette with contrast checks and documented color rationale User mentions OKLCH, palette generator, contrast check, or col.1.9kinstalls19RemotionThe remotion skill curates Remotion team guidance for programmatic video creation with React. It targets branded explainers, social media cuts, dashboard-to-video exports, and reproducible motion graphics where compositions are code, not timeline-only edits. Triggers include remotion, react video, programmatic video, motion graphics, and video composition requests. Agents help users scaffold Remotion projects, define compositions as React components, parameterize renders, and export repeatable video assets. The open-design wrapper links upstream Remotion repository patterns while keeping mode video and category video-generation metadata. Use when users want React-driven video, motion templates, or automated render pipelines instead of manual NLE editing. Programmatic video creation with React compositions via Remotion Targets explainers, social cuts, dashboards-to-video, and motion graphics Curated from Remotion upstream with video-generation category metadata Supports reproducible renders parameterized in code rather than manual timelines Triggered by remotion, react video, and motion graphics requests remotion enables programmatic React-based video creation for explainers, socia.1.9kinstalls20Canvas DesignThe canvas-design skill curates Anthropic official canvas-design guidance for beautiful static visual art in PNG and PDF documents. Triggers include canvas design, visual art, poster design, create poster, illustration, and related terms. It applies design philosophy and aesthetic principles rather than generic stock layouts, targeting posters, illustrations, and static visual pieces. Open-design metadata marks mode image and category image-generation with upstream Anthropic skills repository link. Agents guide composition, palette, typography philosophy, and export formats. Use when users want designed posters or illustrations with intentional aesthetic direction. Creates PNG and PDF visual art with design philosophy principles Targets posters, illustrations, and static visual pieces Curated from Anthropic official canvas-design upstream skill Triggers on poster design, visual art, and illustration requests Emphasizes aesthetic principles over generic template fills canvas-design creates PNG and PDF visual art using design philosophy for posters and illustrations Designed static visual exported as PNG or PDF following philosophy-driven principles User mentions canvas design, post.1.9kinstalls21Ui SkillsThe ui-skills open-design skill provides evolving constraints guiding agents when building interface fragments so combined pages stay visually coherent. It covers spacing scales, component repetition, hierarchy, and anti-patterns for inconsistent micro-UI. Agents load constraints before generating multiple UI sections in one feature. Use when building many small UI pieces that must feel like one system. Opinionated constraints for agent-built interfaces. Keeps multi-piece UI visually coherent. Spacing, hierarchy, and component repetition rules. Evolving constraint set from open-design. Anti-patterns for inconsistent micro-UI. Apply opinionated UI constraints so agents keep interface output coherent across many small pieces.1.9kinstalls22Brand GuidelinesThe brand-guidelines open-design skill applies Anthropic official brand colors and typography rules to generated artifacts for cohesive visual identity. Agents reference palette tokens, type scales, spacing rhythm, and contrast requirements when producing slides, docs, or UI mockups. It helps teams keep multi-piece outputs visually aligned without improvising brand colors. Use when users need Anthropic-styled artifacts or professional design consistency across deliverables. Anthropic official brand colors and typography. Palette tokens and type scale references. Contrast and spacing rhythm for artifacts. Cohesive visual identity across deliverables. Professional design standards for generated assets. Apply Anthropic brand colors and typography to artifacts for consistent visual identity and professional design standards. Structured deliverables and steps from the brand-guidelines skill workflow. User mentions brand-guidelines or related skill triggers from the description. How do I apply brand-guidelines for the workflow described in SKILL.md?.1.9kinstalls23Flutter Animating AppsThe flutter animating apps skill |. Documentation covers workflows, commands, and guardrails agents should follow when users invoke this capability. Key documented areas include "flutter animation"; "flutter motion"; "mobile animation"; "flutter transitions". Reference commands include open https://github.com/flutter/skills. Use when developers or agents need structured guidance for flutter animating apps tasks with evidence grounded in the bundled SKILL.md rather than generic advice. "flutter animation" "flutter motion" "mobile animation" "flutter transitions" Upstream: https://github.com/flutter/skills Category: `animation-motion` |1.9kinstalls24Pptx GeneratorThe pptx-generator open-design skill builds PowerPoint presentations programmatically with PptxGenJS following MiniMax production-tested deck pipeline. Agents structure slide masters, layouts, charts, and speaker notes from content outlines. Use when users need programmatic PPTX generation rather than manual slide editing. PptxGenJS deck generation pipeline. Slide masters, layouts, and chart support. MiniMax production-tested patterns. Programmatic PPTX from content outlines. Create and edit presentations in code. Create and edit PowerPoint decks from scratch with PptxGenJS using MiniMax production-tested pipeline.1.9kinstalls25Marketing PsychologyThe marketing-psychology Open Design catalogue skill applies psychological principles and behavioral science to copy and design for hooks framing and pricing presentation. Curated from Corey Haines marketingskills upstream. Catalogue entry advertises skill for agent discovery during planning; full upstream bundle with assets scripts references installs separately into active agent skills directory. Triggers marketing psychology behavioral copy persuasion framing cognitive bias. Use tightening marketing hooks pricing frames and persuasive copy with grounded behavioral principles not generic filler. Behavioral science for copy and design. Hooks framing pricing presentation focus. Open Design catalogue discovery entry. Upstream Corey Haines marketingskills. Install upstream bundle for full workflow. Marketing psychology catalogue skill. User asks marketing psychology persuasion framing.1.8kinstalls26Frontend SlidesThe frontend-slides skill creates animation-rich zero-dependency HTML presentations on fixed 1920 by 1080 stage scaling to viewport. Start from example.html copying stage CSS slide shell SlidePresentation controller verbatim then replace content only. Hard spec locks 16:9 canvas deck-viewport deck-stage uniform scale letterboxing no responsive breakpoints inside slides distinctive typography committed palettes staggered reveals hash routing. Curated from zarazhangrui frontend-slides embedding viewport-base.css. Use for html slides web ppt interactive decks single-file browser presentations avoiding generic AI-slop aesthetics with choreographed reveals. Fixed 1920x1080 uniform viewport scale. Zero-dependency single-file HTML deck. Copy example.html stage system only. Keyboard nav and hash routing. Staggered reveals committed palette. HTML slide deck on 16:9 stage. User asks html slides or web ppt.1.8kinstalls27Nanobanana PptThe nanobanana ppt skill |. Documentation covers workflows, commands, and guardrails agents should follow when users invoke this capability. Key documented areas include "nanobanana ppt"; "ai ppt"; "styled ppt"; "document to ppt". Reference commands include open https://github.com/op7418/NanoBanana-PPT-Skills. Use when developers or agents need structured guidance for nanobanana ppt tasks with evidence grounded in the bundled SKILL.md rather than generic advice. "nanobanana ppt" "ai ppt" "styled ppt" "document to ppt" "banana ppt" Upstream: https://github.com/op7418/NanoBanana-PPT-Skills Category: `image-generation` |1.8kinstalls28Shadcn UiThe shadcn-ui Open Design catalogue skill builds UI components with shadcn/ui pairing Stitch design loop for structured accessible components quickly. Curated from Google Labs skills upstream. Catalogue advertises for agent planning discovery; install upstream bundle into active agent for full assets scripts references. Triggers shadcn shadcn ui accessible components. Use shipping structured accessible React UI with shadcn patterns when Open Design discovery routes to this design-system entry. shadcn/ui accessible component patterns. Pairs with Stitch design loop. Open Design catalogue discovery. Upstream Google Labs skills bundle. Install upstream for full workflow assets. shadcn/ui Open Design catalogue skill. User asks shadcn ui components.1.8kinstalls29SlidesThe slides skill |. Documentation covers workflows, commands, and guardrails agents should follow when users invoke this capability. Key documented areas include "slides"; "pptxgenjs"; "sales deck"; "design showcase deck". Reference commands include open https://github.com/openai/skills. Use when developers or agents need structured guidance for slides tasks with evidence grounded in the bundled SKILL.md rather than generic advice. "slides" "pptxgenjs" "sales deck" "design showcase deck" Upstream: https://github.com/openai/skills Category: `slides` |1.8kinstalls30Web Artifacts BuilderThe web-artifacts-builder skill advertises Anthropic's reference workflow for shipping rich embeddable HTML artifacts built with React and Tailwind on claude.ai. The Open Design catalogue entry points agents to the upstream bundle at anthropics/skills under skills/web-artifacts-builder, with trigger phrases like web artifacts, tailwind artifact, react artifact, and anthropic artifact. Agents discover it during planning, then install the upstream skill directory into the active agent skills folder to access original assets, scripts, and references before invocation. The listing metadata marks prototype mode and web-artifacts category with an upstream GitHub source link. Use when users need complex interactive HTML artifacts, React plus Tailwind embeddable demos, or Anthropic's official artifact builder patterns rather than plain static pages. References Anthropic's official web-artifacts-builder upstream skill bundle. Targets complex claude.ai HTML artifacts using React and Tailwind.1.8kinstalls31Agent BrowserThe agent browser skill |. Documentation covers workflows, commands, and guardrails agents should follow when users invoke this capability. Key documented areas include "browser"; "current browser tab"; "selected tab"; "open website". Reference commands include command -v agent-browser; npm i -g agent-browser. Use when developers or agents need structured guidance for agent browser tasks with evidence grounded in the bundled SKILL.md rather than generic advice. "browser" "current browser tab" "selected tab" "open website" "test this web app" "take a screenshot" "element screenshot" "extract logo" |1.8kinstalls32Fal Lip SyncThe fal lip sync skill |. Documentation covers workflows, commands, and guardrails agents should follow when users invoke this capability. Key documented areas include "lip sync"; "talking head"; "audio to video"; "avatar video". Reference commands include open https://github.com/fal-ai-community/skills. Use when developers or agents need structured guidance for fal lip sync tasks with evidence grounded in the bundled SKILL.md rather than generic advice. "lip sync" "talking head" "audio to video" "avatar video" "fal lipsync" Upstream: https://github.com/fal-ai-community/skills Category: `video-generation` |1.8kinstalls33Frontend DevThe frontend dev skill |. Documentation covers workflows, commands, and guardrails agents should follow when users invoke this capability. Key documented areas include "frontend dev"; "cinematic frontend"; "generative web"; "hero page". Reference commands include open https://github.com/MiniMax-AI/skills. Use when developers or agents need structured guidance for frontend dev tasks with evidence grounded in the bundled SKILL.md rather than generic advice. "frontend dev" "cinematic frontend" "generative web" "hero page" "showcase site" Upstream: https://github.com/MiniMax-AI/skills Category: `web-artifacts` |1.8kinstalls34Gsap Coregsap-core is the official GSAP skill in the nexu-io open-design collection, teaching agents the core GreenSock API including gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, and gsap.matchMedia() for responsive and prefers-reduced-motion handling. It triggers when developers ask for JavaScript animation, tweens, easing, or framework-agnostic motion in React, Vue, or vanilla JS, and recommends GSAP for timelines and scroll-driven work. The skill produces copy-paste-ready animation code that runs in any framework and mirrors patterns used by Webflow Interactions. Developers reach for gsap-core when they need precise, production-grade motion without hand-writing GSAP docs from scratch.1.8kinstalls35Theme FactoryThe theme factory skill |. Documentation covers workflows, commands, and guardrails agents should follow when users invoke this capability. Key documented areas include "theme factory"; "apply theme"; "design theme"; "theme generator". Reference commands include open https://github.com/anthropics/skills/tree/main/skills/theme-factory. Use when developers or agents need structured guidance for theme factory tasks with evidence grounded in the bundled SKILL.md rather than generic advice. "theme factory" "apply theme" "design theme" "theme generator" "preset theme" Upstream: https://github.com/anthropics/skills/tree/main/skills/theme-factory Category: `design-systems` |1.8kinstalls36Ad CreativeThe ad creative skill |. Documentation covers workflows, commands, and guardrails agents should follow when users invoke this capability. Key documented areas include "ad creative"; "ad headline"; "ad copy"; "paid social ad". Reference commands include open https://github.com/coreyhaines31/marketingskills. Use when developers or agents need structured guidance for ad creative tasks with evidence grounded in the bundled SKILL.md rather than generic advice. "ad creative" "ad headline" "ad copy" "paid social ad" "search ad" Upstream: https://github.com/coreyhaines31/marketingskills Category: `marketing-creative` |1.8kinstalls37Figma Implement DesignThe figma implement design skill |. Documentation covers workflows, commands, and guardrails agents should follow when users invoke this capability. Key documented areas include "figma to code"; "implement figma"; "figma fidelity"; "1:1 figma". Reference commands include open https://github.com/figma/skills. Use when developers or agents need structured guidance for figma implement design tasks with evidence grounded in the bundled SKILL.md rather than generic advice. "figma to code" "implement figma" "figma fidelity" "1:1 figma" Upstream: https://github.com/figma/skills Category: `figma` |1.8kinstalls38Swiftui DesignThe swiftui design skill |. Documentation covers workflows, commands, and guardrails agents should follow when users invoke this capability. Key documented areas include "swiftui design"; "ios design"; "native ui design"; "apple frontend". Reference commands include open https://github.com/wholiver/swiftui-design-skill. Use when developers or agents need structured guidance for swiftui design tasks with evidence grounded in the bundled SKILL.md rather than generic advice. "swiftui design" "ios design" "native ui design" "apple frontend" "swiftui slop" Upstream: https://github.com/wholiver/swiftui-design-skill Category: `design-systems` |1.8kinstalls39Ppt KeynotePpt-keynote is a web-based presentation template that generates Apple Keynote-style slides with 1280x720 resolution, one card per screen, and keyboard left/right arrow navigation. Developers use it to convert markdown content into minimalist deck layouts with large titles, supporting text, data visualizations, and fade-in transitions between slides. The template maintains visual consistency through gradient backgrounds, restrained color palettes, grid-based data card alignment, and whitespace preservation. Key workflows include authoring slide content in markdown, leveraging keyboard controls and hash-based navigation, and customizing typography (text-7xl titles, text-2xl subtitles) and layout. First and last slides provide cover and closing screens respectively, with page indicators (current/total) in the top-right corner.1.8kinstalls40After Hours Editorial TemplateThe after hours editorial template skill |. Documentation covers workflows, commands, and guardrails agents should follow when users invoke this capability. Key documented areas include "after hours editorial template"; "dark fashion hyperframes template"; "haute couture motion pages"; "magazine style cinematic slides". Reference commands include 1. Read active `DESIGN.md` and map colors, typography tone, and layout rhythm; into CSS variables while preserving a dark editorial baseline.. Use when developers or agents need structured guidance for after hours editorial template tasks with evidence grounded in the bundled SKILL.md rather than generic advice. "after hours editorial template" "dark fashion hyperframes template" "haute couture motion pages" "magazine style cinematic slides" "高级暗黑时尚风模板" "高定杂志风动效" template.html example.html |1.8kinstalls41Html Ppt Retro Quarterly ReviewThe html ppt retro quarterly review skill |. Documentation covers workflows, commands, and guardrails agents should follow when users invoke this capability. Key documented areas include "retro quarterly review"; "quarterly review template"; "roadmap slide style"; "blue orange presentation". Reference commands include 1. Read active `DESIGN.md` first and map any requested token changes into CSS; variables while preserving the retro blue/orange/cream visual grammar.. Use when developers or agents need structured guidance for html ppt retro quarterly review tasks with evidence grounded in the bundled SKILL.md rather than generic advice. "retro quarterly review" "quarterly review template" "roadmap slide style" "blue orange presentation" "vintage business deck" "季度复盘复古风" "蓝橙复古汇报模板" template.html |1.8kinstalls42Design ConsultationThe design consultation skill |. Documentation covers workflows, commands, and guardrails agents should follow when users invoke this capability. Key documented areas include "design consultation"; "design from scratch"; "design system kickoff"; "brand workshop". Reference commands include open https://github.com/garrytan/gstack. Use when developers or agents need structured guidance for design consultation tasks with evidence grounded in the bundled SKILL.md rather than generic advice. "design consultation" "design from scratch" "design system kickoff" "brand workshop" Upstream: https://github.com/garrytan/gstack Category: `creative-direction` |1.8kinstalls43BrainstormingBrainstorming transforms rough design ideas into fully-formed concepts using structured questioning and alternative exploration. It operates in design-system mode and guides agents through early-stage concept work, helping designers move from vague direction to articulated alternatives. Invoked via trigger phrases like 'brainstorm', 'ideation', or 'design alternatives', it surfaces in agent planning automatically and can be run as an upstream workflow from the superpowers bundle.1.8kinstalls44Platform DesignA curated skill providing 300+ design rules sourced from Apple HIG, Material Design 3, and WCAG 2.2 accessibility standards. Developers use this during frontend development to ensure consistent design patterns across iOS, Android, and web platforms. Key workflows include referencing HIG rules for iOS components, Material Design 3 patterns for Android, and WCAG 2.2 compliance for web accessibility. The skill integrates into agent-driven design planning, enabling developers to discover and apply cross-platform design standards without manually consulting multiple design system docs.1.8kinstalls45Enhance Promptenhance-prompt improves AI prompts by injecting design system vocabulary and UI/UX specifications, making them more precise for visual output generation. Developers use it in design-to-code workflows to clarify visual requests and ensure generated interfaces match design intent. The skill wraps prompts with curated design language from Google Labs, enabling agents to better understand and execute design requirements during planning and code generation phases.1.8kinstalls46Login FlowThis skill generates standalone HTML prototypes for mobile login flows, supporting phone-based SMS verification, password authentication, and social SSO. Developers use it when building sign-in experiences for mobile apps and need rapid UI prototypes with proper accessibility and state handling. The workflow includes reference checklists, clarification of auth method, and HTML output with 44px touch targets, loading states, error messaging, and safe-area constraints for notched devices.1.8kinstalls478 Bit Orbit Video TemplateThe 8 bit orbit video template skill |. Documentation covers workflows, commands, and guardrails agents should follow when users invoke this capability. Key documented areas include "hyperframes video template"; "video template"; "pixel motion deck"; "retro presentation video". Reference commands include The rendered MP4 showcase used by `example.html` is hosted at; 1. Copy `assets/template.html` to `index.html`.. Use when developers or agents need structured guidance for 8 bit orbit video template tasks with evidence grounded in the bundled SKILL.md rather than generic advice. "hyperframes video template" "video template" "pixel motion deck" "retro presentation video" "Hyperframes 模板" "视频模板" "像素风动效" template.html |1.8kinstalls48Field Notes Editorial TemplateField Notes Editorial Template produces premium, single-file HTML reports styled with soft paper backgrounds, serif display headlines, rounded pastel insight cards, and interactive retention charts. Developers use it when stakeholders request magazine-style board memos, data storytelling layouts, or elegant one-pagers. The workflow reads design system variables (color, typography, layout, components), copies a base template to index.html, preserves the editorial frame (vignette, serif/sans hierarchy, lightweight interactions like metric count-ups and chart reveals), and validates against a checklist before output. Outputs are production-ready HTML with honest placeholders where data is unknown.1.8kinstalls49Hand Drawn DiagramsThis skill generates hand-drawn Excalidraw diagrams from natural language prompts, producing animated SVG output, hosted edit links, and PNG exports. Developers use it to quickly prototype whiteboard-style diagrams and architecture sketches without manual drawing. The skill integrates with Claude Code, Codex, Gemini CLI, and standard agent frameworks, triggered by keywords like 'excalidraw', 'hand drawn diagram', 'sketch diagram', or 'whiteboard diagram'. Workflows include prompt-to-diagram generation and export for documentation or design review.1.8kinstalls50Venice Audio MusicVenice-audio-music exposes music generation queueing, retrieval, and completion endpoints through Venice.ai, enabling agents to produce audio assets on demand. Developers use it during prototype development and scoring workflows to generate jingles, background loops, and musical scores without external composition tools. The skill integrates directly into agent planning and invocation via trigger phrases like 'venice music', 'jingle', or 'background loop', handling queue management and async retrieval of generated tracks.1.8kinstalls51Digits Fintech Swiss TemplateDigits Fintech Swiss Template is a self-contained HTML template for building premium data-storytelling presentations with Swiss grid design principles, high-contrast lime accents, and modular numeric cards. Developers use it when crafting financial strategy decks or analytics dashboards that require strict visual hierarchy, restrained animation, and accessibility-first navigation (keyboard arrows, dot indicators, prev/next buttons). The template maintains a three-slide structure with inline CSS/JS, allowing rapid customization of copy and metrics without external dependencies.1.8kinstalls52Plan Design Reviewplan-design-review is a senior designer review workflow that evaluates design work across multiple dimensions on a 0-10 scale, explains what excellence (10) looks like for each dimension, and flags AI Slop signals as a quality gate. Developers use it before merging UI changes to catch quality issues early. The skill runs as an agent-invoked workflow via trigger phrases like 'senior designer review' or 'ai slop check', sourced from the gstack upstream repository and integrated into Open Design mode for automatic discovery during planning.1.8kinstalls53Gsap Scrolltriggergsap-scrolltrigger is a Claude Code skill from nexu-io/open-design, curated from GreenSock's official gsap-skills repository under MIT license. It is the official GSAP skill for ScrollTrigger, covering scroll-linked animations, element pinning, scrub timelines, and parallax sections. Developers reach for it when implementing or recommending scroll-based animation and no library has been specified yet. Triggers include scrolltrigger, scroll animation, gsap scroll, scroll pin, and scroll scrub. The skill operates in prototype mode for animation-motion surfaces.1.8kinstalls54Competitive Ads ExtractorThis skill enables agents to systematically extract and analyze competitor advertisements from public ad libraries, helping marketing teams understand messaging strategies and creative approaches that resonate with target audiences. Developers use it during competitive research and campaign planning phases to benchmark ad performance, identify market gaps, and inform creative direction. The workflow integrates with ad library APIs to pull competitor ads, then analyzes messaging, visuals, and targeting patterns to surface actionable insights for campaign development.1.8kinstalls55Algorithmic ArtThis skill enables developers to create generative art using p5.js with seeded randomness, ensuring every render is reproducible. Developers invoke it when building procedural posters, motion-style stills, or artistic frame studies that require deterministic output. The skill integrates into agent workflows as a discoverable tool during planning, allowing agents to generate visual content on demand by invoking the skill by name or trigger phrases. Installation routes through the upstream Anthropic skills repository, and usage involves requesting the agent to produce algorithmic art outputs.1.8kinstalls56Data Reportdata-report is an agent skill from nexu-io/open-design that turns csv, excel, or json data into a polished visual report page. 【模板: 数据可视化报告】 - 头部: 报告标题 + 时间区间 + 数据来源说明。 - KPI 卡片网格: 3-5 个最重要指标, 每个卡片显示数值 + 同比变化 + 微型趋势线。 - 主图表区: 至少 2 个图表 (柱状 / 折线 / 饼 / 散点), 使用 Chart.js 或 ECharts (jsdelivr CDN 引入), 数据从用户输入解析得到。 - **图表容器必须有固定高度**: 每个 `<canvas>` 外层包一个 `<div style="position:relative;height:NNNpx">` (KPI 迷你图 ~40px, 主图表 ~240–280px)。Chart.js 用 `responsive:true, maintainAspectRatio:f Developers invoke data-report during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.1.8kinstalls57ScreenshotSkill that captures screenshots of desktop environments, application windows, or specific pixel regions across macOS, Windows, and Linux. Developers invoke it during design reviews, bug documentation, and marketing asset creation. Triggered by phrases like 'screenshot', 'capture screen', or 'window screenshot', it integrates into agent workflows to automate visual capture tasks without manual tool switching.1.8kinstalls58Figma Generate DesignThis skill automates screen creation in Figma by translating code or natural language descriptions into visual designs using a project's design system components and tokens. Developers invoke it during frontend design phases to synchronize application pages with Figma prototypes, reducing manual design work. Key workflows include building new screens from code, updating existing designs, and maintaining consistency across design tokens.1.8kinstalls59Imagenimagen wraps Google Gemini's image generation API to produce visual assets for UI design workflows. Developers use it during frontend design phases to rapidly prototype mockups, create icon sets, and generate illustrations without manual design work. The skill integrates with agent planning via trigger phrases (gemini image, imagen, google image gen, illustration, icon) and runs as a discoverable tool within Open Design catalogs. Key workflows include requesting specific visual assets by description and iterating on generated outputs for UI components and branding materials.1.8kinstalls60Editorial Burgundy Principles TemplateAn HTML-based presentation template for editorial decks with a burgundy, blush, and muted-gold color palette. Designed for culture manifestos, strategy narratives, and internal principle statements. Includes three slides: numeric headline, studio tags with title lockup, and eight-card principle grid. Supports keyboard navigation (arrow keys) and dot-based slide navigation. Self-contained, sandbox-safe HTML with file-write capability to generate customized instances while preserving card hierarchy, tag structure, and interactive controls.1.8kinstalls61Full Page Screenshotfull-page-screenshot captures complete web page screenshots using Chrome DevTools Protocol with no external dependencies. Developers use it to generate visual artifacts for portfolios, case studies, audit reports, and regression testing workflows. The skill integrates directly into agent planning and can be invoked by name or natural language triggers like 'long screenshot' or 'web capture'. It operates via the upstream GitHub bundle and requires Chrome/Chromium access.1.8kinstalls62Image EnhancerImage-enhancer improves image quality by upscaling resolution, increasing sharpness, and reducing noise for professional use. Developers use it when preparing screenshots for documentation, presentations, or reports that require crisp, high-resolution assets. The skill accepts image inputs and applies enhancement filters to produce clearer, more detailed output suitable for technical writing and visual communication.1.8kinstalls63Gsap Reactgsap-react is an official-style GSAP skill from nexu-io/open-design, curated from GreenSock's gsap-skills repository under MIT license. It applies when writing or reviewing React or Next.js animation using useGSAP, refs, gsap.context(), and cleanup on unmount, with triggers including gsap react, usegsap, react animation, and gsap context. Developers reach for gsap-react to get correct motion code unless another library is explicitly chosen. The open-design metadata marks prototype mode in animation-motion category with upstream greensock/gsap-skills.1.8kinstalls64Minimax Pdfminimax-pdf generates, fills, and reformats PDFs using a token-based design system with 15 built-in cover styles. Developers use it when creating branded PDFs, reports, and e-guides that need consistent styling without manual layout work. The skill accepts data inputs, applies design tokens for color and typography, and outputs formatted PDFs. Key workflows include selecting a cover style, populating content fields, and exporting the final document. Integrates with agent planning via trigger phrases like "branded pdf" and "design system pdf".1.8kinstalls65Swiss Creative Mode TemplateThis skill produces a premium, self-contained HTML presentation template inspired by Swiss design principles and brutalist aesthetics. It delivers a single-file artifact with bold editorial typography, high-contrast geometric cards, interactive slide navigation (prev/next + dot controls), dual theme switching (paper/dark), palette choreography cycling, and hotspot overlays for annotations. Developers use it when building creative launch pages, portfolio decks, or pitch presentations that require strong visual rhythm and meaningful micro-interactions without external dependencies. The workflow reads design system variables, validates structure against a checklist, and embeds all CSS and JavaScript inline.1.8kinstalls66Artifacts Builderartifacts-builder provides a curated toolkit for constructing sophisticated HTML artifacts within claude.ai using React, Tailwind CSS, and shadcn/ui components. Developers use this skill when they need to rapidly prototype interactive UIs, dashboards, or data visualizations directly as Claude artifacts without manual component assembly. The workflow leverages modern frontend conventions to enable Claude to compose semantic, styled, and responsive multi-component interfaces through structured artifact generation.1.8kinstalls67DocThis skill enables agents to work with .docx documents through OpenAI's document handling capability, supporting read, create, and edit operations with full formatting and layout fidelity. Developers use it when building workflows that require document manipulation - generating reports, editing templates, or processing Word files within agent-driven systems. Key workflows include reading existing documents, creating new ones from scratch, and modifying content while maintaining original formatting and structure.1.8kinstalls68Figma Create Design System RulesThis skill generates project-specific design system rules for Figma workflows, capturing design tokens, naming conventions, and linting rules in a single source. Developers use it during frontend build phases to establish a bridge between Figma designs and code output, ensuring design consistency across projects. The skill integrates with Figma's MCP server to automate rule generation, reducing manual token definition and supporting automated code generation from design files.1.8kinstalls69Screenshots MarketingThis skill automates the creation of marketing screenshots using Playwright, targeting landing-page hero shots, App Store listings, and changelog visuals. Developers invoke it when preparing visual assets for product launches or updates. The workflow integrates Playwright's screenshot capabilities with marketing asset generation, allowing teams to produce consistent, templated screenshots without manual design work. Key use case: creating hero images and platform-specific screenshots at scale.1.8kinstalls70ImagegenThis skill wraps OpenAI's Image API to generate and edit images for design assets. Developers use it to quickly produce UI mockups, icons, illustrations, social cards, and visual references without leaving their agent environment. It integrates directly into planning workflows, triggered by phrases like 'generate image', 'create image', or 'icon design'. The skill advertises itself through Open Design's discovery system so agents can invoke it by name or trigger phrase during project planning and asset creation.1.8kinstalls71Poster Heroposter-hero is an agent skill from nexu-io/open-design that vertical poster or moments-style share image with strong visual impact. 【模板: 营销海报】 - 容器 `w-[1080px] h-[1920px] mx-auto`, 全屏渐变 / mesh 背景。 - 上部 30% 留白 + 一个大 emoji 或抽象几何图形。 - 中部主标题占视觉中心 (text-8xl, font-black), 一句话副标题。 - 下部信息卡片: 3-5 条核心要点用图标 + 短句。 - 底部右下角放品牌 / 二维码 (用 SVG 占位)。 - 使用大胆的色彩: 渐变背景 (from-violet-500 via-fuchsia-500 to-indigo-500 之类), 文字白色 + 1 个对比色高亮。 - 使用 SVG 做装饰性元素 (圆 / 三角 / 波浪 / 噪点纹理)。 Developers invoke poster-hero during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.1.8kinstalls72Video DownloaderThis skill enables agents to download videos from YouTube and other platforms in various formats and quality options for offline use, editing, or long-term archival. Developers invoke it when they need to automate video retrieval workflows, integrate video processing pipelines, or preserve content programmatically. The skill supports multiple output formats and quality selections, making it suitable for downstream editing tasks or bulk archival operations within agent-driven workflows.1.8kinstalls73Fal GenerateProduction-grade image and video generation skill integrating fal.ai AI models including Flux, SDXL, and ideogram. Developers invoke it via trigger phrases like 'fal generate' or 'flux image' to enable agents to create visual content. The skill wraps community-hosted endpoints from the fal.ai ecosystem, allowing agents to call image/video generation as part of larger workflows without managing model infrastructure directly.1.8kinstalls74Release Notes One PagerThis skill produces a structured one-page HTML release notes document containing version info, Added/Fixed/Breaking changes, Known issues, and Upgrade notes. Developers use it to quickly create professional release announcements when shipping new versions. The workflow involves copying a seed template, mapping design system variables, populating six mandatory sections in order (Hero, Added, Fixed, Breaking changes, Known issues, Upgrade note), and applying honesty rules: explicit "None" or "No details provided" placeholders for missing information rather than invention. Self-check gates ensure P0 criteria are met before emission.1.8kinstalls75Swiss User Research Video TemplateA premium Swiss-editorial template for narrative-driven user research artifacts in a single HTML file. The template uses warm paper aesthetics, strict spacing, thin rules, and restrained micro-interactions (click/keyboard navigation, donut legend hover, subtle transitions). Developers use it when building research presentation live artifacts that prioritize storytelling over complexity. Key workflows: map design tokens to CSS variables, maintain the three-slide structure (title, participant donut, behavioral patterns), preserve keyboard navigation (arrow keys, pagination dots), keep data consistent across copy and visualizations, and validate against the checklist before output.1.8kinstalls76Fal 3dfal-3d generates 3D models on-demand via fal.ai from text prompts or image inputs. Developers use it during frontend prototyping and game asset creation to rapidly produce concept models, AR-ready geometry, and product visualizations without manual modeling. The skill integrates into agent workflows via trigger phrases (fal 3d, text to 3d, image to 3d) and supports downstream use in game engines, AR frameworks, and e-commerce mockup pipelines. Curated from the fal.ai community, it abstracts API orchestration behind a discoverable skill interface.1.8kinstalls77Figma UseThis skill enables developers to execute Figma Plugin API scripts for programmatic design operations including canvas writes, design inspections, variable management, and design-system automation. It serves as the foundational prerequisite for all other Figma-related skills in the catalogue. Developers use it during the build phase when they need to automate repetitive design tasks, inspect design properties, manage design tokens and variables, or integrate Figma workflows into their agent-based pipelines. The skill is triggered via agent invocation with phrases like 'figma use', 'figma plugin api', or 'figma canvas'.1.8kinstalls78Fal Image Editfal-image-edit provides AI-powered image editing capabilities through fal.ai hosted models. Developers use it to programmatically apply style transfer, remove backgrounds, erase objects, and perform inpainting on images. The skill integrates fal.ai's inference endpoints into agent workflows, allowing automation of common image editing tasks without maintaining local models. Agents discover and invoke it via trigger phrases like 'fal image edit', 'inpaint', or 'style transfer'.1.8kinstalls79Fal Visionfal-vision integrates fal.ai vision models to perform multi-modal image analysis tasks including object detection, OCR, semantic segmentation, image captioning, and visual question answering. Developers use it during the build phase to add vision capabilities to agents and applications without managing model infrastructure. Key workflows include extracting structured data from images, automating visual inspection, and enabling conversational image understanding through agent planning.1.8kinstalls80Minimax Docxminimax-docx enables programmatic DOCX document creation and editing via OpenXML SDK. Developers use it to build branded reports, polished proposals, and template-based documents without manual formatting. The skill wraps OpenXML capabilities for structured document authoring, supporting custom styling, multi-section layouts, and reusable templates. Key workflows include generating dynamic business reports with company branding, creating proposal templates with placeholders, and editing existing DOCX files to insert or modify content programmatically.1.8kinstalls81Shader DevShader-dev provides GLSL shader techniques for advanced graphics programming, covering ray marching, fluid simulation, particle systems, and procedural generation. Developers use this skill when building hero visuals, motion graphics, and interactive 3D effects that require custom shader implementations. The skill surfaces curated shader patterns from the MiniMax AI upstream repository, allowing agents to discover and invoke shader workflows during planning phases by name or trigger phrase. Key workflows include ray marching for volumetric rendering, fluid dynamics for realistic simulations, and procedural techniques for generating complex visual content without pre-rendered assets.1.8kinstalls82Youtube Clipperyoutube-clipper automates the extraction and editing of video highlights from YouTube sources. It pulls source video, identifies and slices highlight segments, applies automated captioning, and exports finished clips. Developers use this skill when building content repurposing workflows, social media distribution pipelines, or multi-format video generation agents. Key workflows include trigger-based clip generation, batch highlight extraction, and caption synchronization for downstream publishing.1.8kinstalls83Domain Name BrainstormerDomain-name-brainstormer generates creative domain name suggestions and verifies availability across common TLDs (.com, .io, .dev, .ai). Developers use it during early-stage project planning to quickly explore naming options and validate domain acquisition feasibility. The workflow supports discovery triggers for domain brainstorming, TLD checking, and startup naming scenarios, enabling teams to move past naming bottlenecks in the idea validation phase.1.8kinstalls84Ai Music Albumai-music-album is an agent skill from nexu-io/open-design that agent skill for ai-music-album workflows documented in skill.md. # ai-music-album > Curated from bitwize-music-studio. ## What it does Full-lifecycle AI music album production concept, lyric drafting, track sequencing, and export. Useful for album experiments and brand soundtracks. ## Source - Upstream: https://github.com/bitwize-music-studio/claude-ai-music-skills - Category: `audio-music` ## How Developers invoke ai-music-album during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments. Category Design & UI/UX with design vertical focus supports repeatable agent-guided delivery.1.7kinstalls85SpeechThis skill wraps OpenAI's text-to-speech API to generate spoken audio from text with built-in voice options. Developers use it to produce narrated explainers, lecture audio, and quick voiceover tracks without managing voice synthesis infrastructure. The skill integrates into agent workflows via trigger phrases (openai speech, tts openai, narrated audio, voice over) and can be invoked directly by name. Installation requires accessing the upstream OpenAI skills repository and adding the bundle to an agent's skills directory.1.7kinstalls86Figma Generate Libraryfigma-generate-library is an agent skill from nexu-io/open-design that agent skill for figma-generate-library workflows documented in skill.md. # figma-generate-library > Curated from Figma's MCP server guide. ## What it does 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. ## Source - Upstream: https://github.com/figma/skills - Category: `figma` ## How to use This catal Developers invoke figma-generate-library during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.1.7kinstalls87Fal Tryonfal-tryon is an agent skill from nexu-io/open-design that agent skill for fal-tryon workflows documented in skill.md. # fal-tryon > Curated from the fal.ai community team. ## What it does Virtual try-on — see how clothes look on a person via fal.ai's hosted try-on models. Useful for ecommerce, lookbooks, and styling experiments. ## Source - Upstream: https://github.com/fal-ai-community/skills - Category: `image-generation` ## How to use This catalogue entry Developers invoke fal-tryon during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.1.7kinstalls88Fal Upscalefal-upscale is an agent skill from nexu-io/open-design that agent skill for fal-upscale workflows documented in skill.md. # fal-upscale > Curated from the fal.ai community team. ## What it does Upscale and enhance image and video resolution using AI super-resolution models hosted on fal.ai. ## Source - Upstream: https://github.com/fal-ai-community/skills - Category: `image-generation` ## How to use This catalogue entry advertises the skill in Open Design so the Developers invoke fal-upscale during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments. Category Design & UI/UX with design vertical focus supports repeatable agent-guided delivery.1.7kinstalls89Stitch Loopstitch-loop enables a design-to-code feedback loop where designers and developers critique output, adjust implementation, and ship incremental improvements. The skill structures a repeatable critique-adjust-ship cycle to tighten visual fidelity between design specifications and actual UI. Developers use it during frontend implementation to systematically close gaps between intended design and rendered output, integrating designer feedback into build workflows. Key workflows include reviewing built components against design brief, identifying fidelity gaps, making targeted adjustments, and verifying improvements before deployment.1.7kinstalls90Gsap Timelinegsap-timeline is curated from GreenSock's official gsap-skills repository (github.com/greensock/gsap-skills) under MIT license and targets developers sequencing complex motion on the web. The skill covers gsap.timeline() construction, position parameters for precise offset timing, nested timelines for grouped choreography, and playback APIs for pause, resume, and scrubbing. Developers reach for gsap-timeline when animation order, staggered keyframes, or timeline nesting exceed what CSS transitions or simple tweens can express—landing pages, product tours, and data-visualization motion all benefit. Triggers include gsap timeline, animation timeline, sequenced animation, and motion choreography. open-design catalogs it in prototype mode under animation-motion category.1.7kinstalls91Sorasora is an agent skill from nexu-io/open-design that agent skill for sora workflows documented in skill.md. # sora > Curated from OpenAI's skills repository. ## What it does Generate, remix, and manage short video clips via OpenAI's Sora API. Useful for cinematic shots, b-roll, and rapid concept video iteration. ## Source - Upstream: https://github.com/openai/skills - Category: `video-generation` ## How to use This catalogue entry advertises the s Developers invoke sora during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments. Category Design & UI/UX with design vertical focus supports repeatable agent-guided delivery.1.7kinstalls92Gif Sticker Makergif-sticker-maker is an agent skill from nexu-io/open-design that agent skill for gif-sticker-maker workflows documented in skill.md. # gif-sticker-maker > Curated from MiniMax AI team. ## What it does Convert photos into animated GIF stickers in Funko Pop / Pop Mart style via the MiniMax API. Useful for personalized chat stickers and avatar packs. ## Source - Upstream: https://github.com/MiniMax-AI/skills - Category: `image-generation` ## How to use This catalogue entry a Developers invoke gif-sticker-maker during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.1.7kinstalls93Venice Image Editvenice-image-edit is an agent skill from nexu-io/open-design that agent skill for venice-image-edit workflows documented in skill.md. # venice-image-edit > Curated from the Venice.ai team. ## What it does Image edits, upscaling, and background removal via the Venice.ai API. ## Source - Upstream: https://github.com/veniceai/skills - Category: `image-generation` ## How to use This catalogue entry advertises the skill in Open Design so the agent discovers it during planning. Developers invoke venice-image-edit during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.1.7kinstalls94Fal Video Editfal-video-edit is an agent skill from nexu-io/open-design that agent skill for fal-video-edit workflows documented in skill.md. # fal-video-edit > Curated from the fal.ai community team. ## What it does Edit existing videos using AI — remix style, upscale, remove background, and add audio via fal.ai's hosted video models. ## Source - Upstream: https://github.com/fal-ai-community/skills - Category: `video-generation` ## How to use This catalogue entry advertises the s Developers invoke fal-video-edit during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.1.7kinstalls95Figma Code Connect Componentsfigma-code-connect-components is an agent skill from nexu-io/open-design that agent skill for figma-code-connect-components workflows documented in skill.md. # figma-code-connect-components > Curated from Figma's MCP server guide. ## What it does Connect Figma design components to code components using Code Connect so design-system updates flow into the codebase automatically. ## Source - Upstream: https://github.com/figma/skills - Category: `figma` ## How to use This catalogue entry advertises t Developers invoke figma-code-connect-components during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.1.7kinstalls96Faq Pagefaq-page is an agent skill from nexu-io/open-design that agent skill for faq-page workflows documented in skill.md. # FAQ Page Skill Produce a single FAQ page with collapsible accordion sections, search, and category filtering. ## Workflow 1. **Read the active DESIGN.md** (injected above). Use the component tokens for interactive elements (accordion headers, search input, category pills). 2. **Pick the domain** from the brief (e.g., SaaS product, e-commerc Developers invoke faq-page during operate/infra work for cloud & infrastructure tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments. Category Cloud & Infrastructure with operations vertical focus supports repeatable agent-guided delivery.1.7kinstalls97Fal Restorefal-restore is an agent skill from nexu-io/open-design that agent skill for fal-restore workflows documented in skill.md. # fal-restore > Curated from the fal.ai community team. ## What it does Restore and fix image quality — deblur, denoise, fix faces, and restore old documents using fal.ai's hosted restoration models. ## Source - Upstream: https://github.com/fal-ai-community/skills - Category: `image-generation` ## How to use This catalogue entry advertises t Developers invoke fal-restore during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments. Category Design & UI/UX with design vertical focus supports repeatable agent-guided delivery.1.7kinstalls98Paywall Upgrade Cropaywall-upgrade-cro is an agent skill from nexu-io/open-design that agent skill for paywall-upgrade-cro workflows documented in skill.md. # paywall-upgrade-cro > Curated from Corey Haines. ## What it does Design and optimize upgrade screens, paywalls, and upsell modals. Useful for SaaS conversion design and pricing-page experiments. ## Source - Upstream: https://github.com/coreyhaines31/marketingskills - Category: `marketing-creative` ## How to use This catalogue entry adverti Developers invoke paywall-upgrade-cro during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments. Category Design & UI/UX with design vertical focus supports repeatable agent-guided delivery.1.7kinstalls99Figma Create New Filefigma-create-new-file is an agent skill from nexu-io/open-design that agent skill for figma-create-new-file workflows documented in skill.md. # figma-create-new-file > Curated from Figma's MCP server guide. ## What it does Create a new blank Figma Design or FigJam file. Useful as the first step in scripted design-system or workshop workflows. ## Source - Upstream: https://github.com/figma/skills - Category: `figma` ## How to use This catalogue entry advertises the skill in Open De Developers invoke figma-create-new-file during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.1.7kinstalls100Fal Kling O3fal-kling-o3 is an agent skill from nexu-io/open-design that agent skill for fal-kling-o3 workflows documented in skill.md. # fal-kling-o3 > Curated from the fal.ai community team. ## What it does Generate images and videos with Kling O3 — Kling's most powerful model family — via fal.ai. ## Source - Upstream: https://github.com/fal-ai-community/skills - Category: `video-generation` ## How to use This catalogue entry advertises the skill in Open Design so the agen Developers invoke fal-kling-o3 during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.1.7kinstalls101Venice Audio Speechvenice-audio-speech is an agent skill from nexu-io/open-design that agent skill for venice-audio-speech workflows documented in skill.md. # venice-audio-speech > Curated from the Venice.ai team. ## What it does Text-to-speech models, voices, formats, and streaming via Venice.ai. Useful for narration, voiceover, and conversational agent voices. ## Source - Upstream: https://github.com/veniceai/skills - Category: `audio-music` ## How to use This catalogue entry advertises the sk Developers invoke venice-audio-speech during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments. Category Design & UI/UX with design vertical focus supports repeatable agent-guided delivery.1.7kinstalls102Venice Image Generatevenice-image-generate is an agent skill from nexu-io/open-design that agent skill for venice-image-generate workflows documented in skill.md. # venice-image-generate > Curated from the Venice.ai team. ## What it does Image generation endpoints and available styles via the Venice.ai API. ## Source - Upstream: https://github.com/veniceai/skills - Category: `image-generation` ## How to use This catalogue entry advertises the skill in Open Design so the agent discovers it during plann Developers invoke venice-image-generate during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.1.7kinstalls103Fal Trainfal-train is an agent skill from nexu-io/open-design that agent skill for fal-train workflows documented in skill.md. # fal-train > Curated from the fal.ai community team. ## What it does Train custom AI models (LoRA) on fal.ai for personalized image generation tailored to a brand, character, or style. ## Source - Upstream: https://github.com/fal-ai-community/skills - Category: `image-generation` ## How to use This catalogue entry advertises the skill in Op Developers invoke fal-train during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments. Category Design & UI/UX with design vertical focus supports repeatable agent-guided delivery.1.7kinstalls104Replicatereplicate is an agent skill from nexu-io/open-design that agent skill for replicate workflows documented in skill.md. # replicate > Curated from Replicate. ## What it does Discover, compare, and run AI models using Replicate's API. Strong fit for image, audio, and video generation pipelines that swap models frequently. ## Source - Upstream: https://github.com/replicate/skills - Category: `image-generation` ## How to use This catalogue entry advertises the s Developers invoke replicate during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments. Category Design & UI/UX with design vertical focus supports repeatable agent-guided delivery.1.7kinstalls105Deck Guizang Editorialdeck-guizang-editorial is an agent skill from nexu-io/open-design that editorial magazine meets e-ink: 10 layouts and 5 palettes (ink, indigo porcelain, forest ink, kraft paper, dune). 【模板: 归藏编辑墨水 Deck (Editorial × E-Ink)】 【意图】叙事、观点、分享、个人风格表达。墨纸印刷感, 不要科技感。Inspired by op7418/guizang-ppt-skill Style A。 【调色板 — 5 选 1, 严禁改 hex、严禁混用】 - 🖋 **墨水经典 Monocle** — ink `#0a0a0b`, paper `#f1efea`, paper-tint `#e8e5de`, ink-tint `#18181a`. 默认 / 通用商业 / 科技。 - 🌊 **靛蓝瓷 Indigo Porcelain** — ink `#0a1f3d`, paper `#f1f3f5`, paper-tint `#e4e8ec`, ink-ti Developers invoke deck-guizang-editorial during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.1.7kinstalls106Fal Realtimefal-realtime is an agent skill from nexu-io/open-design that agent skill for fal-realtime workflows documented in skill.md. # fal-realtime > Curated from the fal.ai community team. ## What it does Real-time and streaming AI image generation via fal.ai. Suited for moodboard exploration, draft variations, and rapid creative iteration. ## Source - Upstream: https://github.com/fal-ai-community/skills - Category: `image-generation` ## How to use This catalogue entry a Developers invoke fal-realtime during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments. Category Design & UI/UX with design vertical focus supports repeatable agent-guided delivery.1.7kinstalls107Pixelbin Mediapixelbin-media is an agent skill from nexu-io/open-design that agent skill for pixelbin-media workflows documented in skill.md. # pixelbin-media > Curated from Pixelbin. ## What it does Generate and edit images and videos with an 85+ API portfolio and build visually appealing website pages via Pixelbin. ## Source - Upstream: https://github.com/pixelbin-dev/skills - Category: `image-generation` ## How to use This catalogue entry advertises the skill in Open Design so Developers invoke pixelbin-media during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments. Category Design & UI/UX with design vertical focus supports repeatable agent-guided delivery.1.7kinstalls108Slack Gif Creatorslack-gif-creator is an agent skill from nexu-io/open-design that agent skill for slack-gif-creator workflows documented in skill.md. # slack-gif-creator > Curated from Anthropic's official skills repository. ## What it does Create animated GIFs optimized for Slack with validators for size constraints and composable animation primitives. ## Source - Upstream: https://github.com/anthropics/skills/tree/main/skills/slack-gif-creator - Category: `image-generation` ## How to use Developers invoke slack-gif-creator during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments. Category Design & UI/UX with design vertical focus supports repeatable agent-guided delivery.1.7kinstalls109Venice Videovenice-video is an agent skill from nexu-io/open-design that agent skill for venice-video workflows documented in skill.md. # venice-video > Curated from the Venice.ai team. ## What it does Video generation and transcription workflows via the Venice.ai API. ## Source - Upstream: https://github.com/veniceai/skills - Category: `video-generation` ## How to use This catalogue entry advertises the skill in Open Design so the agent discovers it during planning. To run Developers invoke venice-video during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments. Category Design & UI/UX with design vertical focus supports repeatable agent-guided delivery.1.7kinstalls110Wpdswpds is an agent skill from nexu-io/open-design that agent skill for wpds workflows documented in skill.md. # wpds > Curated from the WordPress development team. ## What it does WordPress Design System. Apply WordPress's official design tokens, typography, and component patterns to themes and sites. ## Source - Upstream: https://github.com/WordPress/skills - Category: `design-systems` ## How to use This catalogue entry advertises the skill in Open Developers invoke wpds during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments. Category Design & UI/UX with design vertical focus supports repeatable agent-guided delivery.1.7kinstalls111Card Xiaohongshucard-xiaohongshu is an agent skill from nexu-io/open-design that xiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel. 【模板: 小红书图文卡片】 - 输出 N 张连续卡片, 每张 `w-[1080px] h-[1440px]`, 用 flex 纵向排列方便整体截图也方便单张截图。N 由【用户内容】信息量决定: 短内容 3-6 张起步, 长内容应更多 (小红书平台单帖最多 18 图, 通常 9 张以内最佳); 一张卡只承载一个核心观点。 - 第一张是封面: 巨大的标题 + 1 行副标题 + 一个吸引人的标签 (类似 "干货预警" / "建议收藏")。 - 中间几张展开正文, 每张一个核心观点, 配 emoji + 短句 + 1-2 个例子。 - 最后一张是总结 + 行动号召 (关注 / 收藏 / 评论)。 - 配色: 选择柔和的莫兰迪色或粉色系; 元素圆润, 大量留白。 - 字号大、行距宽、对比强（小红书在手 Developers invoke card-xiaohongshu during operate/infra work for cloud & infrastructure tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.1.7kinstalls112Resume Modernresume-modern is an agent skill from nexu-io/open-design that modern minimal resume, single a4 page, ready for print or pdf export. 【模板: 现代极简简历】 - 容器宽度模拟 A4: `w-[210mm] min-h-[297mm] mx-auto`, 内边距 16-20mm。 - 顶部姓名巨大 (text-4xl), 底下一行 contact (邮箱 / 电话 / 城市 / GitHub / LinkedIn), 中间用细竖线分隔。 - 主体两栏可选: 左 60% 主线（经历/项目/教育）, 右 40% 副线（技能/语言/获奖）。 - 章节标题: small caps 风格, 上方一条短 accent 线 (w-8 h-0.5)。 - 经历每条: 公司 + 职位 + 时间区间 (右对齐), 下方 1-3 条 bullet 用动词开头。 - 不使用花哨颜色, 黑白灰 + 1 个 accent (深蓝 / 墨绿)。 - 添 Developers invoke resume-modern during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills.1.7kinstalls113Mockup Device 3dmockup-device-3d is an agent skill from nexu-io/open-design that static iphone and macbook 3d-style showcase with real html embedded on screens, glass-lens refraction, and 360-degree turntable composition. 【模板: 设备 3D 展架 (Device 3D Showcase / HTML-in-Canvas)】 【意图】产品发布、App 演示、设计稿展示。把用户提供的 UI 内容真实渲染到 iPhone / MacBook "屏幕"里, 周围用 CSS 3D transform 模拟 GLTF 模型的玻璃 / 高光 / 折射。Inspired by hyperframes vfx-iphone-device。 【硬性构图】 - **画布**: 1920×1080, 暖灰渐变背景 `radial-gradient(#1a1a1f → #0a0a0f)`, 底部反射地面 (mirror gradient)。 - **iPhone 15 Pro 模型**: 左侧 / 中部, `transform: Developers invoke mockup-device-3d during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills.1.7kinstalls114Article Magazinearticle-magazine is an agent skill from nexu-io/open-design that huashu / huashu-md-html-inspired magazine article layout for turning markdown or notes into a polished long-form html essay. 【模板: 杂志文章】 - 顶部 hero: 大标题 (text-5xl/6xl) + 可选副标题 + 作者 / 阅读时间 / 日期元数据。 - 正文: 单栏, 最大宽度约 700px, 居中。段落 `text-lg leading-relaxed text-neutral-700 dark:text-neutral-300`。 - H2 / H3 标题用 serif 字体, 让正文与标题有视觉对比。 - 引用块使用左侧粗 accent 色边线 + 斜体。 - 代码块: 圆角 + 深色背景 + 浅色文字, 显示语言标签。 - 列表项使用自定义 bullet（小方块 / accent 圆点）。 - 章节之间用 `<hr>` 分隔, 但样式做成中央居中的小 ornament。 - 文末加一个简单的 Developers invoke article-magazine during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.1.7kinstalls115Deck Open Slide Canvasdeck-open-slide-canvas is an agent skill from nexu-io/open-design that locked 1920x1080 canvas deck with react component-level free composition, not bound to a fixed template. 【模板: 1920 画布自由 Deck】 【意图】不想被模板束缚的场景 (个人作品集、奇特演讲、艺术 / 设计课 deck)。给一个固定 1920×1080 画布 + 极强的类型 / 调色约束, 让 agent 像写 React 组件一样按内容自由排布每一页。Inspired by 1weiho/open-slide。 【硬性技术规格】 - 画布: 每页严格 `width: 1920px; height: 1080px;` 用 `transform: scale(...)` 适配视窗 (默认 `scale(0.7)` 居中)。 - **绝对禁止 overflow**: 每页内容必须 fit in 1920×1080, 不许滚动条出现。 - 字号 type scale (px): `2xs: Developers invoke deck-open-slide-canvas during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.1.7kinstalls116Video Hyperframesvideo-hyperframes is an agent skill from nexu-io/open-design that hyperframes / remotion-compatible continuous frame animation with autoplay support. 【模板: Hyperframes 视频帧】 - 输出 N 个连续 `<section class="frame">`, 每个 `w-[1920px] h-[1080px]`; N 由【用户内容】信息密度决定 (短脚本 6-10 帧起步, 长脚本应更多, 每帧只承载一个镜头/概念)。 - 每帧表达一个镜头/概念: 文字 + 视觉构图 (中央构图 / 黄金分割 / 三分法)。 - 每帧底部隐藏标记 `<!-- frame:N duration:3000 transition:fade -->` 供后续 Remotion / Hyperframes 渲染脚本读取。 - 顶部加一段 JavaScript 自动播放: 每 3 秒切换到下一帧, 也支持点击 / 方向键控制; 角落显示进度条。 - 第 1 Developers invoke video-hyperframes during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments. Category Design & UI/UX with design vertical focus supports repeatable agent-guided delivery.1.7kinstalls117Deck Swiss Internationaldeck-swiss-international turns real content and data into a single-file HTML slide deck in strict Swiss International style: a 16-column CSS grid with zero gap, 22 locked slide layouts (from the S01 full-bleed accent cover to the S22 image hero with a 3-column KPI strip), and exactly one saturated accent per deck chosen from four fixed themes - Klein Blue #002FA7, Lemon Yellow #FFD500, Lemon Green #C5E803, or Safety Orange #FF6B35 - whose hex values may not be mixed or altered. Its hard rules ban rounded corners, shadows, gradients, blur, and invented numbers: every chart bar must scale to data the user actually supplied. Decks render at 16:9 with keyboard left/right navigation, hash-synced slides, and fixed corner chrome (slide number bottom-right, topic label bottom-left), typeset in Inter Tight, Inter, Noto Sans SC, and JetBrains Mono. The documentation is bilingual Chinese/English; the skill ships in the nexu-io/open-design template collection and credits op7418/guizang-ppt-skill Style B as its inspiration.1.7kinstalls118Doc Kami Parchmentdoc-kami-parchment is an agent skill from nexu-io/open-design that warm parchment canvas (#f5f4ed), monochrome ink-blue accent (#1b365d), one serif family, and editorial-grade typography. 【模板: Kami 羊皮纸文档】 【意图】严肃排版文档: one-pager / 长报告 / 信函 / 简历 / 财报 / changelog / portfolio。Inspired by tw93/kami。强调"写得像被排过版的纸", 不是 dashboard, 不是网页。 【硬性视觉签名 — 不许改】 - **画布**: 暖羊皮纸 `#f5f4ed` (永远不用纯白 `#fff`)。次级背景 `#efeee5`。 - **墨色**: 主文字 `#1f1d18` (近黑暖灰, 不用纯黑 `#000`)。次文字 `#6b665b`。 - **唯一色彩**: 墨蓝 `#1B365D` ——所有 accent (链接、tag 描边、重点数字、引用左 rule) 只能用这一个色, 严禁多色。 Developers invoke doc-kami-parchment during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.1.6kinstalls119Frame Flowchart Stickyframe-flowchart-sticky is an agent skill from nexu-io/open-design that svg curve connectors, sticky-note nodes, and cursor interaction with a whiteboard-brainstorm feel. 【模板: 便利贴流程图帧 (Sticky Flowchart)】 【意图】把一个流程 / 系统 / 工作流画成"白板 + 便利贴"的样子, 适合 onboarding 视频、运营流程说明、系统架构讲解。Inspired by hyperframes flowchart。 【画布】1920×1080。背景: 米黄白板纸 `#f4ede1` 或冷灰白板 `#f0f2f4`; 加非常浅的 hex grid `rgba(0,0,0,0.04)` 让它有白板感。 【节点 (Sticky Notes)】 - 每节点 = 一张 240×180px 便利贴, 4 套颜色随机分配: 黄 `#fcd34d` / 桃 `#fca5a5` / 薄荷 `#a7f3d0` / 天 `#a5b4fc`。 - 便利贴有 Developers invoke frame-flowchart-sticky during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.1.6kinstalls120Frame Glitch Titleframe-glitch-title is an agent skill from nexu-io/open-design that digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes. 【模板: 故障艺术标题帧 (Glitch Title)】 【意图】单帧 hero / 视频转场 / cyberpunk 风格标题。Inspired by hyperframes glitch。 【画布】1920×1080, 背景 `#070708` 近黑或 CRT 暗灰 `#0d0e10`; 加 56px 网格 (透明 5%) + scanlines 横线 (透明 8%, 2px 间隔)。 【主标题】 - 居中, 6-9vw, weight 800/900, 字体 `Space Grotesk Bold` / `Inter Tight Black` / `JetBrains Mono Bold`。 - 颜色: 主层 `#f5f5f7`; 后面套 2 层伪影: - cyan `#00f Developers invoke frame-glitch-title during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.1.6kinstalls121Frame Light Leak Cinemaframe-light-leak-cinema is an agent skill from nexu-io/open-design that film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards. 【模板: 胶片漏光电影帧】 【意图】纪录片 / 个人短片 / 视频章节卡的开场单帧 —— 暖橙漏光 + 35mm 颗粒 + 衬线大字, 古典胶片质感。Inspired by hyperframes light-leak。 【画布】 - **2.39:1 letterbox** (推荐): 1920×800, 上下黑边各 140px (`#000`)。 - 或 16:9: 1920×1080, 无 letterbox。 【背景】 - 底层: 深暖色 (深红棕 `#1a0d08` / 墨绿 `#0a1410` / 蓝紫 `#0d0e1a`) 或场景描绘 (CSS gradient 模拟天空 / 室内 / 室外)。 - **胶片漏光 (Light Leak)**: 2-3 个大 `radial Developers invoke frame-light-leak-cinema during operate/infra work for cloud & infrastructure tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.1.6kinstalls122Frame Liquid Bg Heroframe-liquid-bg-hero is an agent skill from nexu-io/open-design that webgl-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters. 【模板: 流体背景 Hero】 【意图】可作为视频片头帧、SaaS landing 顶部 hero、海报底图。WebGL 流体感, 但用 CSS / canvas 退化绘制, 确保单文件可双击打开。Inspired by hyperframes vfx-liquid-background。 【画布】1920×1080 (横) 或 1080×1920 (竖), 二选一。背景占满。 【流体背景 — 3 种实现, 按用户偏好选】 1. **CSS 多层 radial-gradient 错位呼吸** (最稳, 默认推荐): - 3-5 个大椭圆 `radial-gradient(...)`, 颜色取自调色板。 - 每个椭圆套 `@keyframes` 平移 + scale + hue Developers invoke frame-liquid-bg-hero during operate/infra work for cloud & infrastructure tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.1.6kinstalls123Frame Data Chart Nytframe-data-chart-nyt is an agent skill from nexu-io/open-design that nyt-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band). 【模板: NYT 风数据图表帧】 【意图】把一段数据 (CSV / JSON / 一句结论) 做成《纽约时报》专栏感的单帧/动画图表, 适合视频片段或推特卡。Inspired by hyperframes data-chart。 【画布】1920×1080, 暖白底 `#f7f5ee` 或墨黑底 `#0e0e0e` 二选一; 文字色和背景相反。 【布局】 - **顶部 kicker** (11px uppercase letterspace 0.14em, 颜色 = accent 红 `#a91d1d` 或 mint `#5fb38a`): 数据来源 + 类目, 如 "GLOBAL · WEEKLY ACTIVE USERS · 2018–2026"。 - **大字标题** (Chelt Developers invoke frame-data-chart-nyt during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.1.6kinstalls124Frame Logo Outroframe-logo-outro is an agent skill from nexu-io/open-design that segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames. 【模板: Logo 收尾帧 (Logo Outro)】 【意图】视频结尾的品牌 reveal 帧 —— logo 分块拼装 + glow bloom + tagline 上浮 + CTA。Inspired by hyperframes logo-outro。 【画布】1920×1080, 黑色 `#08090c` 或品牌深色背景; 加微妙 vignette `radial-gradient(...)` 让中心更亮。 【布局】 - **中心 Logo**: 用 CSS / 内联 SVG 绘制; 由 4-8 个几何块 (圆 / 方 / 三角 / hairline) 组成。 - 入场动画: 每个块从屏幕外滑入 (±100px 不同方向) + scale 1.4→1.0 + opacity Developers invoke frame-logo-outro during build/frontend work for design & ui/ux tasks. The skill documents triggers, prerequisites, and step-by-step workflows grounded in SKILL.md. Compatible with Claude Code, Cursor, and Codex agent runtimes that load marketplace skills. Review the Security Audits panel on this listing before installing in production environments.1.6kinstalls125Card TwitterThe card-twitter skill from open-design builds Twitter quote and data cards sized 1600 by 900 pixels for pairing with posts. It uses a marketing card template with a central hero quote limited to two or three lines at text-6xl weight, author signature with avatar placeholder and handle, a top-left type tag such as Insight or Data, and a bottom-right brand watermark. Visual treatment includes subtle grid, noise, or dot texture on dark or light backgrounds chosen by content mood. The open-design metadata defines prototype web desktop marketing scenario with HTML preview entry index.html and example prompts in English and zh-CN. Agents preserve the template visual signature, use real content and data, and avoid lorem ipsum or placeholder images. Use when developers need shareable X or Twitter visual cards from existing copy or metrics.1.6kinstalls126Frame Macos NotificationThe frame-macos-notification skill from open-design creates macOS notification banner style marketing frames following open-design prototype web desktop templates. It uses bilingual zh and en naming metadata and HTML preview entry patterns like other open-design frames. Agents preserve visual signatures and use real notification copy instead of placeholder text. Use when developers need macOS-style notification mockups for product marketing or social visuals.1.6kinstalls127Vfx Text CursorThe vfx-text-cursor skill from open-design generates VFX-style text cursor motion graphics following open-design template constraints for web marketing prototypes. It preserves template visual signatures with real content instead of placeholders. Use when developers need stylized cursor text effects for promotional visuals or social-ready motion frames within the open-design system.1.6kinstalls128Social X Post CardThe social-x-post-card skill from open-design renders X and Twitter post card marketing visuals with bilingual zh and en naming and emoji metadata. It follows open-design prototype web desktop marketing patterns with HTML preview entries and real-content example prompts avoiding lorem ipsum. Agents preserve template visual signatures while filling post copy, handles, and engagement elements suited for screenshot sharing on X. Use when developers need styled social post card mockups from the open-design library.1.6kinstalls129Social Reddit CardThe social-reddit-card skill from nexu-io open-design renders user content as a realistic Reddit post card for video overlays or social sharing. It defines canvas sizes 1280 by 720 or 800 by 600 with dark mode recommended for overlays, vote rail with up and down arrows, formatted vote counts like 12.3k, subreddit meta row, title and body, and action row with comments and share icons. Design rules require inline SVG icons, no external images, CSS gradient placeholders, IBM Plex Sans with Noto Sans SC for Chinese, and single-file HTML output. Use when developers need Reddit-style social cards from real content for marketing overlays or story shares.1.6kinstalls130Social Spotify CardThe social-spotify-card skill renders content as a Spotify Now Playing style card for video overlays or personal homepages. Canvas sizes include 1280 by 720 centered overlay and 600 by 200 compact widget with dark gradient or classic Spotify #121212 background. Structure covers album cover CSS gradient monogram, NOW PLAYING label in #1DB954, song title and artist, progress bar with timestamps, playback control icons, and Spotify logo SVG. Rules forbid external images, use real user content mapping title to song name, support prefers-reduced-motion for wave animation, and output single-file HTML. Use when creators need Spotify-style music cards for video overlays or about pages.1.6kinstalls131Weread Year In Review Video TemplateThe weread-year-in-review-video-template skill | # WeRead Year in Review Video Template Create a vertical HyperFrames composition for annual reading reports: WeRead, Goodreads, Readwise, Notion reading logs, book clubs, or personal learning recaps. The template turns reading time, active days, bookshelf assets, notes, keywords, and a reading persona into a shareable 9:16 video. ## Resource Map ```text weread-year-in-review-video-template/ ├── SKILL.md ├── assets/ │ └── template.html ├── references/ │ └── checklist.md └── example.html ``` The rendered MP4 showcase used by `example.html` is hosted at `https://repo-assets.open-design.ai/resources/videos/skills/weread-year-in-review-video-template/default-showcase.mp4`. Copy `assets/template.html` to `index.html`. Replace the default report data in the `REPORT` object: - owner/title - reading hours and active days - bookshelf and completion stats - note composition - interest keywords - reading persona and share line 3. Preserve the 12-scene timeline unless the user asks for a shorter cut. Keep the WeRead-inspired visual language: - warm paper background - ink-blue typography - restrained WeRead green accents - book pages, bookmarks,.1.4kinstalls132Design Taste FrontendDesign-taste-frontend is a frontend-oriented skill in the nexu-io open-design collection. It helps coding agents approach UI implementation with attention to visual quality, layout judgment, and design-conscious component choices rather than purely functional markup. Developers reach for design-taste-frontend when agent-generated React, HTML, or CSS needs refinement toward more intentional typography, spacing, hierarchy, and interaction patterns. The skill sits alongside open-design resources as a lightweight assistant for everyday frontend tasks where taste and consistency matter. Because public readme detail is limited, treat it as a design-aware frontend helper rather than a full design-system generator. Invoke it when frontend output looks technically correct but visually flat or inconsistent with product standards.1.3kinstalls133Impeccable Design Polishimpeccable-design-polish is a follow-up design skill from nexu-io/open-design inspired by pbakaus/impeccable for post-generation HTML artifacts. It runs six modes—Audit, Critique, Polish, Animate, Harden, and Live—inspecting the current page before editing, preserving user intent, and removing common AI tells like purple-blue glow gradients, generic three-card rows, and inconsistent spacing. The skill requires a design system context and craft coverage for typography, color, anti-ai-slop, animation discipline, and accessibility baselines. Developers invoke impeccable-design-polish after a web or HTML artifact exists when triggers like design polish, anti ai polish, harden ui, or live review appear. With 700 installs on skills.sh, impeccable-design-polish delivers decisive visual fixes, focus states, contrast repairs, and restrained motion rather than broad cosmetic churn or restart-from-scratch redesigns.1.2kinstalls134Research Decision RoomResearch Decision Room is an open-design agent skill that synthesizes messy qualitative inputs—user interviews, support tickets, surveys, and product context—into a single evidence-backed HTML artifact. The output bundles an evidence ledger, theme map, confidence heatmap, opportunity matrix, decision memo, and experiment queue so teams move from signals to product or design choices without fabricating certainty. Trigger phrases include research synthesis dashboard, opportunity solution tree, and usability findings dashboard. Product managers, designers, and engineer-researchers invoke it when qualitative research is spread across docs and needs one navigable decision surface inside Cursor or Claude Code.1.1kinstalls135Gsap Performancegsap-performance is an agent skill from nexu-io/open-design, curated upstream from GreenSock's official gsap-skills repository under MIT license. The skill focuses on GSAP animation performance: preferring transform and opacity tweens, avoiding layout thrashing, using will-change strategically, and batching DOM reads and writes to reduce jank. It pairs with gsap-core for transform and autoAlpha basics and applies when users report animation jank, low FPS, or ask about smooth 60fps motion. Developers reach for gsap-performance during optimization passes on scroll-driven timelines, hero animations, and interactive UI motion before shipping production frontends. Trigger phrases include gsap performance, animation jank, 60fps animation, will-change, and layout thrashing.1.1kinstalls136Gsap Frameworksgsap-frameworks is an agent skill from nexu-io/open-design, curated upstream from GreenSock's official gsap-skills repository under MIT license. The skill covers GSAP animation in Vue, Nuxt, Svelte, SvelteKit, and other non-React frameworks, including lifecycle wiring with onMounted and onMount, selector scoping inside components, and tween cleanup on onDestroy or unmount. It recommends GSAP for framework animation unless another library is explicitly specified and points React work to the separate gsap-react skill. Developers reach for gsap-frameworks when adding scroll reveals, page transitions, or component-scoped motion without leaking timelines across route changes. Trigger phrases include gsap vue, gsap svelte, nuxt animation, sveltekit animation, and framework animation.1.1kinstalls137Gsap Pluginsgsap-plugins is an agent skill from nexu-io/open-design, curated upstream from GreenSock's official gsap-skills repository under MIT license. The skill covers GSAP plugin registration and usage across ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, and GSDevTools. Developers reach for gsap-plugins when implementing scroll-to behavior, FLIP layout animations, draggable interactions, SVG morphing, or split-text effects and need correct gsap.registerPlugin setup. Trigger phrases include gsap plugins, gsap plugin registration, flip animation, draggable, morphsvg, and splittext. The skill applies during code review or implementation of plugin-dependent GSAP timelines in production frontends.1.1kinstalls138Gsap Utilsgsap-utils is an MIT-licensed agent skill from nexu-io/open-design, curated from GreenSock's official gsap-skills repository, covering the gsap.utils namespace for animation math and collection handling. The skill documents nine core utilities—clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, and pipe—for mapping scroll position to values, snapping to grids, normalizing inputs, and piping transformations in GSAP timelines. Agents load it when developers ask about gsap.utils, clamp animation values, mapRange scroll mapping, snap-to-grid motion, or random distribution in tweens. Use gsap-utils alongside other GSAP skills for timeline and ScrollTrigger work when the task is utility-level math rather than full animation choreography. The upstream source is github.com/greensock/gsap-skills, keeping guidance aligned with official GreenSock documentation patterns for production web animations.1.1kinstalls139Emilkowalski Motionemilkowalski-motion is an open-design agent skill from nexu-io/open-design inspired by Emil Kowalski's animation guidance. The skill runs after a web interface already exists, adding tasteful micro-interactions, state transitions, and page motion with product-grade restraint on desktop web surfaces. It requires an established design system and upstream craft skills including animation-discipline and accessibility-baseline, and references guidance from emilkowal.ski/skill. Developers reach for emilkowalski-motion when a functional UI needs motion polish—hover states, route transitions, loading feedback—without bloated custom animation libraries. Trigger phrases include motion polish, micro interaction, interaction animation, and tasteful animation. The skill outputs HTML preview prototypes and integrates with open-design prototype mode for web desktop targets.993installs140Ecommerce Image Workflowecommerce-image-workflow is an Open Design V1 agent skill for reference-product ecommerce imagery—never brief-only concept generation. It requires at least one uploaded product reference photo, extracts identity anchors (shape, color, materials, logos), plans three slots—1:1 main packshot, 4:5 feature highlight, and 4:5 lifestyle scene—and dispatches generation through the unified od media generate and media wait CLI loop with fidelity-lock prompts preserving exact product identity. Outputs include three PNG assets, image-manifest.json documenting slots and prompts, and ecommerce-gallery.html preview linking reference and generated files. The skill blocks when no reference image exists, refuses invented claims or certifications, and notes marketplace compliance still needs human review. Developers reach for ecommerce-image-workflow when turning a real SKU photo into a compact Shopify, Amazon, or Taobao-ready image set without redesigning the product in AI generation.905installs141High End Visual DesignTeaches the model to design like a high-end agency by specifying premium fonts, spacing, shadows, and motion and blocking the defaults that make AI designs look cheap. A developer uses it to build calm, expensive-looking landing pages and UIs.883installs142Od Contributeod-contribute is a documentation skill from nexu-io/open-design that produces structured contribution guidelines for open-source and internal repositories. The skill helps coding agents draft CONTRIBUTING.md content covering project goals, architecture overview, code standards, and pull request submission expectations for external contributors. Developers reach for od-contribute when launching or refreshing contributor onboarding instead of writing guidelines from a blank page. The skill is listed on skills.sh with 1 install and helps teams standardize how outside developers understand codebase conventions and review requirements.846installs143Export Download Debuggingexport-download-debugging is an open-design utility skill for diagnosing export and download failures that appear to succeed but produce empty, missing, or unusable files. It focuses on browser previews, iframe capture, and Electron shells, covering Save As flows, Blob and Data URLs, the File System Access API, showSaveFilePicker, createWritable failures, and 0 KB output files. Developers reach for export-download-debugging when image or document export runs without error yet downloads as zero bytes or corrupt artifacts. Trigger phrases include 'export image failed', 'download is 0kb', and 'blob URL' errors during client-side export implementation.829installs144Pr Feedback Quality Gatepr-feedback-quality-gate is an Open Design utility skill for safe pull request follow-up. It starts by inspecting PR state—comments, reviews, mergeability, checks, branch, and local worktree status—while keeping unrelated local changes out of the PR. The workflow addresses review comments and merge conflicts, validates fixes, and applies a read-only cross-review before commit or push. Triggers include PR feedback, review comments, merge conflicts, cross-review, Claude CLI review, and monitor PR. Developers reach for pr-feedback-quality-gate when a PR needs structured remediation instead of ad hoc edits that miss checks or introduce scope creep.822installs145Gpt Tastegpt-taste is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted development.818installs146Taste Skilltaste-skill (design-taste-frontend) from nexu-io/open-design is an anti-slop frontend skill for landing pages, portfolios, and redesigns on web desktop marketing surfaces. The agent reads the brief, infers design direction, and ships interfaces that avoid templated AI-default aesthetics, applying real design systems when applicable, audit-first workflows on redesigns, and a strict pre-flight check before delivery. Open Design metadata sets mode to prototype, surface to web, and scenario to marketing with design_system and craft requirements enabled. Developers reach for taste-skill when AI-generated UIs look generic and they need intentional visual taste, motion, and density on marketing-facing pages.813installs147Brandkitbrandkit is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted development.812installs148Redesign Existing ProjectsUpgrades existing websites and apps to premium quality by auditing the current design, identifying generic AI patterns, and applying high-end standards without breaking functionality. A developer uses it to redesign a live UI while preserving useful product structure.812installs149Stitch Design Tastestitch-design-taste is a Claude Code skill for design & ui/ux. It helps solo builders move faster with AI-assisted development.808installs150Reference Design Contractreference-design-contract is a UI consistency skill in the nexu-io/open-design repository for frontend teams and agent-assisted builds. The skill produces a reference design contract specifying design tokens, component APIs, spacing scales, and layout constraints that engineers and coding agents follow before implementing screens. Developers reach for reference-design-contract when starting a new feature surface or design system adoption and need a shared contract that prevents drift between Figma intent and shipped React, Vue, or native components.767installs151Web Prototypeweb-prototype is a prototype-mode skill in nexu-io/open-design that produces general-purpose desktop web prototypes as a single self-contained HTML file. Agents copy the bundled assets/template.html seed—which encodes six :root design tokens and a class system—then paste section layouts from references/layouts.md containing 8 paste-ready skeletons for hero, features, stats, pricing, and CTA rhythms. The skill reads the active DESIGN.md for color, typography, layout, and components before writing index.html for sandboxed preview in Open Design. Developers reach for web-prototype when they need a landing, marketing, docs, or SaaS page mockup faster than scaffolding React or Next.js. A P0/P1/P2 checklist in references/checklist.md gates output quality, and data-od-id attributes enable comment-mode targeting. Default page rhythms cover landing, editorial, pricing, and docs index flows without writing CSS from scratch.302installs152Dashboarddashboard is an open-design skill in the nexu-io/open-design repository that guides agents through SaaS admin dashboard patterns: responsive grid layouts, filterable data tables, chart components, empty states, loading skeletons, and accessible sidebar navigation. The skill applies open-design conventions so generated interfaces stay consistent across admin surfaces rather than one-off page mocks. Developers reach for dashboard when scaffolding analytics home screens, settings consoles, or ops panels that must handle real data density and keyboard-friendly navigation. It pairs layout decisions with implementation guidance rather than delivering static Figma exports alone.282installs153Mobile Onboardingmobile-onboarding is a prototyping skill that helps developers design and iterate on mobile onboarding screens and first-run flows before native implementation or app submission. mobile-onboarding focuses on activation-critical details such as permission timing, sequencing of steps, and clarity of first-run instructions so teams can validate that users understand what to do next. mobile-onboarding is useful when a developer is translating product requirements into concrete screens and states, including edge cases like skipped permissions, retries, and partial onboarding completion. mobile-onboarding is best used during early validation and UX iteration, when rapid prototypes and flow diagrams can prevent expensive rewrites in iOS or Android code and can improve activation by aligning screens, copy, and permission prompts.279installs154Saas Landingsaas-landing is a skill for generating SaaS landing pages designed to test headline clarity, feature framing, social proof placement, and signup CTA performance. saas-landing helps developers quickly iterate on value proposition and page structure before committing engineering time to a full marketing site or paid acquisition funnel. saas-landing is typically used when a developer needs a concrete page draft that can be pasted into a Next.js, Astro, or static HTML marketing repo and then instrumented with analytics for conversion tests. Developers reach for saas-landing when they want to validate positioning and conversion flow first, then translate the winning layout into components and sections in their actual frontend codebase.278installs155Mobile Appmobile-app is an Open Design skill in nexu-io/open-design that renders a single mobile screen inside a pixel-accurate iPhone 15 Pro device frame as exportable HTML. Agents copy the seed assets/template.html, map active DESIGN.md tokens to six :root CSS variables, and paste one of six screen archetypes from references/layouts.md—Feed, Detail, Onboarding, Profile, Checkout, or Focus—while preserving the Dynamic Island, status bar SVG icons, home indicator, and tab bar already drawn in the template. A references/checklist.md enforces P0 anti-fake-device gates so previews keep real device chrome instead of reimplemented inline frames. Developers reach for mobile-app when a brief asks for mobile app, iOS app, Android app, phone screen, or app UI explorations tied to Open Design brand systems. Output lands as index.html in the project root with one accent color used at most twice on screen. The workflow reads the active design system, fills bracketed copy from the brief, and self-reviews against layout and typography constraints before handoff to engineering.267installs156Wireframe Sketchwireframe-sketch is an Open Design skill from nexu-io/open-design that generates lo-fi, hand-drawn wireframe artifacts emphasizing structure over polished UI. Output is a single HTML file with inline CSS, marker-style fonts, wobbly lines, hatched chart placeholders, sticky-note annotations, slight rotations, and highlighter swipes on graph-paper backgrounds so stakeholders focus on layout instead of button colors. The skill supports tabbed layouts for exploring variants side by side and responds to briefs asking for whiteboard style, sketch mockups, or early-stage thinking without production commitments. Developers reach for wireframe-sketch during discovery when validating navigation flows, dashboard IA, or mobile screen sequences before invoking higher-fidelity Open Design skills like mobile-app or saas-landing. Install via npx skills add against the open-design repository. The deliberate unfinished aesthetic signals work-in-progress status and pairs well with Open Design sandboxed preview for quick stakeholder reviews without Figma or native code.265installs157Magazine Postermagazine-poster is a visual design skill from nexu-io/open-design for developers and designers creating editorial or promotional print and digital assets. The skill guides composition of magazine-style layouts and bold poster designs suited to campaigns, events, zines, and print-ready promotional materials. Developers reach for magazine-poster when they need structured layout direction, typographic hierarchy, and campaign-ready compositions without opening a separate design toolchain from scratch. Output includes layout concepts, composition guidance, and asset direction suitable for Figma, InDesign, or export-ready production workflows.257installs158Critiquecritique is an open-design skill from nexu-io/open-design that audits UI mocks and interactive prototypes against visual hierarchy, WCAG-oriented accessibility, design-system consistency, and conversion friction before engineering commits to React, SwiftUI, or other production components. The agent inspects layout structure, contrast and focus order, component reuse, and CTA clarity, then returns prioritized fixes developers can apply in Figma frames or code prototypes. Teams reach for critique when a PRD-linked mock is ready for review, when accessibility regressions are suspected in a redesign, or when marketing and product disagree on whether a screen will convert before sprint planning locks scope.253installs159Social Carouselsocial-carousel is an Open Design design-template skill from nexu-io/open-design that renders a self-contained HTML page with three 1080×1080 square panels on a dark stage. Each panel uses layered radial and linear CSS gradients (no image assets), serif display headlines that read as one sentence across the series, mono brand stamps, loop indicators, and captions pulled from an active DESIGN.md token file. Developers reach for social-carousel when a brief asks for carousel posts, Instagram series, LinkedIn threads-as-cards, or X thread visuals and they want screenshot-ready output instead of hand-building slides in Figma. The skill accepts a theme plus three connected captions and stages cards with responsive clamp sizing so three panels fit desktop and stack below 1100px.253installs160Docs Pagedocs-page is an open-design skill from nexu-io/open-design that structures developer documentation and product onboarding pages with sidebar navigation, fenced code samples, callout blocks, and readable typography tuned for API references and SaaS getting-started flows. The agent proposes information architecture, section ordering, copy hierarchy, and component patterns suited to Mintlify, Docusaurus, or custom doc sites so engineers spend less time debating layout and more time verifying endpoint accuracy. Developers reach for docs-page when launching a new REST or GraphQL API, rewriting stale README sections into a proper doc site, or standardizing onboarding guides before a public beta.252installs161Invoiceinvoice is a design-template skill from nexu-io/open-design that produces single-page printable billing documents as HTML artifacts. The skill reads DESIGN.md, lays out a top brand band with invoice number and due date, two-column sender and recipient blocks, a line items table, right-aligned totals with subtotal, retainer, and tax, plus payment instructions and a print stylesheet. Developers reach for invoice when building SaaS billing UIs, freelance invoicing features, or ecommerce checkout follow-up documents that need branded, print-ready HTML output.250installs162Motion Framesmotion-frames is an Open Design prototype skill that produces a full-bleed 16:9 motion composition using inline CSS animations only—no JavaScript—so the page itself is the loop. Developers reach for motion-frames when briefs ask for motion design, animated heroes, video posters, title cards, kinetic typography, or HyperFrames-ready kinetic exports paired with Open Claude Design. The workflow reads the active DESIGN.md design system, composes layered SVG rings, a focal wireframe mark, co-rotating ring labels, a display-serif headline, and static frame chrome, then animates at least three layers at different speeds with @keyframes such as rotate-slow, globe-spin, and type-in reveals. Output is a single self-contained HTML document with data-od-id attributes suitable for deterministic capture by HyperFrames, Lottie pipelines, or similar frame grabbers. The skill self-checks that the composition reads as a poster at frame zero and uses the design system accent only once.249installs163Email Marketingemail-marketing is a skill from nexu-io/open-design that helps developers and marketers draft on-brand email campaigns without starting from a blank template. The skill structures newsletters, lifecycle sequences, and promotional sends with layout guidance, copy blocks, and clear CTAs tuned for onboarding, promotions, and retention goals. It focuses on message design and sequence planning rather than ESP integration code. Teams reach for email-marketing when they need consistent branded emails for product launches, drip onboarding, or re-engagement and want agent-generated drafts aligned to an existing design system. Outputs are campaign outlines, sectioned copy, and CTA recommendations ready to paste into tools like Resend, Mailchimp, or Customer.io.248installs164Pricing Pagepricing-page is a nexu-io/open-design skill for drafting high-conversion pricing pages before or during packaging experiments. The skill structures tier comparison tables, feature matrices, FAQ sections, and primary CTAs so developers can test how plans are presented and understood. It emphasizes clarity between free, pro, and enterprise tiers and surfaces common objection-handling copy developers often postpone. Reach for pricing-page when you have defined plans but need a polished page layout and comparison copy for a landing site or in-app upgrade screen. Outputs include section outlines, tier labels, feature checklists, and FAQ drafts ready for implementation in React, Next.js, or static site generators.248installs165Blog Postblog-post is a Design & UI/UX skill from nexu-io/open-design for structuring and styling long-form blog articles on content-led SaaS or marketing sites. The skill guides readable typography choices, heading hierarchy, spacing rhythm, and supporting visuals that improve scanability and social sharing. It helps developers turn draft markdown or copy into a polished article layout without rebuilding a full design system. Reach for blog-post when shipping company updates, technical tutorials, or SEO articles that need consistent visual hierarchy and share-ready presentation on an existing site template.247installs166Tweakstweaks is a nexu-io/open-design skill for incremental UI refinement when a screen is structurally sound but spacing, color, typography, or component details feel off before release. The skill guides small layout adjustments, token-aligned color fixes, type scale corrections, and component edge polish rather than wholesale information-architecture changes. Developers reach for tweaks after feature-complete pages need a design pass that is faster than a redesign sprint. It fits design-system-backed React or web apps where margin, padding, contrast, and hierarchy tweaks unlock production readiness. The module assumes existing components and pages; it optimizes visual quality and consistency in place. Pair tweaks with broader open-design skills when the problem is polish, not new flows or brand exploration.247installs167Digital Eguidedigital-eguide is a Design & UI/UX skill from nexu-io/open-design for producing downloadable digital guides and lead-magnet ebooks. The skill structures chapters, inserts supporting visuals, and places CTAs that connect readers to signup or demo flows. It targets content marketing programs that need a polished PDF or web guide rather than a single blog post. Developers and growth engineers reach for digital-eguide when building nurture assets, onboarding ebooks, or gated resources that must read coherently across multiple sections while driving a clear conversion action at chapter breaks.245installs168Simple Decksimple-deck is an Open Design skill for single-file horizontal-swipe HTML decks. It copies assets/template.html—which includes a proven 5-rule iframe navigation script handling scroller detection, capture-phase listeners, auto-focus, and position persistence—then pastes slide layouts from references/layouts.md. The library ships eight layouts with theme rhythm rules requiring light, dark, or hero classes on every slide, serif display typography via CSS variables, and data-screen-label tags per slide. Developers map six :root variables from the active DESIGN.md design system, replace bracketed copy with real content, and run references/checklist.md before delivery. Reach for simple-deck for pitch decks, product overviews, or study material when the deck should match the host brand rather than import a standalone visual theme like replit-deck or magazine-web-ppt.245installs169Sprite Animationsprite-animation is an Open Design prototype skill for pixel-style animated explainer slides. It produces a single HTML document with a full-bleed stage, bold display year headline, 96×128 pixel-art mascot rendered via inline SVG with shape-rendering crispEdges or box-shadow pixel grids, kinetic display type, and a bottom timeline ribbon with year ticks. The skill requires at least three independent looping CSS @keyframes animations—typically a glitching headline year, bobbing pixel sprite, kinetic kana or kanji, and a ticking ribbon—with no JavaScript involved. Output is ready to screen-record into vertical video for history-of-X or 8-bit explainers. Invoke when briefs mention sprite animation, pixel-art video, 8-bit explainer, kinetic typography history, or retro motion frames for Nintendo-style educational content.245installs170Finance Reportfinance-report is an agent skill from nexu-io/open-design that turns structured financial and KPI data into polished recurring summaries and stakeholder documents. The skill guides layout of finance tables, metric narratives, and investor-ready report sections so engineering leads and ops teams can produce consistent monthly or quarterly updates without opening a separate design suite. Developers reach for finance-report when they have CSV, JSON, or spreadsheet exports from billing, analytics, or internal dashboards and need formatted markdown or document output for leadership reviews, board prep, or internal ops cadences. It complements data pipelines by handling the presentation layer of financial reporting.243installs171Magazine Web Pptmagazine-web-ppt is an agent skill from nexu-io/open-design for developers and technical marketers who need editorial-quality web pages and slide-style presentation layouts without Figma or PowerPoint. The skill guides magazine-style typography, section rhythm, hero treatments, and presentation slide structure so product launches, changelog hubs, and branded content pages ship as cohesive HTML or markdown layouts. Teams reach for magazine-web-ppt when announcing features, publishing editorial product stories, or building lightweight marketing microsites directly in the codebase. It bridges engineering and launch storytelling by generating layout patterns agents can render into static sites or embedded launch pages.243installs172Kanban Boardkanban-board is an open-design skill from nexu-io that helps developers design and implement kanban interfaces for project-management SaaS products or internal agent dashboards. It covers column layouts, draggable task cards, lane status transitions, and workflow semantics that communicate work-in-progress limits and state changes. The skill bridges UX structure and frontend implementation so boards feel intuitive for task triage and pipeline tracking. Reach for kanban-board when adding a visual workflow board to a web app, not when you only need a flat task list without column-based workflow semantics.241installs173Dating Webdating-web is a design agent skill from nexu-io/open-design that guides UX flow design for dating and social-discovery web products. It covers profile creation screens, photo and bio patterns, discovery card layouts with swipe or tap affordances, mutual match states, and chat entry points with trust and safety cues such as verification badges and report/block affordances. Developers reach for dating-web when prototyping or refactoring onboarding funnels, match lists, or messaging shells for social SaaS apps where conversion and perceived safety drive retention. The skill fits agent sessions producing screen flows, component hierarchy notes, and onboarding step sequences rather than production React code alone. It emphasizes conversion-oriented first-session paths—minimal friction signup, progressive profile completion, and clear match-to-chat transitions—while baking in trust signals that reduce scam anxiety on dating interfaces. dating-web complements frontend implementation skills by defining the UX skeleton before Tailwind or component libraries are wired.240installs174Gamified Appgamified-app applies open-design patterns for points, levels, streaks, and celebratory feedback, helping teams ship engaging retention mechanics with clear UX rules and balanced reward pacing.240installs175Pm Specpm-spec is a planning skill from nexu-io/open-design that turns fuzzy feature ideas into structured PM documents before any design or engineering work begins. The skill guides agents to capture scope boundaries, functional requirements, and testable acceptance criteria in a single spec artifact that both humans and coding agents can reference. Developers reach for pm-spec when kicking off a feature, handing work to an agent, or preventing rework caused by ambiguous tickets. It fits early validation when the goal is agreement on what to build rather than how to implement it. The open-design repository packages it alongside design-oriented skills for product teams shipping SaaS or API-backed products.240installs176Hr OnboardingOpen-design skill for HR onboarding experiences: guided welcome sequences, document collection checklists, step progress, role and equipment setup forms, and completion states tailored to internal SaaS people-ops products in the nexu-io library.239installs177Weekly Updateweekly-update standardizes how teams publish progress each week from open-design workflows. It structures highlights, risks, metrics, and upcoming work so updates stay scannable for leadership and external audiences.239installs178Meeting Notesmeeting-notes standardizes how teams record discussions in nexu-io/open-design: concise summaries, explicit decisions, assigned owners, and tracked follow-ups that keep async collaborators aligned between sprints.238installs179Eng Runbookeng-runbook is an operational documentation skill from nexu-io/open-design for creating and following structured engineering runbooks. The skill helps developers capture step-by-step procedures for incident response, production deployments, rollbacks, and recurring maintenance tasks so on-call engineers execute consistent actions under pressure. Developers reach for eng-runbook when formalizing tribal knowledge into executable docs, onboarding new operators, or preparing postmortem-driven procedure updates. It bridges written SRE playbooks and live execution, giving teams repeatable checklists with clear decision points instead of improvised shell commands during outages or release windows.236installs180Team Okrsteam-okrs is an open-design planning skill for engineering teams preparing a quarter of focused delivery. The skill structures quarterly objectives with measurable key results, assigns owners, and surfaces tradeoffs so sprint planning starts from shared priorities instead of ad hoc tickets. Engineering managers and tech leads reach for team-okrs when a new quarter begins or when roadmap drift requires resetting measurable goals before agents or developers commit to implementation work. team-okrs produces documented OKR artifacts suitable for sprint kickoffs, stakeholder reviews, and cross-team alignment sessions rather than code or infrastructure changes.235installs181Image PosterThe image-poster skill in nexu-io/open-design produces promotional poster images from HTML presentation designs, bridging slide authoring and shareable visual assets for marketing and distribution.226installs182HyperframesThe hyperframes skill from nexu-io/open-design implements frame-based HTML presentation architecture, enabling linked content regions and structured navigation for rich, web-native slide experiences.218installs183Replit Deckreplit-deck creates presentation materials tuned for Replit storytelling from the open-design skill set. It organizes problem, solution, demo beats, and traction into slides suitable for launches, conferences, and partner conversations.215installs184Video Shortformopen-design video-shortform helps Claude Code craft short-form video concepts—hooks, scripts, shot lists, and platform-specific creative direction—for growing audience reach on vertical video channels after product launch.214installs185Audio JingleCreates concise branded audio jingles for products and campaigns using open-design generative media patterns. Supports growth-stage teams needing memorable sonic hooks for ads, demos, and launch moments.211installs186Html Ppt Pitch DeckOpen-design skill for HTML pitch decks with standard fundraising narrative sections. Helps founders validate how product story, metrics, and vision land with investors before final Keynote or PDF polish.195installs187Html Ppt Obsidian Claude Gradienthtml-ppt-obsidian-claude-gradient renders presentation slides as styled HTML with a distinctive dark gradient aesthetic. Teams in open-design use it for design reviews, eng walkthroughs, and polished internal decks that open in any browser.192installs188Html Ppt Course ModuleHTML presentation skill for course modules that turns lesson outlines into branded, slide-like web sections with clear pacing, visuals, and readable layouts for customer education or internal training programs.191installs189Html Ppt Hermes Cyber TerminalOpen-design skill for building Hermes cyber-terminal themed HTML presentations: terminal motifs, high-contrast typography, and slide structure for in-browser pitch and demo decks from nexu-io/open-design.191installs190Html Ppt Weekly Reporthtml-ppt-weekly-report transforms routine operational data into a structured HTML presentation for recurring reviews. From nexu-io/open-design, it packages KPIs, deliveries, and risks so teams iterate with a consistent weekly reporting ritual.191installs191Html Ppt Graphify Dark GraphOpen-design skill producing graphify dark-graph HTML slide decks with chart-centric layouts and dark UI styling for data-heavy product demos and stakeholder presentations in nexu-io/open-design.190installs192Html Ppt Knowledge Arch BlueprintKnowledge-architecture blueprint skill that maps taxonomies, content relationships, and navigation in an HTML presentation deck so teams align scope before building help centers, wikis, or large documentation programs.190installs193Html Ppt Xhs Pastel Cardopen-design html-ppt-xhs-pastel-card helps Claude Code produce Xiaohongshu-inspired pastel card HTML presentations—soft palettes, card carousels, and export-friendly layouts—for social distribution and lifestyle-brand content marketing.190installs194Html Ppt Tech Sharingopen-design html-ppt-tech-sharing enables Claude Code to build browser-ready HTML presentation decks tailored for engineering tech-sharing—slide structure, code-friendly layouts, and portable assets for talks and internal demos.189installs195Html Ppt Presenter ModeThe html-ppt-presenter-mode skill builds a full presenter experience for open-design HTML slides, including notes, controls, and separated audience views for professional live delivery.188installs196Html Ppt Testing Safety AlertThe html-ppt-testing-safety-alert skill adds QA coverage for safety alerts in open-design HTML presentations, ensuring users are warned before destructive navigation, data loss, or unsafe export actions.188installs197Html Ppt Dir Key Nav MinimalThe html-ppt-dir-key-nav-minimal skill adds lightweight directory-aware keyboard navigation to open-design HTML presentations, supporting arrow-key slide control with minimal UI overhead.187installs198Html Ppt Product LaunchProduces product launch presentation assets in HTML or slide form: narrative structure, feature highlights, positioning copy, and shareable decks for press, sales, investors, and community distribution at launch.187installs199Html Ppt Xhs White EditorialOpen-design skill for crafting white, editorial Xiaohongshu-inspired HTML presentation decks. Useful when validating story structure, visual tone, and slide rhythm before formal pitch or launch materials.187installs200Html Ppt Xhs PostThe html-ppt-xhs-post skill repurposes open-design HTML presentation slides into Xiaohongshu-ready post carousels with platform-correct sizing, copy structure, and distribution formatting.186installs201Web Prototype Taste EditorialProduces editorial-flavored web prototypes from open-design presets so teams can validate aesthetic direction, reading flow, and page structure prior to frontend build or design system work.172installs202Web Prototype Taste SoftGenerates soft-taste web prototypes emphasizing gentle color, rounded forms, and calm typography. Ideal for validating emotional design fit in consumer or onboarding experiences before implementation.168installs203Web Prototype Taste BrutalistOpen-design skill for brutalist-taste web prototypes: raw typography, stark grids, and minimal polish HTML mocks to validate visual direction and page structure before full frontend build in nexu-io/open-design.166installs204Html Ppt Taste BrutalistOpen-design skill for brutalist-taste HTML slide decks featuring stark layouts, heavy fonts, and minimal ornamentation for developer-facing and counter-culture product presentations in nexu-io/open-design.164installs205Html Ppt Taste EditorialOpen-design skill generating editorial-taste HTML presentations with magazine-like type hierarchy, whitespace, and narrative slide flow for content-led SaaS pitches from nexu-io/open-design.164installs206Open Design Landing DeckOpen-design skill building landing-focused presentation decks that map hero, benefits, social proof, and CTA sections so teams validate go-to-market story before publishing the live site in nexu-io/open-design.143installs207Kami DeckOpen-design Kami deck skill outputs HTML presentations using the Kami visual language—consistent tokens, slide templates, and narrative structure—for aligned pitches and design reviews from nexu-io/open-design.138installs208Kami Landingkami-landing scaffolds a branded single-page marketing surface from the open-design repo. It emphasizes polished hero, social proof, and call-to-action blocks so teams can ship a credible landing test quickly.138installs209Live Artifactlive-artifact from nexu-io/open-design produces a self-contained interactive design studio page. Teams iterate on nav, hero, lists, and footer variants with theme pills and palettes, then port the chosen look into production code.128installs210Orbit Generalorbit-general is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.91installs211Orbit Gmailorbit-gmail is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.91installs212Orbit Linearorbit-linear is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.90installs213Orbit Notionorbit-notion is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.90installs214Social Media Dashboardsocial-media-dashboard is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.90installs215Orbit Githuborbit-github is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.89installs216Live Dashboardlive-dashboard is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.72installs217Waitlist Pagewaitlist-page is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.72installs218Flowai Live Dashboard Templateflowai-live-dashboard-template is a Claude Code skill in the AI & Agent Building category.70installs219Social Media Matrix Tracker Templatesocial-media-matrix-tracker-template is a Claude Code skill in the AI & Agent Building category.70installs220X Researchx-research is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.65installs221Dcf Valuationdcf-valuation is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.64installs222Html Ppt Zhangzara Capsulehtml-ppt-zhangzara-capsule is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.63installs223Html Ppt Zhangzara Retro Zinehtml-ppt-zhangzara-retro-zine is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.63installs224Html Ppt Zhangzara Signalhtml-ppt-zhangzara-signal is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.63installs225Last30dayslast30days is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.63installs226Html Ppt Zhangzara Blue Professionalhtml-ppt-zhangzara-blue-professional is a Claude Code skill in the AI & Agent Building category.62installs227Html Ppt Zhangzara Bold Posterhtml-ppt-zhangzara-bold-poster is a Claude Code skill in the AI & Agent Building category.62installs228Html Ppt Zhangzara Playfulhtml-ppt-zhangzara-playful is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.62installs229Trading Analysis Dashboard Templatetrading-analysis-dashboard-template is a Claude Code skill in the AI & Agent Building category.62installs230Html Ppt Zhangzara Biennale Yellowhtml-ppt-zhangzara-biennale-yellow is a Claude Code skill in the AI & Agent Building category.61installs231Html Ppt Zhangzara Soft Editorialhtml-ppt-zhangzara-soft-editorial is a Claude Code skill in the AI & Agent Building category.61installs232Html Ppt Zhangzara Daisy Dayshtml-ppt-zhangzara-daisy-days is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.60installs233Html Ppt Zhangzara Neo Grid Boldhtml-ppt-zhangzara-neo-grid-bold is a Claude Code skill in the AI & Agent Building category.60installs234Html Ppt Zhangzara Peoples Platformhtml-ppt-zhangzara-peoples-platform is a Claude Code skill in the AI & Agent Building category.60installs235Html Ppt Zhangzara Pink Scripthtml-ppt-zhangzara-pink-script is a Claude Code skill in the AI & Agent Building category.60installs236Html Ppt Zhangzara Raw Gridhtml-ppt-zhangzara-raw-grid is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.60installs237Html Ppt Zhangzara Sakura Chromahtml-ppt-zhangzara-sakura-chroma is a Claude Code skill in the AI & Agent Building category.60installs238Html Ppt Zhangzara Studiohtml-ppt-zhangzara-studio is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.60installs239Html Ppt Zhangzara Cobalt Gridhtml-ppt-zhangzara-cobalt-grid is a Claude Code skill in the AI & Agent Building category.59installs240Html Ppt Zhangzara Creative Modehtml-ppt-zhangzara-creative-mode is a Claude Code skill in the AI & Agent Building category.59installs241Html Ppt Zhangzara Mathtml-ppt-zhangzara-mat is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.59installs242Html Ppt Zhangzara Pin And Paperhtml-ppt-zhangzara-pin-and-paper is a Claude Code skill in the AI & Agent Building category.59installs243Html Ppt Zhangzara Retro Windowshtml-ppt-zhangzara-retro-windows is a Claude Code skill in the AI & Agent Building category.59installs244Html Ppt Zhangzara Vellumhtml-ppt-zhangzara-vellum is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.59installs245Html Ppt Zhangzara 8 Bit Orbithtml-ppt-zhangzara-8-bit-orbit is a Claude Code skill in the AI & Agent Building category.58installs246Html Ppt Zhangzara Block Framehtml-ppt-zhangzara-block-frame is a Claude Code skill in the AI & Agent Building category.58installs247Html Ppt Zhangzara Broadsidehtml-ppt-zhangzara-broadside is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.58installs248Html Ppt Zhangzara Cartesianhtml-ppt-zhangzara-cartesian is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.58installs249Html Ppt Zhangzara Scatterbrainhtml-ppt-zhangzara-scatterbrain is a Claude Code skill in the AI & Agent Building category.58installs250Html Ppt Zhangzara Stencil Tablethtml-ppt-zhangzara-stencil-tablet is a Claude Code skill in the AI & Agent Building category.58installs251Design Taste Frontend V1Preserves the original v1 frontend taste skill for building polished marketing pages with strong typography, spacing, motion, and anti-AI-slop guardrails. A developer uses it only when they need exact backward compatibility with v1 behavior rather than the newer default.1installs252Full Output EnforcementEnforces exhaustive, unabridged model output by banning placeholder comments and omitted sections and giving clean split instructions when length requires it. A developer uses it on any task that must produce complete, production-ready code.1installs253Imagegen Frontend Mobileimagegen-frontend-mobile is a Claude Code skill for frontend development. It helps solo builders move faster with AI-assisted development.1installs254Imagegen Frontend Webimagegen-frontend-web is a Claude Code skill for frontend development. It helps solo builders move faster with AI-assisted development.1installs255Image To Codeimage-to-code is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted development.1installs256Industrial Brutalist UiGenerates industrial-brutalist UIs that combine Swiss print typography with tactical-telemetry motifs, rigid grids, and extreme type-scale contrast. A developer uses it for data-heavy dashboards, portfolios, or editorial sites that should feel like declassified blueprints.1installs257Minimalist UiProduces minimalist editorial product interfaces using warm monochrome color, typographic contrast, and flat bento grids without gradients or heavy shadows. A developer uses it for a Linear-style, restrained product UI.1installs258Open DesignOpen Design is an MCP server (stdio) that exposes a local `od` design daemon to Claude, bundling 139 skills plus project, file, and preview tools. A developer uses it to manage and preview design work directly from the agent when prototyping interfaces. Requires `od` installed on PATH via brew, npm, or DMG.0installs