无障碍

frontend-ui-engineering

addyosmani

Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.

swiftui-pro

twostraws

Comprehensively reviews SwiftUI code for best practices on modern APIs, maintainability, and performance. Use when reading, writing, or reviewing SwiftUI projects.

design-user-advocate

ShotaIuchi

User-centric design analysis. Apply when evaluating design proposals for end-user experience, developer experience, API usability, accessibility, and consumer satisfaction.

tailwindcss-expert

thanix-k

Enforce Tailwind CSS best practices across every component you touch. Apply these rules automatically whenever writing or reviewing Tailwind class lists, component variants, design tokens, or layout systems.

senior

Alicoder001

Senior frontend developer practices including code quality, accessibility, responsive design, and UI consistency. Use when reviewing code, implementing UX patterns, or ensuring production-quality output.

core

vercel-labs

Core agent-browser usage guide. Read this before running any agent-browser commands. Covers the snapshot-and-ref workflow, navigating pages, interacting with elements (click, fill, type, select), extracting text and data, taking screenshots, managing tabs, handling forms and auth, waiting for content, running multiple browser sessions in parallel, and troubleshooting common failures. Use when the user asks to interact with a website, fill a form, click something, extract data, take a screenshot, log into a site, test a web app, or automate any browser task.

pre-trip-checklist

Tzeusy

Pre-departure preparation workflow with actionable checklist, time-sensitive reminders, and completion verification

mintlify

mintlify

Comprehensive reference for building Mintlify documentation sites. Use when creating pages, configuring docs.json, adding components, setting up navigation, or working with API references. Routes to detailed reference files for all components and configuration options.

frontend-component-build

rampstackco

"Build production-ready frontend components with accessible markup, sensible props, defined states, and tested behavior. Use this skill whenever the user wants to build a component from scratch, refactor an existing one, design a component API, or implement a UI element with proper states and accessibility. Triggers on build a component, create a button, create a modal, create a form input, component API, props design, component states, refactor component, accessible component. Also triggers when implementing UI from a design that needs to be reusable."

human-interface-guidelines-1992

diskd-ai

Apply and review classic desktop UI designs against the 1992 Human Interface Guidelines. Use when designing or auditing menus, windows, dialog/alert boxes, controls, icons, color, mouse/keyboard behaviors, language/messages/help (including Balloon Help), localization/worldwide compatibility, accessibility (universal access), and collaborative-computing UX for desktop-style interfaces.

roier-seo

KemenyStudio

Technical SEO auditor and fixer. Use when the user wants to: - Run a Lighthouse/PageSpeed audit on a website or local dev server - Analyze SEO, performance, accessibility, or best practices scores - Fix technical SEO issues in their codebase - Optimize meta tags, structured data, Core Web Vitals - Improve page speed, accessibility, or PWA compliance Triggers: "audit my site", "check SEO", "fix SEO", "lighthouse", "pagespeed", "improve performance", "meta tags", "structured data", "core web vitals"

ui-ux-pro-max

jefebcn

"UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples."

SKILL — La Forza Quotidiana · Schede allenamento

ginocapon

ui-ux-doctor

rahulcommercial

"Zero-dependency UI/UX bug doctor for React + FastAPI apps. Finds and fixes button issues, rendering bugs, accessibility gaps, component problems (modals, dialogs, sidebars/drawers), form/input/textarea issues, light/dark mode (theming) gaps, and React<->FastAPI integration mistakes, then suggests enhancements and verifies the fix. Pure Python stdlib — no pip, no npm, no network — safe for locked-down / offline / office machines. Actions: find, detect, scan, audit, review, debug, diagnose, fix, repair, improve, enhance, test, verify UI/UX. Elements: button, modal, dialog, sidebar, drawer, form, input, textarea, select, navbar. Symptoms: button does nothing, button not clickable / not keyboard accessible, modal has no escape, no focus trap, input has no label, textarea unlabeled, form reloads page on enter, no dark mode, white flash in dark mode, list re-renders wrong, stray 0 on screen, missing key warning, input loses focus, infinite re-render, fetch loop, blank page, CORS error, data not loading, image no alt, screen reader. Topics: accessibility, dark mode, theming, focus management, forms. Stack: React, JSX, TSX, Tailwind, FastAPI, Vite, fetch, CORS. Use after writing or before shipping UI code, or when a UI element misbehaves."

lighthouse

Onnokh

Google Lighthouse CLI reference for auditing web performance, accessibility, SEO, and best practices. Use this skill when users need to analyze website performance, run audits, generate reports, or integrate Lighthouse into their workflow.

design-hig-principles

jacoblewisau

Audit iOS/macOS UI against Apple Human Interface Guidelines. Provides context-aware, multi-perspective feedback on colors, typography, layout, accessibility, and platform conventions.

swiftui-pro

twostraws

Comprehensively reviews SwiftUI code for best practices on modern APIs, maintainability, and performance. Use when reading, writing, or reviewing SwiftUI projects.

fe-a11y

ingpdw

React/Next.js 컴포넌트의 WCAG 2.1 AA 기준 웹 접근성을 검사하고 수정 가이드를 제공하는 스킬. "접근성", "a11y", "accessibility", "WCAG", "스크린리더", "키보드 접근" 등의 요청 시 사용.

design-studio

dfuzrindustries

Design Studio — Visual Quality Governance & Production System. ACTIVATION RULE: Load when any request involves producing, reviewing, or governing visual deliverables — UI/UX design, presentations, diagrams, brand assets, prototypes, or any artifact where visual quality matters. Design Studio is the visual quality gate in the IA governance model, parallel to ContentOS (content quality gate). Triggers: "design this", "build a UI", "create a presentation", "review this design", "brand kit", "style this", "make it look better", "wireframe", "prototype", "layout", "spacing", "visual quality", "design system", "accessibility audit", or any request where the output has a visual dimension. Also activates as visual governance for DiagramOS output — Design Studio sets the visual standard, DiagramOS executes.

Fullstack Web Engineer

anorbert-cmyk

World-class Full-Stack Web Engineer and Tech Lead focusing on security, accessibility, performance, and maintainability.

shadcn-best-practices

ofershap

shadcn/ui done right. Component customization, form patterns, theming, accessibility, and

feature-ui

ShotaIuchi

UI component implementation. Apply when building user interface components, layouts, interactions, animations, responsive design, and accessibility for new features.

design-system-starter

VisualxIntelligence

Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products.

web-design-guidelines

yldgio

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".