メニュー
このリポジトリの skills
SkillsMP は podo/design-agent-skills から 157 件の skill を収集しています。skill を開くとソースと詳細を確認できます。
podo/design-agent-skills収集済み skill 157 件中 40 件を表示しています。
Systematic UX writing for digital products — applies four quality standards (Purposeful, Concise, Conversational, Clear) to all interface copy. Covers microcopy patterns for buttons, error messages, empty states, form labels, notifications, tooltips, and…
原文の言語: 英語
Twenty-five specialist accessibility agents enforcing WCAG 2.2 AA compliance: nine web code specialists, six document accessibility specialists (Office/PDF), and markdown auditors. Each agent focuses on a specific accessibility domain.
原文の言語: 英語
Maps 15 AI tools to design scenarios — Midjourney for ideation, Stable Diffusion for production, ControlNet for composition control, vectorization pipelines, and mockup generation. Includes a 2025-2026 AI Creative Director competency roadmap.
原文の言語: 英語
Create generative art using p5.js with seeded randomness, flow fields, and particle systems. Official Anthropic skill for procedural visual art generation in Claude artifacts.
原文の言語: 英語
Adds Animate.css (v4.1.1) animations to HTML, React/JSX, and WordPress PHP templates. Includes scroll-trigger via Intersection Observer, RTL directional flipping, and prefers-reduced-motion compliance.
原文の言語: 英語
Emil Kowalski-inspired animation patterns for Next.js/React with 8 working examples: hover effects, toast notifications, text reveals, and modals. Emphasises motion that feels inevitable and purposeful.
原文の言語: 英語
7 professional chart and visualization skills powered by Ant Group's AntV ecosystem. 26+ chart types, 98.2% accuracy on test cases. Covers charts, infographics, graphs, tables, icons, and narrative reports.
原文の言語: 英語
Apple Human Interface Guidelines as 14 agent skills covering iOS, macOS, visionOS, watchOS, and tvOS. From raintree-technology, makers of the Apple HIG compliance website.
原文の言語: 英語
Registry of 67 visual aesthetic and style skills for Claude Code, Cursor, Codex, and other agents. Each skill ships as SKILL.md + DESIGN.md covering tokens, components, accessibility, tone, and quality gates for a specific design aesthetic — glassmorphism,…
原文の言語: 英語
Fetches exact design tokens (colors, type weights, letter-spacing) for 62 world-class brands including Stripe, Linear, Apple, Figma, Notion, and Nike at runtime, then applies them to your project.
原文の言語: 英語
Official Callstack React Native skills covering best practices (profiling, FPS, re-renders, Turbo Modules), GitHub PR workflows, GitHub Actions build artifacts, React Native upgrading templates, and brownfield migration strategy.
原文の言語: 英語
Claude Code plugin for creating developer-focused technical presentations (tech talks, conference content) using Slidev with evidence-based design guardrails for slide quality. Adds opinionated constraints on top of raw Slidev for presentation polish.
原文の言語: 英語
D3.js data visualization skill based on Edward Tufte principles. Selects the right chart type from 80+ options by analyzing the data question, then generates single-file HTML with D3 v7, dark theme, responsive layout, direct labels, and annotations.
原文の言語: 英語
Production-grade skills for product thinking, discovery, prioritization, and launch decisions. Covers the full PM lifecycle with a different author and focus than other PM skill packages in the catalogue.
原文の言語: 英語
Generates 5 UX design approaches as interactive prototypes — 1 safe design-system extension and 4 exploratory variants — starting as B&W wireframes then producing color variants via parallel agents. Scans codebase on first run to build persistent design…
原文の言語: 英語
Four-skill enforcement layer for design system compliance in Figma: ensures components are instances of master components, and colors/fonts/spacing/radii bind to Figma variables and styles. Every canvas write is auto-verified for token compliance.
原文の言語: 英語
22-skill package across 5 bundles covering Three.js, GSAP ScrollTrigger, React Three Fiber, Framer Motion, Babylon.js, A-Frame, PixiJS, Locomotive Scroll, Barba.js, React Spring, Magic UI, AOS, Anime.js, Lottie, Rive, Spline, and Blender pipeline. The…
原文の言語: 英語
Three.js skills for creating interactive 3D elements and experiences on the web. Covers scene setup, geometries, materials, lighting, cameras, animations, and WebGL rendering best practices.
原文の言語: 英語
Audit Core Web Vitals and render-blocking resources. Official Cloudflare skill for identifying and fixing LCP, INP, CLS, TTFB issues with Cloudflare-specific optimization strategies.
原文の言語: 英語
286K words of color science applied to UI/UX design. Covers OKLCH/OKLAB color spaces, palette generation, accessibility contrast ratios, color naming, pigment mixing, and historical color theory. By meodai, creator of color-names.
原文の言語: 英語
Build interactive Claude artifacts with Composio tools. Connects artifacts to real external services (GitHub, Slack, Linear, Notion) via Composio's 250+ tool integrations. Requires a Composio account and API key.
原文の言語: 英語
Copywriting toolkit for product and web — persuasion-driven copy for landing pages, feature pages, pricing pages, email sequences, and CTAs. Ships 5 skills: core copywriting, SEO copywriting, social copywriting (LinkedIn + X), French- native copy, and a…
原文の言語: 英語
3 CRO (conversion rate optimization) skills by Corey Haines: optimize post-signup onboarding and activation, improve conversion rates on marketing pages, and optimize signup and trial activation flows.
原文の言語: 英語
Four-phase workflow — scrapes your live app's design language, interviews you about what to animate, produces a brief and self-contained HTML/CSS animation file, then iterates. Requires Claude-in-Chrome MCP for live scraping.
原文の言語: 英語
Create sophisticated data visualizations with D3.js: bar charts, line graphs, scatter plots, interactive visualizations with proper data binding, scales, axes, and animations. Handles real datasets with transformations and transitions.
原文の言語: 英語
Audits codebases and product copy for deceptive dark patterns inferable from local source code and text — no runtime inspection or screenshots needed. Produces a structured narrative report with confidence grading, source locations, concise reasoning, and…
原文の言語: 英語
Multi-expert parallel analysis workflow that selects 3-5 domain expert subagents to analyze datasets in parallel, synthesizes findings into interactive HTML reports with charts, and exports to PowerPoint one-click. Requires Python packages: pandas, openpyxl,…
原文の言語: 英語
Data visualization engineer agent using D3.js, Chart.js, Matplotlib, and Plotly. Applies Cleveland-McGill perceptual hierarchy, WCAG AA contrast, and colorblind-safe palettes. Selects the right chart type for the data relationship.
原文の言語: 英語
9 product management skills using canonical frameworks: NNGroup customer journey maps, Lean UX Canvas, Teresa Torres opportunity-solution trees, proto-personas, 6-frame storyboards, user stories with acceptance criteria, user story mapping, full discovery…
原文の言語: 英語
Audits designs across 19 professional categories including typography, color/contrast, spacing, visual hierarchy, consistency, WCAG, forms, motion, dark mode, responsive, loading/empty/error states, microcopy, i18n/RTL, elevation, iconography, navigation,…
原文の言語: 英語
Generate structured design briefs from loose requirements and product context. Turns vague ideas into actionable design specs: goals, constraints, audience, success metrics, and scope boundaries.
原文の言語: 英語
Build a complete design system from scratch. Garry Tan's design consultation skill: systematic approach to establishing visual language, component library, spacing scale, and design tokens from first principles.
原文の言語: 英語
Two-mode plugin: CHECKER audits designs across seven categories (purpose, typography, proportions, composition, visual hierarchy, color, SEO); APPLIER guides six-phase creation from foundation through technical implementation.
原文の言語: 英語
Implement designs as production-ready HTML/CSS with pixel-level fidelity. Garry Tan's design-html skill — translates mockups, Figma specs, or design descriptions into clean, semantic, accessible HTML output.
原文の言語: 英語
Designer Who Codes: visual audit followed by atomic commits fixing each issue. Garry Tan's design review skill — treats UI like code, identifies and fixes design debt systematically.
原文の言語: 英語
Deeply researches a codebase, designs a feature through iterative brainstorming and annotation cycles, then decomposes it into an implementable issue hierarchy (parent + sub-issues with dependencies) on GitHub or GitLab. Hard gates between phases ensure…
原文の言語: 英語
Expert in the W3C DTCG token specification — token structure, color spaces (sRGB, Display P3, OKLCH), references/aliasing, theme resolvers, and tools (jq, JSONata, Terrazzo, Figma exports). The authoritative skill for design token architecture.
原文の言語: 英語
91 skills, 9 plugins, and 28 commands across a comprehensive designer toolkit: design-research (12 skills), design-systems (11), ux-strategy (11), ui-design (14), interaction-design (15), prototyping-testing (8), design-ops (9), designer-toolkit (7), and…
原文の言語: 英語
Senior Product Manager agent with 30+ PM frameworks and SaaS metrics. Covers discovery, prioritization, roadmapping, stakeholder communication, and product analytics for B2B and consumer products.
原文の言語: 英語
Generates distinctive interfaces using four themed design systems — Cyberpunk, Brutalist, Vaporwave, and Nordic Minimalism — with pre-configured typography pairings, color systems, and staggered animations. Single skill: distinctive-frontend.
原文の言語: 英語