UI Components Expert
roedyrustam/vibes-plugExpert guide for building production-quality UI components following the 4 pillars. Covers React 19, Radix UI, Base UI, Tailwind v4, Material Design 3 (M3), WCAG 2.2 / Panduan ahli membangun komponen UI berkualitas produksi dengan M3.
At a glance
This skill is for Design and helps you build accessible ui components, design production-grade react components, and implement material design 3 systems.
git clone --depth 1 https://github.com/roedyrustam/vibes-plug
cp -r vibes-plug/skills/ui-components-expert ~/.claude/skills/ui-components-expert
reactRadix UiTailwindMaterial Design 3Wcagaccessibility
Also in roedyrustam/vibes-plug
View the repoExpert guide for automated and manual Web Accessibility (a11y) testing — axe-core, Pa11y, Playwright a11y, screen reader testing, and WCAG 2...
Expert guide for LLM API cost optimization, Prompt Caching, model routing (Flash/Pro/Opus), semantic caching, and token budgeting / Panduan...
Expert guide for integrating Large Language Models (LLMs), Model Context Protocol (MCP), RAG architecture, vector databases, and AI agents /...
Expert guide for AI image generation (Flux, DALL-E, Stable Diffusion), video generation (Sora, Runway), voice synthesis (ElevenLabs TTS), an...
Expert guide for systematic Prompt Engineering, Chain-of-Thought, few-shot prompting, structured output (JSON mode), prompt versioning, and...
Expert guide for Angular 19+ enterprise applications — Signals, Standalone Components, NgRx SignalStore, SSR with Hydration, and Angular Mat...
Expert guide for designing robust APIs: REST best practices, GraphQL, gRPC, tRPC, OpenAPI/Swagger, API versioning, rate limiting, and contra...
Expert guide for API Gateways, Reverse Proxies, and Service Mesh. Covers Kong, Traefik, NGINX, Cloudflare Gateway, and load balancing / Pand...
Deeply analyzes application architecture and structure to perform audit, bottleneck detection, and code/performance optimization / Mempelaja...
Expert guide for Apple Ecosystem development. Covers iOS support, Safari WebKit compatibility, PWAs (Progressive Web Apps) for iOS, and Huma...
Skill to make Antigravity respond in a friendly manner / Skill untuk membuat Antigravity membalas dengan ramah.
Expert guide for Astro 5+ framework — Content Collections, Islands Architecture, View Transitions, partial hydration, and MDX integration /...
Other Design skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typog...
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art...
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,...
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explor...
A hand-drawn wireframe exploration — graph-paper background, marker / pencil tone, multiple tab labels for variants, sticky-note annotations...
An annotated / redline lo-fi wireframe — a desktop landing/marketing page drawn as flat greyboxes inside a browser chrome frame, overlaid wi...