podo/design-agent-skills - 3페이지

excalidraw-diagram

Generate beautiful Excalidraw diagrams from natural language. Diagrams that "argue visually" — built-in Playwright visual validation loop, brand-customizable palette, and 3.2k+ GitHub stars. By coleam00.

원문 언어: 영어

expo-skills

Official Expo skills for working with Expo projects and Expo Application Services (EAS). Fine-tuned for Opus models by the Expo team. Covers the Expo SDK, EAS Build, EAS Submit, and Expo Router.

원문 언어: 영어

extract-design-md

Extract Google Stitch design specifications into DESIGN.md format. Creates a structured design document from Stitch output that can be version-controlled, shared with the team, and used to guide future iterations.

원문 언어: 영어

extract-design-system

Reverse-engineers design tokens (colors, typography, spacing, border radius, shadows) from any public website and generates tokens.json and tokens.css for local projects. Available as agent skill and standalone CLI. Different from extract-design-md (which is…

원문 언어: 영어

fal-ai-skills

2 official fal.ai skills: image/video generation using fal.ai AI models, and 3D model generation from text or images. Requires a fal.ai API key.

원문 언어: 영어

figma-skill

Connects to Figma API, discovers Community resources matching the project, extracts design tokens, and generates framework-specific code for 7 frameworks.

원문 언어: 영어

figma-variables-tokens-generator

Guides creation of a W3C-compliant token system via questionnaire, generates a structured ZIP of JSON token files organized by collection tier (Primitives, Semantic, Component), plus a Figma plugin that imports them maintaining dependency order.

원문 언어: 영어

format-storybook

Structures and organizes Storybook files for scalability using battle-tested patterns from Cassondra Roberts' "A Storybook format that scales with you". Covers story definitions, template composition, controls/args, visual regression with Chromatic, component…

원문 언어: 영어

framer-motion-skills

Six dedicated Framer Motion skills: core animation, React/Next.js integration, variants and orchestration, scroll animations, gestures (drag/tap/hover), and layout/shared transitions.

원문 언어: 영어

frontend-design

8 aesthetic anchors (Brutalist, Nordic, Cyberpunk, Vaporwave, Organic, Luxury, Editorial, Industrial), each locking palette, typography, and texture to specific CSS tokens. Pick one per brief and the skill generates matching code.

원문 언어: 영어

frontend-slides

Create animation-rich HTML presentations from scratch or convert PPT/PPTX into polished web slides. Produces self-contained HTML files with smooth transitions, custom layouts, and presenter-friendly controls.

원문 언어: 영어

generative-media-skills

41 workflow recipes for AI media generation covering Midjourney v7, Flux Kontext, Kling 3.0, Veo3, Seedance 2.0, and 100+ models. Covers image generation, video creation, audio (Suno), and social media content. Requires a muapi account and muapi-cli.

원문 언어: 영어

google-fonts-skill

Searches 1,923 enriched Google Fonts with personality/mood tags, suggests 73 proven pairings, generates CSS custom properties + Tailwind config + embed links, offers 8 modular scales, and 100 pre-made typography showcases. Runs as MCP server or Claude plugin.

원문 언어: 영어

google-stitch-skills

6 official Google Stitch skills for the complete design-to-code pipeline: DESIGN.md management, prompt enhancement, React component generation, shadcn/ui components, and iterative Stitch feedback loops.

원문 언어: 영어

gsap-skills

Official GSAP skills suite with 8 focused skills: core GSAP, Timeline, ScrollTrigger, plugins (Flip/Draggable/SplitText), utils, React (useGSAP hook), performance (60fps), and frameworks (Vue/Svelte/Nuxt). Works across Cursor, Claude Code, Copilot.

원문 언어: 영어

guizang-ppt

Generate structured PowerPoint presentations from content or outlines. Produces clean .pptx files with consistent slide layouts, proper hierarchy, and presenter-ready formatting.

원문 언어: 영어

hand-drawn-diagrams

Generate hand-drawn Excalidraw diagrams from a text prompt. Produces animated SVG, a hosted edit link, and PNG export. Lightweight alternative to excalidraw-diagram with a focus on quick ideation sketches.

원문 언어: 영어

hig-doctor

Diagnose Apple HIG compliance issues with targeted guidance and fixes. 14 specialized skills covering HIG component categories — identifies non-compliant patterns and provides specific remediation steps.

원문 언어: 영어

huashu-design

HTML-native design skill producing magazine-grade typography, precise CSS Grid, animated prototypes with 20 design philosophies, 5-dimension self-review, and MP4 export. Agent-agnostic and works without external component libraries.

원문 언어: 영어

humanize-text

Scores and rewrites text to remove AI writing patterns. Rates content across 7 dimensions — AI vocabulary, content inflation, grammar patterns, UX copy quality, structural tells, punctuation, and meta-content — each on a 1–10 scale. Works with raw text, Figma…

원문 언어: 영어

hyperframes

"Write HTML. Render video." — 11 skills for composition authoring, TTS/transcription, CLI workflow, asset registry, URL capture, and GSAP/Anime.js/CSS/Lottie/Three.js/WAAPI animation. Built specifically for AI coding agents. Requires HeyGen account for media…

원문 언어: 영어

impeccable

Design fluency for frontend development. 1 skill with 23 slash commands (/impeccable polish, /impeccable audit, /impeccable critique, etc.), curated anti-pattern detection CLI, and runtime node scripts. Covers UI design, redesign, critique, accessibility,…

원문 언어: 영어

ink-google

Ink-style visual design skill for Claude artifacts. Applies a distinctive editorial aesthetic — high contrast, strong typographic voice, restrained color — to artifact output from Google Labs.

원문 언어: 영어

interface-design-dammyjay

Specialised for dashboards, admin panels, and SaaS applications where information density is high. Applies craft and consistency principles to produce interfaces that are both functional and visually coherent.

원문 언어: 영어

lenny-skills

86 PM and product design skills from Lenny Rachitsky's framework. Covers user research, behavioral product design, designing surveys, conducting interviews, running design reviews, user onboarding, growth loops, design systems, and writing specs. 945 stars.

원문 언어: 영어

liquid-glass-skill

Deep knowledge of Apple's Liquid Glass design system (iOS 26+/macOS 26+): .glassEffect() modifier, .buttonStyle(.glass), GlassEffectContainer, platform-specific implementations, migration from existing apps, and common pitfalls with tested solutions.

원문 언어: 영어

logo-designer-skill

Conducts a brand interview, proposes 3-5 distinct SVG logo concepts, refines the chosen direction, and exports PNGs at 16px-2048px. Requires resvg, Inkscape, or librsvg for PNG export.

원문 언어: 영어

markdown-viewer-skills

14 visualization skills across 5 rendering engines: Vega-Lite, PlantUML, JSON Canvas, HTML/CSS, and Infographic templates. The most complete data visualization and diagram collection — charts, UML, cloud architecture, network diagrams, mind maps, and 70+…

원문 언어: 영어

marp-slide-quality

Analyzes and improves Marp Markdown presentations using SlideGauge quality scoring — detects overflow, contrast issues, text density, and structural problems before rendering. Use as a companion to marp-slides, run after slide creation.

원문 언어: 영어

marp-slides

Marp presentation skill with 22 curated example decks, SVG charts, dashboard components, and dark/light themes. Teaches slide composition and visual quality patterns for Markdown-based presentations rendered with the Marp framework.

원문 언어: 영어

mastepanoski-skills

Six UX/UI audit skills: ux-audit-rethink (7 UX factors), nielsen-heuristics-audit, wcag-accessibility-audit (POUR framework), don-norman-principles-audit, cognitive-walkthrough, and ui-design-review. Each skill is a structured audit methodology.

원문 언어: 영어

material-3-skill

Implements Google Material Design 3 (Material You) — adaptive color, tonal surfaces, dynamic theming, spring-based motion, and 30+ components for Jetpack Compose (primary) and Flutter (secondary). Includes token system, layout scaffolds, responsive window…

원문 언어: 영어

microsoft-skills

2 official Microsoft skills: frontend design review for distinctive interfaces, and dark-themed React with Tailwind and animations. Both target production-quality UI with strong visual identity.

원문 언어: 영어

mobile-app-design

Comprehensive mobile app UI/UX design skill covering iOS HIG, Android Material 3, accessibility standards, React Native best practices, touch targets, thumb zones, and adaptive patterns. 26,000+ words of detailed documentation.

원문 언어: 영어

mobile-app-ui-design

Professional mobile app UI design skill focused on creating intentional, smooth, personal, and alive interfaces modeled on patterns from top-tier apps.

원문 언어: 영어

motion-design-skill

Official LottieFiles motion design principles — timing curves, easing, choreography, Disney's 12 principles adapted for UI. Implementation-agnostic: works with CSS, GSAP, Framer Motion, Lottie. Supports 40+ agents.

원문 언어: 영어

nanobanan-ppt

AI-powered PowerPoint generation with document analysis and styled image generation. Analyzes input documents, structures content into slides, and generates matching visual assets. Requires API credentials for image generation features.

원문 언어: 영어

neo-user-journey

Elite UX agency skill for user journey mapping with emotional tracking. Includes Playwright testing (happy path, cognitive walkthrough, accessibility, synthetic user), 50+ UX patterns, 7 synthetic personas, Nielsen heuristics scoring, and anti-generic-AI…

원문 언어: 영어

nimbalyst-skills

3 skills from Nimbalyst IDE: Excalidraw diagrams with MCP tool support, UI wireframe mockups alongside architecture diagrams, and data model design. Uses a custom skill registry at nimbalyst.com/skills.

원문 언어: 영어

open-design

Open-source local-first alternative to Claude Design with 31 design skills (web prototypes, SaaS landing pages, dashboards, mobile onboarding, gamified apps, email, social carousels, poster design, motion frames, sprite animation) and 71 brand-grade design…

원문 언어: 영어