Skills tagged "design" (829)

🎨 Web Design Guidelines

This skill reviews UI code against Web Interface Guidelines and outputs concise file:line findings to improve accessibility and consistency.

accessibilityfrontenddesigncode-review

64.2k

🎨 Frontend Design

This skill helps you design production-grade frontend interfaces with bold aesthetics and polished code for components, pages, and apps.

frontenddesignuxaccessibility

34.9k

📋 Baoyu Xhs Images

This skill generates Xiaohongshu infographic series with 10 visual styles and 8 layouts to optimize engagement for Chinese platforms.

social-mediadesignmarketingcontent

2k

📈 Baoyu Infographic

This skill generates publication-ready infographics by analyzing content and recommending optimal layout and style combinations across 20 layouts and 17 styles.

designdatamarketingcontent

1.6k

🎨 Mobile Android Design

This skill helps you master Material Design 3 and Jetpack Compose to build adaptive Android interfaces with accessible responsive layouts.

designuxaccessibilityfrontend

1.1k

🎨 Baseline Ui

This skill enforces a consistent Baseline UI by guiding components to follow opinionated Tailwind and motion conventions with accessible primitives.

frontenddesignuxaccessibility

824

🎨 Swiftui Ui Patterns

This skill helps you design and refactor SwiftUI interfaces using pattern-driven guidance for views, tabs, and component composition.

frontenddesignuxaccessibility

481

🎨 Tailwind Css Patterns

This skill helps you implement Tailwind CSS development patterns for mobile-first, responsive layouts, design tokens, and component reuse to speed up UI work.

frontenddesignuxproductivity

342

🔍 Swiftui Expert Skill

This skill helps you build, review, or improve SwiftUI code using state management, modern APIs, and performance best practices.

performancecode-reviewrefactordesign

298

🎨 Skills

This skill helps you create responsive HTML emails with React Email templates, enabling brand-driven designs across clients.

frontenddesignuxbranding

286

🎨 Skills

This skill helps you search and retrieve icons from Iconify libraries via a CLI and MCP server, speeding icon integration.

frontendapicliproductivity

227

🎨 Color Palette

This skill generates complete, accessible color palettes from a brand hex, including 11-shade scales, semantic tokens, dark mode, and WCAG checks.

brandingdesignaccessibilityfrontend

206

🐛 Sanity Best Practices

This skill guides Sanity developers in GROQ performance, schema design, and integration to optimize content workflows.

performancedesigndebuggingdocs

180

📋 Ui Ux Design Expert

This skill provides expert UI/UX guidance covering accessibility, design systems, research, and inclusive 2025 best practices to deliver user-centered

designuxaccessibilityresearch

122

📋 Screenshot Feature Extractor

This skill analyzes product screenshots to extract feature lists and generate development task checklists for PRDs and roadmaps.

analyticsproductdesignux

107

🔧 Apollo Connectors

This skill guides you to integrate REST APIs into a GraphQL supergraph using Apollo Connectors with @source and @connect.

graphqlrestapidevops

95

🎨 Implement Design

This skill translates Figma designs into production-ready code with pixel-perfect fidelity and design-system integration using MCP server context for accurate

designfrontenduxaccessibility

81

🎨 Custom Ui

This skill helps you tailor Clerk component appearance by applying themes, layout, colors, and fonts to match branding.

frontendnextjsdesignux

78

🐛 Agent Skills For Context Engineering

This skill helps you design, optimize, and debug production agent systems through context engineering best practices and multi-agent architectures.

aiautomationdevopsdebugging

72

🎨 Ios Ux Design

This skill analyzes iOS UI/UX, applies Human Interface Guidelines, and proposes interface improvements with SwiftUI patterns and accessibility in mind.

uxdesignaccessibilityfrontend

68

🎨 Infographic Creator

This skill creates compelling infographics from text using AntV Infographic, translating information into visual structures for quick understanding and

dataaifrontenddesign

61

🎨 Expo App Design

This skill helps you design and implement cross-platform mobile apps using Expo Router, NativeWind, and React Native styling best practices.

frontenddesignuxproduct

58

📈 Svg Logo Designer

This skill helps you create professional SVG logos from descriptions, offering multiple variations and export formats for branding and icons.

designbrandingmarketingai

57

🎨 Flutter Architecture

This skill guides structuring Flutter apps with MVVM, feature-first organization, and clean layers to improve scalability, maintainability, and team

frontenddesignplanningrefactor

52

🔍 Review_architecture

This skill helps you enforce architectural compliance by guiding systematic reviews against Beluga AI patterns and layer boundaries.

code-reviewdesignaiplanning

52

📋 Design Skills

This skill helps you apply Resend brand guidelines across artifacts by routing to brand resources and ensuring visual consistency.

designbrandinguxaccessibility

50

🎨 Spec Workflow

This skill guides structured software development from requirements to task execution using EARS syntax and UI-design references to ensure quality.

planningdesignfrontendbackend

50

🎨 Canvas Design

This skill creates visual design philosophy artifacts and expresses them as printable posters, infographics, and canvases in PNG or PDF formats.

designuxbrandingproduct

48

🎬 Auto Redbook Skills

This skill creates Xiaohongshu note content (title and body), generates image cards, and handles posting to share professional notes.

contentseosocial-mediawriting

45

🎨 Landing Page Guide V2

This skill creates distinctive, high-converting landing pages using Next.js 14+ and ShadCN UI, delivering memorable design and production-ready code.

frontenddesignmarketingseo

35

🔎 Ios Hig Design

This skill helps you design native iOS interfaces that align with Apple's HIG, ensuring accessible, safe-area aware SwiftUI/UIKit components.

swiftdesignaccessibilityux

29

🔍 File Organization

This skill helps structure Python projects with consistent folders, naming, and conventions to improve maintainability and scalability.

code-reviewrefactorscriptingproductivity

26

📝 Docx Format Replicator

This skill replicates Word document formatting from a template to generate new documents with identical styles and structure.

docswritingcontentscripting

24

🎨 Mobile Responsiveness

This skill helps you implement responsive, mobile-first layouts and interactions across breakpoints, touch events, and viewport-safe navigation.

frontenduxdesign

24

🧪 Kiro Skill

This skill guides you from idea to implementation by producing requirements, design, and actionable task plans in a spec-driven workflow.

aiplanningdocsdesign

22

🎨 Element Plus Vue3

This skill guides you through installing, configuring, and using Element Plus with Vue 3, including theming and API reference.

frontenddesignproductivity

18

🎨 Screenshot To Code

This skill converts UI screenshots into production-ready React code with responsive layouts and accessible HTML/CSS.

frontendcode-reviewaccessibilitydesign

18

🎨 Ui Design

This skill helps you craft production-grade frontend interfaces with distinctive visuals, cohesive layouts, and polished interactions for web pages and

frontenddesignproductreact

18

🎨 Tailwindcss Development

This skill helps you style components and pages with Tailwind CSS v3, enforcing project conventions, dark mode, and responsive patterns.

frontenddesignuxphp

16

🎨 Tailwind Ui

This skill helps you implement consistent Tailwind CSS patterns, responsive design, and accessible components using a utility-first approach.

frontenduxaccessibilitydesign

15

🐛 Game Engines

This skill helps you master Unity, Unreal, and Godot workflows and optimize engine architecture for faster, more scalable game development.

performancedebuggingscriptingdesign

14

🎨 Micro Interactions

This skill helps design micro-interactions by applying Disney's animation principles to small UI feedback moments for more engaging interfaces.

frontenduxdesignaccessibility

14

🎨 Suggest Lucide Icons

This skill helps you pick Lucide icons that symbolize concepts or UI contexts with real icon recommendations and rationale.

designuxfrontenddocs

13

📊 Blockbench Modeling

This skill helps you create and edit Blockbench models using cube and mesh tools for Minecraft-style and freeform designs.

designproductivityscriptingcli

10

🧪 Claude Android Skill

This skill helps you build production-quality Android apps using Kotlin, Jetpack Compose, MVVM, and modular architecture following Google's guidance.

datatestingdesigngit

10

🎨 Flowchart Creator

This skill generates interactive HTML flowcharts and process diagrams with nodes, arrows, and swimlanes for clear workflow visualization.

frontendautomationdesignux

10

🎨 Dashboard Creator

This skill helps you generate interactive HTML dashboards with KPI cards and charts for metrics visualization and monitoring.

frontenddataanalyticsdesign

9

🔍 Openscad

This skill helps you create, validate, preview, and export OpenSCAD models and parameters for 3D printing with visual multi-angle checks.

cliscriptingdesign

9

🧪 Spring Boot Dependency Injection

This skill streamlines Spring Boot dependency injection by enforcing constructor-first patterns, optional collaborators, and explicit bean configuration to

springjavabackendtesting

9

🧪 Ux Specification

This skill translates PRDs into actionable UX specifications, detailing flows, screens, and interactions to guide implementation.

uxdesignproductplanning

9

🎨 Frontend Design

This skill helps design and review SaaS frontends, clarifying value, improving hierarchy, and delivering production-grade UI that converts.

designuxfrontendproduct

7

🎨 Gluestack Ui V4

This skill helps you create and manage custom gluestack-ui v4 variants using tva for type-safe, scalable design system extensions.

frontenddesignreacttypescript

7

🎨 Pen Design

This skill helps you create and manipulate Pencil .pen designs, read and modify components, and generate code from designs.

designfrontendproductivityscripting

7

🎨 Using Shadcn Ui

This skill helps you rapidly build accessible React UIs with shadcn/ui by copying production-ready blocks and integrating Tailwind patterns.

frontendaccessibilitydesign

7

🎨 A2ui_skills

This skill generates A2UI protocol v0.8 compliant UI code and JSONL messages to build agent-driven surfaces across platforms.

frontendapidataux

6

🔍 Design Critique

This skill provides direct, actionable UI/UX critiques focused on clarity, hierarchy, accessibility, and craft to improve design reviews and ship-ready

designuxaccessibilityproduct

5

🛡️ Tauri Architecture

This skill explains Tauri architecture, core-shell design, IPC, and security, helping you architect desktop apps with a safe Rust backend and native webview

backendfrontendsecuritydesign

5

🧪 Ui Extractor

This skill analyzes UI sources like URLs and recordings to generate implementation specs, design systems, and component catalogs.

frontenddesignuxjavascript

5

🎨 Ant Design

This skill helps you select Ant Design components and theming strategies for a performant, accessible SSR React app using v6 and Pro/X patterns.

reactfrontendperformanceaccessibility

4

🎨 Composable Svelte Navigation

This skill helps you implement state-driven navigation and Motion One animations for modals, sheets, and route transitions in Composable Svelte.

frontenduxproductdesign

4