Design
UI/UX direction, visual design, and design systems
tailwindcss-development
by coollabsio
Styles applications using Tailwind CSS v4 utilities. Activates when adding styles, restyling components, working with gradients, spacing, layout, flex, grid, responsive design, dark mode, colors, typography, or borders; or when the user mentions CSS, styling, classes, Tailwind, restyle, hero section, cards, buttons, or any visual/UI changes.
tailwindcss-development
by coollabsio
Styles applications using Tailwind CSS v4 utilities. Activates when adding styles, restyling components, working with gradients, spacing, layout, flex, grid, responsive design, dark mode, colors, typography, or borders; or when the user mentions CSS, styling, classes, Tailwind, restyle, hero section, cards, buttons, or any visual/UI changes.
code-connect-components
by figma
Connects Figma design components to code components using Code Connect. Use when user says "code connect", "connect this component to code", "connect Figma to code", "map this component", "link component to code", "create code connect mapping", "add code connect", "connect design to code", or wants to establish mappings between Figma designs and code implementations. Requires Figma MCP server connection.
flutter-apply-architecture-best-practices
by flutter
Architects a Flutter application using the recommended layered approach (UI, Logic, Data). Use when structuring a new project or refactoring for scalability.
flutter-add-widget-preview
by flutter
Adds interactive widget previews to the project using the previews.dart system. Use when creating new UI components or updating existing screens to ensure consistent design and interactive testing.
flutter-add-widget-test
by flutter
Implement a component-level test using WidgetTester to verify UI rendering and user interactions (tapping, scrolling, entering text). Use when validating that a specific widget displays correct data and responds to events as expected.
frontend-design
by Project-N-E-K-O
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
design-lab
by 0xdesign
Conduct design interviews, generate five distinct UI variations in a temporary design lab, collect feedback, and produce implementation plans. Use when the user wants to explore UI design options, redesign existing components, or create new UI with multiple approaches to compare.
wayfinder
by mattpocock
Plan a huge chunk of work (more than one agent session can hold) as a shared map of decision tickets on your issue tracker, and resolve them one at a time until the way to the destination is clear.
prototype
by mattpocock
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
to-spec
by mattpocock
"Turn the current conversation into a spec and publish it to the project issue tracker: no interview, just synthesis of what you've already discussed."
teach
by mattpocock
Teach the user a new skill or concept, within this workspace.
to-tickets
by mattpocock
Break a plan, spec, or the current conversation into a set of tracer-bullet tickets, each declaring its blocking edges, published to the configured tracker (edges as text in one file per ticket locally, or native blocking links on a real tracker).
ask-matt
by mattpocock
Ask which skill or flow fits your situation. A router over the skills in this repo.
moai-domain-uiux
by modu-ai
UI/UX design systems specialist covering accessibility, icons, theming, design tokens, and user experience patterns. Use when user asks about design systems, WCAG accessibility compliance, ARIA patterns, icon libraries, dark mode theming, design tokens, or user experience research. Do NOT use for React component coding or frontend implementation (use moai-domain-frontend instead) or shadcn/ui specifics (use moai-library-shadcn instead).
moai-domain-frontend
by modu-ai
Frontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture. Use when building web UIs, implementing components, optimizing frontend performance, or integrating state management.
moai-design-tools
by modu-ai
Design tool integration specialist covering Figma MCP, Pencil renderer, and Pencil-to-code export. Use when fetching design context from Figma, rendering Pencil DNA codes to .pen frames, exporting .pen designs to React/Tailwind code, or choosing design-to-code workflows. Supports design fetching (Figma), visual rendering (Pencil MCP), and code generation (React/Tailwind).
direxio-deployer
by YingSuiAI
Deploy, resume, verify, destroy, and locally wire a production P2P-IM Matrix server on AWS for Claude, Codex/OpenAI, Gemini, Cursor, Copilot, OpenClaw, Hermes, and other agent runtimes. Use when installing or updating this skill itself; if a current project or workspace exists, prefer the runtime-specific project-local Git clone path from references/agent-targets.md and use global skill directories only when no project target exists or the user explicitly asks for global installation.
geo
by zubair-trabzada
GEO-first SEO analysis tool. Optimizes websites for AI-powered search engines (ChatGPT, Claude, Perplexity, Gemini, Google AI Overviews) while maintaining traditional SEO foundations. Performs full GEO audits, citability scoring, AI crawler analysis, llms.txt generation, brand mention scanning, platform-specific optimization, schema markup, technical SEO, content quality (E-E-A-T), and client-ready GEO report generation. Use when user says "geo", "seo", "audit", "AI search", "AI visibility", "optimize", "citability", "llms.txt", "schema", "brand mentions", "GEO report", or any URL for analysis.
hallmark
by Nutlope
"Anti-AI-slop design skill for greenfield pages, audits, redesigns, and design extraction from URLs or screenshots. Use when the user asks to build a new app or landing page, wants to redesign something, invokes Hallmark by name, or uses audit/redesign/study."
mindmap
by markdown-viewer
Create hierarchical mind maps using PlantUML @startmindmap syntax. Best for brainstorming, topic decomposition, study notes, and decision trees with automatic radial layout, left/right branches, and per-node styling.
infocard
by markdown-viewer
Create editorial-style information cards using HTML/CSS embedded directly in Markdown. Best for knowledge summaries, data highlights, topic overviews, event announcements, and content cards with magazine-quality typography and layout. NOT for architecture diagrams (use architecture), flowcharts (use mermaid), or data visualization (use vega).
floor-plan
by markdown-viewer
Create architectural floor plans and interior layouts using drawio XML format with building-standard symbols. Best for office layouts, home floor plans, evacuation plans, and seating arrangements. Built on drawio with floorplan-specific stencils. NOT for simple diagrams (use mermaid) or UI wireframes (use wireframe skill).
Amazon Best Selling Products Finder API Skill
by browser-act
Give your AI the power to browse, scrape, and extract structured data from complex websites — with faster execution, lower cost, and more reliable results.