master-skills-frontend-designer

Plugin master-skills-frontend-designer from marketplace master-skills in sinhoneyy/master-skills. Commands read from the repo's manifest — 19 days ago.

Skills (200)

• 3d-web-experience

  Expert in building 3D experiences for the web - Three.js, React

• a11y-audit

  Accessibility audit skill for scanning, fixing, and verifying WCAG 2.2 Level A and AA compliance across React, Next.js, Vue, Angular, Svelte, and plain HTML codebases. Use when auditing accessibility, fixing a11y violations, checking color contrast, generating compliance reports, or integrating acce

• accessibility-compliance-accessibility-audit

  You are an accessibility expert specializing in WCAG compliance, inclusive design, and assistive technology compatibility. Conduct audits, identify barriers, and provide remediation guidance.

• algorithmic-art

  Algorithmic philosophies are computational aesthetic movements that are then expressed through code. Output .md files (philosophy), .html files (interactive viewer), and .js files (generative algorithms).

• android-jetpack-compose-expert

  Expert guidance for building modern Android UIs with Jetpack Compose, covering state management, navigation, performance, and Material Design 3.

• angular-best-practices

  Angular performance optimization and best practices guide. Use when writing, reviewing, or refactoring Angular code for optimal performance, bundle size, and rendering efficiency.

• angular-migration

  Master AngularJS to Angular migration, including hybrid apps, component conversion, dependency injection changes, and routing migration.

• angular-state-management

  Master modern Angular state management with Signals, NgRx, and RxJS. Use when setting up global state, managing component stores, choosing between state solutions, or migrating from legacy patterns.

• angular-ui-patterns

  Modern Angular UI patterns for loading states, error handling, and data display. Use when building UI components, handling async data, or managing component states.

• angular

  Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns.

• antigravity-design-expert

  Core UI/UX engineering skill for building highly interactive, spatial, weightless, and glassmorphism-based web interfaces using GSAP and 3D CSS.

• apple-hig-expert

  Audits and designs iOS/macOS/watchOS/visionOS interfaces against the Apple Human Interface Guidelines, including the Liquid Glass design language (announced WWDC25, shipped with iOS 26/macOS Tahoe, Sept 2025). Use when reviewing an Apple-platform mockup or app for HIG compliance, checking contrast o

• application-performance-performance-optimization

  Optimize end-to-end application performance with profiling, observability, and backend/frontend tuning. Use when coordinating performance optimization across the stack.

• architecture

  Architectural decision-making framework. Requirements analysis, trade-off evaluation, ADR documentation. Use when making architecture decisions or analyzing system design.

• artifacts-builder

  Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

• astro

  Build content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support.

• atlassian-templates

  Atlassian Template and Files Creator/Modifier expert for creating, modifying, and managing Jira and Confluence templates, blueprints, custom layouts, reusable components, and standardized content structures. Use when building org-wide templates, custom blueprints, page layouts, and automated content

• avalonia-layout-zafiro

  Guidelines for modern Avalonia UI layout using Zafiro.Avalonia, emphasizing shared styles, generic components, and avoiding XAML redundancy.

• avalonia-viewmodels-zafiro

  Optimal ViewModel and Wizard creation patterns for Avalonia using Zafiro and ReactiveUI.

• awt-e2e-testing

  AI-powered E2E web testing — eyes and hands for AI coding tools. Declarative YAML scenarios, Playwright execution, visual matching (OpenCV + OCR), platform auto-detection (Flutter/React/Vue), learning DB. Install: npx skills add ksgisang/awt-skill --skill awt -g

• azd-deployment

  Deploy containerized frontend + backend applications to Azure Container Apps with remote builds, managed identity, and idempotent infrastructure.

• azure-cosmos-java

  Azure Cosmos DB SDK for Java. NoSQL database operations with global distribution, multi-model support, and reactive patterns.

• baseline-ui

  Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects. Use when building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency.

• bash-linux

  Bash/Linux terminal patterns. Critical commands, piping, error handling, scripting. Use when working on macOS or Linux systems.

• bevy-ecs-expert

  Master Bevy's Entity Component System (ECS) in Rust, covering Systems, Queries, Resources, and parallel scheduling.

• brainstorming

  Use before creative or constructive work (features, architecture, behavior). Transforms vague ideas into validated designs through disciplined reasoning and collaboration.

• brand-guidelines-anthropic

  To access Anthropic's official brand identity and style resources, use this skill.

• brand-guidelines-community

  To access Anthropic's official brand identity and style resources, use this skill.

• brand-guidelines

  When the user wants to apply, document, or enforce brand guidelines for any product or company. Also use when the user mentions 'brand guidelines,' 'brand colors,' 'typography,' 'logo usage,' 'brand voice,' 'visual identity,' 'tone of voice,' 'brand standards,' 'style guide,' 'brand consistency,' or

• brand-perception-psychologist

  One sentence - what this skill does and when to invoke it

• brandfetch-automation

  Automate Brandfetch tasks via Rube MCP (Composio). Always search tools first for current schemas.

• brooks-lint

  AI code reviewer grounded in classic software engineering books for catching design smells, coupling issues, and architectural risks.

• building-native-ui

  Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.

• c4-component

  Expert C4 Component-level documentation specialist. Synthesizes C4 Code-level documentation into Component-level architecture, defining component boundaries, interfaces, and relationships.

• canva-automation

  Automate Canva tasks via Rube MCP (Composio): designs, exports, folders, brand templates, autofill. Always search tools first for current schemas.

• canvas-automation

  Automate Canvas tasks via Rube MCP (Composio). Always search tools first for current schemas.

• capture

  Captures and organizes chaotic brain dumps into a structured, actionable system with zero information loss. Use this skill whenever the user says 'capture this', 'brain dump', 'let me dump some ideas', 'I've got a bunch of thoughts', 'here's everything on my mind', 'idea dump', 'let me get this out

• cc-skill-backend-patterns

  Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes.

• cc-skill-coding-standards

  Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.

• cc-skill-frontend-patterns

  Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

• changelog-generator

  Produce consistent, auditable release notes from Conventional Commits. Separates commit parsing, semantic-bump logic, and changelog rendering for automated releases with editorial control. Use when cutting a release, generating CHANGELOG.md from git history, computing the next semantic version from

• churn-prevention

  Reduce voluntary and involuntary churn through cancel flow design, save offers, exit surveys, and dunning sequences. Use when designing or optimizing a cancel flow, building save offers, setting up dunning emails, or reducing failed-payment churn. Trigger keywords: cancel flow, churn reduction, save

• cirq

  Cirq is Google Quantum AI's open-source framework for designing, simulating, and running quantum circuits on quantum computers and simulators.

• clinical-research

  Use when designing a prospective clinical study before submission — selecting and classifying endpoints (primary / key-secondary / exploratory, with surrogate-endpoint flagging), estimating sample size and power for two-arm designs (means / proportions / survival), or scoring a study plan for feasib

• cmo-advisor

  Marketing leadership for scaling companies. Brand positioning, growth model design, marketing budget allocation, and marketing org design. Use when designing brand strategy, selecting growth models (PLG vs sales-led vs community-led), allocating marketing budgets, building marketing teams, or when u

• code-refactoring-refactor-clean

  You are a code refactoring expert specializing in clean code principles, SOLID design patterns, and modern software engineering best practices. Analyze and refactor the provided code to improve its quality, maintainability, and performance.

• codebase-cleanup-refactor-clean

  You are a code refactoring expert specializing in clean code principles, SOLID design patterns, and modern software engineering best practices. Analyze and refactor the provided code to improve its quality, maintainability, and performance.

• codebase-to-wordpress-converter

  Expert skill for converting any codebase (React/HTML/Next.js) into a pixel-perfect, SEO-optimized, and dynamic WordPress theme.

• comfyui-gateway

  REST API gateway for ComfyUI servers. Workflow management, job queuing, webhooks, caching, auth, rate limiting, and image delivery (URL + base64).

• commercial-policy

  Use when designing or revising a company's commercial policy — the rules of engagement governing discounts off list price, approver thresholds, exception flows, and the deal framework that Deal Desk and AEs operate under. Covers discount matrix design (ARR band x term length x payment terms x strate

• company-os

  The meta-framework for how a company runs — the connective tissue between all C-suite roles. Covers operating system selection (EOS, Scaling Up, OKR-native, hybrid), accountability charts, scorecards, meeting pulse, issue resolution, and 90-day rocks. Use when setting up company operations, selectin

• competitive-teardown

  Analyzes competitor products and companies by synthesizing data from pricing pages, app store reviews, job postings, SEO signals, and social media into structured competitive intelligence. Produces feature comparison matrices scored across 12 dimensions, SWOT analyses, positioning maps, UX audits, p

• conductor-status

  Display project status, active tracks, and next actions

• content-creator

  Deprecated redirect skill that routes legacy 'content creator' requests to the correct specialist. Use when a user invokes 'content creator', asks to write a blog post, article, guide, or brand voice analysis (routes to content-production), or asks to plan content, build a topic cluster, or create a

• coo-advisor

  Operations leadership for scaling companies. Process design, OKR execution, operational cadence, and scaling playbooks. Use when designing operations, setting up OKRs, building processes, scaling teams, analyzing bottlenecks, planning operational cadence, or when user mentions COO, operations, proce

• core-components

  Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.

• cpo-advisor

  Product leadership for scaling companies. Product vision, portfolio strategy, product-market fit, and product org design. Use when setting product vision, managing a product portfolio, measuring PMF, designing product teams, prioritizing at the portfolio level, reporting to the board on product, or

• cro-advisor

  Revenue leadership for B2B SaaS companies. Revenue forecasting, sales model design, pricing strategy, net revenue retention, and sales team scaling. Use when designing the revenue engine, setting quotas, modeling NRR, evaluating pricing, building board forecasts, or when user mentions CRO, chief rev

• culture-architect

  Build, measure, and evolve company culture as operational behavior — not wall posters. Covers mission/vision/values workshops, values-to-behaviors translation, culture code creation, culture health assessment, and cultural rituals by stage. Use when building company values, assessing culture health,

• decision-navigator

  Guide stuck or overwhelmed users through targeted branching questions until they reach concrete next steps.

• dependency-auditor

  Audit and manage dependencies across multi-language projects. Identifies vulnerabilities, license conflicts, transitive dependency risks, and safe-upgrade paths. Use when auditing third-party packages before release, investigating a CVE, planning a major version bump, or running a license-compliance

• design-md

  Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files

• design-spells

  Curated micro-interactions and design details that add "magic" and personality to websites and apps.

• design-system

  Captures the user's brand identity once via a 10-question onboarding wizard (primary/accent HEX + heading + body Google Fonts + design style editorial/technical/minimal/playful + default output directory + syntax theme + TOC behavior + optional logo/company), validates body-text and link contrast ag

• design-taste-frontend

  Use when building high-agency frontend interfaces with strict design taste, calibrated color, responsive layout, and motion rules.

• development

  Comprehensive web, mobile, and backend development workflow bundling frontend, backend, full-stack, and mobile development skills for end-to-end application delivery.

• discord-automation

  Automate Discord tasks via Rube MCP (Composio): messages, channels, roles, webhooks, reactions. Always search tools first for current schemas.

• docs-architect

  Creates comprehensive technical documentation from existing codebases. Analyzes architecture, design patterns, and implementation details to produce long-form technical manuals and ebooks.

• email-template-builder

  Build complete transactional email systems: React Email templates, provider integration (Resend, Postmark, SendGrid, AWS SES), preview server, i18n support, dark mode, spam optimization, analytics tracking. Use when adding transactional email to a new product, migrating between email providers, refa

• emotional-arc-designer

  One sentence - what this skill does and when to invoke it

• engineering-skills

  Index of the engineering-team skills bundle for Claude Code, Codex, Gemini CLI, Cursor, OpenClaw, and 6 more tools. Architecture, frontend, backend, QA, DevOps, security, AI/ML, data engineering, Playwright, Stripe, AWS, MS365 (stdlib-only Python tools). Use when browsing or choosing among engineeri

• epic-design

  Build immersive, cinematic 2.5D interactive websites using scroll storytelling, parallax depth, text animations, and premium scroll effects — no WebGL required. Use this skill for any web design task: landing pages, product sites, hero sections, scroll animations, parallax, sticky sections, section

• experiment-designer

  Use when planning product experiments, writing testable hypotheses, estimating sample size, prioritizing tests, or interpreting A/B outcomes with practical statistical rigor.

• expo-tailwind-setup

  Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling

• expo-ui-jetpack-compose

  expo-ui-jetpack-compose

• expo-ui-swift-ui

  expo-ui-swift-ui

• figma-automation

  Automate Figma tasks via Rube MCP (Composio): files, components, design tokens, comments, exports. Always search tools first for current schemas.

• fixing-accessibility

  Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.

• fixing-metadata

  Audit and fix HTML metadata including page titles, meta descriptions, canonical URLs, Open Graph tags, Twitter cards, favicons, JSON-LD structured data, and robots directives. Use when adding or reviewing SEO and social metadata.

• fixing-motion-performance

  Audit and fix animation performance issues including layout thrashing, compositor properties, scroll-linked motion, and blur effects. Use when animations stutter, transitions jank, or reviewing CSS/JS animation performance.

• fluxguard-automation
• fp-react
• fp-ts-react
• free-tool-strategy
• frontend-api-integration-patterns
• frontend-design
• frontend-dev-guidelines
• frontend-developer
• frontend-mobile-development-component-scaffold
• frontend-mobile-security-xss-scan
• frontend-security-coder
• frontend-slides
• frontend-ui-dark-ts
• game-design
• gpt-taste
• grill-me
• grpc-golang
• health-trend-analyzer
• hig-components-content
• hig-components-dialogs
• hig-components-layout
• hig-components-search
• hig-components-status
• hig-components-system
• hig-foundations
• hig-patterns
• hig-platforms
• high-end-visual-design
• hugging-face-gradio
• iconsax-library
• imagen
• inbox-triage
• industrial-brutalist-ui
• interview-system-designer
• iso13485-audit-prep
• javascript-typescript-typescript-scaffold
• jira-expert
• kpi-dashboard-design
• landing-page-generator
• landing
• lead-magnets
• lightning-architecture-review
• linux-troubleshooting
• logo-dev-automation
• loss-aversion-designer
• magic-animator
• magic-ui-generator
• minimalist-ui
• mobile-design
• mobile-developer
• native-data-fetching
• nerdzao-elite-gemini-high
• nerdzao-elite
• nextdns-automation
• nextjs-app-router-patterns
• nextjs-best-practices
• nextjs-supabase-auth
• observability-designer
• observability-monitoring-slo-implement
• os-scripting
• pakistan-payments-stack
• partnerships-architect
• pricing-strategist
• pricing-strategy
• privacy-by-design
• product-design
• product-inventor
• product-research
• product-strategist
• productboard-automation
• progressive-web-app
• quality-manager-qms-iso13485
• radix-ui-design-system
• rayden-code
• rayden-use
• react-best-practices
• react-component-performance
• react-flow-architect
• react-flow-node-ts
• react-modernization
• react-native-architecture
• react-native-skills
• react-nextjs-development
• react-patterns
• react-state-management
• react-ui-patterns
• redesign-existing-projects
• referral-program
• remotion-best-practices
• revops
• saas-scaffolder
• scala-pro
• schema-markup-generator
• sendblue-api
• senior-frontend
• senior-fullstack
• seo-programmatic
• shopify-apps
• site-architecture
• slack-automation
• social-metadata-hardening
• software-architecture
• spec-to-repo
• stitch-design-taste
• stripe-integration-expert
• sveltekit
• swiftui-expert-skill
• swiftui-liquid-glass
• swiftui-performance-audit
• swiftui-ui-patterns
• swiftui-view-refactor
• tailwind-design-system
• tailwind-patterns
• tanstack-query-expert
• team-composition-analysis
• tmux
• trpc-fullstack
• ui-a11y
• ui-component
• ui-design-system

Similar plugins